[PM-13667] Add button to open credential history on web (#12100)

* Create CredentialGeneratorHistoryDialogComponent to be re-used on web and desktop

* Add button to open credential histpry on web

* Add button to open credential history on desktop (#12101)

- Register route to open new CredentialGeneratorHistoryDialogComponent when FeatureFlag/GeneratorToolsModernization is enabled
- Add button to credential generator
- Add missing keys to en/messages.json

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

---------

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

libs/tools/generator/components/src/credential-generator-history-dialog.component.html

@@ -0,0 +1,18 @@
+<bit-dialog #dialog background="alt">
+  <span bitDialogTitle>{{ "generatorHistory" | i18n }}</span>
+  <ng-container bitDialogContent>
+    <bit-empty-credential-history *ngIf="!(hasHistory$ | async)" style="display: contents" />
+    <bit-credential-generator-history *ngIf="hasHistory$ | async" />
+  </ng-container>
+  <ng-container bitDialogFooter>
+    <button
+      [disabled]="!(hasHistory$ | async)"
+      bitButton
+      type="submit"
+      buttonType="primary"
+      (click)="clear()"
+    >
+      {{ "clearHistory" | i18n }}
+    </button>
+  </ng-container>
+</bit-dialog>

libs/tools/generator/components/src/credential-generator-history-dialog.component.ts

@@ -0,0 +1,66 @@
+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { BehaviorSubject, distinctUntilChanged, firstValueFrom, map, switchMap } from "rxjs";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { UserId } from "@bitwarden/common/types/guid";
+import { ButtonModule, DialogModule, DialogService } from "@bitwarden/components";
+import { GeneratorHistoryService } from "@bitwarden/generator-history";
+
+import { CredentialGeneratorHistoryComponent as CredentialGeneratorHistoryToolsComponent } from "./credential-generator-history.component";
+import { EmptyCredentialHistoryComponent } from "./empty-credential-history.component";
+
+@Component({
+  templateUrl: "credential-generator-history-dialog.component.html",
+  standalone: true,
+  imports: [
+    ButtonModule,
+    CommonModule,
+    JslibModule,
+    DialogModule,
+    CredentialGeneratorHistoryToolsComponent,
+    EmptyCredentialHistoryComponent,
+  ],
+})
+export class CredentialGeneratorHistoryDialogComponent {
+  protected readonly hasHistory$ = new BehaviorSubject<boolean>(false);
+  protected readonly userId$ = new BehaviorSubject<UserId>(null);
+
+  constructor(
+    private accountService: AccountService,
+    private history: GeneratorHistoryService,
+    private dialogService: DialogService,
+  ) {
+    this.accountService.activeAccount$
+      .pipe(
+        takeUntilDestroyed(),
+        map(({ id }) => id),
+        distinctUntilChanged(),
+      )
+      .subscribe(this.userId$);
+
+    this.userId$
+      .pipe(
+        takeUntilDestroyed(),
+        switchMap((id) => id && this.history.credentials$(id)),
+        map((credentials) => credentials.length > 0),
+      )
+      .subscribe(this.hasHistory$);
+  }
+
+  clear = async () => {
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "clearGeneratorHistoryTitle" },
+      content: { key: "cleargGeneratorHistoryDescription" },
+      type: "warning",
+      acceptButtonText: { key: "clearHistory" },
+      cancelButtonText: { key: "cancel" },
+    });
+
+    if (confirmed) {
+      await this.history.clear(await firstValueFrom(this.userId$));
+    }
+  };
+}

libs/tools/generator/components/src/index.ts

@@ -1,3 +1,4 @@
 export { CredentialGeneratorHistoryComponent } from "./credential-generator-history.component";
+export { CredentialGeneratorHistoryDialogComponent } from "./credential-generator-history-dialog.component";
 export { EmptyCredentialHistoryComponent } from "./empty-credential-history.component";
 export { GeneratorModule } from "./generator.module";