[PM-7175] Create vault settings component (navigational changes) (#8840)

* Move about.component into tools ownership

* Split out account security settings

Move settings.component.ts to auth/popup/settings and rename to account-security.component.ts
Move controls from settings.component.html and create account-security.component.html
Move settings.component.html to tools/popup/settings.component.html
Create settings.component.ts under tools/popup/settings
Fixup module imports and routing
Add new strings to en/message.json

* Move vault-timeout-input.component to auth

* Move await-desktop-dialog.component to auth

* Move folder.component to vault/popup/settings

* Move sync.component to vault/popup/settings

* Create vault settings component

Move controls from settings.component.html to vault-settings.component.html
Register VaultSettingsComponent within app.module
Register route for VaultSettingsComponent
Add new string in en/messages.json

* Fix routing for back navigation on child pages of vault settings

* Add transitions to vault-settings sub-pages

* Add transition for account-security

* Add an await to popping out the extension

* Use "Vault" instead of "Vault settings" as title

---------

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>

apps/browser/src/popup/app-routing.animations.ts

@@ -177,20 +177,24 @@ export const routerTransition = trigger("routerTransition", [
   transition("tabs => account-security", inSlideLeft),
   transition("account-security => tabs", outSlideRight),
 
-  transition("tabs => import", inSlideLeft),
-  transition("import => tabs", outSlideRight),
+  // Vault settings
+  transition("tabs => vault-settings", inSlideLeft),
+  transition("vault-settings => tabs", outSlideRight),
 
-  transition("tabs => export", inSlideLeft),
-  transition("export => tabs", outSlideRight),
+  transition("vault-settings => import", inSlideLeft),
+  transition("import => vault-settings", outSlideRight),
 
-  transition("tabs => folders", inSlideLeft),
-  transition("folders => tabs", outSlideRight),
+  transition("vault-settings => export", inSlideLeft),
+  transition("export => vault-settings", outSlideRight),
+
+  transition("vault-settings => folders", inSlideLeft),
+  transition("folders => vault-settings", outSlideRight),
 
   transition("folders => edit-folder, folders => add-folder", inSlideUp),
   transition("edit-folder => folders, add-folder => folders", outSlideDown),
 
-  transition("tabs => sync", inSlideLeft),
-  transition("sync => tabs", outSlideRight),
+  transition("vault-settings => sync", inSlideLeft),
+  transition("sync => vault-settings", outSlideRight),
 
   transition("tabs => excluded-domains", inSlideLeft),
   transition("excluded-domains => tabs", outSlideRight),

apps/browser/src/popup/app-routing.module.ts

@@ -48,14 +48,15 @@ import { VaultFilterComponent } from "../vault/popup/components/vault/vault-filt
 import { VaultItemsComponent } from "../vault/popup/components/vault/vault-items.component";
 import { ViewComponent } from "../vault/popup/components/vault/view.component";
 import { FolderAddEditComponent } from "../vault/popup/settings/folder-add-edit.component";
+import { FoldersComponent } from "../vault/popup/settings/folders.component";
+import { SyncComponent } from "../vault/popup/settings/sync.component";
+import { VaultSettingsComponent } from "../vault/popup/settings/vault-settings.component";
 
 import { extensionRefreshRedirect, extensionRefreshSwap } from "./extension-refresh-route-utils";
 import { debounceNavigationGuard } from "./services/debounce-navigation.service";
 import { ExcludedDomainsComponent } from "./settings/excluded-domains.component";
-import { FoldersComponent } from "./settings/folders.component";
 import { HelpAndFeedbackComponent } from "./settings/help-and-feedback.component";
 import { OptionsComponent } from "./settings/options.component";
-import { SyncComponent } from "./settings/sync.component";
 import { TabsV2Component } from "./tabs-v2.component";
 import { TabsComponent } from "./tabs.component";
 
@@ -253,6 +254,12 @@ const routes: Routes = [
     canActivate: [AuthGuard],
     data: { state: "account-security" },
   },
+  {
+    path: "vault-settings",
+    component: VaultSettingsComponent,
+    canActivate: [AuthGuard],
+    data: { state: "vault-settings" },
+  },
   {
     path: "folders",
     component: FoldersComponent,

apps/browser/src/popup/app.module.ts

@@ -70,6 +70,9 @@ import { VaultSelectComponent } from "../vault/popup/components/vault/vault-sele
 import { ViewCustomFieldsComponent } from "../vault/popup/components/vault/view-custom-fields.component";
 import { ViewComponent } from "../vault/popup/components/vault/view.component";
 import { FolderAddEditComponent } from "../vault/popup/settings/folder-add-edit.component";
+import { FoldersComponent } from "../vault/popup/settings/folders.component";
+import { SyncComponent } from "../vault/popup/settings/sync.component";
+import { VaultSettingsComponent } from "../vault/popup/settings/vault-settings.component";
 
 import { AppRoutingModule } from "./app-routing.module";
 import { AppComponent } from "./app.component";
@@ -77,10 +80,8 @@ import { PopOutComponent } from "./components/pop-out.component";
 import { UserVerificationComponent } from "./components/user-verification.component";
 import { ServicesModule } from "./services/services.module";
 import { ExcludedDomainsComponent } from "./settings/excluded-domains.component";
-import { FoldersComponent } from "./settings/folders.component";
 import { HelpAndFeedbackComponent } from "./settings/help-and-feedback.component";
 import { OptionsComponent } from "./settings/options.component";
-import { SyncComponent } from "./settings/sync.component";
 import { TabsV2Component } from "./tabs-v2.component";
 import { TabsComponent } from "./tabs.component";
 
@@ -159,6 +160,7 @@ import "../platform/popup/locales";
     SetPasswordComponent,
     AccountSecurityComponent,
     SettingsComponent,
+    VaultSettingsComponent,
     ShareComponent,
     SsoComponent,
     SyncComponent,

apps/browser/src/tools/popup/settings/export.component.html

@@ -1,7 +1,7 @@
 <form (ngSubmit)="submit()" [formGroup]="exportForm">
   <header>
     <div class="left">
-      <button type="button" routerLink="/tabs/settings">
+      <button type="button" routerLink="/vault-settings">
         <span class="header-icon" aria-hidden="true"><i class="bwi bwi-angle-left"></i></span>
         <span>{{ "back" | i18n }}</span>
       </button>

apps/browser/src/tools/popup/settings/import/import-browser.component.html

@@ -1,6 +1,6 @@
 <header>
   <div class="left">
-    <button type="button" routerLink="/tabs/settings">
+    <button type="button" routerLink="/vault-settings">
       <span class="header-icon" aria-hidden="true"><i class="bwi bwi-angle-left"></i></span>
       <span>{{ "back" | i18n }}</span>
     </button>

apps/browser/src/tools/popup/settings/settings.component.html

@@ -30,17 +30,9 @@
       <button
         type="button"
         class="box-content-row box-content-row-flex text-default"
-        routerLink="/folders"
+        routerLink="/vault-settings"
       >
-        <div class="row-main">{{ "folders" | i18n }}</div>
-        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
-      </button>
-      <button
-        type="button"
-        class="box-content-row box-content-row-flex text-default"
-        routerLink="/sync"
-      >
-        <div class="row-main">{{ "sync" | i18n }}</div>
+        <div class="row-main">{{ "vault" | i18n }}</div>
         <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
       </button>
       <button
@@ -72,27 +64,6 @@
   <div class="box list">
     <h2 class="box-header">{{ "tools" | i18n }}</h2>
     <div class="box-content single-line">
-      <button
-        type="button"
-        class="box-content-row box-content-row-flex text-default"
-        appStopClick
-        (click)="import()"
-      >
-        <div class="row-main">{{ "importItems" | i18n }}</div>
-        <i
-          class="bwi bwi-external-link bwi-lg row-sub-icon bwi-rotate-270 bwi-fw"
-          aria-hidden="true"
-        ></i>
-      </button>
-      <button
-        type="button"
-        class="box-content-row box-content-row-flex text-default"
-        appStopClick
-        (click)="export()"
-      >
-        <div class="row-main">{{ "exportVault" | i18n }}</div>
-        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
-      </button>
       <button
         type="button"
         class="box-content-row box-content-row-flex text-default"

apps/browser/src/vault/popup/settings/folders.component.html

@@ -1,6 +1,6 @@
 <header>
   <div class="left">
-    <button type="button" routerLink="/tabs/settings">
+    <button type="button" routerLink="/vault-settings">
       <span class="header-icon"><i class="bwi bwi-angle-left" aria-hidden="true"></i></span>
       <span>{{ "back" | i18n }}</span>
     </button>

apps/browser/src/vault/popup/settings/sync.component.html

@@ -1,6 +1,6 @@
 <header>
   <div class="left">
-    <button type="button" routerLink="/tabs/settings">
+    <button type="button" routerLink="/vault-settings">
       <span class="header-icon"><i class="bwi bwi-angle-left" aria-hidden="true"></i></span>
       <span>{{ "back" | i18n }}</span>
     </button>

apps/browser/src/vault/popup/settings/vault-settings.component.html

@@ -0,0 +1,56 @@
+<app-header>
+  <div class="left">
+    <button type="button" routerLink="/tabs/settings">
+      <span class="header-icon"><i class="bwi bwi-angle-left" aria-hidden="true"></i></span>
+      <span>{{ "back" | i18n }}</span>
+    </button>
+  </div>
+  <h1 class="center">
+    <span class="title">{{ "vault" | i18n }}</span>
+  </h1>
+  <div class="right">
+    <app-pop-out></app-pop-out>
+  </div>
+</app-header>
+<main tabindex="-1">
+  <div class="box list">
+    <div class="box-content single-line">
+      <button
+        type="button"
+        class="box-content-row box-content-row-flex text-default"
+        routerLink="/folders"
+      >
+        <div class="row-main">{{ "folders" | i18n }}</div>
+        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
+      </button>
+      <button
+        type="button"
+        class="box-content-row box-content-row-flex text-default"
+        appStopClick
+        (click)="import()"
+      >
+        <div class="row-main">{{ "importItems" | i18n }}</div>
+        <i
+          class="bwi bwi-external-link bwi-lg row-sub-icon bwi-rotate-270 bwi-fw"
+          aria-hidden="true"
+        ></i>
+      </button>
+      <button
+        type="button"
+        class="box-content-row box-content-row-flex text-default"
+        routerLink="/export"
+      >
+        <div class="row-main">{{ "exportVault" | i18n }}</div>
+        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
+      </button>
+      <button
+        type="button"
+        class="box-content-row box-content-row-flex text-default"
+        routerLink="/sync"
+      >
+        <div class="row-main">{{ "sync" | i18n }}</div>
+        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
+      </button>
+    </div>
+  </div>
+</main>

apps/browser/src/vault/popup/settings/vault-settings.component.ts

@@ -0,0 +1,25 @@
+import { Component } from "@angular/core";
+import { Router } from "@angular/router";
+
+import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
+
+import { BrowserApi } from "../../../platform/browser/browser-api";
+import BrowserPopupUtils from "../../../platform/popup/browser-popup-utils";
+
+@Component({
+  selector: "vault-settings",
+  templateUrl: "vault-settings.component.html",
+})
+export class VaultSettingsComponent {
+  constructor(
+    public messagingService: MessagingService,
+    private router: Router,
+  ) {}
+
+  async import() {
+    await this.router.navigate(["/import"]);
+    if (await BrowserApi.isPopupOpen()) {
+      await BrowserPopupUtils.openCurrentPagePopout(window);
+    }
+  }
+}