From 39eed029047d113a88f4bfdce9a9752b72e80b0e Mon Sep 17 00:00:00 2001 From: Oscar Hinton Date: Thu, 11 Jul 2024 18:20:56 +0200 Subject: [PATCH] [PM-8517] Create web specific layout (#9209) We currently duplicate some logic between our layouts. In an effort to streamline our experience I'm exploring if we can create a web specific layout that handles some of this. --- .../organization-layout.component.html | 16 +++------- .../layouts/organization-layout.component.ts | 16 ++-------- .../app/layouts/user-layout.component.html | 16 +++------- .../src/app/layouts/user-layout.component.ts | 26 ++-------------- .../src/app/layouts/web-layout.component.html | 9 ++++++ .../src/app/layouts/web-layout.component.ts | 31 +++++++++++++++++++ apps/web/src/app/layouts/web-layout.module.ts | 14 +++++++++ .../app/layouts/web-side-nav.component.html | 8 +++++ .../src/app/layouts/web-side-nav.component.ts | 17 ++++++++++ .../providers/providers-layout.component.html | 15 +++------ .../providers/providers-layout.component.ts | 24 +++----------- .../layout/layout.component.html | 4 +-- .../secrets-manager/layout/layout.module.ts | 13 ++------ .../layout/navigation.component.html | 9 ++---- libs/components/src/navigation/index.ts | 1 + .../src/navigation/side-nav.component.ts | 4 ++- 16 files changed, 111 insertions(+), 112 deletions(-) create mode 100644 apps/web/src/app/layouts/web-layout.component.html create mode 100644 apps/web/src/app/layouts/web-layout.component.ts create mode 100644 apps/web/src/app/layouts/web-layout.module.ts create mode 100644 apps/web/src/app/layouts/web-side-nav.component.html create mode 100644 apps/web/src/app/layouts/web-side-nav.component.ts diff --git a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html index 563905548d..336285b2a4 100644 --- a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html +++ b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html @@ -1,5 +1,5 @@ - - + + @@ -103,12 +103,7 @@ *ngIf="organization.canManageScim" > - - - - - - + {{ "accessingUsingProvider" | i18n: organization.providerName }} - - + diff --git a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts index 4383656bee..65fefe01a3 100644 --- a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts +++ b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts @@ -22,12 +22,10 @@ import { Organization } from "@bitwarden/common/admin-console/models/domain/orga 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 } 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 { WebLayoutModule } from "../../../layouts/web-layout.module"; import { AdminConsoleLogo } from "../../icons/admin-console-logo"; @Component({ @@ -38,14 +36,10 @@ import { AdminConsoleLogo } from "../../icons/admin-console-logo"; CommonModule, RouterModule, JslibModule, - LayoutComponent, + WebLayoutModule, IconModule, - NavigationModule, OrgSwitcherComponent, BannerModule, - PaymentMethodWarningsModule, - ToggleWidthComponent, - ProductSwitcherModule, ], }) export class OrganizationLayoutComponent implements OnInit, OnDestroy { @@ -64,10 +58,6 @@ export class OrganizationLayoutComponent implements OnInit, OnDestroy { FeatureFlag.EnableConsolidatedBilling, ); - protected showPaymentMethodWarningBanners$ = this.configService.getFeatureFlag$( - FeatureFlag.ShowPaymentMethodWarningBanners, - ); - constructor( private route: ActivatedRoute, private organizationService: OrganizationService, diff --git a/apps/web/src/app/layouts/user-layout.component.html b/apps/web/src/app/layouts/user-layout.component.html index 0d2be927ec..4011ac84a7 100644 --- a/apps/web/src/app/layouts/user-layout.component.html +++ b/apps/web/src/app/layouts/user-layout.component.html @@ -1,5 +1,5 @@ - - + + @@ -30,15 +30,7 @@ *ngIf="hasFamilySponsorshipAvailable$ | async" > + - - - - - - - - + diff --git a/apps/web/src/app/layouts/user-layout.component.ts b/apps/web/src/app/layouts/user-layout.component.ts index 757b8220f3..bd02533233 100644 --- a/apps/web/src/app/layouts/user-layout.component.ts +++ b/apps/web/src/app/layouts/user-layout.component.ts @@ -7,49 +7,29 @@ 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/platform/sync"; -import { IconModule, LayoutComponent, NavigationModule } from "@bitwarden/components"; - -import { PaymentMethodWarningsModule } from "../billing/shared"; +import { IconModule } from "@bitwarden/components"; import { PasswordManagerLogo } from "./password-manager-logo"; -import { ProductSwitcherModule } from "./product-switcher/product-switcher.module"; -import { ToggleWidthComponent } from "./toggle-width.component"; +import { WebLayoutModule } from "./web-layout.module"; @Component({ selector: "app-user-layout", templateUrl: "user-layout.component.html", standalone: true, - imports: [ - CommonModule, - RouterModule, - JslibModule, - LayoutComponent, - IconModule, - NavigationModule, - PaymentMethodWarningsModule, - ToggleWidthComponent, - ProductSwitcherModule, - ], + imports: [CommonModule, RouterModule, JslibModule, WebLayoutModule, IconModule], }) export class UserLayoutComponent implements OnInit { protected readonly logo = PasswordManagerLogo; protected hasFamilySponsorshipAvailable$: Observable; protected showSubscription$: Observable; - 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, ) {} diff --git a/apps/web/src/app/layouts/web-layout.component.html b/apps/web/src/app/layouts/web-layout.component.html new file mode 100644 index 0000000000..31a5e82688 --- /dev/null +++ b/apps/web/src/app/layouts/web-layout.component.html @@ -0,0 +1,9 @@ + + + + + + + diff --git a/apps/web/src/app/layouts/web-layout.component.ts b/apps/web/src/app/layouts/web-layout.component.ts new file mode 100644 index 0000000000..bb91e619aa --- /dev/null +++ b/apps/web/src/app/layouts/web-layout.component.ts @@ -0,0 +1,31 @@ +import { CommonModule } from "@angular/common"; +import { Component } from "@angular/core"; + +import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum"; +import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service"; +import { LayoutComponent } 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 { + protected showPaymentMethodWarningBanners$ = this.configService.getFeatureFlag$( + FeatureFlag.ShowPaymentMethodWarningBanners, + ); + + constructor(private configService: ConfigService) {} +} diff --git a/apps/web/src/app/layouts/web-layout.module.ts b/apps/web/src/app/layouts/web-layout.module.ts new file mode 100644 index 0000000000..48e21322e6 --- /dev/null +++ b/apps/web/src/app/layouts/web-layout.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from "@angular/core"; + +import { NavigationModule } from "@bitwarden/components"; + +import { WebLayoutComponent } from "./web-layout.component"; +import { WebSideNavComponent } from "./web-side-nav.component"; + +@NgModule({ + imports: [WebLayoutComponent, WebSideNavComponent], + exports: [NavigationModule, WebLayoutComponent, WebSideNavComponent], + declarations: [], + providers: [], +}) +export class WebLayoutModule {} diff --git a/apps/web/src/app/layouts/web-side-nav.component.html b/apps/web/src/app/layouts/web-side-nav.component.html new file mode 100644 index 0000000000..adb526bd59 --- /dev/null +++ b/apps/web/src/app/layouts/web-side-nav.component.html @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/apps/web/src/app/layouts/web-side-nav.component.ts b/apps/web/src/app/layouts/web-side-nav.component.ts new file mode 100644 index 0000000000..28b04e8746 --- /dev/null +++ b/apps/web/src/app/layouts/web-side-nav.component.ts @@ -0,0 +1,17 @@ +import { CommonModule } from "@angular/common"; +import { Component, Input } from "@angular/core"; + +import { SideNavVariant, NavigationModule } from "@bitwarden/components"; + +import { ProductSwitcherModule } from "./product-switcher/product-switcher.module"; +import { ToggleWidthComponent } from "./toggle-width.component"; + +@Component({ + selector: "app-side-nav", + templateUrl: "web-side-nav.component.html", + standalone: true, + imports: [CommonModule, NavigationModule, ProductSwitcherModule, ToggleWidthComponent], +}) +export class WebSideNavComponent { + @Input() variant: SideNavVariant = "primary"; +} diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.html index 9ed71f157c..9a94df877d 100644 --- a/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.html +++ b/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.html @@ -1,5 +1,5 @@ - - + + + - - - - - . - - + diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.ts b/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.ts index 65175fb51f..820fc820ac 100644 --- a/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.ts +++ b/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.ts @@ -10,17 +10,9 @@ import { Provider } from "@bitwarden/common/admin-console/models/domain/provider import { hasConsolidatedBilling } 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 { - BannerModule, - IconModule, - LayoutComponent, - LinkModule, - NavigationModule, -} from "@bitwarden/components"; +import { BannerModule, IconModule, LinkModule } 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 { WebLayoutModule } from "@bitwarden/web-vault/app/layouts/web-layout.module"; import { ProviderClientVaultPrivacyBannerService } from "./services/provider-client-vault-privacy-banner.service"; @@ -32,14 +24,10 @@ import { ProviderClientVaultPrivacyBannerService } from "./services/provider-cli CommonModule, RouterModule, JslibModule, - LayoutComponent, + WebLayoutModule, IconModule, - NavigationModule, - PaymentMethodWarningsModule, - ToggleWidthComponent, - ProductSwitcherModule, - BannerModule, LinkModule, + BannerModule, ], }) export class ProvidersLayoutComponent implements OnInit, OnDestroy { @@ -51,10 +39,6 @@ export class ProvidersLayoutComponent implements OnInit, OnDestroy { protected hasConsolidatedBilling$: Observable; protected canAccessBilling$: Observable; - protected showPaymentMethodWarningBanners$ = this.configService.getFeatureFlag$( - FeatureFlag.ShowPaymentMethodWarningBanners, - ); - protected showProviderClientVaultPrivacyWarningBanner$ = this.configService.getFeatureFlag$( FeatureFlag.ProviderClientVaultPrivacyBanner, ); diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.component.html index ad63d94839..6324271630 100644 --- a/bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.component.html +++ b/bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.component.html @@ -1,4 +1,4 @@ - + - + diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.module.ts b/bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.module.ts index 848b22864c..cd25869e4c 100644 --- a/bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.module.ts +++ b/bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.module.ts @@ -1,23 +1,14 @@ import { NgModule } from "@angular/core"; -import { LayoutComponent as BitLayoutComponent, 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 { WebLayoutModule } from "@bitwarden/web-vault/app/layouts/web-layout.module"; 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, WebLayoutModule, OrgSwitcherComponent], declarations: [LayoutComponent, NavigationComponent], }) export class LayoutModule {} diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/layout/navigation.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/layout/navigation.component.html index 2c7661d13b..80750dc0d8 100644 --- a/bitwarden_license/bit-web/src/app/secrets-manager/layout/navigation.component.html +++ b/bitwarden_license/bit-web/src/app/secrets-manager/layout/navigation.component.html @@ -1,4 +1,4 @@ - + - - - - - - + diff --git a/libs/components/src/navigation/index.ts b/libs/components/src/navigation/index.ts index 8f182b1104..31e14a9841 100644 --- a/libs/components/src/navigation/index.ts +++ b/libs/components/src/navigation/index.ts @@ -1,2 +1,3 @@ export * from "./navigation.module"; export * from "./side-nav.service"; +export type * from "./side-nav.component"; diff --git a/libs/components/src/navigation/side-nav.component.ts b/libs/components/src/navigation/side-nav.component.ts index 0561e2e603..95d5b9011a 100644 --- a/libs/components/src/navigation/side-nav.component.ts +++ b/libs/components/src/navigation/side-nav.component.ts @@ -2,12 +2,14 @@ import { Component, ElementRef, Input, ViewChild } from "@angular/core"; import { SideNavService } from "./side-nav.service"; +export type SideNavVariant = "primary" | "secondary"; + @Component({ selector: "bit-side-nav", templateUrl: "side-nav.component.html", }) export class SideNavComponent { - @Input() variant: "primary" | "secondary" = "primary"; + @Input() variant: SideNavVariant = "primary"; @ViewChild("toggleButton", { read: ElementRef, static: true }) private toggleButton: ElementRef;