[PM-6827] Browser Extension Refresh - Tabs Routing (#9004)

* [PM-6827] Add componentRouteSwap util function

* [PM-6827] Add extension-refresh feature flag

* [PM-6827] Add extension-refresh route swap utils

* [PM-6827] Add the TabsV2 component

* [PM-6827] Add the TabsV2 to routing module

* [PM-6827] Fix route prefixes in popup-tab-navigation component

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

@@ -2,9 +2,9 @@ import { Injectable, NgModule } from "@angular/core";
 import { ActivatedRouteSnapshot, RouteReuseStrategy, RouterModule, Routes } from "@angular/router";
 
 import {
-  redirectGuard,
   AuthGuard,
   lockGuard,
+  redirectGuard,
   tdeDecryptionRequiredGuard,
   unauthGuardFn,
 } from "@bitwarden/angular/auth/guards";
@@ -47,6 +47,7 @@ import { VaultItemsComponent } from "../vault/popup/components/vault/vault-items
 import { ViewComponent } from "../vault/popup/components/vault/view.component";
 import { FolderAddEditComponent } from "../vault/popup/settings/folder-add-edit.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";
@@ -54,6 +55,7 @@ import { HelpAndFeedbackComponent } from "./settings/help-and-feedback.component
 import { OptionsComponent } from "./settings/options.component";
 import { SettingsComponent } from "./settings/settings.component";
 import { SyncComponent } from "./settings/sync.component";
+import { TabsV2Component } from "./tabs-v2.component";
 import { TabsComponent } from "./tabs.component";
 
 const unauthRouteOverrides = {
@@ -322,9 +324,8 @@ const routes: Routes = [
     canActivate: [AuthGuard],
     data: { state: "help-and-feedback" },
   },
-  {
+  ...extensionRefreshSwap(TabsComponent, TabsV2Component, {
     path: "tabs",
-    component: TabsComponent,
     data: { state: "tabs" },
     children: [
       {
@@ -336,6 +337,7 @@ const routes: Routes = [
         path: "current",
         component: CurrentTabComponent,
         canActivate: [AuthGuard],
+        canMatch: [extensionRefreshRedirect("/tabs/vault")],
         data: { state: "tabs_current" },
         runGuardsAndResolvers: "always",
       },
@@ -364,7 +366,7 @@ const routes: Routes = [
         data: { state: "tabs_send" },
       },
     ],
-  },
+  }),
   {
     path: "account-switcher",
     component: AccountSwitcherComponent,