Create web specific layout

apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html

@@ -1,9 +1,5 @@
-<bit-layout variant="secondary">
-  <nav
-    slot="sidebar"
-    *ngIf="organization$ | async as organization"
-    class="tw-flex tw-flex-col tw-h-full"
-  >
+<app-layout variant="secondary">
+  <ng-container slot="sidebar" *ngIf="organization$ | async as organization">
     <a routerLink="." class="tw-m-5 tw-mt-7 tw-block" [appA11yTitle]="'adminConsole' | i18n">
       <bit-icon [icon]="logo"></bit-icon>
     </a>
@@ -109,11 +105,7 @@
         *ngIf="organization.canManageScim"
       ></bit-nav-item>
     </bit-nav-group>
-
-    <navigation-product-switcher class="tw-mt-auto"></navigation-product-switcher>
-
-    <app-toggle-width></app-toggle-width>
-  </nav>
+  </ng-container>
 
   <ng-container *ngIf="organization$ | async as organization">
     <bit-banner
@@ -123,10 +115,7 @@
     >
       {{ "accessingUsingProvider" | i18n: organization.providerName }}
     </bit-banner>
-    <app-payment-method-warnings
-      *ngIf="showPaymentMethodWarningBanners$ | async"
-    ></app-payment-method-warnings>
   </ng-container>
 
   <router-outlet></router-outlet>
-</bit-layout>
+</app-layout>

apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts

