diff --git a/apps/web/src/app/components/dynamic-avatar.component.ts b/apps/web/src/app/components/dynamic-avatar.component.ts index ccc1c57cf4..e9eea873a5 100644 --- a/apps/web/src/app/components/dynamic-avatar.component.ts +++ b/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: ` - + @@ -42,7 +42,7 @@ class="tw-flex tw-items-center tw-py-1 tw-px-4 tw-leading-tight tw-text-info" appStopProp > - +
{{ "loggedInAs" | i18n }} diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/shared/header.stories.ts b/bitwarden_license/bit-web/src/app/secrets-manager/shared/header.stories.ts index 43a4227077..8ded21b956 100644 --- a/bitwarden_license/bit-web/src/app/secrets-manager/shared/header.stories.ts +++ b/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: ``, +}) +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 }, { diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/shared/sm-shared.module.ts b/bitwarden_license/bit-web/src/app/secrets-manager/shared/sm-shared.module.ts index 6fa697a5b8..49622c9110 100644 --- a/bitwarden_license/bit-web/src/app/secrets-manager/shared/sm-shared.module.ts +++ b/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: [