[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/browser/src/_locales/en/messages.json

@@ -3107,6 +3107,9 @@
   "confirmFilePassword": {
     "message": "Confirm file password"
   },
+  "exportSuccess": {
+    "message": "Vault data exported"
+  },
   "typePasskey": {
     "message": "Passkey"
   },

apps/desktop/src/locales/en/messages.json

@@ -2843,6 +2843,9 @@
   "confirmFilePassword": {
     "message": "Confirm file password"
   },
+  "exportSuccess": {
+    "message": "Vault data exported"
+  },
   "multifactorAuthenticationCancelled": {
     "message": "Multifactor authentication cancelled"
   },

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

@@ -56,12 +56,14 @@ const routes: Routes = [
           },
           {
             path: "export",
-            loadChildren: () =>
+            loadComponent: () =>
-              import("../tools/vault-export/org-vault-export.module").then(
+              import("../tools/vault-export/org-vault-export.component").then(
-                (m) => m.OrganizationVaultExportModule,
+                (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 { Component, OnInit } from "@angular/core";
-import { UntypedFormBuilder } from "@angular/forms";
 import { ActivatedRoute } from "@angular/router";
 
-import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
+import { ExportComponent } from "@bitwarden/vault-export-ui";
-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 "../../../../tools/vault-export/export.component";
+import { LooseComponentsModule, SharedModule } from "../../../../shared";
 
 @Component({
-  selector: "app-org-export",
+  templateUrl: "org-vault-export.component.html",
-  templateUrl: "../../../../tools/vault-export/export.component.html",
+  standalone: true,
+  imports: [SharedModule, ExportComponent, LooseComponentsModule],
 })
-// eslint-disable-next-line rxjs-angular/prefer-takeuntil
+export class OrganizationVaultExportComponent implements OnInit {
-export class OrganizationVaultExportComponent extends ExportComponent {
+  protected routeOrgId: string = null;
-  constructor(
+  protected loading = false;
-    i18nService: I18nService,
+  protected disabled = false;
-    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,
-    );
-  }
 
-  protected get disabledByPolicy(): boolean {
+  constructor(private route: ActivatedRoute) {}
-    return false;
-  }
 
   async ngOnInit() {
-    // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
+    this.routeOrgId = this.route.snapshot.paramMap.get("organizationId");
-    this.route.parent.parent.params.subscribe(async (params) => {
-      this.organizationId = params.organizationId;
-    });
-
-    await super.ngOnInit();
   }
 
-  getExportData() {
+  /**
-    return this.exportService.getOrganizationExport(
+   * Callback that is called after a successful export.
-      this.organizationId,
+   */
-      this.format,
+  protected async onSuccessfulExport(organizationId: string): Promise<void> {}
-      this.filePassword,
-    );
-  }
-
-  getFileName() {
-    return super.getFileName("org");
-  }
-
-  async collectEvent(): Promise<void> {
-    await this.eventCollectionService.collect(
-      EventType.Organization_ClientExportedVault,
-      null,
-      null,
-      this.organizationId,
-    );
-  }
 }

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 {}

apps/web/src/app/oss-routing.module.ts

@@ -448,8 +448,13 @@ const routes: Routes = [
           },
           {
             path: "export",
-            loadChildren: () =>
+            loadComponent: () =>
-              import("./tools/vault-export/export.module").then((m) => m.ExportModule),
+              import("./tools/vault-export/export-web.component").then(
+                (mod) => mod.ExportWebComponent,
+              ),
+            data: {
+              titleId: "exportVault",
+            } satisfies DataProperties,
           },
           {
             path: "generator",

apps/web/src/app/tools/vault-export/export-routing.module.ts

@@ -1,17 +0,0 @@
-import { NgModule } from "@angular/core";
-import { RouterModule, Routes } from "@angular/router";
-
-import { ExportComponent } from "./export.component";
-
-const routes: Routes = [
-  {
-    path: "",
-    component: ExportComponent,
-    data: { titleId: "exportVault" },
-  },
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-})
-export class ExportRoutingModule {}

apps/web/src/app/tools/vault-export/export-web.component.html

@@ -0,0 +1,20 @@
+<app-header></app-header>
+
+<bit-container>
+  <tools-export
+    (formDisabled)="this.disabled = $event"
+    (formLoading)="this.loading = $event"
+    (onSuccessfulExport)="this.onSuccessfulExport($event)"
+  ></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/tools/vault-export/export-web.component.ts

@@ -0,0 +1,24 @@
+import { Component } from "@angular/core";
+import { Router } from "@angular/router";
+
+import { ExportComponent } from "@bitwarden/vault-export-ui";
+
+import { HeaderModule } from "../../layouts/header/header.module";
+import { SharedModule } from "../../shared";
+
+@Component({
+  templateUrl: "export-web.component.html",
+  standalone: true,
+  imports: [SharedModule, ExportComponent, HeaderModule],
+})
+export class ExportWebComponent {
+  protected loading = false;
+  protected disabled = false;
+
+  constructor(private router: Router) {}
+
+  /**
+   * Callback that is called after a successful export.
+   */
+  protected async onSuccessfulExport(organizationId: string): Promise<void> {}
+}

apps/web/src/app/tools/vault-export/export.component.html

@@ -1,115 +0,0 @@
-<app-header></app-header>
-
-<bit-container>
-  <form [formGroup]="exportForm" [bitSubmit]="submit">
-    <bit-callout type="danger" title="{{ 'vaultExportDisabled' | i18n }}" *ngIf="disabledByPolicy">
-      {{ "personalVaultExportPolicyInEffect" | i18n }}
-    </bit-callout>
-    <tools-export-scope-callout
-      [organizationId]="organizationId"
-      *ngIf="!disabledByPolicy"
-    ></tools-export-scope-callout>
-
-    <ng-container *ngIf="organizations$ | async as organizations">
-      <bit-form-field *ngIf="organizations.length > 0">
-        <bit-label>{{ "exportFrom" | i18n }}</bit-label>
-        <bit-select formControlName="vaultSelector">
-          <bit-option [label]="'myVault' | i18n" value="myVault" icon="bwi-user" />
-          <bit-option
-            *ngFor="let o of organizations$ | async"
-            [value]="o.id"
-            [label]="o.name"
-            icon="bwi-business"
-          />
-        </bit-select>
-      </bit-form-field>
-    </ng-container>
-
-    <bit-form-field>
-      <bit-label>{{ "fileFormat" | i18n }}</bit-label>
-      <bit-select formControlName="format">
-        <bit-option *ngFor="let f of formatOptions" [value]="f.value" [label]="f.name" />
-      </bit-select>
-    </bit-form-field>
-
-    <ng-container *ngIf="format === 'encrypted_json'">
-      <bit-radio-group formControlName="fileEncryptionType" aria-label="exportTypeHeading">
-        <bit-label>{{ "exportTypeHeading" | i18n }}</bit-label>
-
-        <bit-radio-button
-          id="AccountEncrypted"
-          name="fileEncryptionType"
-          class="tw-block"
-          [value]="encryptedExportType.AccountEncrypted"
-          checked="fileEncryptionType === encryptedExportType.AccountEncrypted"
-        >
-          <bit-label>{{ "accountRestricted" | i18n }}</bit-label>
-          <bit-hint>{{ "accountRestrictedOptionDescription" | i18n }}</bit-hint>
-        </bit-radio-button>
-
-        <bit-radio-button
-          id="FileEncrypted"
-          name="fileEncryptionType"
-          class="tw-block"
-          [value]="encryptedExportType.FileEncrypted"
-          checked="fileEncryptionType === encryptedExportType.FileEncrypted"
-        >
-          <bit-label>{{ "passwordProtected" | i18n }}</bit-label>
-          <bit-hint>{{ "passwordProtectedOptionDescription" | i18n }}</bit-hint>
-        </bit-radio-button>
-      </bit-radio-group>
-
-      <ng-container *ngIf="fileEncryptionType == encryptedExportType.FileEncrypted">
-        <div class="tw-mb-3">
-          <bit-form-field>
-            <bit-label>{{ "filePassword" | i18n }}</bit-label>
-            <input
-              bitInput
-              type="password"
-              id="filePassword"
-              formControlName="filePassword"
-              name="password"
-            />
-            <button
-              type="button"
-              bitSuffix
-              bitIconButton
-              bitPasswordInputToggle
-              [(toggled)]="showFilePassword"
-            ></button>
-            <bit-hint>{{ "exportPasswordDescription" | i18n }}</bit-hint>
-          </bit-form-field>
-          <app-password-strength [password]="filePassword" [showText]="true">
-          </app-password-strength>
-        </div>
-        <bit-form-field>
-          <bit-label>{{ "confirmFilePassword" | i18n }}</bit-label>
-          <input
-            bitInput
-            type="password"
-            id="confirmFilePassword"
-            formControlName="confirmFilePassword"
-            name="confirmFilePassword"
-          />
-          <button
-            type="button"
-            bitSuffix
-            bitIconButton
-            bitPasswordInputToggle
-            [(toggled)]="showFilePassword"
-          ></button>
-        </bit-form-field>
-      </ng-container>
-    </ng-container>
-
-    <button
-      bitButton
-      bitFormButton
-      type="submit"
-      buttonType="primary"
-      [disabled]="disabledByPolicy"
-    >
-      {{ "confirmFormat" | i18n }}
-    </button>
-  </form>
-</bit-container>

apps/web/src/app/tools/vault-export/export.component.ts

@@ -1,53 +0,0 @@
-import { Component } from "@angular/core";
-import { UntypedFormBuilder } from "@angular/forms";
-
-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 { 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 as BaseExportComponent } from "@bitwarden/vault-export-ui";
-
-@Component({
-  selector: "app-export",
-  templateUrl: "export.component.html",
-})
-export class ExportComponent extends BaseExportComponent {
-  constructor(
-    i18nService: I18nService,
-    toastService: ToastService,
-    exportService: VaultExportServiceAbstraction,
-    eventCollectionService: EventCollectionService,
-    policyService: PolicyService,
-    logService: LogService,
-    formBuilder: UntypedFormBuilder,
-    fileDownloadService: FileDownloadService,
-    dialogService: DialogService,
-    organizationService: OrganizationService,
-  ) {
-    super(
-      i18nService,
-      toastService,
-      exportService,
-      eventCollectionService,
-      policyService,
-      logService,
-      formBuilder,
-      fileDownloadService,
-      dialogService,
-      organizationService,
-    );
-  }
-
-  protected saved() {
-    super.saved();
-    this.toastService.showToast({
-      variant: "success",
-      title: null,
-      message: this.i18nService.t("exportSuccess"),
-    });
-  }
-}

apps/web/src/app/tools/vault-export/export.module.ts

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

libs/tools/export/vault-export/vault-export-ui/src/components/export.component.ts

@@ -1,5 +1,13 @@
 import { CommonModule } from "@angular/common";
-import { Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from "@angular/core";
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewChild,
+} from "@angular/core";
 import { ReactiveFormsModule, UntypedFormBuilder, Validators } from "@angular/forms";
 import { map, merge, Observable, startWith, Subject, takeUntil } from "rxjs";
 
@@ -53,6 +61,26 @@ import { ExportScopeCalloutComponent } from "./export-scope-callout.component";
   ],
 })
 export class ExportComponent implements OnInit, OnDestroy {
+  private _organizationId: string;
+
+  get organizationId(): string {
+    return this._organizationId;
+  }
+
+  /**
+   * Enables the hosting control to pass in an organizationId
+   * If a organizationId is provided, the organization selection is disabled.
+   */
+  @Input() set organizationId(value: string) {
+    this._organizationId = value;
+    this.organizationService
+      .get$(this._organizationId)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((organization) => {
+        this._organizationId = organization?.id;
+      });
+  }
+
   /**
    * The hosting control also needs a bitSubmitDirective (on the Submit button) which calls this components {@link submit}-method.
    * This components formState (loading/disabled) is emitted back up to the hosting component so for example the Submit button can be enabled/disabled and show loading state.
@@ -82,7 +110,6 @@ export class ExportComponent implements OnInit, OnDestroy {
   @Output()
   onSuccessfulExport = new EventEmitter<string>();
 
-  @Output() onSaved = new EventEmitter();
   @ViewChild(PasswordStrengthComponent) passwordStrengthComponent: PasswordStrengthComponent;
 
   encryptedExportType = EncryptedExportType;
@@ -91,7 +118,6 @@ export class ExportComponent implements OnInit, OnDestroy {
   filePasswordValue: string = null;
   private _disabledByPolicy = false;
 
-  protected organizationId: string = null;
   organizations$: Observable<Organization[]>;
 
   protected get disabledByPolicy(): boolean {
@@ -120,6 +146,7 @@ export class ExportComponent implements OnInit, OnDestroy {
   ];
 
   private destroy$ = new Subject<void>();
+  private onlyManagedCollections = true;
 
   constructor(
     protected i18nService: I18nService,
@@ -163,6 +190,8 @@ export class ExportComponent implements OnInit, OnDestroy {
       );
       this.exportForm.controls.vaultSelector.patchValue(this.organizationId);
       this.exportForm.controls.vaultSelector.disable();
+
+      this.onlyManagedCollections = false;
       return;
     }
 
@@ -211,7 +240,12 @@ export class ExportComponent implements OnInit, OnDestroy {
     try {
       const data = await this.getExportData();
       this.downloadFile(data);
-      this.saved();
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("exportSuccess"),
+      });
+      this.onSuccessfulExport.emit(this.organizationId);
       await this.collectEvent();
       this.exportForm.get("secret").setValue("");
       this.exportForm.clearValidators();
@@ -252,11 +286,6 @@ export class ExportComponent implements OnInit, OnDestroy {
     await this.doExport();
   };
 
-  protected saved() {
-    this.onSaved.emit();
-    this.onSuccessfulExport.emit(this.organizationId);
-  }
-
   private async verifyUser(): Promise<boolean> {
     let confirmDescription = "exportWarningDesc";
     if (this.isFileEncryptedExport) {
@@ -298,7 +327,7 @@ export class ExportComponent implements OnInit, OnDestroy {
           this.organizationId,
           this.format,
           this.filePassword,
-          true,
+          this.onlyManagedCollections,
         );
   }