[PM-9051][PM-8641] Use reusable export-component on web (#9741)

* Add export-web.component

Introduce new export-web component
Delete old component
export.module - With export-web being standalone there's no need for a importModule
Change routing to load new component

* Prepare export.component to receive a orgId via the hosting-component

* Remove unused onSaved as it's replaced by onSuccessfulExport

* Refactor org-vault-export.component

Introduce new org-vault-export.component.html as the old component relied on the markup from password manager
Refactor org-vault-export.component
Retrieve organizationId from Route and pass it into the shared export.component
Ensure when exporting from AC to include all data from the selected org
org-vault-export.module - With the new component being standalone there's no need for a importModule
Change routing to load new org-vault-export component

* PM-8641 - Add success toast to base-export component
This ensures a success toast is shown on all clients consistently
Add missing entries into clients messages.json

---------

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

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

@@ -56,12 +56,14 @@ const routes: Routes = [
           },
           {
             path: "export",
-            loadChildren: () =>
-              import("../tools/vault-export/org-vault-export.module").then(
-                (m) => m.OrganizationVaultExportModule,
+            loadComponent: () =>
+              import("../tools/vault-export/org-vault-export.component").then(
+                (mod) => mod.OrganizationVaultExportComponent,
               ),
+            canActivate: [OrganizationPermissionsGuard],
             data: {
               titleId: "exportVault",
+              organizationPermissions: (org: Organization) => org.canAccessImportExport,
             },
           },
         ],

apps/web/src/app/admin-console/organizations/tools/vault-export/org-vault-export-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 { OrganizationVaultExportComponent } from "./org-vault-export.component";
-
-const routes: Routes = [
-  {
-    path: "",
-    component: OrganizationVaultExportComponent,
-    canActivate: [OrganizationPermissionsGuard],
-    data: {
-      titleId: "exportVault",
-      organizationPermissions: (org: Organization) => org.canAccessImportExport,
-    },
-  },
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-})
-export class OrganizationVaultExportRoutingModule {}

apps/web/src/app/admin-console/organizations/tools/vault-export/org-vault-export.component.html

@@ -0,0 +1,21 @@
+<app-header></app-header>
+
+<bit-container>
+  <tools-export
+    (formDisabled)="this.disabled = $event"
+    (formLoading)="this.loading = $event"
+    (onSuccessfulExport)="this.onSuccessfulExport($event)"
+    organizationId="{{ routeOrgId }}"
+  ></tools-export>
+  <button
+    [disabled]="disabled"
+    [loading]="loading"
+    form="export_form_exportForm"
+    bitButton
+    type="submit"
+    bitFormButton
+    buttonType="primary"
+  >
+    {{ "confirmFormat" | i18n }}
+  </button>
+</bit-container>

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

@@ -1,83 +1,28 @@
-import { Component } from "@angular/core";
-import { UntypedFormBuilder } from "@angular/forms";
+import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 
-import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
-import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
-import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
-import { EventType } from "@bitwarden/common/enums";
-import { FileDownloadService } from "@bitwarden/common/platform/abstractions/file-download/file-download.service";
-import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
-import { DialogService, ToastService } from "@bitwarden/components";
-import { VaultExportServiceAbstraction } from "@bitwarden/vault-export-core";
+import { ExportComponent } from "@bitwarden/vault-export-ui";
 
-import { ExportComponent } from "../../../../tools/vault-export/export.component";
+import { LooseComponentsModule, SharedModule } from "../../../../shared";
 
 @Component({
-  selector: "app-org-export",
-  templateUrl: "../../../../tools/vault-export/export.component.html",
+  templateUrl: "org-vault-export.component.html",
+  standalone: true,
+  imports: [SharedModule, ExportComponent, LooseComponentsModule],
 })
-// eslint-disable-next-line rxjs-angular/prefer-takeuntil
-export class OrganizationVaultExportComponent extends ExportComponent {
-  constructor(
-    i18nService: I18nService,
-    toastService: ToastService,
-    exportService: VaultExportServiceAbstraction,
-    eventCollectionService: EventCollectionService,
-    private route: ActivatedRoute,
-    policyService: PolicyService,
-    logService: LogService,
-    formBuilder: UntypedFormBuilder,
-    fileDownloadService: FileDownloadService,
-    dialogService: DialogService,
-    organizationService: OrganizationService,
-  ) {
-    super(
-      i18nService,
-      toastService,
-      exportService,
-      eventCollectionService,
-      policyService,
-      logService,
-      formBuilder,
-      fileDownloadService,
-      dialogService,
-      organizationService,
-    );
-  }
+export class OrganizationVaultExportComponent implements OnInit {
+  protected routeOrgId: string = null;
+  protected loading = false;
+  protected disabled = false;
 
-  protected get disabledByPolicy(): boolean {
-    return false;
-  }
+  constructor(private route: ActivatedRoute) {}
 
   async ngOnInit() {
-    // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
-    this.route.parent.parent.params.subscribe(async (params) => {
-      this.organizationId = params.organizationId;
-    });
-
-    await super.ngOnInit();
+    this.routeOrgId = this.route.snapshot.paramMap.get("organizationId");
   }
 
-  getExportData() {
-    return this.exportService.getOrganizationExport(
-      this.organizationId,
-      this.format,
-      this.filePassword,
-    );
-  }
-
-  getFileName() {
-    return super.getFileName("org");
-  }
-
-  async collectEvent(): Promise<void> {
-    await this.eventCollectionService.collect(
-      EventType.Organization_ClientExportedVault,
-      null,
-      null,
-      this.organizationId,
-    );
-  }
+  /**
+   * Callback that is called after a successful export.
+   */
+  protected async onSuccessfulExport(organizationId: string): Promise<void> {}
 }

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

@@ -1,19 +0,0 @@
-import { NgModule } from "@angular/core";
-
-import { ExportScopeCalloutComponent } from "@bitwarden/vault-export-ui";
-
-import { LooseComponentsModule, SharedModule } from "../../../../shared";
-
-import { OrganizationVaultExportRoutingModule } from "./org-vault-export-routing.module";
-import { OrganizationVaultExportComponent } from "./org-vault-export.component";
-
-@NgModule({
-  imports: [
-    SharedModule,
-    LooseComponentsModule,
-    OrganizationVaultExportRoutingModule,
-    ExportScopeCalloutComponent,
-  ],
-  declarations: [OrganizationVaultExportComponent],
-})
-export class OrganizationVaultExportModule {}