[PM-4222] Make importer UI reusable (#6504)

* Split up import/export into separate modules

* Fix routing and apply PR feedback

* Renamed OrganizationExport exports to OrganizationVaultExport

* Make import dialogs standalone and move them to libs/importer

* Make import.component re-usable

- Move functionality which was previously present on the org-import.component into import.component
- Move import.component into libs/importer
Make import.component standalone
Create import-web.component to represent Web UI
Fix module imports and routing
Remove unused org-import-files

* Renamed filenames according to export rename

* Make ImportWebComponent standalone, simplify routing

* Pass organizationId as Input to ImportComponent

* use formLoading and formDisabled outputs

* Emit an event when the import succeeds

Remove Angular router from base-component as other clients might not have routing (i.e. desktop)
Move logic that happened on web successful import into the import-web.component

* fix table themes on desktop & browser

* fix fileSelector button styles

* update selectors to use tools prefix; remove unused selectors

* Wall off UI components in libs/importer

Create barrel-file for libs/importer/components
Remove components and dialog exports from libs/importer/index.ts
Extend libs/shared/tsconfig.libs.json to include @bitwarden/importer/ui -> libs/importer/components
Extend apps/web/tsconfig.ts to include @bitwarden/importer/ui
Update all usages

* Rename @bitwarden/importer to @bitwarden/importer/core

Create more barrel files in libs/importer/*
Update imports within libs/importer
Extend tsconfig files
Update imports in web, desktop, browser and cli

* Lazy-load the ImportWebComponent via both routes

* Use SharedModule as import in import-web.component

* File selector should be displayed as secondary

* Use bitSubmit to override submit preventDefault (#6607)

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>

---------

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>
Co-authored-by: William Martin <contact@willmartian.com>

apps/web/src/app/admin-console/organizations/settings/organization-settings-routing.module.ts

@@ -48,8 +48,15 @@ const routes: Routes = [
         children: [
           {
             path: "import",
-            loadChildren: () =>
-              import("../tools/import/org-import.module").then((m) => m.OrganizationImportModule),
+            loadComponent: () =>
+              import("../../../tools/import/import-web.component").then(
+                (mod) => mod.ImportWebComponent
+              ),
+            canActivate: [OrganizationPermissionsGuard],
+            data: {
+              titleId: "importData",
+              organizationPermissions: (org: Organization) => org.canAccessImportExport,
+            },
           },
           {
             path: "export",

apps/web/src/app/admin-console/organizations/tools/import/org-import-routing.module.ts

@@ -1,25 +0,0 @@
-import { NgModule } from "@angular/core";
-import { RouterModule, Routes } from "@angular/router";
-
-import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
-
-import { OrganizationPermissionsGuard } from "../../guards/org-permissions.guard";
-
-import { OrganizationImportComponent } from "./org-import.component";
-
-const routes: Routes = [
-  {
-    path: "",
-    component: OrganizationImportComponent,
-    canActivate: [OrganizationPermissionsGuard],
-    data: {
-      titleId: "importData",
-      organizationPermissions: (org: Organization) => org.canAccessImportExport,
-    },
-  },
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-})
-export class OrganizationImportRoutingModule {}

apps/web/src/app/admin-console/organizations/tools/import/org-import.component.ts

@@ -1,99 +0,0 @@
-import { Component } from "@angular/core";
-import { FormBuilder } from "@angular/forms";
-import { ActivatedRoute, Router } from "@angular/router";
-import { switchMap, takeUntil } from "rxjs/operators";
-
-import {
-  canAccessVaultTab,
-  OrganizationService,
-} from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
-import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
-import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
-import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
-import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { CollectionService } from "@bitwarden/common/vault/abstractions/collection.service";
-import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
-import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
-import { DialogService } from "@bitwarden/components";
-import { ImportServiceAbstraction } from "@bitwarden/importer";
-
-import { ImportComponent } from "../../../../tools/import/import.component";
-
-@Component({
-  selector: "app-org-import",
-  templateUrl: "../../../../tools/import/import.component.html",
-})
-// eslint-disable-next-line rxjs-angular/prefer-takeuntil
-export class OrganizationImportComponent extends ImportComponent {
-  organization: Organization;
-
-  protected get importBlockedByPolicy(): boolean {
-    return false;
-  }
-
-  constructor(
-    i18nService: I18nService,
-    importService: ImportServiceAbstraction,
-    router: Router,
-    private route: ActivatedRoute,
-    platformUtilsService: PlatformUtilsService,
-    policyService: PolicyService,
-    organizationService: OrganizationService,
-    logService: LogService,
-    syncService: SyncService,
-    dialogService: DialogService,
-    folderService: FolderService,
-    collectionService: CollectionService,
-    formBuilder: FormBuilder
-  ) {
-    super(
-      i18nService,
-      importService,
-      router,
-      platformUtilsService,
-      policyService,
-      logService,
-      syncService,
-      dialogService,
-      folderService,
-      collectionService,
-      organizationService,
-      formBuilder
-    );
-  }
-
-  ngOnInit() {
-    this.route.params
-      .pipe(
-        switchMap((params) => this.organizationService.get$(params.organizationId)),
-        takeUntil(this.destroy$)
-      )
-      .subscribe((organization) => {
-        this.organizationId = organization.id;
-        this.organization = organization;
-      });
-    super.ngOnInit();
-  }
-
-  protected async onSuccessfulImport(): Promise<void> {
-    if (canAccessVaultTab(this.organization)) {
-      await this.router.navigate(["organizations", this.organizationId, "vault"]);
-    } else {
-      this.fileSelected = null;
-    }
-  }
-
-  protected async performImport() {
-    const confirmed = await this.dialogService.openSimpleDialog({
-      title: { key: "warning" },
-      content: { key: "importWarning", placeholders: [this.organization.name] },
-      type: "warning",
-    });
-
-    if (!confirmed) {
-      return;
-    }
-    await super.performImport();
-  }
-}

apps/web/src/app/admin-console/organizations/tools/import/org-import.module.ts

@@ -1,44 +0,0 @@
-import { NgModule } from "@angular/core";
-
-import { ApiService } from "@bitwarden/common/abstractions/api.service";
-import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
-import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
-import { CollectionService } from "@bitwarden/common/vault/abstractions/collection.service";
-import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
-import {
-  ImportService,
-  ImportServiceAbstraction,
-  ImportApiService,
-  ImportApiServiceAbstraction,
-} from "@bitwarden/importer";
-
-import { LooseComponentsModule, SharedModule } from "../../../../shared";
-
-import { OrganizationImportRoutingModule } from "./org-import-routing.module";
-import { OrganizationImportComponent } from "./org-import.component";
-
-@NgModule({
-  imports: [SharedModule, LooseComponentsModule, OrganizationImportRoutingModule],
-  declarations: [OrganizationImportComponent],
-  providers: [
-    {
-      provide: ImportApiServiceAbstraction,
-      useClass: ImportApiService,
-      deps: [ApiService],
-    },
-    {
-      provide: ImportServiceAbstraction,
-      useClass: ImportService,
-      deps: [
-        CipherService,
-        FolderService,
-        ImportApiServiceAbstraction,
-        I18nService,
-        CollectionService,
-        CryptoService,
-      ],
-    },
-  ],
-})
-export class OrganizationImportModule {}