From 49b59840a8086669568bca514ea5d84c7f3dfdd6 Mon Sep 17 00:00:00 2001
From: Daniel James Smith <2670567+djsmith85@users.noreply.github.com>
Date: Tue, 28 May 2024 16:47:35 +0200
Subject: [PATCH] Create import-browser-v2 component (#9214)

Copy existing `import-browser`-component
Add `popup-page` and -`header` and -`footer`
Add missing imports as page is marked as standalone
Fix no-floating-promise
Change to route OnSuccess to `vault-settings` instead of old `settings`-page

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>
---
 apps/browser/src/popup/app-routing.module.ts  |  6 +--
 .../import/import-browser-v2.component.html   | 28 +++++++++++++
 .../import/import-browser-v2.component.ts     | 40 +++++++++++++++++++
 3 files changed, 71 insertions(+), 3 deletions(-)
 create mode 100644 apps/browser/src/tools/popup/settings/import/import-browser-v2.component.html
 create mode 100644 apps/browser/src/tools/popup/settings/import/import-browser-v2.component.ts

diff --git a/apps/browser/src/popup/app-routing.module.ts b/apps/browser/src/popup/app-routing.module.ts
index 3750456833..a84d343c31 100644
--- a/apps/browser/src/popup/app-routing.module.ts
+++ b/apps/browser/src/popup/app-routing.module.ts
@@ -41,6 +41,7 @@ import { AboutPageComponent } from "../tools/popup/settings/about-page/about-pag
 import { MoreFromBitwardenPageV2Component } from "../tools/popup/settings/about-page/more-from-bitwarden-page-v2.component";
 import { MoreFromBitwardenPageComponent } from "../tools/popup/settings/about-page/more-from-bitwarden-page.component";
 import { ExportComponent } from "../tools/popup/settings/export.component";
+import { ImportBrowserV2Component } from "../tools/popup/settings/import/import-browser-v2.component";
 import { ImportBrowserComponent } from "../tools/popup/settings/import/import-browser.component";
 import { SettingsV2Component } from "../tools/popup/settings/settings-v2.component";
 import { SettingsComponent } from "../tools/popup/settings/settings.component";
@@ -238,12 +239,11 @@ const routes: Routes = [
     canActivate: [AuthGuard],
     data: { state: "generator-history" },
   },
-  {
+  ...extensionRefreshSwap(ImportBrowserComponent, ImportBrowserV2Component, {
     path: "import",
-    component: ImportBrowserComponent,
     canActivate: [AuthGuard],
     data: { state: "import" },
-  },
+  }),
   {
     path: "export",
     component: ExportComponent,
diff --git a/apps/browser/src/tools/popup/settings/import/import-browser-v2.component.html b/apps/browser/src/tools/popup/settings/import/import-browser-v2.component.html
new file mode 100644
index 0000000000..5458b46535
--- /dev/null
+++ b/apps/browser/src/tools/popup/settings/import/import-browser-v2.component.html
@@ -0,0 +1,28 @@
+<popup-page>
+  <popup-header slot="header" [pageTitle]="'importData' | i18n" showBackButton>
+    <ng-container slot="end">
+      <app-pop-out></app-pop-out>
+    </ng-container>
+  </popup-header>
+
+  <tools-import
+    (formDisabled)="this.disabled = $event"
+    (formLoading)="this.loading = $event"
+    (onSuccessfulImport)="this.onSuccessfulImport($event)"
+  >
+  </tools-import>
+
+  <popup-footer slot="footer">
+    <button
+      [disabled]="disabled"
+      [loading]="loading"
+      form="import_form_importForm"
+      bitButton
+      type="submit"
+      bitFormButton
+      buttonType="primary"
+    >
+      {{ "importData" | i18n }}
+    </button>
+  </popup-footer>
+</popup-page>
diff --git a/apps/browser/src/tools/popup/settings/import/import-browser-v2.component.ts b/apps/browser/src/tools/popup/settings/import/import-browser-v2.component.ts
new file mode 100644
index 0000000000..16759057ed
--- /dev/null
+++ b/apps/browser/src/tools/popup/settings/import/import-browser-v2.component.ts
@@ -0,0 +1,40 @@
+import { CommonModule } from "@angular/common";
+import { Component } 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 { PopOutComponent } from "../../../../platform/popup/components/pop-out.component";
+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";
+
+@Component({
+  templateUrl: "import-browser-v2.component.html",
+  standalone: true,
+  imports: [
+    CommonModule,
+    RouterLink,
+    JslibModule,
+    DialogModule,
+    AsyncActionsModule,
+    ButtonModule,
+    ImportComponent,
+    PopupPageComponent,
+    PopupFooterComponent,
+    PopupHeaderComponent,
+    PopOutComponent,
+  ],
+})
+export class ImportBrowserV2Component {
+  protected disabled = false;
+  protected loading = false;
+
+  constructor(private router: Router) {}
+
+  protected async onSuccessfulImport(organizationId: string): Promise<void> {
+    await this.router.navigate(["/vault-settings"]);
+  }
+}