[PM-16792] [PM-16822] Encapsulate encryptor and state provision within UserStateSubject (#13195)

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

@@ -1,21 +1,23 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { CommonModule } from "@angular/common";
-import { Component } from "@angular/core";
-import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
-import { RouterLink } from "@angular/router";
-import { BehaviorSubject, distinctUntilChanged, map, switchMap } from "rxjs";
+import { Component, Input, OnChanges, SimpleChanges, OnInit, OnDestroy } from "@angular/core";
+import { BehaviorSubject, ReplaySubject, Subject, map, switchMap, takeUntil, tap } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { Account } from "@bitwarden/common/auth/abstractions/account.service";
+import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
+import {
+  SemanticLogger,
+  disabledSemanticLoggerProvider,
+  ifEnabledSemanticLoggerProvider,
+} from "@bitwarden/common/tools/log";
 import { UserId } from "@bitwarden/common/types/guid";
 import {
   ColorPasswordModule,
   IconButtonModule,
   ItemModule,
   NoItemsModule,
-  SectionComponent,
-  SectionHeaderComponent,
 } from "@bitwarden/components";
 import { CredentialGeneratorService } from "@bitwarden/generator-core";
 import { GeneratedCredential, GeneratorHistoryService } from "@bitwarden/generator-history";
@@ -32,35 +34,61 @@ import { GeneratorModule } from "./generator.module";
     IconButtonModule,
     NoItemsModule,
     JslibModule,
-    RouterLink,
     ItemModule,
-    SectionComponent,
-    SectionHeaderComponent,
     GeneratorModule,
   ],
 })
-export class CredentialGeneratorHistoryComponent {
-  protected readonly userId$ = new BehaviorSubject<UserId>(null);
+export class CredentialGeneratorHistoryComponent implements OnChanges, OnInit, OnDestroy {
+  private readonly destroyed = new Subject<void>();
   protected readonly credentials$ = new BehaviorSubject<GeneratedCredential[]>([]);
 
   constructor(
-    private accountService: AccountService,
     private generatorService: CredentialGeneratorService,
     private history: GeneratorHistoryService,
-  ) {
-    this.accountService.activeAccount$
-      .pipe(
-        takeUntilDestroyed(),
-        map(({ id }) => id),
-        distinctUntilChanged(),
-      )
-      .subscribe(this.userId$);
+    private logService: LogService,
+  ) {}
 
-    this.userId$
+  @Input({ required: true })
+  account: Account;
+
+  protected account$ = new ReplaySubject<Account>(1);
+
+  /** Send structured debug logs from the credential generator component
+   *  to the debugger console.
+   *
+   *  @warning this may reveal sensitive information in plaintext.
+   */
+  @Input()
+  debug: boolean = false;
+
+  // this `log` initializer is overridden in `ngOnInit`
+  private log: SemanticLogger = disabledSemanticLoggerProvider({});
+
+  async ngOnChanges(changes: SimpleChanges) {
+    const account = changes?.account;
+    if (account?.previousValue?.id !== account?.currentValue?.id) {
+      this.log.debug(
+        {
+          previousUserId: account?.previousValue?.id as UserId,
+          currentUserId: account?.currentValue?.id as UserId,
+        },
+        "account input change detected",
+      );
+      this.account$.next(account.currentValue ?? this.account);
+    }
+  }
+
+  ngOnInit() {
+    this.log = ifEnabledSemanticLoggerProvider(this.debug, this.logService, {
+      type: "CredentialGeneratorComponent",
+    });
+
+    this.account$
       .pipe(
-        takeUntilDestroyed(),
-        switchMap((id) => id && this.history.credentials$(id)),
+        tap((account) => this.log.info({ accountId: account.id }, "loading credential history")),
+        switchMap((account) => this.history.credentials$(account.id)),
         map((credentials) => credentials.filter((c) => (c.credential ?? "") !== "")),
+        takeUntil(this.destroyed),
       )
       .subscribe(this.credentials$);
   }
@@ -74,4 +102,11 @@ export class CredentialGeneratorHistoryComponent {
     const info = this.generatorService.algorithm(credential.category);
     return info.credentialType;
   }
+
+  ngOnDestroy() {
+    this.destroyed.next();
+    this.destroyed.complete();
+
+    this.log.debug("component destroyed");
+  }
 }