[PM-15999] - use new generator components in desktop app (#12639)

* use new generator components in desktop app

* add generator to export

* add TODO comment

* use app-specific component

* use vault-owned generator component

* use CipherFormGeneratorComponent

* rename to dialog component. reference ticket number in comment

* use static method for opening dialog

apps/desktop/src/vault/app/vault/credential-generator-dialog.component.html

@@ -0,0 +1,38 @@
+<bit-dialog #dialog dialogSize="large" background="alt">
+  <span bitDialogTitle>{{ "generator" | i18n }}</span>
+  <ng-container bitDialogContent>
+    <vault-cipher-form-generator
+      [type]="data.type"
+      (valueGenerated)="onCredentialGenerated($event)"
+    />
+    <bit-item>
+      <button
+        type="button"
+        bitLink
+        linkType="primary"
+        bit-item-content
+        aria-haspopup="true"
+        (click)="openHistoryDialog()"
+      >
+        {{ "generatorHistory" | i18n }}
+        <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
+      </button>
+    </bit-item>
+  </ng-container>
+  <ng-container bitDialogFooter>
+    <div class="modal-footer">
+      <button
+        type="button"
+        class="primary"
+        (click)="applyCredentials()"
+        appA11yTitle="{{ 'select' | i18n }}"
+        bitDialogClose
+      >
+        <i class="bwi bwi-lg bwi-fw bwi-check" aria-hidden="true"></i>
+      </button>
+      <button type="button" data-dismiss="modal" (click)="clearCredentials()" bitDialogClose>
+        {{ "cancel" | i18n }}
+      </button>
+    </div>
+  </ng-container>
+</bit-dialog>

apps/desktop/src/vault/app/vault/credential-generator-dialog.component.ts

@@ -0,0 +1,69 @@
+import { DIALOG_DATA } from "@angular/cdk/dialog";
+import { CommonModule } from "@angular/common";
+import { Component, Inject } from "@angular/core";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import {
+  ButtonModule,
+  DialogModule,
+  DialogService,
+  ItemModule,
+  LinkModule,
+} from "@bitwarden/components";
+import {
+  CredentialGeneratorHistoryDialogComponent,
+  GeneratorModule,
+} from "@bitwarden/generator-components";
+import { CipherFormGeneratorComponent } from "@bitwarden/vault";
+
+type CredentialGeneratorParams = {
+  onCredentialGenerated: (value?: string) => void;
+  type: "password" | "username";
+};
+
+@Component({
+  standalone: true,
+  selector: "credential-generator-dialog",
+  templateUrl: "credential-generator-dialog.component.html",
+  imports: [
+    CipherFormGeneratorComponent,
+    CommonModule,
+    DialogModule,
+    ButtonModule,
+    JslibModule,
+    GeneratorModule,
+    ItemModule,
+    LinkModule,
+  ],
+})
+export class CredentialGeneratorDialogComponent {
+  credentialValue?: string;
+
+  constructor(
+    @Inject(DIALOG_DATA) protected data: CredentialGeneratorParams,
+    private dialogService: DialogService,
+  ) {}
+
+  applyCredentials = () => {
+    this.data.onCredentialGenerated(this.credentialValue);
+  };
+
+  clearCredentials = () => {
+    this.data.onCredentialGenerated();
+  };
+
+  onCredentialGenerated = (value: string) => {
+    this.credentialValue = value;
+  };
+
+  openHistoryDialog = () => {
+    // open history dialog
+    this.dialogService.open(CredentialGeneratorHistoryDialogComponent);
+  };
+
+  static open = (dialogService: DialogService, data: CredentialGeneratorParams) => {
+    dialogService.open(CredentialGeneratorDialogComponent, {
+      data,
+    });
+  };
+}

apps/desktop/src/vault/app/vault/vault.component.ts

@@ -20,7 +20,9 @@ import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
 import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
 import { EventType } from "@bitwarden/common/enums";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { BroadcasterService } from "@bitwarden/common/platform/abstractions/broadcaster.service";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
@@ -40,6 +42,7 @@ import { invokeMenu, RendererMenuItem } from "../../../utils";
 import { AddEditComponent } from "./add-edit.component";
 import { AttachmentsComponent } from "./attachments.component";
 import { CollectionsComponent } from "./collections.component";
+import { CredentialGeneratorDialogComponent } from "./credential-generator-dialog.component";
 import { FolderAddEditComponent } from "./folder-add-edit.component";
 import { PasswordHistoryComponent } from "./password-history.component";
 import { ShareComponent } from "./share.component";
@@ -107,6 +110,7 @@ export class VaultComponent implements OnInit, OnDestroy {
     private apiService: ApiService,
     private dialogService: DialogService,
     private billingAccountProfileStateService: BillingAccountProfileStateService,
+    private configService: ConfigService,
   ) {}
 
   async ngOnInit() {
@@ -622,11 +626,29 @@ export class VaultComponent implements OnInit, OnDestroy {
   }
 
   async openGenerator(comingFromAddEdit: boolean, passwordType = true) {
-    // FIXME: Will need to be extended to use the cipher-form-generator component introduced with https://github.com/bitwarden/clients/pull/11350
+    const isGeneratorSwapEnabled = await this.configService.getFeatureFlag(
-    if (this.modal != null) {
+      FeatureFlag.GeneratorToolsModernization,
-      this.modal.close();
+    );
+
+    if (isGeneratorSwapEnabled) {
+      CredentialGeneratorDialogComponent.open(this.dialogService, {
+        onCredentialGenerated: (value?: string) => {
+          if (this.addEditComponent != null) {
+            this.addEditComponent.markPasswordAsDirty();
+            if (passwordType) {
+              this.addEditComponent.cipher.login.password = value ?? "";
+            } else {
+              this.addEditComponent.cipher.login.username = value ?? "";
+            }
+          }
+        },
+        type: passwordType ? "password" : "username",
+      });
+      return;
     }
 
+    // TODO: Legacy code below, remove once the new generator is fully implemented
+    // https://bitwarden.atlassian.net/browse/PM-7121
     const cipher = this.addEditComponent?.cipher;
     const loginType = cipher != null && cipher.type === CipherType.Login && cipher.login != null;