[PM-7102] Create Add/Edit container for Item v2 work (#9541)

* set up new add-edit-v2 component

apps/browser/src/_locales/en/messages.json

@@ -1434,6 +1434,24 @@
   "typeIdentity": {
     "message": "Identity"
   },
+  "newItemHeader":{
+    "message": "New $TYPE$",
+    "placeholders": {
+      "type": {
+        "content": "$1",
+        "example": "Login"
+      }
+    }
+  },
+  "editItemHeader":{
+    "message": "Edit $TYPE$",
+    "placeholders": {
+      "type": {
+        "content": "$1",
+        "example": "Login"
+      }
+    }
+  },
   "passwordHistory": {
     "message": "Password history"
   },

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

@@ -57,6 +57,7 @@ import { VaultFilterComponent } from "../vault/popup/components/vault/vault-filt
 import { VaultItemsComponent } from "../vault/popup/components/vault/vault-items.component";
 import { VaultV2Component } from "../vault/popup/components/vault/vault-v2.component";
 import { ViewComponent } from "../vault/popup/components/vault/view.component";
+import { AddEditV2Component } from "../vault/popup/components/vault-v2/add-edit/add-edit-v2.component";
 import { AppearanceComponent } from "../vault/popup/settings/appearance.component";
 import { FolderAddEditComponent } from "../vault/popup/settings/folder-add-edit.component";
 import { FoldersComponent } from "../vault/popup/settings/folders.component";
@@ -195,20 +196,18 @@ const routes: Routes = [
     canActivate: [AuthGuard],
     data: { state: "cipher-password-history" },
   },
-  {
+  ...extensionRefreshSwap(AddEditComponent, AddEditV2Component, {
     path: "add-cipher",
-    component: AddEditComponent,
     canActivate: [AuthGuard, debounceNavigationGuard()],
     data: { state: "add-cipher" },
     runGuardsAndResolvers: "always",
-  },
-  {
+  }),
+  ...extensionRefreshSwap(AddEditComponent, AddEditV2Component, {
     path: "edit-cipher",
-    component: AddEditComponent,
     canActivate: [AuthGuard, debounceNavigationGuard()],
     data: { state: "edit-cipher" },
     runGuardsAndResolvers: "always",
-  },
+  }),
   {
     path: "share-cipher",
     component: ShareComponent,

apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.html

@@ -0,0 +1,9 @@
+<popup-page>
+  <popup-header slot="header" [pageTitle]="headerText" showBackButton> </popup-header>
+
+  <popup-footer slot="footer">
+    <button bitButton type="button" buttonType="primary">
+      {{ "save" | i18n }}
+    </button>
+  </popup-footer>
+</popup-page>

apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.ts

@@ -0,0 +1,64 @@
+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { FormsModule } from "@angular/forms";
+import { ActivatedRoute } from "@angular/router";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { CipherType } from "@bitwarden/common/vault/enums";
+import { SearchModule, ButtonModule } from "@bitwarden/components";
+
+import { PopupFooterComponent } from "../../../../../platform/popup/layout/popup-footer.component";
+import { PopupHeaderComponent } from "../../../../../platform/popup/layout/popup-header.component";
+import { PopupPageComponent } from "../../../../../platform/popup/layout/popup-page.component";
+
+@Component({
+  selector: "app-add-edit-v2",
+  templateUrl: "add-edit-v2.component.html",
+  standalone: true,
+  imports: [
+    CommonModule,
+    SearchModule,
+    JslibModule,
+    FormsModule,
+    ButtonModule,
+    PopupPageComponent,
+    PopupHeaderComponent,
+    PopupFooterComponent,
+  ],
+})
+export class AddEditV2Component {
+  headerText: string;
+
+  constructor(
+    private route: ActivatedRoute,
+    private i18nService: I18nService,
+  ) {
+    this.subscribeToParams();
+  }
+
+  subscribeToParams(): void {
+    this.route.queryParams.pipe(takeUntilDestroyed()).subscribe((params) => {
+      const isNew = params.isNew.toLowerCase() === "true";
+      const cipherType = parseInt(params.type);
+
+      this.headerText = this.setHeader(isNew, cipherType);
+    });
+  }
+
+  setHeader(isNew: boolean, type: CipherType) {
+    const partOne = isNew ? "newItemHeader" : "editItemHeader";
+
+    switch (type) {
+      case CipherType.Login:
+        return this.i18nService.t(partOne, this.i18nService.t("typeLogin"));
+      case CipherType.Card:
+        return this.i18nService.t(partOne, this.i18nService.t("typeCard"));
+      case CipherType.Identity:
+        return this.i18nService.t(partOne, this.i18nService.t("typeIdentity"));
+      case CipherType.SecureNote:
+        return this.i18nService.t(partOne, this.i18nService.t("note"));
+    }
+  }
+}

apps/browser/src/vault/popup/components/vault-v2/new-item-dropdown/new-item-dropdown-v2.component.html

@@ -0,0 +1,22 @@
+<button bitButton [bitMenuTriggerFor]="itemOptions" buttonType="primary" type="button">
+  <i class="bwi bwi-plus-f" aria-hidden="true"></i>
+  {{ "new" | i18n }}
+</button>
+<bit-menu #itemOptions>
+  <a type="button" bitMenuItem (click)="newItemNavigate(cipherType.Login)">
+    <i class="bwi bwi-globe" slot="start" aria-hidden="true"></i>
+    {{ "typeLogin" | i18n }}
+  </a>
+  <a type="button" bitMenuItem (click)="newItemNavigate(cipherType.Card)">
+    <i class="bwi bwi-credit-card" slot="start" aria-hidden="true"></i>
+    {{ "typeCard" | i18n }}
+  </a>
+  <a type="button" bitMenuItem (click)="newItemNavigate(cipherType.Identity)">
+    <i class="bwi bwi-id-card" slot="start" aria-hidden="true"></i>
+    {{ "typeIdentity" | i18n }}
+  </a>
+  <a type="button" bitMenuItem (click)="newItemNavigate(cipherType.SecureNote)">
+    <i class="bwi bwi-sticky-note" slot="start" aria-hidden="true"></i>
+    {{ "note" | i18n }}
+  </a>
+</bit-menu>

apps/browser/src/vault/popup/components/vault-v2/new-item-dropdown/new-item-dropdown-v2.component.ts

@@ -0,0 +1,28 @@
+import { CommonModule } from "@angular/common";
+import { Component, OnDestroy, OnInit } from "@angular/core";
+import { Router, RouterLink } from "@angular/router";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { CipherType } from "@bitwarden/common/vault/enums";
+import { ButtonModule, NoItemsModule, MenuModule } from "@bitwarden/components";
+
+@Component({
+  selector: "app-new-item-dropdown",
+  templateUrl: "new-item-dropdown-v2.component.html",
+  standalone: true,
+  imports: [NoItemsModule, JslibModule, CommonModule, ButtonModule, RouterLink, MenuModule],
+})
+export class NewItemDropdownV2Component implements OnInit, OnDestroy {
+  cipherType = CipherType;
+
+  constructor(private router: Router) {}
+
+  ngOnInit(): void {}
+
+  ngOnDestroy(): void {}
+
+  // TODO PM-6826: add selectedVault query param
+  newItemNavigate(type: CipherType) {
+    void this.router.navigate(["/add-cipher"], { queryParams: { type: type, isNew: true } });
+  }
+}

apps/browser/src/vault/popup/components/vault/vault-v2.component.html

@@ -1,11 +1,8 @@
 <popup-page>
   <popup-header slot="header" [pageTitle]="'vault' | i18n">
     <ng-container slot="end">
-      <!-- TODO PM-6826: add selectedVault query param -->
-      <a bitButton buttonType="primary" type="button" routerLink="/add-cipher">
-        <i class="bwi bwi-plus-f" aria-hidden="true"></i>
-        {{ "new" | i18n }}
-      </a>
+      <app-new-item-dropdown></app-new-item-dropdown>
+
       <app-pop-out></app-pop-out>
       <app-current-account></app-current-account>
     </ng-container>
@@ -18,9 +15,7 @@
     <bit-no-items [icon]="vaultIcon">
       <ng-container slot="title">{{ "yourVaultIsEmpty" | i18n }}</ng-container>
       <ng-container slot="description">{{ "autofillSuggestionsTip" | i18n }}</ng-container>
-      <button slot="button" type="button" bitButton buttonType="primary" (click)="addCipher()">
-        {{ "new" | i18n }}
-      </button>
+      <app-new-item-dropdown slot="button"></app-new-item-dropdown>
     </bit-no-items>
   </div>
 

apps/browser/src/vault/popup/components/vault/vault-v2.component.ts

@@ -5,6 +5,7 @@ import { Router, RouterLink } from "@angular/router";
 import { combineLatest } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { CipherType } from "@bitwarden/common/vault/enums";
 import { ButtonModule, Icons, NoItemsModule } from "@bitwarden/components";
 
 import { CurrentAccountComponent } from "../../../../auth/popup/account-switching/current-account.component";
@@ -13,6 +14,7 @@ import { PopupHeaderComponent } from "../../../../platform/popup/layout/popup-he
 import { PopupPageComponent } from "../../../../platform/popup/layout/popup-page.component";
 import { VaultPopupItemsService } from "../../services/vault-popup-items.service";
 import { AutofillVaultListItemsComponent, VaultListItemsContainerComponent } from "../vault-v2";
+import { NewItemDropdownV2Component } from "../vault-v2/new-item-dropdown/new-item-dropdown-v2.component";
 import { VaultListFiltersComponent } from "../vault-v2/vault-list-filters/vault-list-filters.component";
 import { VaultV2SearchComponent } from "../vault-v2/vault-search/vault-v2-search.component";
 
@@ -40,9 +42,11 @@ enum VaultState {
     ButtonModule,
     RouterLink,
     VaultV2SearchComponent,
+    NewItemDropdownV2Component,
   ],
 })
 export class VaultV2Component implements OnInit, OnDestroy {
+  cipherType = CipherType;
   protected favoriteCiphers$ = this.vaultPopupItemsService.favoriteCiphers$;
   protected remainingCiphers$ = this.vaultPopupItemsService.remainingCiphers$;
 
@@ -86,9 +90,4 @@ export class VaultV2Component implements OnInit, OnDestroy {
   ngOnInit(): void {}
 
   ngOnDestroy(): void {}
-
-  addCipher() {
-    // TODO: Add currently filtered organization to query params if available
-    void this.router.navigate(["/add-cipher"], {});
-  }
 }

apps/browser/src/vault/popup/components/vault/view.component.ts

@@ -198,7 +198,9 @@ export class ViewComponent extends BaseViewComponent {
 
     // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    this.router.navigate(["/edit-cipher"], { queryParams: { cipherId: this.cipher.id } });
+    this.router.navigate(["/edit-cipher"], {
+      queryParams: { cipherId: this.cipher.id, type: this.cipher.type, isNew: false },
+    });
     return true;
   }