From 841edc10587128d3c64a97e61d297598c57569ee Mon Sep 17 00:00:00 2001 From: Jason Ng Date: Mon, 10 Jun 2024 14:23:29 -0400 Subject: [PATCH] [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 | 18 ++++++ apps/browser/src/popup/app-routing.module.ts | 11 ++-- .../add-edit/add-edit-v2.component.html | 9 +++ .../add-edit/add-edit-v2.component.ts | 64 +++++++++++++++++++ .../new-item-dropdown-v2.component.html | 22 +++++++ .../new-item-dropdown-v2.component.ts | 28 ++++++++ .../components/vault/vault-v2.component.html | 11 +--- .../components/vault/vault-v2.component.ts | 9 ++- .../popup/components/vault/view.component.ts | 4 +- 9 files changed, 156 insertions(+), 20 deletions(-) create mode 100644 apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.html create mode 100644 apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.ts create mode 100644 apps/browser/src/vault/popup/components/vault-v2/new-item-dropdown/new-item-dropdown-v2.component.html create mode 100644 apps/browser/src/vault/popup/components/vault-v2/new-item-dropdown/new-item-dropdown-v2.component.ts diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json index f9bf1bc523e..ecea2deb9ef 100644 --- a/apps/browser/src/_locales/en/messages.json +++ b/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" }, diff --git a/apps/browser/src/popup/app-routing.module.ts b/apps/browser/src/popup/app-routing.module.ts index 97008ab96d9..1109ab73adf 100644 --- a/apps/browser/src/popup/app-routing.module.ts +++ b/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, diff --git a/apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.html b/apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.html new file mode 100644 index 00000000000..09b764cbc8f --- /dev/null +++ b/apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.html @@ -0,0 +1,9 @@ + + + + + + + diff --git a/apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.ts b/apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.ts new file mode 100644 index 00000000000..a3fad87c1b1 --- /dev/null +++ b/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")); + } + } +} diff --git a/apps/browser/src/vault/popup/components/vault-v2/new-item-dropdown/new-item-dropdown-v2.component.html b/apps/browser/src/vault/popup/components/vault-v2/new-item-dropdown/new-item-dropdown-v2.component.html new file mode 100644 index 00000000000..0bd85c21696 --- /dev/null +++ b/apps/browser/src/vault/popup/components/vault-v2/new-item-dropdown/new-item-dropdown-v2.component.html @@ -0,0 +1,22 @@ + + + + + {{ "typeLogin" | i18n }} + + + + {{ "typeCard" | i18n }} + + + + {{ "typeIdentity" | i18n }} + + + + {{ "note" | i18n }} + + diff --git a/apps/browser/src/vault/popup/components/vault-v2/new-item-dropdown/new-item-dropdown-v2.component.ts b/apps/browser/src/vault/popup/components/vault-v2/new-item-dropdown/new-item-dropdown-v2.component.ts new file mode 100644 index 00000000000..e90afec5388 --- /dev/null +++ b/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 } }); + } +} diff --git a/apps/browser/src/vault/popup/components/vault/vault-v2.component.html b/apps/browser/src/vault/popup/components/vault/vault-v2.component.html index 694c0e9be52..7dd06310159 100644 --- a/apps/browser/src/vault/popup/components/vault/vault-v2.component.html +++ b/apps/browser/src/vault/popup/components/vault/vault-v2.component.html @@ -1,11 +1,8 @@ - - - - {{ "new" | i18n }} - + + @@ -18,9 +15,7 @@ {{ "yourVaultIsEmpty" | i18n }} {{ "autofillSuggestionsTip" | i18n }} - + diff --git a/apps/browser/src/vault/popup/components/vault/vault-v2.component.ts b/apps/browser/src/vault/popup/components/vault/vault-v2.component.ts index f6f6872c1c5..9939727806b 100644 --- a/apps/browser/src/vault/popup/components/vault/vault-v2.component.ts +++ b/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"], {}); - } } diff --git a/apps/browser/src/vault/popup/components/vault/view.component.ts b/apps/browser/src/vault/popup/components/vault/view.component.ts index a225db0c11a..211bd8fc099 100644 --- a/apps/browser/src/vault/popup/components/vault/view.component.ts +++ b/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; }