feat(extension-login-approvals): [Auth/PM-14939] devices list view for browser (#14620)

Creates a new `DeviceManagementComponent` that fetches devices and formats them before handing them off to a view component for display.

View components:

- `DeviceManagementTableComponent` - displays on medium to large screens
- `DeviceManagementItemGroupComponent` - displays on small screens

Feature flag: `PM14938_BrowserExtensionLoginApproval`

apps/web/src/app/auth/settings/security/device-management-old.component.spec.ts

@@ -20,7 +20,7 @@ import {
 import { SharedModule } from "../../../shared";
 import { VaultBannersService } from "../../../vault/individual-vault/vault-banners/services/vault-banners.service";
 
-import { DeviceManagementComponent } from "./device-management.component";
+import { DeviceManagementOldComponent } from "./device-management-old.component";
 
 class MockResizeObserver {
   observe = jest.fn();
@@ -35,8 +35,8 @@ interface Message {
   notificationId?: string;
 }
 
-describe("DeviceManagementComponent", () => {
-  let fixture: ComponentFixture<DeviceManagementComponent>;
+describe("DeviceManagementOldComponent", () => {
+  let fixture: ComponentFixture<DeviceManagementOldComponent>;
   let messageSubject: Subject<Message>;
   let mockDevices: DeviceView[];
   let vaultBannersService: VaultBannersService;
@@ -66,7 +66,7 @@ describe("DeviceManagementComponent", () => {
         SharedModule,
         TableModule,
         PopoverModule,
-        DeviceManagementComponent,
+        DeviceManagementOldComponent,
       ],
       providers: [
         {
@@ -130,7 +130,7 @@ describe("DeviceManagementComponent", () => {
       ],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(DeviceManagementComponent);
+    fixture = TestBed.createComponent(DeviceManagementOldComponent);
 
     vaultBannersService = TestBed.inject(VaultBannersService);
   });

apps/web/src/app/auth/settings/security/device-management-old.component.ts

@@ -45,10 +45,10 @@ interface DeviceTableData {
  */
 @Component({
   selector: "app-device-management",
-  templateUrl: "./device-management.component.html",
+  templateUrl: "./device-management-old.component.html",
   imports: [CommonModule, SharedModule, TableModule, PopoverModule],
 })
-export class DeviceManagementComponent {
+export class DeviceManagementOldComponent {
   protected dataSource = new TableDataSource<DeviceTableData>();
   protected currentDevice: DeviceView | undefined;
   protected loading = true;

apps/web/src/app/auth/settings/security/security-routing.module.ts

@@ -1,13 +1,15 @@
 import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 
+import { DeviceManagementComponent } from "@bitwarden/angular/auth/device-management/device-management.component";
 import { canAccessFeature } from "@bitwarden/angular/platform/guard/feature-flag.guard";
+import { featureFlaggedRoute } from "@bitwarden/angular/platform/utils/feature-flagged-route";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 
 import { ChangePasswordComponent } from "../change-password.component";
 import { TwoFactorSetupComponent } from "../two-factor/two-factor-setup.component";
 
-import { DeviceManagementComponent } from "./device-management.component";
+import { DeviceManagementOldComponent } from "./device-management-old.component";
 import { PasswordSettingsComponent } from "./password-settings/password-settings.component";
 import { SecurityKeysComponent } from "./security-keys.component";
 import { SecurityComponent } from "./security.component";
@@ -55,11 +57,15 @@ const routes: Routes = [
         component: SecurityKeysComponent,
         data: { titleId: "keys" },
       },
-      {
-        path: "device-management",
-        component: DeviceManagementComponent,
-        data: { titleId: "devices" },
-      },
+      ...featureFlaggedRoute({
+        defaultComponent: DeviceManagementOldComponent,
+        flaggedComponent: DeviceManagementComponent,
+        featureFlag: FeatureFlag.PM14938_BrowserExtensionLoginApproval,
+        routeOptions: {
+          path: "device-management",
+          data: { titleId: "devices" },
+        },
+      }),
     ],
   },
 ];