[SM-688] use dynamic-avatar in SM (#5203)

* make dynamic-avatar standalone; use in SM

* fix broken story

apps/web/src/app/components/dynamic-avatar.component.ts

@@ -2,9 +2,14 @@ import { Component, Input, OnDestroy } from "@angular/core";
 import { Observable, Subject } from "rxjs";
 
 import { AvatarUpdateService } from "@bitwarden/common/abstractions/account/avatar-update.service";
+
+import { SharedModule } from "../shared";
+
 type SizeTypes = "xlarge" | "large" | "default" | "small" | "xsmall";
 @Component({
   selector: "dynamic-avatar",
+  standalone: true,
+  imports: [SharedModule],
   template: `<span [title]="title">
     <bit-avatar
       appStopClick

apps/web/src/app/shared/loose-components.module.ts

@@ -121,6 +121,7 @@ import { SharedModule } from "./shared.module";
     RegisterFormModule,
     ProductSwitcherModule,
     ChangeKdfModule,
+    DynamicAvatarComponent,
   ],
   declarations: [
     PremiumBadgeComponent,
@@ -145,7 +146,6 @@ import { SharedModule } from "./shared.module";
     DeauthorizeSessionsComponent,
     DeleteAccountComponent,
     DomainRulesComponent,
-    DynamicAvatarComponent,
     EmergencyAccessAddEditComponent,
     EmergencyAccessAttachmentsComponent,
     EmergencyAccessComponent,

bitwarden_license/bit-web/src/app/secrets-manager/shared/header.component.html

@@ -33,7 +33,7 @@
             [bitMenuTriggerFor]="accountMenu"
             class="tw-border-0 tw-bg-transparent tw-p-0"
           >
-            <bit-avatar [id]="account.userId" [text]="account | userName"></bit-avatar>
+            <dynamic-avatar [id]="account.userId" [text]="account | userName"></dynamic-avatar>
           </button>
 
           <bit-menu #accountMenu>
@@ -42,7 +42,7 @@
                 class="tw-flex tw-items-center tw-py-1 tw-px-4 tw-leading-tight tw-text-info"
                 appStopProp
               >
-                <bit-avatar [text]="account | userName" [id]="account.userId"></bit-avatar>
+                <dynamic-avatar [id]="account.userId" [text]="account | userName"></dynamic-avatar>
                 <div class="tw-ml-2 tw-block tw-overflow-hidden tw-whitespace-nowrap">
                   <span>{{ "loggedInAs" | i18n }}</span>
                   <small class="tw-block tw-overflow-hidden tw-whitespace-nowrap tw-text-muted">

bitwarden_license/bit-web/src/app/secrets-manager/shared/header.stories.ts

@@ -1,7 +1,7 @@
 import { Component, Injectable } from "@angular/core";
 import { RouterModule } from "@angular/router";
 import { Meta, Story, moduleMetadata, componentWrapperDecorator } from "@storybook/angular";
-import { BehaviorSubject } from "rxjs";
+import { BehaviorSubject, combineLatest, map } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
@@ -22,7 +22,9 @@ import { PreloadedEnglishI18nModule } from "@bitwarden/web-vault/app/tests/prelo
 
 import { HeaderComponent } from "./header.component";
 
-@Injectable()
+@Injectable({
+  providedIn: "root",
+})
 class MockStateService {
   activeAccount$ = new BehaviorSubject("1").asObservable();
   accounts$ = new BehaviorSubject({ "1": { profile: { name: "Foo" } } }).asObservable();
@@ -40,6 +42,22 @@ class MockMessagingService implements MessagingService {
 })
 class MockProductSwitcher {}
 
+@Component({
+  selector: "dynamic-avatar",
+  template: `<bit-avatar [text]="name$ | async"></bit-avatar>`,
+})
+class MockDynamicAvatar {
+  protected name$ = combineLatest([
+    this.stateService.accounts$,
+    this.stateService.activeAccount$,
+  ]).pipe(
+    map(
+      ([accounts, activeAccount]) => accounts[activeAccount as keyof typeof accounts].profile.name
+    )
+  );
+  constructor(private stateService: MockStateService) {}
+}
+
 export default {
   title: "Web/Header",
   component: HeaderComponent,
@@ -71,7 +89,7 @@ export default {
         NavigationModule,
         PreloadedEnglishI18nModule,
       ],
-      declarations: [HeaderComponent, MockProductSwitcher],
+      declarations: [HeaderComponent, MockProductSwitcher, MockDynamicAvatar],
       providers: [
         { provide: StateService, useClass: MockStateService },
         {

bitwarden_license/bit-web/src/app/secrets-manager/shared/sm-shared.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from "@angular/core";
 
 import { MultiSelectModule, SearchModule, NoItemsModule } from "@bitwarden/components";
 import { CoreOrganizationModule } from "@bitwarden/web-vault/app/admin-console/organizations/core";
+import { DynamicAvatarComponent } from "@bitwarden/web-vault/app/components/dynamic-avatar.component";
 import { ProductSwitcherModule } from "@bitwarden/web-vault/app/layouts/product-switcher/product-switcher.module";
 import { SharedModule } from "@bitwarden/web-vault/app/shared";
 
@@ -20,6 +21,7 @@ import { SecretsListComponent } from "./secrets-list.component";
     MultiSelectModule,
     CoreOrganizationModule,
     NoItemsModule,
+    DynamicAvatarComponent,
     SearchModule,
   ],
   exports: [