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

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;
+  }
 }