From 466f191281369188aac769de139c6b6713e40c92 Mon Sep 17 00:00:00 2001
From: William Martin <contact@willmartian.com>
Date: Sat, 8 Feb 2025 23:52:38 -0500
Subject: [PATCH 1/2] fix web header stories

---
 .../layouts/header/web-header.skip-stories.ts | 232 ----------------
 .../app/layouts/header/web-header.stories.ts  | 258 ++++++++++++++++++
 2 files changed, 258 insertions(+), 232 deletions(-)
 delete mode 100644 apps/web/src/app/layouts/header/web-header.skip-stories.ts
 create mode 100644 apps/web/src/app/layouts/header/web-header.stories.ts

diff --git a/apps/web/src/app/layouts/header/web-header.skip-stories.ts b/apps/web/src/app/layouts/header/web-header.skip-stories.ts
deleted file mode 100644
index 8db4aea3061..00000000000
--- a/apps/web/src/app/layouts/header/web-header.skip-stories.ts
+++ /dev/null
@@ -1,232 +0,0 @@
-// import { CommonModule } from "@angular/common";
-// import { Component, importProvidersFrom, Injectable, Input } from "@angular/core";
-// import { RouterModule } from "@angular/router";
-// import {
-//   applicationConfig,
-//   componentWrapperDecorator,
-//   Meta,
-//   moduleMetadata,
-//   Story,
-// } from "@storybook/angular";
-// import { BehaviorSubject, combineLatest, map, of } from "rxjs";
-
-// import { JslibModule } from "@bitwarden/angular/jslib.module";
-// import { VaultTimeoutSettingsService } from "@bitwarden/common/abstractions/vault-timeout/vault-timeout-settings.service";
-// import { VaultTimeoutAction } from "@bitwarden/common/enums/vault-timeout-action.enum";
-// import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
-// import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-// import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
-// import {
-//   AvatarModule,
-//   BreadcrumbsModule,
-//   ButtonModule,
-//   IconButtonModule,
-//   IconModule,
-//   InputModule,
-//   MenuModule,
-//   NavigationModule,
-//   TabsModule,
-//   TypographyModule,
-// } from "@bitwarden/components";
-
-// import { DynamicAvatarComponent } from "../../components/dynamic-avatar.component";
-// import { PreloadedEnglishI18nModule } from "../../core/tests";
-// import { WebHeaderComponent } from "../header/web-header.component";
-
-// import { WebLayoutMigrationBannerService } from "./web-layout-migration-banner.service";
-
-// @Injectable({
-//   providedIn: "root",
-// })
-// class MockStateService {
-//   activeAccount$ = new BehaviorSubject("1").asObservable();
-//   accounts$ = new BehaviorSubject({ "1": { profile: { name: "Foo" } } }).asObservable();
-// }
-
-// class MockMessagingService implements MessagingService {
-//   send(subscriber: string, arg?: any) {
-//     alert(subscriber);
-//   }
-// }
-
-// class MockVaultTimeoutService {
-//   availableVaultTimeoutActions$() {
-//     return new BehaviorSubject([VaultTimeoutAction.Lock]).asObservable();
-//   }
-// }
-
-// class MockPlatformUtilsService {
-//   isSelfHost() {
-//     return false;
-//   }
-// }
-
-// @Component({
-//   selector: "product-switcher",
-//   template: `<button bitIconButton="bwi-filter"></button>`,
-// })
-// class MockProductSwitcher {}
-
-// @Component({
-//   selector: "dynamic-avatar",
-//   template: `<bit-avatar [text]="name$ | async"></bit-avatar>`,
-//   standalone: true,
-//   imports: [CommonModule, AvatarModule],
-// })
-// class MockDynamicAvatar implements Partial<DynamicAvatarComponent> {
-//   protected name$ = combineLatest([
-//     this.stateService.accounts$,
-//     this.stateService.activeAccount$,
-//   ]).pipe(
-//     map(
-//       ([accounts, activeAccount]) => accounts[activeAccount as keyof typeof accounts].profile.name,
-//     ),
-//   );
-
-//   @Input()
-//   text: string;
-
-//   constructor(private stateService: MockStateService) {}
-// }
-
-// export default {
-//   title: "Web/Header",
-//   component: WebHeaderComponent,
-//   decorators: [
-//     componentWrapperDecorator(
-//       (story) => `<div class="tw-min-h-screen tw-flex-1 tw-p-6 tw-text-main">${story}</div>`,
-//     ),
-//     moduleMetadata({
-//       imports: [
-//         JslibModule,
-//         AvatarModule,
-//         BreadcrumbsModule,
-//         ButtonModule,
-//         IconButtonModule,
-//         IconModule,
-//         InputModule,
-//         MenuModule,
-//         TabsModule,
-//         TypographyModule,
-//         NavigationModule,
-//         MockDynamicAvatar,
-//       ],
-//       declarations: [WebHeaderComponent, MockProductSwitcher],
-//       providers: [
-//         { provide: StateService, useClass: MockStateService },
-//         {
-//           provide: WebLayoutMigrationBannerService,
-//           useValue: {
-//             showBanner$: of(false),
-//           } as Partial<WebLayoutMigrationBannerService>,
-//         },
-//         { provide: PlatformUtilsService, useClass: MockPlatformUtilsService },
-//         { provide: VaultTimeoutSettingsService, useClass: MockVaultTimeoutService },
-//         {
-//           provide: MessagingService,
-//           useFactory: () => {
-//             return new MockMessagingService();
-//           },
-//         },
-//       ],
-//     }),
-//     applicationConfig({
-//       providers: [
-//         importProvidersFrom(RouterModule.forRoot([], { useHash: true })),
-//         importProvidersFrom(PreloadedEnglishI18nModule),
-//       ],
-//     }),
-//   ],
-// } as Meta;
-
-// export const KitchenSink: Story = (args) => ({
-//   props: args,
-//   template: `
-//     <app-header title="LongTitleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee" icon="bwi-bug">
-//       <bit-breadcrumbs slot="breadcrumbs">
-//         <bit-breadcrumb>Foo</bit-breadcrumb>
-//         <bit-breadcrumb>Bar</bit-breadcrumb>
-//       </bit-breadcrumbs>
-//       <input
-//         bitInput
-//         placeholder="Ask Jeeves"
-//         type="text"
-//       />
-//       <button bitButton buttonType="primary">New</button>
-//       <button bitButton slot="secondary">Click Me 🎉</button>
-//       <bit-tab-nav-bar slot="tabs">
-//         <bit-tab-link route="">Foo</bit-tab-link>
-//         <bit-tab-link route="#bar">Bar</bit-tab-link>
-//       </bit-tab-nav-bar>
-//     </app-header>
-//   `,
-// });
-
-// export const Basic: Story = (args) => ({
-//   props: args,
-//   template: `
-//     <app-header title="Foobar" icon="bwi-bug"></app-header>
-//   `,
-// });
-
-// export const WithLongTitle: Story = (args) => ({
-//   props: args,
-//   template: `
-//     <app-header title="LongTitleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee" icon="bwi-bug"></app-header>
-//   `,
-// });
-
-// export const WithBreadcrumbs: Story = (args) => ({
-//   props: args,
-//   template: `
-//     <app-header title="Foobar" icon="bwi-bug" class="tw-text-main">
-//       <bit-breadcrumbs slot="breadcrumbs">
-//         <bit-breadcrumb>Foo</bit-breadcrumb>
-//         <bit-breadcrumb>Bar</bit-breadcrumb>
-//       </bit-breadcrumbs>
-//     </app-header>
-//   `,
-// });
-
-// export const WithSearch: Story = (args) => ({
-//   props: args,
-//   template: `
-//     <app-header title="Foobar" icon="bwi-bug" class="tw-text-main">
-//       <input
-//         bitInput
-//         placeholder="Ask Jeeves"
-//         type="text"
-//       />
-//     </app-header>
-//   `,
-// });
-
-// export const WithSecondaryContent: Story = (args) => ({
-//   props: args,
-//   template: `
-//     <app-header title="Foobar" icon="bwi-bug" class="tw-text-main">
-//       <button bitButton slot="secondary">Click Me 🎉</button>
-//     </app-header>
-//   `,
-// });
-
-// export const WithTabs: Story = (args) => ({
-//   props: args,
-//   template: `
-//     <app-header title="Foobar" icon="bwi-bug" class="tw-text-main">
-//       <bit-tab-nav-bar slot="tabs">
-//         <bit-tab-link route="">Foo</bit-tab-link>
-//         <bit-tab-link route="#bar">Bar</bit-tab-link>
-//       </bit-tab-nav-bar>
-//     </app-header>
-//   `,
-// });
-
-// export const WithTitleSuffixComponent: Story = (args) => ({
-//   props: args,
-//   template: `
-//     <app-header title="Foobar" icon="bwi-bug" class="tw-text-main">
-//       <ng-container slot="title-suffix"><i class="bwi bwi-spinner bwi-spin"></i></ng-container>
-//     </app-header>
-//   `,
-// });
diff --git a/apps/web/src/app/layouts/header/web-header.stories.ts b/apps/web/src/app/layouts/header/web-header.stories.ts
new file mode 100644
index 00000000000..da00d75e416
--- /dev/null
+++ b/apps/web/src/app/layouts/header/web-header.stories.ts
@@ -0,0 +1,258 @@
+import { CommonModule } from "@angular/common";
+import { Component, importProvidersFrom, Injectable, Input } from "@angular/core";
+import { RouterModule } from "@angular/router";
+import {
+  applicationConfig,
+  componentWrapperDecorator,
+  Meta,
+  moduleMetadata,
+  StoryObj,
+} from "@storybook/angular";
+import { BehaviorSubject, combineLatest, map, of } from "rxjs";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { VaultTimeoutSettingsService } from "@bitwarden/common/abstractions/vault-timeout/vault-timeout-settings.service";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { VaultTimeoutAction } from "@bitwarden/common/enums/vault-timeout-action.enum";
+import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
+import {
+  AvatarModule,
+  BreadcrumbsModule,
+  ButtonModule,
+  IconButtonModule,
+  IconModule,
+  InputModule,
+  MenuModule,
+  NavigationModule,
+  TabsModule,
+  TypographyModule,
+} from "@bitwarden/components";
+
+import { DynamicAvatarComponent } from "../../components/dynamic-avatar.component";
+import { PreloadedEnglishI18nModule } from "../../core/tests";
+import { WebHeaderComponent } from "../header/web-header.component";
+
+import { WebLayoutMigrationBannerService } from "./web-layout-migration-banner.service";
+
+@Injectable({
+  providedIn: "root",
+})
+class MockStateService {
+  activeAccount$ = new BehaviorSubject("1").asObservable();
+  accounts$ = new BehaviorSubject({ "1": { profile: { name: "Foo" } } }).asObservable();
+}
+
+@Component({
+  selector: "product-switcher",
+  template: `<button type="button" bitIconButton="bwi-filter"></button>`,
+})
+class MockProductSwitcher {}
+
+@Component({
+  selector: "dynamic-avatar",
+  template: `<bit-avatar [text]="name$ | async"></bit-avatar>`,
+  standalone: true,
+  imports: [CommonModule, AvatarModule],
+})
+class MockDynamicAvatar implements Partial<DynamicAvatarComponent> {
+  protected name$ = combineLatest([
+    this.stateService.accounts$,
+    this.stateService.activeAccount$,
+  ]).pipe(
+    map(
+      ([accounts, activeAccount]) => accounts[activeAccount as keyof typeof accounts].profile.name,
+    ),
+  );
+
+  @Input()
+  text?: string;
+
+  constructor(private stateService: MockStateService) {}
+}
+
+export default {
+  title: "Web/Header",
+  component: WebHeaderComponent,
+  decorators: [
+    componentWrapperDecorator(
+      (story) => `<div class="tw-min-h-screen tw-flex-1 tw-p-6 tw-text-main">${story}</div>`,
+    ),
+    moduleMetadata({
+      imports: [
+        JslibModule,
+        AvatarModule,
+        BreadcrumbsModule,
+        ButtonModule,
+        IconButtonModule,
+        IconModule,
+        InputModule,
+        MenuModule,
+        TabsModule,
+        TypographyModule,
+        NavigationModule,
+        MockDynamicAvatar,
+      ],
+      declarations: [WebHeaderComponent, MockProductSwitcher],
+      providers: [
+        { provide: StateService, useClass: MockStateService },
+        {
+          provide: AccountService,
+          useValue: {
+            activeAccount$: of({
+              name: "Foobar Warden",
+            }),
+          } as Partial<AccountService>,
+        },
+        {
+          provide: WebLayoutMigrationBannerService,
+          useValue: {
+            showBanner$: of(false),
+          } as Partial<WebLayoutMigrationBannerService>,
+        },
+        {
+          provide: PlatformUtilsService,
+          useValue: {
+            isSelfHost() {
+              return false;
+            },
+          } as Partial<PlatformUtilsService>,
+        },
+        {
+          provide: VaultTimeoutSettingsService,
+          useValue: {
+            availableVaultTimeoutActions$() {
+              return new BehaviorSubject([VaultTimeoutAction.Lock]).asObservable();
+            },
+          } as Partial<VaultTimeoutSettingsService>,
+        },
+        {
+          provide: MessagingService,
+          useValue: {
+            send: (...args: any[]) => {
+              // eslint-disable-next-line no-console
+              console.log("MessagingService.send", args);
+            },
+          } as Partial<MessagingService>,
+        },
+      ],
+    }),
+    applicationConfig({
+      providers: [
+        importProvidersFrom(RouterModule.forRoot([], { useHash: true })),
+        importProvidersFrom(PreloadedEnglishI18nModule),
+      ],
+    }),
+  ],
+} as Meta;
+
+type Story = StoryObj<WebHeaderComponent>;
+
+export const KitchenSink: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+          <app-header title="LongTitleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee" icon="bwi-bug">
+            <bit-breadcrumbs slot="breadcrumbs">
+              <bit-breadcrumb>Foo</bit-breadcrumb>
+              <bit-breadcrumb>Bar</bit-breadcrumb>
+            </bit-breadcrumbs>
+            <input
+              bitInput
+              placeholder="Ask Jeeves"
+              type="text"
+            />
+            <button bitButton buttonType="primary">New</button>
+            <button bitButton slot="secondary">Click Me 🎉</button>
+            <bit-tab-nav-bar slot="tabs">
+              <bit-tab-link route="">Foo</bit-tab-link>
+              <bit-tab-link route="#bar">Bar</bit-tab-link>
+            </bit-tab-nav-bar>
+          </app-header>
+        `,
+  }),
+};
+
+export const Basic: Story = {
+  render: (args: any) => ({
+    props: args,
+    template: `
+    <app-header title="Foobar" icon="bwi-bug"></app-header>
+  `,
+  }),
+};
+
+export const WithLongTitle: Story = {
+  render: (arg: any) => ({
+    props: arg,
+    template: `
+    <app-header title="LongTitleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee" icon="bwi-bug"></app-header>
+  `,
+  }),
+};
+
+export const WithBreadcrumbs: Story = {
+  render: (args: any) => ({
+    props: args,
+    template: `
+    <app-header title="Foobar" icon="bwi-bug" class="tw-text-main">
+      <bit-breadcrumbs slot="breadcrumbs">
+        <bit-breadcrumb>Foo</bit-breadcrumb>
+        <bit-breadcrumb>Bar</bit-breadcrumb>
+      </bit-breadcrumbs>
+    </app-header>
+  `,
+  }),
+};
+
+export const WithSearch: Story = {
+  render: (args: any) => ({
+    props: args,
+    template: `
+    <app-header title="Foobar" icon="bwi-bug" class="tw-text-main">
+      <input
+        bitInput
+        placeholder="Ask Jeeves"
+        type="text"
+      />
+    </app-header>
+  `,
+  }),
+};
+
+export const WithSecondaryContent: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+    <app-header title="Foobar" icon="bwi-bug" class="tw-text-main">
+      <button bitButton slot="secondary">Click Me 🎉</button>
+    </app-header>
+  `,
+  }),
+};
+
+export const WithTabs: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+    <app-header title="Foobar" icon="bwi-bug" class="tw-text-main">
+      <bit-tab-nav-bar slot="tabs">
+        <bit-tab-link route="">Foo</bit-tab-link>
+        <bit-tab-link route="#bar">Bar</bit-tab-link>
+      </bit-tab-nav-bar>
+    </app-header>
+  `,
+  }),
+};
+
+export const WithTitleSuffixComponent: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+    <app-header title="Foobar" icon="bwi-bug" class="tw-text-main">
+      <ng-container slot="title-suffix"><i class="bwi bwi-spinner bwi-spin"></i></ng-container>
+    </app-header>
+  `,
+  }),
+};

