[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>

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

@@ -62,6 +62,7 @@ import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.servi
 import { InternalFolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
 import { CipherType } from "@bitwarden/common/vault/enums";
 import { DialogService, ToastOptions, ToastService } from "@bitwarden/components";
+import { CredentialGeneratorHistoryDialogComponent } from "@bitwarden/generator-components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 import { KeyService, BiometricStateService } from "@bitwarden/key-management";
 
@@ -324,10 +325,7 @@ export class AppComponent implements OnInit, OnDestroy {
             await this.deleteAccount();
             break;
           case "openPasswordHistory":
-            await this.openModal<PasswordGeneratorHistoryComponent>(
-              PasswordGeneratorHistoryComponent,
-              this.passwordHistoryRef,
-            );
+            await this.openGeneratorHistory();
             break;
           case "showToast":
             this.toastService._showToast(message);
@@ -558,6 +556,21 @@ export class AppComponent implements OnInit, OnDestroy {
     });
   }
 
+  async openGeneratorHistory() {
+    const isGeneratorSwapEnabled = await this.configService.getFeatureFlag(
+      FeatureFlag.GeneratorToolsModernization,
+    );
+    if (isGeneratorSwapEnabled) {
+      await this.dialogService.open(CredentialGeneratorHistoryDialogComponent);
+      return;
+    }
+
+    await this.openModal<PasswordGeneratorHistoryComponent>(
+      PasswordGeneratorHistoryComponent,
+      this.passwordHistoryRef,
+    );
+  }
+
   private async updateAppMenu() {
     let updateRequest: MenuUpdateRequest;
     const stateAccounts = await firstValueFrom(this.accountService.accounts$);

apps/desktop/src/app/tools/generator/credential-generator.component.html

@@ -2,6 +2,18 @@
   <span bitDialogTitle>{{ "generator" | i18n }}</span>
   <ng-container bitDialogContent>
     <tools-credential-generator />
+    <bit-item>
+      <button
+        type="button"
+        bitLink
+        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>
     <button type="button" bitButton bitFormButton buttonType="secondary" bitDialogClose>

apps/desktop/src/app/tools/generator/credential-generator.component.ts

@@ -1,13 +1,37 @@
 import { Component } from "@angular/core";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { ButtonModule, DialogModule } from "@bitwarden/components";
-import { GeneratorModule } from "@bitwarden/generator-components";
+import {
+  ButtonModule,
+  DialogModule,
+  DialogService,
+  ItemModule,
+  LinkModule,
+} from "@bitwarden/components";
+import {
+  CredentialGeneratorHistoryDialogComponent,
+  GeneratorModule,
+} from "@bitwarden/generator-components";
 
 @Component({
   standalone: true,
   selector: "credential-generator",
   templateUrl: "credential-generator.component.html",
-  imports: [DialogModule, ButtonModule, JslibModule, GeneratorModule],
+  imports: [
+    DialogModule,
+    ButtonModule,
+    JslibModule,
+    GeneratorModule,
+    ItemModule,
+    ButtonModule,
+    LinkModule,
+  ],
 })
-export class CredentialGeneratorComponent {}
+export class CredentialGeneratorComponent {
+  constructor(private dialogService: DialogService) {}
+
+  openHistoryDialog = () => {
+    // open history dialog
+    this.dialogService.open(CredentialGeneratorHistoryDialogComponent);
+  };
+}

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

@@ -1371,6 +1371,15 @@
   "passwordHistory": {
     "message": "Password history"
   },
+  "generatorHistory": {
+    "message": "Generator history"
+  },
+  "clearGeneratorHistoryTitle": {
+    "message": "Clear generator history"
+  },
+  "cleargGeneratorHistoryDescription": {
+    "message": "If you continue, all entries will be permanently deleted from generator's history. Are you sure you want to continue?"
+  },
   "clear": {
     "message": "Clear",
     "description": "To clear something out. example: To clear browser history."
@@ -1378,6 +1387,15 @@
   "noPasswordsInList": {
     "message": "There are no passwords to list."
   },
+  "clearHistory": {
+    "message": "Clear history"
+  },
+  "nothingToShow": {
+    "message": "Nothing to show"
+  },
+  "nothingGeneratedRecently": {
+    "message": "You haven't generated anything recently"
+  },
   "undo": {
     "message": "Undo"
   },