[PM-4290] Add pop out warning on import page (#6645)

* No longer popout automatically

* Add FilePopoutCalloutComponent to import-browser

* Hide fileSelector on base import.component when callout is shown

Extend import.component to receive an input to show/hide the FileSelector
Extend import-browser to check if the callout should be shown via the filePopoutUtilsService and pass the returning value onto the base component

* Renamed showFileSelector to hideFileSelector

The default should be to show the fileSelector, so the input should reflect that as an override.

* Added newline between ngOnInit and method below

---------

Co-authored-by: Daniel James Smith <[email protected]>

apps/browser/src/popup/settings/settings.component.ts

@@ -474,10 +474,7 @@ export class SettingsComponent implements OnInit {
   }
 
   async import() {
-    await this.router.navigate(["/import"]);
-    if (await BrowserApi.isPopupOpen()) {
-      this.popupUtilsService.popOut(window);
-    }
+    this.router.navigate(["/import"]);
   }
 
   export() {

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

@@ -16,9 +16,11 @@ <h1 class="center">
   </div>
 </header>
 <div tabindex="-1" class="tw-p-4">
+  <tools-file-popout-callout />
   <tools-import
     (formDisabled)="this.disabled = $event"
     (formLoading)="this.loading = $event"
     (onSuccessfulImport)="this.onSuccessfulImport($event)"
+    [hideFileSelector]="this.hideFileSelector"
   ></tools-import>
 </div>

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

@@ -1,11 +1,14 @@
 import { CommonModule } from "@angular/common";
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 import { Router, RouterLink } from "@angular/router";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { AsyncActionsModule, ButtonModule, DialogModule } from "@bitwarden/components";
 import { ImportComponent } from "@bitwarden/importer/ui";
 
+import { FilePopoutCalloutComponent } from "../../components/file-popout-callout.component";
+import { FilePopoutUtilsService } from "../../services/file-popout-utils.service";
+
 @Component({
   templateUrl: "import-browser.component.html",
   standalone: true,
@@ -17,13 +20,20 @@ import { ImportComponent } from "@bitwarden/importer/ui";
     AsyncActionsModule,
     ButtonModule,
     ImportComponent,
+    FilePopoutCalloutComponent,
   ],
 })
-export class ImportBrowserComponent {
+export class ImportBrowserComponent implements OnInit {
   protected disabled = false;
   protected loading = false;
 
-  constructor(private router: Router) {}
+  protected hideFileSelector = false;
+
+  constructor(private router: Router, private filePopoutUtilsService: FilePopoutUtilsService) {}
+
+  ngOnInit(): void {
+    this.hideFileSelector = this.filePopoutUtilsService.showFilePopoutMessage(window);
+  }
 
   protected async onSuccessfulImport(organizationId: string): Promise<void> {
     this.router.navigate(["/tabs/settings"]);

libs/importer/src/components/import.component.html

@@ -344,7 +344,7 @@
       and save the zip file.
     </ng-container>
   </bit-callout>
-  <bit-form-field>
+  <bit-form-field *ngIf="!hideFileSelector">
     <bit-label>{{ "selectImportFile" | i18n }}</bit-label>
     <div class="file-selector">
       <button bitButton type="button" buttonType="secondary" (click)="fileSelector.click()">

libs/importer/src/components/import.component.ts

@@ -120,6 +120,8 @@ export class ImportComponent implements OnInit, OnDestroy {
       });
   }
 
+  @Input() hideFileSelector: boolean;
+
   protected organization: Organization;
   protected destroy$ = new Subject<void>();