add popupBackAction to send item and export vault pages (#13363)

apps/browser/src/platform/popup/layout/popup-back.directive.ts

@@ -0,0 +1,26 @@
+import { Directive, Optional } from "@angular/core";
+
+import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
+import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
+import { BitActionDirective, ButtonLikeAbstraction } from "@bitwarden/components";
+
+import { PopupRouterCacheService } from "../view-cache/popup-router-cache.service";
+
+/** Navigate the browser popup to the previous page when the component is clicked. */
+@Directive({
+  selector: "[popupBackAction]",
+  standalone: true,
+})
+export class PopupBackBrowserDirective extends BitActionDirective {
+  constructor(
+    buttonComponent: ButtonLikeAbstraction,
+    private router: PopupRouterCacheService,
+    @Optional() validationService?: ValidationService,
+    @Optional() logService?: LogService,
+  ) {
+    super(buttonComponent, validationService, logService);
+
+    // override `bitAction` input; the parent handles the rest
+    this.handler = () => this.router.back();
+  }
+}

apps/browser/src/tools/popup/send-v2/add-edit/send-add-edit.component.html

@@ -16,6 +16,9 @@
     <button bitButton type="submit" form="sendForm" buttonType="primary" #submitBtn>
       {{ "save" | i18n }}
     </button>
+    <button bitButton type="button" buttonType="secondary" popupBackAction>
+      {{ "cancel" | i18n }}
+    </button>
     <button
       *ngIf="config?.mode !== 'add'"
       type="button"

apps/browser/src/tools/popup/send-v2/add-edit/send-add-edit.component.ts

@@ -29,6 +29,7 @@ import {
   SendFormModule,
 } from "@bitwarden/send-ui";
 
+import { PopupBackBrowserDirective } from "../../../../platform/popup/layout/popup-back.directive";
 import { PopupFooterComponent } from "../../../../platform/popup/layout/popup-footer.component";
 import { PopupHeaderComponent } from "../../../../platform/popup/layout/popup-header.component";
 import { PopupPageComponent } from "../../../../platform/popup/layout/popup-page.component";
@@ -77,6 +78,7 @@ export type AddEditQueryParams = Partial<Record<keyof QueryParams, string>>;
     SendFilePopoutDialogContainerComponent,
     SendFormModule,
     AsyncActionsModule,
+    PopupBackBrowserDirective,
   ],
 })
 export class SendAddEditComponent {

apps/browser/src/tools/popup/settings/export/export-browser-v2.component.html

@@ -23,5 +23,8 @@
     >
       {{ "exportVault" | i18n }}
     </button>
+    <button bitButton type="button" buttonType="secondary" popupBackAction>
+      {{ "cancel" | i18n }}
+    </button>
   </popup-footer>
 </popup-page>

apps/browser/src/tools/popup/settings/export/export-browser-v2.component.ts

@@ -7,6 +7,7 @@ import { AsyncActionsModule, ButtonModule, DialogModule } from "@bitwarden/compo
 import { ExportComponent } from "@bitwarden/vault-export-ui";
 
 import { PopOutComponent } from "../../../../platform/popup/components/pop-out.component";
+import { PopupBackBrowserDirective } from "../../../../platform/popup/layout/popup-back.directive";
 import { PopupFooterComponent } from "../../../../platform/popup/layout/popup-footer.component";
 import { PopupHeaderComponent } from "../../../../platform/popup/layout/popup-header.component";
 import { PopupPageComponent } from "../../../../platform/popup/layout/popup-page.component";
@@ -25,6 +26,7 @@ import { PopupPageComponent } from "../../../../platform/popup/layout/popup-page
     PopupFooterComponent,
     PopupHeaderComponent,
     PopOutComponent,
+    PopupBackBrowserDirective,
   ],
 })
 export class ExportBrowserV2Component {

libs/components/src/index.ts

@@ -1,4 +1,4 @@
-export { ButtonType } from "./shared/button-like.abstraction";
+export { ButtonType, ButtonLikeAbstraction } from "./shared/button-like.abstraction";
 export * from "./a11y";
 export * from "./async-actions";
 export * from "./avatar";