@@ -18,15 +18,11 @@ import {
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
-import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
-import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { BannerModule, IconModule, LayoutComponent, NavigationModule } from "@bitwarden/components";
+import { BannerModule, IconModule, NavigationModule } from "@bitwarden/components";
 
-import { PaymentMethodWarningsModule } from "../../../billing/shared";
 import { OrgSwitcherComponent } from "../../../layouts/org-switcher/org-switcher.component";
-import { ProductSwitcherModule } from "../../../layouts/product-switcher/product-switcher.module";
-import { ToggleWidthComponent } from "../../../layouts/toggle-width.component";
+import { WebLayoutComponent } from "../../../layouts/web-layout.component";
 import { AdminConsoleLogo } from "../../icons/admin-console-logo";
 
 @Component({
@@ -37,14 +33,11 @@ import { AdminConsoleLogo } from "../../icons/admin-console-logo";
     CommonModule,
     RouterModule,
     JslibModule,
-    LayoutComponent,
+    WebLayoutComponent,
     IconModule,
     NavigationModule,
     OrgSwitcherComponent,
     BannerModule,
-    PaymentMethodWarningsModule,
-    ToggleWidthComponent,
-    ProductSwitcherModule,
   ],
 })
 export class OrganizationLayoutComponent implements OnInit, OnDestroy {
@@ -58,15 +51,10 @@ export class OrganizationLayoutComponent implements OnInit, OnDestroy {
 
   private _destroy = new Subject<void>();
 
-  protected showPaymentMethodWarningBanners$ = this.configService.getFeatureFlag$(
-    FeatureFlag.ShowPaymentMethodWarningBanners,
-  );
-
   constructor(
     private route: ActivatedRoute,
     private organizationService: OrganizationService,
     private platformUtilsService: PlatformUtilsService,
-    private configService: ConfigService,
     private policyService: PolicyService,
   ) {}
 

apps/web/src/app/layouts/user-layout.component.html

@@ -1,5 +1,5 @@
-<bit-layout>
-  <nav slot="sidebar" class="tw-flex tw-flex-col tw-h-full">
+<app-layout>
+  <ng-container slot="sidebar">
     <a routerLink="." class="tw-m-5 tw-mt-7 tw-block" [appA11yTitle]="'passwordManager' | i18n">
       <bit-icon [icon]="logo"></bit-icon>
     </a>
@@ -32,13 +32,7 @@
         *ngIf="hasFamilySponsorshipAvailable$ | async"
       ></bit-nav-item>
     </bit-nav-group>
+  </ng-container>
 
-    <navigation-product-switcher class="tw-mt-auto"></navigation-product-switcher>
-
-    <app-toggle-width></app-toggle-width>
-  </nav>
-  <app-payment-method-warnings
-    *ngIf="showPaymentMethodWarningBanners$ | async"
-  ></app-payment-method-warnings>
   <router-outlet></router-outlet>
-</bit-layout>
+</app-layout>

apps/web/src/app/layouts/user-layout.component.ts

@@ -7,17 +7,12 @@ import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
-import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
-import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
-import { IconModule, LayoutComponent, NavigationModule } from "@bitwarden/components";
-
-import { PaymentMethodWarningsModule } from "../billing/shared";
+import { IconModule, NavigationModule } from "@bitwarden/components";
 
 import { PasswordManagerLogo } from "./password-manager-logo";
-import { ProductSwitcherModule } from "./product-switcher/product-switcher.module";
-import { ToggleWidthComponent } from "./toggle-width.component";
+import { WebLayoutComponent } from "./web-layout.component";
 
 @Component({
   selector: "app-user-layout",
@@ -27,12 +22,9 @@ import { ToggleWidthComponent } from "./toggle-width.component";
     CommonModule,
     RouterModule,
     JslibModule,
-    LayoutComponent,
+    WebLayoutComponent,
     IconModule,
     NavigationModule,
-    PaymentMethodWarningsModule,
-    ToggleWidthComponent,
-    ProductSwitcherModule,
   ],
 })
 export class UserLayoutComponent implements OnInit {
@@ -40,16 +32,11 @@ export class UserLayoutComponent implements OnInit {
   protected hasFamilySponsorshipAvailable$: Observable<boolean>;
   protected showSubscription$: Observable<boolean>;
 
-  protected showPaymentMethodWarningBanners$ = this.configService.getFeatureFlag$(
-    FeatureFlag.ShowPaymentMethodWarningBanners,
-  );
-
   constructor(
     private platformUtilsService: PlatformUtilsService,
     private organizationService: OrganizationService,
     private apiService: ApiService,
     private syncService: SyncService,
-    private configService: ConfigService,
     private billingAccountProfileStateService: BillingAccountProfileStateService,
   ) {}
 

apps/web/src/app/layouts/web-layout.component.html

@@ -0,0 +1,14 @@
+<bit-layout [variant]="variant">
+  <nav slot="sidebar" class="tw-flex tw-flex-col tw-h-full">
+    <ng-content select="[slot=sidebar]"></ng-content>
+
+    <navigation-product-switcher class="tw-mt-auto"></navigation-product-switcher>
+    <app-toggle-width></app-toggle-width>
+  </nav>
+
+  <app-payment-method-warnings
+    *ngIf="showPaymentMethodWarningBanners$ | async"
+  ></app-payment-method-warnings>
+
+  <ng-content></ng-content>
+</bit-layout>

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

@@ -0,0 +1,33 @@
+import { CommonModule } from "@angular/common";
+import { Component, Input } from "@angular/core";
+
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+import { LayoutComponent, LayoutVariant } from "@bitwarden/components";
+
+import { PaymentMethodWarningsModule } from "../billing/shared";
+
+import { ProductSwitcherModule } from "./product-switcher/product-switcher.module";
+import { ToggleWidthComponent } from "./toggle-width.component";
+
+@Component({
+  selector: "app-layout",
+  templateUrl: "web-layout.component.html",
+  standalone: true,
+  imports: [
+    CommonModule,
+    LayoutComponent,
+    ProductSwitcherModule,
+    ToggleWidthComponent,
+    PaymentMethodWarningsModule,
+  ],
+})
+export class WebLayoutComponent {
+  @Input() variant: LayoutVariant = "primary";
+
+  protected showPaymentMethodWarningBanners$ = this.configService.getFeatureFlag$(
+    FeatureFlag.ShowPaymentMethodWarningBanners,
+  );
+
+  constructor(private configService: ConfigService) {}
+}

bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.html

@@ -1,5 +1,5 @@
-<bit-layout variant="secondary">
-  <nav slot="sidebar" *ngIf="provider$ | async as provider" class="tw-flex tw-flex-col tw-h-full">
+<app-layout variant="secondary">
+  <ng-container slot="sidebar" *ngIf="provider$ | async as provider">
     <a routerLink="." class="tw-m-5 tw-mt-7 tw-block" [appA11yTitle]="'providerPortal' | i18n">
       <bit-icon [icon]="logo"></bit-icon>
     </a>
@@ -40,13 +40,7 @@
       route="settings"
       *ngIf="showSettingsTab(provider)"
     ></bit-nav-item>
+  </ng-container>
 
-    <navigation-product-switcher class="tw-mt-auto"></navigation-product-switcher>
-
-    <app-toggle-width></app-toggle-width>
-  </nav>
-  <app-payment-method-warnings
-    *ngIf="showPaymentMethodWarningBanners$ | async"
-  ></app-payment-method-warnings>
   <router-outlet></router-outlet>
-</bit-layout>
+</app-layout>

bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.ts

@@ -8,13 +8,10 @@ import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { ProviderService } from "@bitwarden/common/admin-console/abstractions/provider.service";
 import { Provider } from "@bitwarden/common/admin-console/models/domain/provider";
 import { canAccessBilling } from "@bitwarden/common/billing/abstractions/provider-billing.service.abstraction";
-import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
-import { IconModule, LayoutComponent, NavigationModule } from "@bitwarden/components";
+import { IconModule, NavigationModule } from "@bitwarden/components";
 import { ProviderPortalLogo } from "@bitwarden/web-vault/app/admin-console/icons/provider-portal-logo";
-import { PaymentMethodWarningsModule } from "@bitwarden/web-vault/app/billing/shared";
-import { ProductSwitcherModule } from "@bitwarden/web-vault/app/layouts/product-switcher/product-switcher.module";
-import { ToggleWidthComponent } from "@bitwarden/web-vault/app/layouts/toggle-width.component";
+import { WebLayoutComponent } from "@bitwarden/web-vault/app/layouts/web-layout.component";
 
 @Component({
   selector: "providers-layout",
@@ -24,12 +21,9 @@ import { ToggleWidthComponent } from "@bitwarden/web-vault/app/layouts/toggle-wi
     CommonModule,
     RouterModule,
     JslibModule,
-    LayoutComponent,
+    WebLayoutComponent,
     IconModule,
     NavigationModule,
-    PaymentMethodWarningsModule,
-    ToggleWidthComponent,
-    ProductSwitcherModule,
   ],
 })
 export class ProvidersLayoutComponent implements OnInit, OnDestroy {
@@ -39,10 +33,6 @@ export class ProvidersLayoutComponent implements OnInit, OnDestroy {
   protected provider$: Observable<Provider>;
   protected canAccessBilling$: Observable<boolean>;
 
-  protected showPaymentMethodWarningBanners$ = this.configService.getFeatureFlag$(
-    FeatureFlag.ShowPaymentMethodWarningBanners,
-  );
-
   constructor(
     private route: ActivatedRoute,
     private providerService: ProviderService,

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

@@ -1,4 +1,4 @@
-<bit-layout>
+<app-layout>
   <router-outlet slot="sidebar" name="sidebar"></router-outlet>
   <router-outlet></router-outlet>
-</bit-layout>
+</app-layout>

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

@@ -1,23 +1,15 @@
 import { NgModule } from "@angular/core";
 
-import { LayoutComponent as BitLayoutComponent, NavigationModule } from "@bitwarden/components";
+import { NavigationModule } from "@bitwarden/components";
 import { OrgSwitcherComponent } from "@bitwarden/web-vault/app/layouts/org-switcher/org-switcher.component";
-import { ProductSwitcherModule } from "@bitwarden/web-vault/app/layouts/product-switcher/product-switcher.module";
-import { ToggleWidthComponent } from "@bitwarden/web-vault/app/layouts/toggle-width.component";
+import { WebLayoutComponent } from "@bitwarden/web-vault/app/layouts/web-layout.component";
 import { SharedModule } from "@bitwarden/web-vault/app/shared/shared.module";
 
 import { LayoutComponent } from "./layout.component";
 import { NavigationComponent } from "./navigation.component";
 
 @NgModule({
-  imports: [
-    SharedModule,
-    NavigationModule,
-    BitLayoutComponent,
-    OrgSwitcherComponent,
-    ToggleWidthComponent,
-    ProductSwitcherModule,
-  ],
+  imports: [SharedModule, NavigationModule, WebLayoutComponent, OrgSwitcherComponent],
   declarations: [LayoutComponent, NavigationComponent],
 })
 export class LayoutModule {}

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

@@ -1,54 +1,48 @@
-<nav class="tw-flex tw-flex-col tw-h-full">
-  <a routerLink="." class="tw-m-5 tw-mt-7 tw-block">
-    <bit-icon [icon]="logo"></bit-icon>
-  </a>
+<a routerLink="." class="tw-m-5 tw-mt-7 tw-block">
+  <bit-icon [icon]="logo"></bit-icon>
+</a>
 
-  <org-switcher [filter]="orgFilter" [hideNewButton]="true"></org-switcher>
+<org-switcher [filter]="orgFilter" [hideNewButton]="true"></org-switcher>
+<bit-nav-item
+  icon="bwi-collection"
+  [text]="'projects' | i18n"
+  route="projects"
+  [relativeTo]="route.parent"
+></bit-nav-item>
+<bit-nav-item
+  icon="bwi-key"
+  [text]="'secrets' | i18n"
+  route="secrets"
+  [relativeTo]="route.parent"
+></bit-nav-item>
+<bit-nav-item
+  icon="bwi-wrench"
+  [text]="'machineAccounts' | i18n"
+  route="machine-accounts"
+  [relativeTo]="route.parent"
+></bit-nav-item>
+<bit-nav-item
+  icon="bwi-providers"
+  [text]="'integrations' | i18n"
+  route="integrations"
+  [relativeTo]="route.parent"
+></bit-nav-item>
+<bit-nav-item
+  icon="bwi-trash"
+  [text]="'trash' | i18n"
+  route="trash"
+  [relativeTo]="route.parent"
+  *ngIf="isAdmin$ | async"
+></bit-nav-item>
+<bit-nav-group icon="bwi-cog" [text]="'settings' | i18n" *ngIf="isAdmin$ | async">
   <bit-nav-item
-    icon="bwi-collection"
-    [text]="'projects' | i18n"
-    route="projects"
+    [text]="'importData' | i18n"
+    route="settings/import"
     [relativeTo]="route.parent"
   ></bit-nav-item>
   <bit-nav-item
-    icon="bwi-key"
-    [text]="'secrets' | i18n"
-    route="secrets"
+    [text]="'exportData' | i18n"
+    route="settings/export"
     [relativeTo]="route.parent"
   ></bit-nav-item>
-  <bit-nav-item
-    icon="bwi-wrench"
-    [text]="'machineAccounts' | i18n"
-    route="machine-accounts"
-    [relativeTo]="route.parent"
-  ></bit-nav-item>
-  <bit-nav-item
-    icon="bwi-providers"
-    [text]="'integrations' | i18n"
-    route="integrations"
-    [relativeTo]="route.parent"
-  ></bit-nav-item>
-  <bit-nav-item
-    icon="bwi-trash"
-    [text]="'trash' | i18n"
-    route="trash"
-    [relativeTo]="route.parent"
-    *ngIf="isAdmin$ | async"
-  ></bit-nav-item>
-  <bit-nav-group icon="bwi-cog" [text]="'settings' | i18n" *ngIf="isAdmin$ | async">
-    <bit-nav-item
-      [text]="'importData' | i18n"
-      route="settings/import"
-      [relativeTo]="route.parent"
-    ></bit-nav-item>
-    <bit-nav-item
-      [text]="'exportData' | i18n"
-      route="settings/export"
-      [relativeTo]="route.parent"
-    ></bit-nav-item>
-  </bit-nav-group>
-
-  <navigation-product-switcher class="tw-mt-auto"></navigation-product-switcher>
-
-  <app-toggle-width></app-toggle-width>
-</nav>
+</bit-nav-group>