[PM-17820] - Browser/Web - update button and label state in username generator (#13189)

* add event handling for username generator

* fix specs. change function name to not be of an event type

* update specs

* rename function

* revert name change

* fix spec

* bubble algorithmSelected up to generator components. add disabled button tests

* add typeSelected event

* revert addition of onType.

* apply same logic in onAlgorithmSelected to web and desktop

apps/web/src/app/vault/components/web-generator-dialog/web-generator-dialog.component.html

@@ -1,12 +1,13 @@
 <bit-dialog dialogSize="default" background="alt">
   <span bitDialogTitle>
-    {{ title }}
+    {{ titleKey | i18n }}
   </span>
   <ng-container bitDialogContent>
     <vault-cipher-form-generator
       [type]="params.type"
       [uri]="uri"
       (valueGenerated)="onValueGenerated($event)"
+      (algorithmSelected)="onAlgorithmSelected($event)"
       disableMargin
     ></vault-cipher-form-generator>
   </ng-container>
@@ -17,8 +18,9 @@
       buttonType="primary"
       (click)="selectValue()"
       data-testid="select-button"
+      [disabled]="!(buttonLabel && generatedValue)"
     >
-      {{ selectButtonText }}
+      {{ buttonLabel }}
     </button>
   </ng-container>
 </bit-dialog>

apps/web/src/app/vault/components/web-generator-dialog/web-generator-dialog.component.spec.ts

@@ -1,19 +1,19 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
-import { DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
-import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { DIALOG_DATA, DialogRef } from "@angular/cdk/dialog";
+import { Component, Input, Output, EventEmitter } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
 import { NoopAnimationsModule } from "@angular/platform-browser/animations";
 import { mock, MockProxy } from "jest-mock-extended";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { AlgorithmInfo } from "@bitwarden/generator-core";
 import { CipherFormGeneratorComponent } from "@bitwarden/vault";
 
 import {
   WebVaultGeneratorDialogAction,
   WebVaultGeneratorDialogComponent,
-  WebVaultGeneratorDialogParams,
+  WebVaultGeneratorDialogResult,
 } from "./web-generator-dialog.component";
 
 @Component({
@@ -22,7 +22,8 @@ import {
   standalone: true,
 })
 class MockCipherFormGenerator {
-  @Input() type: "password" | "username";
+  @Input() type: "password" | "username" = "password";
+  @Output() algorithmSelected: EventEmitter<AlgorithmInfo> = new EventEmitter();
   @Input() uri?: string;
   @Output() valueGenerated = new EventEmitter<string>();
 }
@@ -30,35 +31,20 @@ class MockCipherFormGenerator {
 describe("WebVaultGeneratorDialogComponent", () => {
   let component: WebVaultGeneratorDialogComponent;
   let fixture: ComponentFixture<WebVaultGeneratorDialogComponent>;
-
-  let dialogRef: MockProxy<DialogRef<any>>;
+  let dialogRef: MockProxy<DialogRef<WebVaultGeneratorDialogResult>>;
   let mockI18nService: MockProxy<I18nService>;
 
   beforeEach(async () => {
-    dialogRef = mock<DialogRef<any>>();
+    dialogRef = mock<DialogRef<WebVaultGeneratorDialogResult>>();
     mockI18nService = mock<I18nService>();
 
-    const mockDialogData: WebVaultGeneratorDialogParams = { type: "password" };
-
     await TestBed.configureTestingModule({
       imports: [NoopAnimationsModule, WebVaultGeneratorDialogComponent],
       providers: [
-        {
-          provide: DialogRef,
-          useValue: dialogRef,
-        },
-        {
-          provide: DIALOG_DATA,
-          useValue: mockDialogData,
-        },
-        {
-          provide: I18nService,
-          useValue: mockI18nService,
-        },
-        {
-          provide: PlatformUtilsService,
-          useValue: mock<PlatformUtilsService>(),
-        },
+        { provide: DialogRef, useValue: dialogRef },
+        { provide: DIALOG_DATA, useValue: { type: "password" } },
+        { provide: I18nService, useValue: mockI18nService },
+        { provide: PlatformUtilsService, useValue: mock<PlatformUtilsService>() },
       ],
     })
       .overrideComponent(WebVaultGeneratorDialogComponent, {
@@ -72,38 +58,73 @@ describe("WebVaultGeneratorDialogComponent", () => {
     fixture.detectChanges();
   });
 
-  it("initializes without errors", () => {
-    fixture.detectChanges();
+  it("should create", () => {
     expect(component).toBeTruthy();
   });
 
-  it("closes the dialog with 'canceled' result when close is called", () => {
-    const closeSpy = jest.spyOn(dialogRef, "close");
+  it("should enable button when value and algorithm are selected", () => {
+    const generator = fixture.debugElement.query(
+      By.css("vault-cipher-form-generator"),
+    ).componentInstance;
 
-    (component as any).close();
+    generator.algorithmSelected.emit({ useGeneratedValue: "Use Password" } as any);
+    generator.valueGenerated.emit("test-password");
+    fixture.detectChanges();
 
-    expect(closeSpy).toHaveBeenCalledWith({
+    const button = fixture.debugElement.query(
+      By.css("[data-testid='select-button']"),
+    ).nativeElement;
+    expect(button.disabled).toBe(false);
+  });
+
+  it("should disable the button if no value has been generated", () => {
+    const generator = fixture.debugElement.query(
+      By.css("vault-cipher-form-generator"),
+    ).componentInstance;
+
+    generator.algorithmSelected.emit({ useGeneratedValue: "Use Password" } as any);
+    fixture.detectChanges();
+
+    const button = fixture.debugElement.query(
+      By.css("[data-testid='select-button']"),
+    ).nativeElement;
+    expect(button.disabled).toBe(true);
+  });
+
+  it("should disable the button if no algorithm is selected", () => {
+    const generator = fixture.debugElement.query(
+      By.css("vault-cipher-form-generator"),
+    ).componentInstance;
+
+    generator.valueGenerated.emit("test-password");
+    fixture.detectChanges();
+
+    const button = fixture.debugElement.query(
+      By.css("[data-testid='select-button']"),
+    ).nativeElement;
+    expect(button.disabled).toBe(true);
+  });
+
+  it("should close with selected value when confirmed", () => {
+    const generator = fixture.debugElement.query(
+      By.css("vault-cipher-form-generator"),
+    ).componentInstance;
+    generator.algorithmSelected.emit({ useGeneratedValue: "Use Password" } as any);
+    generator.valueGenerated.emit("test-password");
+    fixture.detectChanges();
+
+    fixture.debugElement.query(By.css("[data-testid='select-button']")).nativeElement.click();
+
+    expect(dialogRef.close).toHaveBeenCalledWith({
+      action: WebVaultGeneratorDialogAction.Selected,
+      generatedValue: "test-password",
+    });
+  });
+
+  it("should close with canceled action when dismissed", () => {
+    component["close"]();
+    expect(dialogRef.close).toHaveBeenCalledWith({
       action: WebVaultGeneratorDialogAction.Canceled,
     });
   });
-
-  it("closes the dialog with 'selected' result when selectValue is called", () => {
-    const closeSpy = jest.spyOn(dialogRef, "close");
-    const generatedValue = "generated-value";
-    component.onValueGenerated(generatedValue);
-
-    (component as any).selectValue();
-
-    expect(closeSpy).toHaveBeenCalledWith({
-      action: WebVaultGeneratorDialogAction.Selected,
-      generatedValue: generatedValue,
-    });
-  });
-
-  it("updates generatedValue when onValueGenerated is called", () => {
-    const generatedValue = "new-generated-value";
-    component.onValueGenerated(generatedValue);
-
-    expect((component as any).generatedValue).toBe(generatedValue);
-  });
 });

apps/web/src/app/vault/components/web-generator-dialog/web-generator-dialog.component.ts

@@ -6,6 +6,8 @@ import { Component, Inject } from "@angular/core";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { ButtonModule, DialogModule, DialogService } from "@bitwarden/components";
+import { AlgorithmInfo } from "@bitwarden/generator-core";
+import { I18nPipe } from "@bitwarden/ui-common";
 import { CipherFormGeneratorComponent } from "@bitwarden/vault";
 
 export interface WebVaultGeneratorDialogParams {
@@ -27,13 +29,11 @@ export enum WebVaultGeneratorDialogAction {
   selector: "web-vault-generator-dialog",
   templateUrl: "./web-generator-dialog.component.html",
   standalone: true,
-  imports: [CommonModule, CipherFormGeneratorComponent, ButtonModule, DialogModule],
+  imports: [CommonModule, CipherFormGeneratorComponent, ButtonModule, DialogModule, I18nPipe],
 })
 export class WebVaultGeneratorDialogComponent {
-  protected title = this.i18nService.t(this.isPassword ? "passwordGenerator" : "usernameGenerator");
-  protected selectButtonText = this.i18nService.t(
-    this.isPassword ? "useThisPassword" : "useThisUsername",
-  );
+  protected titleKey = this.isPassword ? "passwordGenerator" : "usernameGenerator";
+  protected buttonLabel: string | undefined;
 
   /**
    * Whether the dialog is generating a password/passphrase. If false, it is generating a username.
@@ -80,6 +80,16 @@ export class WebVaultGeneratorDialogComponent {
     this.generatedValue = value;
   }
 
+  onAlgorithmSelected = (selected?: AlgorithmInfo) => {
+    if (selected) {
+      this.buttonLabel = selected.useGeneratedValue;
+    } else {
+      // default to email
+      this.buttonLabel = this.i18nService.t("useThisEmail");
+    }
+    this.generatedValue = undefined;
+  };
+
   /**
    * Opens the vault generator dialog.
    */