PM-22836 Import popout crashes unexpectedly

apps/browser/src/_locales/en/messages.json

@@ -5803,6 +5803,9 @@
   "settingDisabledByPolicy": {
     "message": "This setting is disabled by your organization's policy.",
     "description": "This hint text is displayed when a user setting is disabled due to an organization policy."
+  }, 
+  "importPopoutDialogDesc": {
+    "message": "To import from a file, you need to pop out the extension to a new window."
   },
   "zipPostalCodeLabel": {
     "message": "ZIP / Postal code"

apps/browser/src/popup/app-routing.module.ts

@@ -246,7 +246,7 @@ const routes: Routes = [
     path: "import",
     component: ImportBrowserV2Component,
     canActivate: [authGuard],
-    data: { elevation: 1 } satisfies RouteDataProperties,
+    data: { elevation: 1, doNotSaveUrl: true } satisfies RouteDataProperties,
   },
   {
     path: "export",
@@ -324,7 +324,7 @@ const routes: Routes = [
     path: "add-send",
     component: SendAddEditV2Component,
     canActivate: [authGuard],
-    data: { elevation: 1 } satisfies RouteDataProperties,
+    data: { elevation: 1, doNotSaveUrl: true } satisfies RouteDataProperties,
   },
   {
     path: "edit-send",

apps/browser/src/tools/popup/send-v2/send-file-popout-dialog/send-file-popout-dialog.component.ts

@@ -1,5 +1,6 @@
 import { CommonModule } from "@angular/common";
 import { Component } from "@angular/core";
+import { Router } from "@angular/router";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { ButtonModule, DialogModule, DialogService, TypographyModule } from "@bitwarden/components";
@@ -14,13 +15,18 @@ import BrowserPopupUtils from "../../../../platform/browser/browser-popup-utils"
   imports: [JslibModule, CommonModule, DialogModule, ButtonModule, TypographyModule],
 })
 export class SendFilePopoutDialogComponent {
-  constructor(private dialogService: DialogService) {}
+  constructor(
+    private dialogService: DialogService,
+    private router: Router,
+  ) {}
 
   async popOutWindow() {
     await BrowserPopupUtils.openCurrentPagePopout(window);
   }
 
-  close() {
+  async close() {
     this.dialogService.closeAll();
+    // the current view exposes a file selector, ensure the view is popped to avoid using it outside of a popout
+    await this.router.navigate(["/tabs/send"]);
   }
 }

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

@@ -12,6 +12,8 @@
   >
   </tools-import>
 
+  <import-file-popout-dialog-container></import-file-popout-dialog-container>
+
   <popup-footer slot="footer">
     <button
       [disabled]="disabled"

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

@@ -20,6 +20,8 @@ import { PopupFooterComponent } from "../../../../platform/popup/layout/popup-fo
 import { PopupHeaderComponent } from "../../../../platform/popup/layout/popup-header.component";
 import { PopupPageComponent } from "../../../../platform/popup/layout/popup-page.component";
 
+import { ImportFilePopoutDialogContainerComponent } from "./import-file-popout-dialog-container.component";
+
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
@@ -35,6 +37,7 @@ import { PopupPageComponent } from "../../../../platform/popup/layout/popup-page
     PopupFooterComponent,
     PopupHeaderComponent,
     PopOutComponent,
+    ImportFilePopoutDialogContainerComponent,
   ],
   providers: [
     ...ImporterProviders,

apps/browser/src/tools/popup/settings/import/import-file-popout-dialog-container.component.ts

@@ -0,0 +1,34 @@
+import { CommonModule } from "@angular/common";
+import { Component, OnInit, ChangeDetectionStrategy, OnDestroy } from "@angular/core";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { DialogRef, DialogService } from "@bitwarden/components";
+
+import { FilePopoutUtilsService } from "../../services/file-popout-utils.service";
+
+import { ImportFilePopoutDialogComponent } from "./import-file-popout-dialog.component";
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: "import-file-popout-dialog-container",
+  template: "",
+  imports: [JslibModule, CommonModule],
+})
+export class ImportFilePopoutDialogContainerComponent implements OnInit, OnDestroy {
+  private dialogRef: DialogRef | null = null;
+
+  constructor(
+    private dialogService: DialogService,
+    private filePopoutUtilsService: FilePopoutUtilsService,
+  ) {}
+
+  ngOnInit() {
+    if (this.filePopoutUtilsService.showFilePopoutMessage(window)) {
+      this.dialogRef = this.dialogService.open(ImportFilePopoutDialogComponent);
+    }
+  }
+
+  ngOnDestroy() {
+    this.dialogRef?.close();
+  }
+}

apps/browser/src/tools/popup/settings/import/import-file-popout-dialog.component.html

@@ -0,0 +1,20 @@
+<bit-simple-dialog dialogSize="default">
+  <div bitDialogIcon>
+    <i class="bwi bwi-info-circle bwi-2x tw-text-info" aria-hidden="true"></i>
+  </div>
+  <ng-container bitDialogContent>
+    <div bitTypography="h3">
+      {{ "sendFilePopoutDialogText" | i18n }}
+    </div>
+    <div bitTypography="body1">{{ "importPopoutDialogDesc" | i18n }}</div>
+  </ng-container>
+  <ng-container bitDialogFooter>
+    <button buttonType="primary" bitButton type="button" (click)="popOutWindow()">
+      {{ "popOut" | i18n }}
+      <i class="bwi bwi-popout tw-ml-1" aria-hidden="true"></i>
+    </button>
+    <button bitButton buttonType="secondary" type="button" (click)="close()">
+      {{ "cancel" | i18n }}
+    </button>
+  </ng-container>
+</bit-simple-dialog>

apps/browser/src/tools/popup/settings/import/import-file-popout-dialog.component.ts

@@ -0,0 +1,31 @@
+import { CommonModule } from "@angular/common";
+import { Component, ChangeDetectionStrategy } from "@angular/core";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { ButtonModule, DialogModule, DialogService, TypographyModule } from "@bitwarden/components";
+
+import BrowserPopupUtils from "../../../../platform/browser/browser-popup-utils";
+import { PopupRouterCacheService } from "../../../../platform/popup/view-cache/popup-router-cache.service";
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: "import-file-popout-dialog",
+  templateUrl: "./import-file-popout-dialog.component.html",
+  imports: [JslibModule, CommonModule, DialogModule, ButtonModule, TypographyModule],
+})
+export class ImportFilePopoutDialogComponent {
+  constructor(
+    private dialogService: DialogService,
+    private popupRouterCacheService: PopupRouterCacheService,
+  ) {}
+
+  async popOutWindow() {
+    await BrowserPopupUtils.openCurrentPagePopout(window);
+  }
+
+  async close() {
+    this.dialogService.closeAll();
+    // the current view exposes a file selector, ensure the view is popped to avoid using it outside of a popout
+    await this.popupRouterCacheService.back();
+  }
+}