[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.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$));
+    }
+  };
+}