From 30ee79d2068cfc4a095b56587ef6fc0965db4231 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=9C=A8=20Audrey=20=E2=9C=A8?= <ajensen@bitwarden.com>
Date: Tue, 18 Feb 2025 12:53:10 -0500
Subject: [PATCH] add `popupBackAction` to send item and export vault pages
 (#13363)

---
 .../popup/layout/popup-back.directive.ts      | 26 +++++++++++++++++++
 .../add-edit/send-add-edit.component.html     |  3 +++
 .../add-edit/send-add-edit.component.ts       |  2 ++
 .../export/export-browser-v2.component.html   |  3 +++
 .../export/export-browser-v2.component.ts     |  2 ++
 libs/components/src/index.ts                  |  2 +-
 6 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 apps/browser/src/platform/popup/layout/popup-back.directive.ts

diff --git a/apps/browser/src/platform/popup/layout/popup-back.directive.ts b/apps/browser/src/platform/popup/layout/popup-back.directive.ts
new file mode 100644
index 00000000000..95f82588640
--- /dev/null
+++ b/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();
+  }
+}
diff --git a/apps/browser/src/tools/popup/send-v2/add-edit/send-add-edit.component.html b/apps/browser/src/tools/popup/send-v2/add-edit/send-add-edit.component.html
index 40c942539f6..5d313188d8f 100644
--- a/apps/browser/src/tools/popup/send-v2/add-edit/send-add-edit.component.html
+++ b/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"
diff --git a/apps/browser/src/tools/popup/send-v2/add-edit/send-add-edit.component.ts b/apps/browser/src/tools/popup/send-v2/add-edit/send-add-edit.component.ts
index d69f2568858..0962dec3dcf 100644
--- a/apps/browser/src/tools/popup/send-v2/add-edit/send-add-edit.component.ts
+++ b/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 {
diff --git a/apps/browser/src/tools/popup/settings/export/export-browser-v2.component.html b/apps/browser/src/tools/popup/settings/export/export-browser-v2.component.html
index 9ad6ed36835..8493fa5fee7 100644
--- a/apps/browser/src/tools/popup/settings/export/export-browser-v2.component.html
+++ b/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>
diff --git a/apps/browser/src/tools/popup/settings/export/export-browser-v2.component.ts b/apps/browser/src/tools/popup/settings/export/export-browser-v2.component.ts
index 851509ab17f..27147b75d39 100644
--- a/apps/browser/src/tools/popup/settings/export/export-browser-v2.component.ts
+++ b/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 {
diff --git a/libs/components/src/index.ts b/libs/components/src/index.ts
index 7788f4986bf..319b60e6435 100644
--- a/libs/components/src/index.ts
+++ b/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";