[PM-8277] - Password generator history component (#10921)

apps/browser/src/_locales/en/messages.json

@@ -1796,6 +1796,15 @@
   "noPasswordsInList": {
     "message": "There are no passwords to list."
   },
+  "clearHistory": {
+    "message": "Clear history"
+  },
+  "noPasswordsToShow": {
+    "message": "No passwords to show"
+  },
+  "noRecentlyGeneratedPassword": {
+    "message": "You haven't generated a password recently"
+  },
   "remove": {
     "message": "Remove"
   },

apps/browser/src/popup/app-routing.module.ts

@@ -53,6 +53,7 @@ import { PremiumV2Component } from "../billing/popup/settings/premium-v2.compone
 import { PremiumComponent } from "../billing/popup/settings/premium.component";
 import BrowserPopupUtils from "../platform/popup/browser-popup-utils";
 import { popupRouterCacheGuard } from "../platform/popup/view-cache/popup-router-cache.service";
+import { CredentialGeneratorHistoryComponent } from "../tools/popup/generator/credential-generator-history.component";
 import { CredentialGeneratorComponent } from "../tools/popup/generator/credential-generator.component";
 import { GeneratorComponent } from "../tools/popup/generator/generator.component";
 import { PasswordGeneratorHistoryComponent } from "../tools/popup/generator/password-generator-history.component";
@@ -276,12 +277,11 @@ const routes: Routes = [
     canActivate: [authGuard],
     data: { state: "generator" },
   },
-  {
+  ...extensionRefreshSwap(PasswordGeneratorHistoryComponent, CredentialGeneratorHistoryComponent, {
     path: "generator-history",
-    component: PasswordGeneratorHistoryComponent,
     canActivate: [authGuard],
     data: { state: "generator-history" },
-  },
+  }),
   ...extensionRefreshSwap(ImportBrowserComponent, ImportBrowserV2Component, {
     path: "import",
     canActivate: [authGuard],

apps/browser/src/tools/popup/generator/credential-generator-history.component.html

@@ -0,0 +1,20 @@
+<popup-page>
+  <popup-header slot="header" [pageTitle]="'passwordHistory' | i18n" showBackButton>
+    <ng-container slot="end">
+      <app-pop-out></app-pop-out>
+    </ng-container>
+  </popup-header>
+  <bit-empty-credential-history *ngIf="!(hasHistory$ | async)" style="display: contents" />
+  <bit-credential-generator-history *ngIf="hasHistory$ | async" />
+  <popup-footer slot="footer">
+    <button
+      [disabled]="!(hasHistory$ | async)"
+      bitButton
+      type="submit"
+      buttonType="primary"
+      (click)="clear()"
+    >
+      {{ "clearHistory" | i18n }}
+    </button>
+  </popup-footer>
+</popup-page>

apps/browser/src/tools/popup/generator/credential-generator-history.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, ContainerComponent } from "@bitwarden/components";
+import {
+  CredentialGeneratorHistoryComponent as CredentialGeneratorHistoryToolsComponent,
+  EmptyCredentialHistoryComponent,
+} from "@bitwarden/generator-components";
+import { GeneratorHistoryService } from "@bitwarden/generator-history";
+
+import { PopOutComponent } from "../../../platform/popup/components/pop-out.component";
+import { PopupFooterComponent } from "../../../platform/popup/layout/popup-footer.component";
+import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
+import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.component";
+
+@Component({
+  selector: "app-credential-generator-history",
+  templateUrl: "credential-generator-history.component.html",
+  standalone: true,
+  imports: [
+    ButtonModule,
+    CommonModule,
+    ContainerComponent,
+    JslibModule,
+    PopOutComponent,
+    PopupHeaderComponent,
+    PopupPageComponent,
+    CredentialGeneratorHistoryToolsComponent,
+    EmptyCredentialHistoryComponent,
+    PopupFooterComponent,
+  ],
+})
+export class CredentialGeneratorHistoryComponent {
+  protected readonly hasHistory$ = new BehaviorSubject<boolean>(false);
+  protected readonly userId$ = new BehaviorSubject<UserId>(null);
+
+  constructor(
+    private accountService: AccountService,
+    private history: GeneratorHistoryService,
+  ) {
+    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 () => {
+    await this.history.clear(await firstValueFrom(this.userId$));
+  };
+}