[PM-7057] Add dev tool for toggling width in web vault (#8447)

Add a dev tool for toggling the web vault width. This allows developers and designers to experiment with how the vault currently behaves with responsiveness and ensure new functionality looks good.

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

@@ -105,6 +105,8 @@
         *ngIf="organization.canManageScim"
       ></bit-nav-item>
     </bit-nav-group>
+
+    <app-toggle-width></app-toggle-width>
   </nav>
 
   <ng-container *ngIf="organization$ | async as organization">

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

@@ -25,6 +25,7 @@ import { BannerModule, IconModule, LayoutComponent, NavigationModule } from "@bi
 
 import { PaymentMethodWarningsModule } from "../../../billing/shared";
 import { OrgSwitcherComponent } from "../../../layouts/org-switcher/org-switcher.component";
+import { ToggleWidthComponent } from "../../../layouts/toggle-width.component";
 import { AdminConsoleLogo } from "../../icons/admin-console-logo";
 
 @Component({
@@ -41,6 +42,7 @@ import { AdminConsoleLogo } from "../../icons/admin-console-logo";
     OrgSwitcherComponent,
     BannerModule,
     PaymentMethodWarningsModule,
+    ToggleWidthComponent,
   ],
 })
 export class OrganizationLayoutComponent implements OnInit, OnDestroy {

apps/web/src/app/layouts/toggle-width.component.ts

@@ -0,0 +1,33 @@
+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { NavigationModule } from "@bitwarden/components";
+
+@Component({
+  selector: "app-toggle-width",
+  template: `<bit-nav-item
+    text="Toggle Width"
+    icon="bwi-bug"
+    *ngIf="isDev"
+    class="tw-absolute tw-bottom-0 tw-w-full"
+    (click)="toggleWidth()"
+  ></bit-nav-item>`,
+  standalone: true,
+  imports: [CommonModule, NavigationModule],
+})
+export class ToggleWidthComponent {
+  protected isDev: boolean;
+
+  constructor(platformUtilsService: PlatformUtilsService) {
+    this.isDev = platformUtilsService.isDev();
+  }
+
+  protected toggleWidth() {
+    if (document.body.style.minWidth === "unset") {
+      document.body.style.minWidth = "";
+    } else {
+      document.body.style.minWidth = "unset";
+    }
+  }
+}

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

@@ -32,6 +32,8 @@
         *ngIf="hasFamilySponsorshipAvailable$ | async"
       ></bit-nav-item>
     </bit-nav-group>
+
+    <app-toggle-width></app-toggle-width>
   </nav>
   <app-payment-method-warnings
     *ngIf="showPaymentMethodWarningBanners$ | async"

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

@@ -16,6 +16,7 @@ import { IconModule, LayoutComponent, NavigationModule } from "@bitwarden/compon
 import { PaymentMethodWarningsModule } from "../billing/shared";
 
 import { PasswordManagerLogo } from "./password-manager-logo";
+import { ToggleWidthComponent } from "./toggle-width.component";
 
 @Component({
   selector: "app-user-layout",
@@ -29,6 +30,7 @@ import { PasswordManagerLogo } from "./password-manager-logo";
     IconModule,
     NavigationModule,
     PaymentMethodWarningsModule,
+    ToggleWidthComponent,
   ],
 })
 export class UserLayoutComponent implements OnInit {

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

@@ -27,6 +27,8 @@
       route="settings"
       *ngIf="showSettingsTab"
     ></bit-nav-item>
+
+    <app-toggle-width></app-toggle-width>
   </nav>
   <app-payment-method-warnings
     *ngIf="showPaymentMethodWarningBanners$ | async"

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

@@ -10,6 +10,7 @@ import { ConfigService } from "@bitwarden/common/platform/abstractions/config/co
 import { IconModule, LayoutComponent, 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 { ToggleWidthComponent } from "@bitwarden/web-vault/app/layouts/toggle-width.component";
 
 @Component({
   selector: "providers-layout",
@@ -23,6 +24,7 @@ import { PaymentMethodWarningsModule } from "@bitwarden/web-vault/app/billing/sh
     IconModule,
     NavigationModule,
     PaymentMethodWarningsModule,
+    ToggleWidthComponent,
   ],
 })
 // eslint-disable-next-line rxjs-angular/prefer-takeuntil

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

@@ -2,13 +2,20 @@ 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 { ToggleWidthComponent } from "@bitwarden/web-vault/app/layouts/toggle-width.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],
+  imports: [
+    SharedModule,
+    NavigationModule,
+    BitLayoutComponent,
+    OrgSwitcherComponent,
+    ToggleWidthComponent,
+  ],
   declarations: [LayoutComponent, NavigationComponent],
 })
 export class LayoutModule {}

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

@@ -41,4 +41,6 @@
       [relativeTo]="route.parent"
     ></bit-nav-item>
   </bit-nav-group>
+
+  <app-toggle-width></app-toggle-width>
 </nav>