[PM-14190] Replace history card with item component (#11775)

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

@@ -1,23 +1,22 @@
-<bit-card *ngFor="let credential of credentials$ | async" class="tw-mb-2">
+<bit-item *ngFor="let credential of credentials$ | async">
-  <div class="tw-flex tw-justify-between tw-items-center">
+  <bit-item-content>
-    <div class="tw-flex tw-flex-col">
+    <bit-color-password class="tw-font-mono" [password]="credential.credential" />
-      <bit-color-password
+    <div slot="secondary">
-        class="tw-font-mono"
+      {{ credential.generationDate | date: "medium" }}
-        [password]="credential.credential"
-      ></bit-color-password>
-      <span class="tw-text-muted" bitTypography="body1">{{
-        credential.generationDate | date: "medium"
-      }}</span>
     </div>
+  </bit-item-content>
+  <ng-container slot="end">
+    <bit-item-action>
       <button
-      bitIconButton="bwi-clone"
-      bitSuffix
-      size="small"
         type="button"
+        bitIconButton="bwi-clone"
         [appCopyClick]="credential.credential"
-      [ariaLabel]="'copyPassword' | i18n"
+        [valueLabel]="getGeneratedValueText(credential)"
-      [appA11yTitle]="'copyPassword' | i18n"
+        [appA11yTitle]="getCopyText(credential)"
         showToast
-    ></button>
+      >
-  </div>
+        {{ getCopyText(credential) }}
-</bit-card>
+      </button>
+    </bit-item-action>
+  </ng-container>
+</bit-item>

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

@@ -8,15 +8,18 @@ import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { UserId } from "@bitwarden/common/types/guid";
 import {
-  CardComponent,
   ColorPasswordModule,
   IconButtonModule,
+  ItemModule,
   NoItemsModule,
   SectionComponent,
   SectionHeaderComponent,
 } from "@bitwarden/components";
+import { CredentialGeneratorService } from "@bitwarden/generator-core";
 import { GeneratedCredential, GeneratorHistoryService } from "@bitwarden/generator-history";
 
+import { GeneratorModule } from "./generator.module";
+
 @Component({
   standalone: true,
   selector: "bit-credential-generator-history",
@@ -28,9 +31,10 @@ import { GeneratedCredential, GeneratorHistoryService } from "@bitwarden/generat
     NoItemsModule,
     JslibModule,
     RouterLink,
-    CardComponent,
+    ItemModule,
     SectionComponent,
     SectionHeaderComponent,
+    GeneratorModule,
   ],
 })
 export class CredentialGeneratorHistoryComponent {
@@ -39,6 +43,7 @@ export class CredentialGeneratorHistoryComponent {
 
   constructor(
     private accountService: AccountService,
+    private generatorService: CredentialGeneratorService,
     private history: GeneratorHistoryService,
   ) {
     this.accountService.activeAccount$
@@ -53,8 +58,18 @@ export class CredentialGeneratorHistoryComponent {
       .pipe(
         takeUntilDestroyed(),
         switchMap((id) => id && this.history.credentials$(id)),
-        map((credentials) => credentials),
+        map((credentials) => credentials.filter((c) => (c.credential ?? "") !== "")),
       )
       .subscribe(this.credentials$);
   }
+
+  protected getCopyText(credential: GeneratedCredential) {
+    const info = this.generatorService.algorithm(credential.category);
+    return info.copy;
+  }
+
+  protected getGeneratedValueText(credential: GeneratedCredential) {
+    const info = this.generatorService.algorithm(credential.category);
+    return info.generatedValue;
+  }
 }