From 8dc81b603dc56d666c05bed6d89998d186e7c7fe Mon Sep 17 00:00:00 2001
From: Daniel James Smith <2670567+djsmith85@users.noreply.github.com>
Date: Fri, 20 Oct 2023 15:24:42 +0200
Subject: [PATCH] [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 <djsmith85@users.noreply.github.com>
---
 .../src/popup/settings/settings.component.ts     |  5 +----
 .../import/import-browser.component.html         |  2 ++
 .../settings/import/import-browser.component.ts  | 16 +++++++++++++---
 .../src/components/import.component.html         |  2 +-
 libs/importer/src/components/import.component.ts |  2 ++
 5 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/apps/browser/src/popup/settings/settings.component.ts b/apps/browser/src/popup/settings/settings.component.ts
index 252a209715..ad02ee66c2 100644
--- a/apps/browser/src/popup/settings/settings.component.ts
+++ b/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() {
diff --git a/apps/browser/src/tools/popup/settings/import/import-browser.component.html b/apps/browser/src/tools/popup/settings/import/import-browser.component.html
index b305e6c395..695529c4d2 100644
--- a/apps/browser/src/tools/popup/settings/import/import-browser.component.html
+++ b/apps/browser/src/tools/popup/settings/import/import-browser.component.html
@@ -16,9 +16,11 @@
   </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>
diff --git a/apps/browser/src/tools/popup/settings/import/import-browser.component.ts b/apps/browser/src/tools/popup/settings/import/import-browser.component.ts
index 3fea3aad04..30ead216b5 100644
--- a/apps/browser/src/tools/popup/settings/import/import-browser.component.ts
+++ b/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"]);
diff --git a/libs/importer/src/components/import.component.html b/libs/importer/src/components/import.component.html
index 83e119fcc5..ab9250a4c7 100644
--- a/libs/importer/src/components/import.component.html
+++ b/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()">
diff --git a/libs/importer/src/components/import.component.ts b/libs/importer/src/components/import.component.ts
index 3a111720ab..371a1846ac 100644
--- a/libs/importer/src/components/import.component.ts
+++ b/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>();