From 741f5815c5188cd862c1fcda3921410d2e8b13cc Mon Sep 17 00:00:00 2001
From: William Martin <contact@willmartian.com>
Date: Sun, 9 Feb 2025 22:36:27 -0500
Subject: [PATCH 2/2] prevent title suffix slot content from being truncated

---
 .../src/app/layouts/header/web-header.component.html   | 10 ++++++----
 apps/web/src/app/layouts/header/web-header.stories.ts  |  4 +++-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/app/layouts/header/web-header.component.html b/apps/web/src/app/layouts/header/web-header.component.html
index 7cba19b29ad..28d786f2d64 100644
--- a/apps/web/src/app/layouts/header/web-header.component.html
+++ b/apps/web/src/app/layouts/header/web-header.component.html
@@ -12,12 +12,14 @@
       <h1
         bitTypography="h1"
         noMargin
-        class="tw-m-0 tw-mr-2 tw-truncate tw-leading-10"
+        class="tw-m-0 tw-mr-2 tw-leading-10 tw-flex"
         [title]="title || (routeData.titleId | i18n)"
       >
-        <i *ngIf="icon" class="bwi {{ icon }}" aria-hidden="true"></i>
-        {{ title || (routeData.titleId | i18n) }}
-        <ng-content select="[slot=title-suffix]"></ng-content>
+        <div class="tw-truncate">
+          <i *ngIf="icon" class="bwi {{ icon }}" aria-hidden="true"></i>
+          {{ title || (routeData.titleId | i18n) }}
+        </div>
+        <div><ng-content select="[slot=title-suffix]"></ng-content></div>
       </h1>
     </div>
     <div class="tw-ml-auto tw-flex tw-flex-col tw-gap-4">
diff --git a/apps/web/src/app/layouts/header/web-header.stories.ts b/apps/web/src/app/layouts/header/web-header.stories.ts
index da00d75e416..80e98ba7a57 100644
--- a/apps/web/src/app/layouts/header/web-header.stories.ts
+++ b/apps/web/src/app/layouts/header/web-header.stories.ts
@@ -187,7 +187,9 @@ export const WithLongTitle: Story = {
   render: (arg: any) => ({
     props: arg,
     template: `
-    <app-header title="LongTitleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee" icon="bwi-bug"></app-header>
+    <app-header title="LongTitleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee" icon="bwi-bug">
+        <ng-container slot="title-suffix"><i class="bwi bwi-key"></i></ng-container>
+    </app-header>
   `,
   }),
 };