placed new vault cipher list work behind 'desktop-ui-migration-milestone-3' feature flag

apps/desktop/src/app/app-routing.module.ts

@@ -54,7 +54,7 @@ import { Fido2CreateComponent } from "../autofill/modal/credentials/fido2-create
 import { Fido2ExcludedCiphersComponent } from "../autofill/modal/credentials/fido2-excluded-ciphers.component";
 import { Fido2VaultComponent } from "../autofill/modal/credentials/fido2-vault.component";
 import { VaultV2Component } from "../vault/app/vault/vault-v2.component";
-import { VaultComponent } from "../vault/app/vault-v3/vault.component";
+import { VaultWrapperComponent } from "../vault/app/vault-v3/vault-wrapper.component";
 
 import { DesktopLayoutComponent } from "./layout/desktop-layout.component";
 import { SendComponent } from "./tools/send/send.component";
@@ -358,7 +358,7 @@ const routes: Routes = [
     children: [
       {
         path: "new-vault",
-        component: VaultComponent,
+        component: VaultWrapperComponent,
       },
       {
         path: "new-sends",

apps/desktop/src/vault/app/vault-v3/vault-orig.component.html

@@ -0,0 +1,70 @@
+<div id="vault" class="vault vault-v2" attr.aria-hidden="{{ showingModal }}">
+  <app-vault-items-v2
+    id="items"
+    class="items"
+    [activeCipherId]="cipherId"
+    (onCipherClicked)="viewCipher($event)"
+    (onCipherRightClicked)="viewCipherMenu($event)"
+    (onAddCipher)="addCipher($event)"
+  >
+  </app-vault-items-v2>
+  <div class="details" *ngIf="!!action">
+    <app-vault-item-footer
+      id="footer"
+      #footer
+      [cipher]="cipher"
+      [action]="action"
+      (onEdit)="editCipher($event)"
+      (onRestore)="restoreCipher()"
+      (onClone)="cloneCipher($event)"
+      (onDelete)="deleteCipher()"
+      (onCancel)="cancelCipher($event)"
+      (onArchiveToggle)="refreshCurrentCipher()"
+      [masterPasswordAlreadyPrompted]="cipherRepromptId === cipherId"
+    ></app-vault-item-footer>
+    <div class="content">
+      <div class="inner-content">
+        <div class="box">
+          <app-cipher-view *ngIf="action === 'view'" [cipher]="cipher" [collections]="collections">
+          </app-cipher-view>
+          <vault-cipher-form
+            #vaultForm
+            *ngIf="action === 'add' || action === 'edit' || action === 'clone'"
+            formId="cipherForm"
+            [config]="config"
+            (cipherSaved)="savedCipher($event)"
+            [submitBtn]="footer?.submitBtn"
+            (formStatusChange$)="formStatusChanged($event)"
+          >
+            <bit-item slot="attachment-button">
+              <button
+                bit-item-content
+                type="button"
+                (click)="openAttachmentsDialog()"
+                [disabled]="formDisabled"
+              >
+                <div class="tw-flex tw-items-center tw-gap-2">
+                  {{ "attachments" | i18n }}
+                  <app-premium-badge></app-premium-badge>
+                </div>
+                <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
+              </button>
+            </bit-item>
+          </vault-cipher-form>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    id="logo"
+    class="logo"
+    *ngIf="action !== 'add' && action !== 'edit' && action !== 'view' && action !== 'clone'"
+  >
+    <div class="content">
+      <div class="inner-content">
+        <img class="logo-image" alt="Bitwarden" aria-hidden="true" />
+      </div>
+    </div>
+  </div>
+</div>
+<ng-template #folderAddEdit></ng-template>

apps/desktop/src/vault/app/vault-v3/vault-wrapper.component.ts

@@ -0,0 +1,30 @@
+import { CommonModule } from "@angular/common";
+import { Component, OnInit, Type } from "@angular/core";
+
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+
+import { VaultComponent as VaultOrigComponent } from "./vault-orig.component";
+import { VaultComponent } from "./vault.component";
+
+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
+@Component({
+  selector: "app-vault-wrapper",
+  template: '<ng-container *ngComponentOutlet="componentToRender"></ng-container>',
+  imports: [CommonModule],
+})
+export class VaultWrapperComponent implements OnInit {
+   
+  componentToRender: Type<any> | null = null;
+
+  constructor(private configService: ConfigService) {}
+
+  async ngOnInit() {
+    const useMilestone3 = await this.configService.getFeatureFlag(
+      FeatureFlag.DesktopUiMigrationMilestone3,
+    );
+
+    this.componentToRender = useMilestone3 ? VaultComponent : VaultOrigComponent;
+  }
+}

libs/common/src/enums/feature-flag.enum.ts

@@ -78,6 +78,7 @@ export enum FeatureFlag {
   /* Desktop */
   DesktopUiMigrationMilestone1 = "desktop-ui-migration-milestone-1",
   DesktopUiMigrationMilestone2 = "desktop-ui-migration-milestone-2",
+  DesktopUiMigrationMilestone3 = "desktop-ui-migration-milestone-3",
 
   /* UIF */
   RouterFocusManagement = "router-focus-management",
@@ -168,6 +169,7 @@ export const DefaultFeatureFlagValue = {
   /* Desktop */
   [FeatureFlag.DesktopUiMigrationMilestone1]: FALSE,
   [FeatureFlag.DesktopUiMigrationMilestone2]: FALSE,
+  [FeatureFlag.DesktopUiMigrationMilestone3]: FALSE,
 
   /* UIF */
   [FeatureFlag.RouterFocusManagement]: FALSE,