Move SM header into web (#6976)

apps/web/src/app/layouts/header/header.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from "@angular/core";
+
+import { DynamicAvatarComponent } from "../../components/dynamic-avatar.component";
+import { SharedModule } from "../../shared";
+import { ProductSwitcherModule } from "../product-switcher/product-switcher.module";
+
+import { WebHeaderComponent } from "./web-header.component";
+
+@NgModule({
+  imports: [SharedModule, DynamicAvatarComponent, ProductSwitcherModule],
+  declarations: [WebHeaderComponent],
+  exports: [WebHeaderComponent],
+})
+export class HeaderModule {}

apps/web/src/app/layouts/header/web-header.component.ts

@@ -10,10 +10,10 @@ import { StateService } from "@bitwarden/common/platform/abstractions/state.serv
 import { AccountProfile } from "@bitwarden/common/platform/models/domain/account";
 
 @Component({
-  selector: "sm-header",
+  selector: "app-header",
-  templateUrl: "./header.component.html",
+  templateUrl: "./web-header.component.html",
 })
-export class HeaderComponent {
+export class WebHeaderComponent {
   /**
    * Custom title that overrides the route data `titleId`
    */

apps/web/src/app/layouts/header/web-header.stories.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from "@angular/common";
 import { Component, Injectable, importProvidersFrom } from "@angular/core";
 import { RouterModule } from "@angular/router";
 import {
@@ -27,9 +28,9 @@ import {
   TypographyModule,
   InputModule,
 } from "@bitwarden/components";
-import { PreloadedEnglishI18nModule } from "@bitwarden/web-vault/app/core/tests";
 
-import { HeaderComponent } from "./header.component";
+import { PreloadedEnglishI18nModule } from "../../core/tests";
+import { WebHeaderComponent } from "../header/web-header.component";
 
 @Injectable({
   providedIn: "root",
@@ -66,6 +67,8 @@ class MockProductSwitcher {}
 @Component({
   selector: "dynamic-avatar",
   template: `<bit-avatar [text]="name$ | async"></bit-avatar>`,
+  standalone: true,
+  imports: [CommonModule, AvatarModule],
 })
 class MockDynamicAvatar {
   protected name$ = combineLatest([
@@ -81,7 +84,7 @@ class MockDynamicAvatar {
 
 export default {
   title: "Web/Header",
-  component: HeaderComponent,
+  component: WebHeaderComponent,
   decorators: [
     componentWrapperDecorator(
       (story) => `<div class="tw-min-h-screen tw-flex-1 tw-p-6 tw-text-main">${story}</div>`,
@@ -89,7 +92,6 @@ export default {
     moduleMetadata({
       imports: [
         JslibModule,
-        RouterModule,
         AvatarModule,
         BreadcrumbsModule,
         ButtonModule,
@@ -100,8 +102,9 @@ export default {
         TabsModule,
         TypographyModule,
         NavigationModule,
+        MockDynamicAvatar,
       ],
-      declarations: [HeaderComponent, MockProductSwitcher, MockDynamicAvatar],
+      declarations: [WebHeaderComponent, MockProductSwitcher],
       providers: [
         { provide: StateService, useClass: MockStateService },
         { provide: PlatformUtilsService, useClass: MockPlatformUtilsService },
@@ -126,7 +129,7 @@ export default {
 export const KitchenSink: Story = (args) => ({
   props: args,
   template: `
-    <sm-header title="LongTitleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee" icon="bwi-bug">
+    <app-header title="LongTitleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee" icon="bwi-bug">
       <bit-breadcrumbs slot="breadcrumbs">
         <bit-breadcrumb>Foo</bit-breadcrumb>
         <bit-breadcrumb>Bar</bit-breadcrumb>
@@ -142,75 +145,75 @@ export const KitchenSink: Story = (args) => ({
         <bit-tab-link route="">Foo</bit-tab-link>
         <bit-tab-link route="#bar">Bar</bit-tab-link>
       </bit-tab-nav-bar>
-    </sm-header>
+    </app-header>
   `,
 });
 
 export const Basic: Story = (args) => ({
   props: args,
   template: `
-    <sm-header title="Foobar" icon="bwi-bug"></sm-header>
+    <app-header title="Foobar" icon="bwi-bug"></app-header>
   `,
 });
 
 export const WithLongTitle: Story = (args) => ({
   props: args,
   template: `
-    <sm-header title="LongTitleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee" icon="bwi-bug"></sm-header>
+    <app-header title="LongTitleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee" icon="bwi-bug"></app-header>
   `,
 });
 
 export const WithBreadcrumbs: Story = (args) => ({
   props: args,
   template: `
-    <sm-header title="Foobar" icon="bwi-bug" class="tw-text-main">
+    <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>
-    </sm-header>
+    </app-header>
   `,
 });
 
 export const WithSearch: Story = (args) => ({
   props: args,
   template: `
-    <sm-header title="Foobar" icon="bwi-bug" class="tw-text-main">
+    <app-header title="Foobar" icon="bwi-bug" class="tw-text-main">
       <input
         bitInput
         placeholder="Ask Jeeves"
         type="text"
       />
-    </sm-header>
+    </app-header>
   `,
 });
 
 export const WithSecondaryContent: Story = (args) => ({
   props: args,
   template: `
-    <sm-header title="Foobar" icon="bwi-bug" class="tw-text-main">
+    <app-header title="Foobar" icon="bwi-bug" class="tw-text-main">
       <button bitButton slot="secondary">Click Me 🎉</button>
-    </sm-header>
+    </app-header>
   `,
 });
 
 export const WithTabs: Story = (args) => ({
   props: args,
   template: `
-    <sm-header title="Foobar" icon="bwi-bug" class="tw-text-main">
+    <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>
-    </sm-header>
+    </app-header>
   `,
 });
 
 export const WithCustomTitleComponent: Story = (args) => ({
   props: args,
   template: `
-    <sm-header title="Foobar" icon="bwi-bug" class="tw-text-main">
+    <app-header title="Foobar" icon="bwi-bug" class="tw-text-main">
       <h1 slot="title" class="tw-text-3xl tw-font-semibold" style="font-family: 'Comic Sans MS'">Bitwarden</h1>
-    </sm-header>
+    </app-header>
   `,
 });

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

@@ -1,6 +1,6 @@
-<sm-header [title]="organizationName">
+<app-header [title]="organizationName">
   <sm-new-menu></sm-new-menu>
-</sm-header>
+</app-header>
 
 <div *ngIf="!loading && view$ | async as view; else spinner">
   <sm-onboarding [title]="'getStarted' | i18n" *ngIf="showOnboarding" (dismiss)="hideOnboarding()">

bitwarden_license/bit-web/src/app/secrets-manager/projects/project/project.component.html

@@ -1,4 +1,4 @@
-<sm-header *ngIf="project$ | async as project" [title]="project.name" icon="bwi-collection">
+<app-header *ngIf="project$ | async as project" [title]="project.name" icon="bwi-collection">
   <bit-breadcrumbs slot="breadcrumbs">
     <bit-breadcrumb [route]="['..']" icon="bwi-angle-left">{{ "projects" | i18n }}</bit-breadcrumb>
   </bit-breadcrumbs>
@@ -20,5 +20,5 @@
   >
     {{ "editProject" | i18n }}
   </button>
-</sm-header>
+</app-header>
 <router-outlet></router-outlet>

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

@@ -1,11 +1,11 @@
-<sm-header>
+<app-header>
   <bit-search
     [placeholder]="'searchProjects' | i18n"
     [(ngModel)]="search"
     class="tw-w-80"
   ></bit-search>
   <sm-new-menu></sm-new-menu>
-</sm-header>
+</app-header>
 <sm-projects-list
   (newProjectEvent)="openNewProjectDialog()"
   (editProjectEvent)="openEditProject($event)"

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

@@ -1,11 +1,11 @@
-<sm-header>
+<app-header>
   <bit-search
     [placeholder]="'searchSecrets' | i18n"
     [(ngModel)]="search"
     class="tw-w-80"
   ></bit-search>
   <sm-new-menu></sm-new-menu>
-</sm-header>
+</app-header>
 <sm-secrets-list
   (deleteSecretsEvent)="openDeleteSecret($event)"
   (newSecretEvent)="openNewSecretDialog()"

bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-account.component.html

@@ -1,4 +1,4 @@
-<sm-header
+<app-header
   *ngIf="serviceAccount$ | async as serviceAccount"
   [title]="serviceAccount.name"
   icon="bwi-wrench"
@@ -25,5 +25,5 @@
     <i class="bwi bwi-plus" aria-hidden="true"></i>
     {{ "newAccessToken" | i18n }}
   </button>
-</sm-header>
+</app-header>
 <router-outlet></router-outlet>

bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts.component.html

@@ -1,11 +1,11 @@
-<sm-header>
+<app-header>
   <bit-search
     [placeholder]="'searchServiceAccounts' | i18n"
     [(ngModel)]="search"
     class="tw-w-80"
   ></bit-search>
   <sm-new-menu></sm-new-menu>
-</sm-header>
+</app-header>
 <sm-service-accounts-list
   [serviceAccounts]="serviceAccounts$ | async"
   (newServiceAccountEvent)="openNewServiceAccountDialog()"

bitwarden_license/bit-web/src/app/secrets-manager/settings/porting/sm-export.component.html

@@ -1,4 +1,4 @@
-<sm-header></sm-header>
+<app-header></app-header>
 
 <form [formGroup]="formGroup" [bitSubmit]="submit">
   <div class="tw-my-4 tw-max-w-xl">

bitwarden_license/bit-web/src/app/secrets-manager/settings/porting/sm-import.component.html

@@ -1,4 +1,4 @@
-<sm-header></sm-header>
+<app-header></app-header>
 
 <form [formGroup]="formGroup" [bitSubmit]="submit" class="tw-max-w-xl">
   <bit-form-field>

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

@@ -1,6 +1,6 @@
-<sm-header [title]="organizationName$ | async">
+<app-header [title]="organizationName$ | async">
   <sm-new-menu></sm-new-menu>
-</sm-header>
+</app-header>
 <bit-no-items [icon]="NoAccess">
   <ng-container slot="title">{{ "organizationIsDisabled" | i18n }}</ng-container>
   <ng-container slot="description">{{ "secretsAccessSuspended" | i18n }}</ng-container>

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

@@ -8,6 +8,7 @@ import {
 } 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 { HeaderModule } from "@bitwarden/web-vault/app/layouts/header/header.module";
 import { ProductSwitcherModule } from "@bitwarden/web-vault/app/layouts/product-switcher/product-switcher.module";
 import { SharedModule } from "@bitwarden/web-vault/app/shared";
 
@@ -15,7 +16,6 @@ import { AccessPolicySelectorComponent } from "./access-policies/access-policy-s
 import { AccessSelectorComponent } from "./access-policies/access-selector.component";
 import { BulkConfirmationDialogComponent } from "./dialogs/bulk-confirmation-dialog.component";
 import { BulkStatusDialogComponent } from "./dialogs/bulk-status-dialog.component";
-import { HeaderComponent } from "./header.component";
 import { NewMenuComponent } from "./new-menu.component";
 import { OrgSuspendedComponent } from "./org-suspended.component";
 import { ProjectsListComponent } from "./projects-list.component";
@@ -31,16 +31,16 @@ import { SecretsListComponent } from "./secrets-list.component";
     SelectModule,
     DynamicAvatarComponent,
     SearchModule,
+    HeaderModule,
   ],
   exports: [
-    SharedModule,
-    NoItemsModule,
-    AccessSelectorComponent,
     AccessPolicySelectorComponent,
-    BulkStatusDialogComponent,
+    AccessSelectorComponent,
     BulkConfirmationDialogComponent,
-    HeaderComponent,
+    BulkStatusDialogComponent,
+    HeaderModule,
     NewMenuComponent,
+    NoItemsModule,
     ProjectsListComponent,
     SearchModule,
     SecretsListComponent,
@@ -48,15 +48,15 @@ import { SecretsListComponent } from "./secrets-list.component";
     SharedModule,
   ],
   declarations: [
-    BulkStatusDialogComponent,
+    AccessPolicySelectorComponent,
+    AccessSelectorComponent,
     BulkConfirmationDialogComponent,
-    HeaderComponent,
+    BulkStatusDialogComponent,
+    BulkStatusDialogComponent,
     NewMenuComponent,
+    OrgSuspendedComponent,
     ProjectsListComponent,
     SecretsListComponent,
-    AccessSelectorComponent,
-    OrgSuspendedComponent,
-    AccessPolicySelectorComponent,
   ],
   providers: [],
   bootstrap: [],

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

@@ -1,6 +1,6 @@
-<sm-header>
+<app-header>
   <sm-new-menu></sm-new-menu>
-</sm-header>
+</app-header>
 <bit-callout type="warning" [title]="'warning' | i18n">{{
   "trashCleanupWarning" | i18n
 }}</bit-callout>