Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-22 11:45:59 +01:00
Code Issues Projects Releases Wiki Activity

[PM-8517] Create web specific layout (#9209)

Browse Source 
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.
This commit is contained in:
Oscar Hinton 2024-07-11 18:20:56 +02:00 committed by GitHub
parent 9a58b3b774
commit 39eed02904
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
16 changed files with 111 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<bit-layout>
<bit-side-nav variant="secondary" *ngIf="organization$ | async as organization">
<app-layout>
<app-side-nav variant="secondary" *ngIf="organization$ | async as organization">
<bit-nav-logo [openIcon]="logo" route="." [label]="'adminConsole' | i18n"></bit-nav-logo>
<org-switcher [filter]="orgFilter" [hideNewButton]="hideNewOrgButton$ | async"></org-switcher>
@ -103,12 +103,7 @@
*ngIf="organization.canManageScim"
></bit-nav-item>
</bit-nav-group>
<ng-container slot="footer">
<navigation-product-switcher></navigation-product-switcher>
<app-toggle-width></app-toggle-width>
</ng-container>
</bit-side-nav>
</app-side-nav>
<ng-container *ngIf="organization$ | async as organization">
<bit-banner
@ -118,10 +113,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>

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

@ -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,

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

@ -1,5 +1,5 @@
<bit-layout>
<bit-side-nav>
<app-layout>
<app-side-nav>
<bit-nav-logo [openIcon]="logo" route="." [label]="'passwordManager' | i18n"></bit-nav-logo>
<bit-nav-item icon="bwi-collection" [text]="'vaults' | i18n" route="vault"></bit-nav-item>
@ -30,15 +30,7 @@
*ngIf="hasFamilySponsorshipAvailable$ | async"
></bit-nav-item>
</bit-nav-group>
</app-side-nav>
<ng-container slot="footer">
<navigation-product-switcher></navigation-product-switcher>
<app-toggle-width></app-toggle-width>
</ng-container>
</bit-side-nav>
<app-payment-method-warnings
*ngIf="showPaymentMethodWarningBanners$ | async"
></app-payment-method-warnings>
<router-outlet></router-outlet>
</bit-layout>
</app-layout>

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

@ -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<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,
) {}

9
apps/web/src/app/layouts/web-layout.component.html Normal file
View File

@ -0,0 +1,9 @@
<bit-layout>
<ng-content select="app-side-nav, [slot=side-nav]" slot="side-nav"></ng-content>
<app-payment-method-warnings
*ngIf="showPaymentMethodWarningBanners$ | async"
></app-payment-method-warnings>
<ng-content></ng-content>
</bit-layout>

31
apps/web/src/app/layouts/web-layout.component.ts Normal file
View File

@ -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) {}
}

14
apps/web/src/app/layouts/web-layout.module.ts Normal file
View File

@ -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 {}

8
apps/web/src/app/layouts/web-side-nav.component.html Normal file
View File

@ -0,0 +1,8 @@
<bit-side-nav [variant]="variant">
<ng-content></ng-content>
<ng-container slot="footer">
<navigation-product-switcher></navigation-product-switcher>
<app-toggle-width></app-toggle-width>
</ng-container>
</bit-side-nav>

17
apps/web/src/app/layouts/web-side-nav.component.ts Normal file
View File

@ -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";
}

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

@ -1,5 +1,5 @@
<bit-layout variant="secondary">
<bit-side-nav *ngIf="provider$ | async as provider">
<app-layout>
<app-side-nav variant="secondary" *ngIf="provider$ | async as provider">
<bit-nav-logo [openIcon]="logo" route="." [label]="'providerPortal' | i18n"></bit-nav-logo>
<bit-nav-item
@ -39,12 +39,8 @@
route="settings"
*ngIf="showSettingsTab(provider)"
></bit-nav-item>
</app-side-nav>
<ng-container slot="footer">
<navigation-product-switcher></navigation-product-switcher>
<app-toggle-width></app-toggle-width>
</ng-container>
</bit-side-nav>
<bit-banner
class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
(onClose)="(true)"
@ -65,8 +61,5 @@
{{ "contactBitwardenSupport" | i18n }} </a
>.
</bit-banner>
<app-payment-method-warnings
*ngIf="showPaymentMethodWarningBanners$ | async"
></app-payment-method-warnings>
<router-outlet></router-outlet>
</bit-layout>
</app-layout>

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

@ -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<boolean>;
protected canAccessBilling$: Observable<boolean>;
protected showPaymentMethodWarningBanners$ = this.configService.getFeatureFlag$(
FeatureFlag.ShowPaymentMethodWarningBanners,
);
protected showProviderClientVaultPrivacyWarningBanner$ = this.configService.getFeatureFlag$(
FeatureFlag.ProviderClientVaultPrivacyBanner,
);

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

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

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

@ -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 {}

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

@ -1,4 +1,4 @@
<bit-side-nav>
<app-side-nav>
<bit-nav-logo [openIcon]="logo" route="." [label]="'secretsManager' | i18n"></bit-nav-logo>
<org-switcher [filter]="orgFilter" [hideNewButton]="true"></org-switcher>
<bit-nav-item
@ -50,9 +50,4 @@
[relativeTo]="route.parent"
></bit-nav-item>
</bit-nav-group>
<ng-container slot="footer">
<navigation-product-switcher></navigation-product-switcher>
<app-toggle-width></app-toggle-width>
</ng-container>
</bit-side-nav>
</app-side-nav>

1
libs/components/src/navigation/index.ts
View File

@ -1,2 +1,3 @@
export * from "./navigation.module";
export * from "./side-nav.service";
export type * from "./side-nav.component";

4
libs/components/src/navigation/side-nav.component.ts
View File

@ -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<HTMLButtonElement>;