add fallback for navigating the user back when the browser is in a popout (#10024)

apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.html

@@ -1,11 +1,16 @@
 <popup-page>
-  <popup-header slot="header" [pageTitle]="headerText" showBackButton> </popup-header>
+  <popup-header
+    slot="header"
+    [pageTitle]="headerText"
+    [backAction]="handleBackButton.bind(this)"
+    showBackButton
+  ></popup-header>
 
   <vault-cipher-form
     *ngIf="!loading"
     formId="cipherForm"
     [config]="config"
-    (cipherSaved)="onCipherSaved($event)"
+    (cipherSaved)="onCipherSaved()"
     [submitBtn]="submitBtn"
   >
     <app-open-attachments

apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.ts

@@ -2,14 +2,13 @@ import { CommonModule, Location } from "@angular/common";
 import { Component } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { FormsModule } from "@angular/forms";
-import { ActivatedRoute, Params } from "@angular/router";
+import { ActivatedRoute, Params, Router } from "@angular/router";
 import { map, switchMap } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { CipherId, CollectionId, OrganizationId } from "@bitwarden/common/types/guid";
 import { CipherType } from "@bitwarden/common/vault/enums";
-import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { AsyncActionsModule, ButtonModule, SearchModule } from "@bitwarden/components";
 import {
   CipherFormConfig,
@@ -112,11 +111,29 @@ export class AddEditV2Component {
     private location: Location,
     private i18nService: I18nService,
     private addEditFormConfigService: CipherFormConfigService,
+    private router: Router,
   ) {
     this.subscribeToParams();
   }
 
-  onCipherSaved(savedCipher: CipherView) {
+  /**
+   * Navigates to previous view or view-cipher path
+   * depending on the history length.
+   *
+   * This can happen when history is lost due to the extension being
+   * forced into a popout window.
+   */
+  async handleBackButton() {
+    if (history.length === 1) {
+      await this.router.navigate(["/view-cipher"], {
+        queryParams: { cipherId: this.originalCipherId },
+      });
+    } else {
+      this.location.back();
+    }
+  }
+
+  onCipherSaved() {
     this.location.back();
   }
 

apps/browser/src/vault/popup/components/vault-v2/attachments/attachments-v2.component.html

@@ -1,5 +1,10 @@
 <popup-page>
-  <popup-header slot="header" [pageTitle]="'attachments' | i18n" showBackButton>
+  <popup-header
+    slot="header"
+    [pageTitle]="'attachments' | i18n"
+    showBackButton
+    [backAction]="handleBackButton.bind(this)"
+  >
     <app-pop-out slot="end" />
   </popup-header>
 

apps/browser/src/vault/popup/components/vault-v2/attachments/attachments-v2.component.spec.ts

@@ -26,6 +26,7 @@ import { CipherAttachmentsComponent } from "./cipher-attachments/cipher-attachme
 })
 class MockPopupHeaderComponent {
   @Input() pageTitle: string;
+  @Input() backAction: () => void;
 }
 
 @Component({

apps/browser/src/vault/popup/components/vault-v2/attachments/attachments-v2.component.ts

@@ -1,4 +1,4 @@
-import { CommonModule } from "@angular/common";
+import { CommonModule, Location } from "@angular/common";
 import { Component } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { ActivatedRoute, Router } from "@angular/router";
@@ -41,6 +41,7 @@ export class AttachmentsV2Component {
   constructor(
     private router: Router,
     private cipherService: CipherService,
+    private location: Location,
     route: ActivatedRoute,
   ) {
     route.queryParams.pipe(takeUntilDestroyed(), first()).subscribe(({ cipherId }) => {
@@ -48,6 +49,21 @@ export class AttachmentsV2Component {
     });
   }
 
+  /**
+   * Navigates to previous view or edit-cipher path
+   * depending on the history length.
+   *
+   * This can happen when history is lost due to the extension being
+   * forced into a popout window.
+   */
+  async handleBackButton() {
+    if (history.length === 1) {
+      await this.navigateToEditScreen();
+    } else {
+      this.location.back();
+    }
+  }
+
   /** Navigate the user back to the edit screen after uploading an attachment */
   async navigateToEditScreen() {
     const cipherDomain = await this.cipherService.get(this.cipherId);