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/tools/import/admin-import.component.ts

@@ -1,24 +0,0 @@
-import { Component } from "@angular/core";
-
-import { ImportCollectionServiceAbstraction } from "@bitwarden/importer/core";
-import { ImportComponent } from "@bitwarden/importer/ui";
-
-import { SharedModule } from "../../shared";
-import { CollectionAdminService } from "../../vault/core/collection-admin.service";
-
-import { ImportCollectionAdminService } from "./import-collection-admin.service";
-import { ImportWebComponent } from "./import-web.component";
-
-@Component({
-  templateUrl: "import-web.component.html",
-  standalone: true,
-  imports: [SharedModule, ImportComponent],
-  providers: [
-    {
-      provide: ImportCollectionServiceAbstraction,
-      useClass: ImportCollectionAdminService,
-      deps: [CollectionAdminService],
-    },
-  ],
-})
-export class AdminImportComponent extends ImportWebComponent {}

apps/web/src/app/tools/import/import-web.component.html

@@ -1,18 +1,20 @@
-<h1 bitTypography="h1">{{ "importData" | i18n }}</h1>
-<tools-import
-  (formDisabled)="this.disabled = $event"
-  (formLoading)="this.loading = $event"
-  (onSuccessfulImport)="this.onSuccessfulImport($event)"
-  organizationId="{{ routeOrgId }}"
-></tools-import>
-<button
-  [disabled]="disabled"
-  [loading]="loading"
-  form="import_form_importForm"
-  bitButton
-  type="submit"
-  bitFormButton
-  buttonType="primary"
->
-  {{ "importData" | i18n }}
-</button>
+<app-header></app-header>
+
+<bit-container>
+  <tools-import
+    (formDisabled)="this.disabled = $event"
+    (formLoading)="this.loading = $event"
+    (onSuccessfulImport)="this.onSuccessfulImport($event)"
+  ></tools-import>
+  <button
+    [disabled]="disabled"
+    [loading]="loading"
+    form="import_form_importForm"
+    bitButton
+    type="submit"
+    bitFormButton
+    buttonType="primary"
+  >
+    {{ "importData" | i18n }}
+  </button>
+</bit-container>

apps/web/src/app/tools/import/import-web.component.ts

@@ -1,51 +1,26 @@
-import { Component, OnInit } from "@angular/core";
-import { ActivatedRoute, Router } from "@angular/router";
-import { firstValueFrom } from "rxjs";
+import { Component } from "@angular/core";
+import { Router } from "@angular/router";
 
-import {
-  OrganizationService,
-  canAccessVaultTab,
-} from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { ImportComponent } from "@bitwarden/importer/ui";
 
+import { HeaderModule } from "../../layouts/header/header.module";
 import { SharedModule } from "../../shared";
 
 @Component({
   templateUrl: "import-web.component.html",
   standalone: true,
-  imports: [SharedModule, ImportComponent],
+  imports: [SharedModule, ImportComponent, HeaderModule],
 })
-export class ImportWebComponent implements OnInit {
-  protected routeOrgId: string = null;
+export class ImportWebComponent {
   protected loading = false;
   protected disabled = false;
 
-  constructor(
-    private route: ActivatedRoute,
-    private organizationService: OrganizationService,
-    private router: Router,
-  ) {}
-
-  ngOnInit(): void {
-    this.routeOrgId = this.route.snapshot.paramMap.get("organizationId");
-  }
+  constructor(private router: Router) {}
 
   /**
    * Callback that is called after a successful import.
    */
   protected async onSuccessfulImport(organizationId: string): Promise<void> {
-    if (!this.routeOrgId) {
-      await this.router.navigate(["vault"]);
-      return;
-    }
-
-    const organization = await firstValueFrom(this.organizationService.get$(organizationId));
-    if (organization == null) {
-      return;
-    }
-
-    if (canAccessVaultTab(organization)) {
-      await this.router.navigate(["organizations", organizationId, "vault"]);
-    }
+    await this.router.navigate(["vault"]);
   }
 }