[PM-12571][PM-13807] Add/Edit Folder Dialog (#12487)

* move `add-edit-folder` component to `angular/vault/components` so it can be consumed by other platforms

* add edit/add folder copy to web app copy

* add extension refresh folder dialog to individual vault

* adding folder delete message to the web

* add deletion result for add/edit folder dialog

* allow editing folder from web

* fix strict types for changed files

* update tests

* remove border class so hover state shows

* revert changes to new-item-dropdown-v2

* migrate `AddEditFolderDialogComponent` to `libs/vault` package

* add Created enum type

* add static open method for folder dialog

* add fullName to `FolderFilter` type

* save the full name of a folder before splitting it into parts

* use the full name of the folder filter when available

* use a shallow copy to edit the folder's full name

---------

Co-authored-by: SmithThe4th <gsmith@bitwarden.com>

apps/web/src/app/vault/individual-vault/vault-filter/services/vault-filter.service.ts

@@ -274,6 +274,7 @@ export class VaultFilterService implements VaultFilterServiceAbstraction {
       folderCopy.id = f.id;
       folderCopy.revisionDate = f.revisionDate;
       folderCopy.icon = "bwi-folder";
+      folderCopy.fullName = f.name; // save full folder name before separating it into parts
       const parts = f.name != null ? f.name.replace(/^\/+|\/+$/g, "").split(NestingDelimiter) : [];
       ServiceUtils.nestedTraverse(nodes, 0, parts, folderCopy, null, NestingDelimiter);
     });

apps/web/src/app/vault/individual-vault/vault-filter/shared/models/vault-filter.type.ts

@@ -12,5 +12,13 @@ export type CipherTypeFilter = ITreeNodeObject & { type: CipherStatus; icon: str
 export type CollectionFilter = CollectionAdminView & {
   icon: string;
 };
-export type FolderFilter = FolderView & { icon: string };
+export type FolderFilter = FolderView & {
+  icon: string;
+  /**
+   * Full folder name.
+   *
+   * Used for when the folder `name` property is be separated into parts.
+   */
+  fullName?: string;
+};
 export type OrganizationFilter = Organization & { icon: string; hideOptions?: boolean };

apps/web/src/app/vault/individual-vault/vault.component.ts

@@ -77,6 +77,8 @@ import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { ServiceUtils } from "@bitwarden/common/vault/service-utils";
 import { DialogService, Icons, ToastService } from "@bitwarden/components";
 import {
+  AddEditFolderDialogComponent,
+  AddEditFolderDialogResult,
   CipherFormConfig,
   CollectionAssignmentResult,
   DecryptionFailureDialogComponent,
@@ -118,7 +120,6 @@ import {
   BulkMoveDialogResult,
   openBulkMoveDialog,
 } from "./bulk-action-dialogs/bulk-move-dialog/bulk-move-dialog.component";
-import { FolderAddEditDialogResult, openFolderAddEditDialog } from "./folder-add-edit.component";
 import { VaultBannersComponent } from "./vault-banners/vault-banners.component";
 import { VaultFilterComponent } from "./vault-filter/components/vault-filter.component";
 import { VaultFilterService } from "./vault-filter/services/abstractions/vault-filter.service";
@@ -607,20 +608,24 @@ export class VaultComponent implements OnInit, OnDestroy {
     await this.filterComponent.filters?.organizationFilter?.action(orgNode);
   }
 
-  addFolder = async (): Promise<void> => {
-    openFolderAddEditDialog(this.dialogService);
+  addFolder = (): void => {
+    AddEditFolderDialogComponent.open(this.dialogService);
   };
 
   editFolder = async (folder: FolderFilter): Promise<void> => {
-    const dialog = openFolderAddEditDialog(this.dialogService, {
-      data: {
-        folderId: folder.id,
+    const dialogRef = AddEditFolderDialogComponent.open(this.dialogService, {
+      editFolderConfig: {
+        // Shallow copy is used so the original folder object is not modified
+        folder: {
+          ...folder,
+          name: folder.fullName ?? folder.name, // If the filter has a fullName populated, use that as the editable name
+        },
       },
     });
 
-    const result = await lastValueFrom(dialog.closed);
+    const result = await lastValueFrom(dialogRef.closed);
 
-    if (result === FolderAddEditDialogResult.Deleted) {
+    if (result === AddEditFolderDialogResult.Deleted) {
       await this.router.navigate([], {
         queryParams: { folderId: null },
         queryParamsHandling: "merge",

apps/web/src/locales/en/messages.json

@@ -485,6 +485,18 @@
   "editFolder": {
     "message": "Edit folder"
   },
+  "newFolder": {
+    "message": "New folder"
+  },
+  "folderName": {
+    "message": "Folder name"
+  },
+  "folderHintText": {
+    "message": "Nest a folder by adding the parent folder's name followed by a “/”. Example: Social/Forums"
+  },
+  "deleteFolderPermanently": {
+    "message": "Are you sure you want to permanently delete this folder?"
+  },
   "baseDomain": {
     "message": "Base domain",
     "description": "Domain name. Example: website.com"