Vertical Vault Navigation (#6957)

* WIP admin console layout

* Update icons

* Migrate more things

* Migrate the last pages

* Move header to web

* Fix story not working

* Convert header component to standalone

* Migrate org layout to standalone

* Enable org switcher

* Add AC to product switcher

* Migrate provider portal to vertical nav

* Migrate PM

* Prettier fixes

* Change AC and PP to use secondary variant layout & update logos

* Remove full width setting

* Remove commented code

* Add header to report pages

* Add provider portal banner

* Fix banner for billing pages

* Move vault title to header

* Prevent scrollbar jumping

* Move send button to header

* Replace search input with bit-search

* Remove unused files and css

* Add banner

* Tweak storage option

* Fix duplicate nav item after merge

* Migrate banner state to state provider framework

* [AC-2078] Fix device approvals header

* [PM-5861] Hide AC from product switcher for users that do not have access

* [PM-5860] Fix Vault and Send page headers

* [AC-2075] Fix missing link on reporting nav group

* [AC-2079] Hide Payment Method and Billing History pages for self-hosted instances

* [AC-2090] Hide reports/event log nav items for users that do not have permission

* [AC-2092] Fix missing provider portal option in product switcher on page load

* Add null check for organization in org layout component

* [AC-2094] Fix missing page header for new client orgs page

* [AC-2093] Update New client button styling

* Fix failing test after merge

* [PM-2087] Use disk-local for web layout banner

* [PM-6041] Update banner copy to read "web app"

* [PM-6094] Update banner link to marketing URL

* [PM-6114] add CL container component to VVR pages (#7802)

* create bit-container component

* add container to all page components

* Fix linting errors after merge with main

* Fix product switcher stories

* Fix web-header stories

* mock org state properly in product switcher stories (#7956)

* refactor: move web layout migration banner logic into a service (#7958)

* make CL codeowner of web header files

* move migration banner logic to service; update stories

* [PM-5862] Ensure a sync has run before hiding navigation links

* Remove leftover banner global state

* Re-add dropped selfHosted ngIf

* Add rel noreferrer

* Remove comment

---------

Co-authored-by: Shane Melton <smelton@bitwarden.com>
Co-authored-by: Will Martin <contact@willmartian.com>

apps/web/src/app/layouts/org-switcher/org-switcher.component.html

@@ -0,0 +1,42 @@
+<bit-nav-group
+  *ngIf="activeOrganization$ | async as activeOrganization"
+  [text]="activeOrganization.name"
+  [ariaLabel]="['organization' | i18n, activeOrganization.name].join(' ')"
+  icon="bwi-business"
+  [route]="['../', activeOrganization.id]"
+  [(open)]="open"
+  [exactMatch]="true"
+>
+  <i
+    slot="end"
+    *ngIf="!activeOrganization.enabled"
+    class="bwi bwi-exclamation-triangle tw-my-auto !text-alt-2"
+    [attr.aria-label]="'organizationIsDisabled' | i18n"
+    appA11yTitle="{{ 'organizationIsDisabled' | i18n }}"
+  ></i>
+  <ng-container *ngIf="organizations$ | async as organizations">
+    <bit-nav-item
+      *ngFor="let org of organizations"
+      [text]="org.name"
+      [ariaLabel]="['organization' | i18n, org.name].join(' ')"
+      [route]="['../', org.id]"
+      (mainContentClicked)="toggle()"
+      [exactMatch]="true"
+    >
+      <i
+        slot="end"
+        *ngIf="org.enabled == false"
+        class="bwi bwi-exclamation-triangle !text-alt-2"
+        [attr.aria-label]="'organizationIsDisabled' | i18n"
+        appA11yTitle="{{ 'organizationIsDisabled' | i18n }}"
+      ></i>
+    </bit-nav-item>
+  </ng-container>
+  <bit-nav-item
+    *ngIf="!hideNewButton"
+    icon="bwi-plus"
+    [text]="'newOrganization' | i18n"
+    route="/create-organization"
+  ></bit-nav-item>
+  <bit-nav-divider></bit-nav-divider>
+</bit-nav-group>

apps/web/src/app/layouts/org-switcher/org-switcher.component.ts

@@ -0,0 +1,64 @@
+import { CommonModule } from "@angular/common";
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+import { combineLatest, map, Observable } from "rxjs";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
+import type { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
+import { NavigationModule } from "@bitwarden/components";
+
+@Component({
+  selector: "org-switcher",
+  templateUrl: "org-switcher.component.html",
+  standalone: true,
+  imports: [CommonModule, JslibModule, NavigationModule],
+})
+export class OrgSwitcherComponent {
+  protected organizations$: Observable<Organization[]> =
+    this.organizationService.organizations$.pipe(
+      map((orgs) =>
+        orgs.filter((org) => this.filter(org)).sort((a, b) => a.name.localeCompare(b.name)),
+      ),
+    );
+
+  protected activeOrganization$: Observable<Organization> = combineLatest([
+    this.route.paramMap,
+    this.organizations$,
+  ]).pipe(map(([params, orgs]) => orgs.find((org) => org.id === params.get("organizationId"))));
+
+  /**
+   * Filter function for displayed organizations in the `org-switcher`
+   * @example
+   * const smFilter = (org: Organization) => org.canAccessSecretsManager
+   * // <org-switcher [filter]="smFilter">
+   */
+  @Input()
+  filter: (org: Organization) => boolean = () => true;
+
+  /**
+   * Is `true` if the expanded content is visible
+   */
+  @Input()
+  open = false;
+  @Output()
+  openChange = new EventEmitter<boolean>();
+
+  /**
+   * Visibility of the New Organization button
+   * (Temporary; will be removed when ability to create organizations is added to SM.)
+   */
+  @Input()
+  hideNewButton = false;
+
+  constructor(
+    private route: ActivatedRoute,
+    private organizationService: OrganizationService,
+  ) {}
+
+  protected toggle(event?: MouseEvent) {
+    event?.stopPropagation();
+    this.open = !this.open;
+    this.openChange.emit(this.open);
+  }
+}