[PM-27793] Create new v3 vault component (#17684)

Created Vault component for desktop vault-v3
- copied content from vault-v2.component.ts/html
- removed vault filters from html

apps/desktop/src/app/layout/desktop-layout.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from "@angular/core";
+import { Component } from "@angular/core";
 import { RouterModule } from "@angular/router";
 
 import { PasswordManagerLogo } from "@bitwarden/assets/svg";
@@ -7,11 +7,12 @@ import { I18nPipe } from "@bitwarden/ui-common";
 
 import { DesktopSideNavComponent } from "./desktop-side-nav.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-layout",
   imports: [RouterModule, I18nPipe, LayoutComponent, NavigationModule, DesktopSideNavComponent],
   templateUrl: "./desktop-layout.component.html",
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DesktopLayoutComponent {
   protected readonly logo = PasswordManagerLogo;

apps/desktop/src/vault/app/vault-v3/vault.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.component.spec.ts

@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from "@angular/core/testing";
-
-import { VaultComponent } from "./vault.component";
-
-describe("VaultComponent", () => {
-  let component: VaultComponent;
-  let fixture: ComponentFixture<VaultComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [VaultComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(VaultComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it("creates component", () => {
-    expect(component).toBeTruthy();
-  });
-});