[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/web/src/app/tools/credential-generator/credential-generator.component.html

@@ -2,4 +2,16 @@
 
 <bit-container>
   <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>
 </bit-container>

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

@@ -1,6 +1,10 @@
 import { Component } from "@angular/core";
 
-import { GeneratorModule } from "@bitwarden/generator-components";
+import { ButtonModule, DialogService, ItemModule, LinkModule } from "@bitwarden/components";
+import {
+  CredentialGeneratorHistoryDialogComponent,
+  GeneratorModule,
+} from "@bitwarden/generator-components";
 
 import { HeaderModule } from "../../layouts/header/header.module";
 import { SharedModule } from "../../shared";
@@ -9,6 +13,12 @@ import { SharedModule } from "../../shared";
   standalone: true,
   selector: "credential-generator",
   templateUrl: "credential-generator.component.html",
-  imports: [SharedModule, HeaderModule, GeneratorModule],
+  imports: [SharedModule, HeaderModule, GeneratorModule, ItemModule, ButtonModule, LinkModule],
 })
-export class CredentialGeneratorComponent {}
+export class CredentialGeneratorComponent {
+  constructor(private dialogService: DialogService) {}
+
+  openHistoryDialog = () => {
+    this.dialogService.open(CredentialGeneratorHistoryDialogComponent);
+  };
+}

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

@@ -1642,9 +1642,27 @@
   "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?"
+  },
   "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"
+  },
   "clear": {
     "message": "Clear",
     "description": "To clear something out. Example: To clear browser history."