add static open method for folder dialog

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

@@ -64,6 +64,6 @@ export class NewItemDropdownV2Component implements OnInit {
   }
 
   openFolderDialog() {
-    this.dialogService.open(AddEditFolderDialogComponent);
+    AddEditFolderDialogComponent.open(this.dialogService);
   }
 }

apps/browser/src/vault/popup/settings/folders-v2.component.spec.ts

@@ -41,7 +41,8 @@ describe("FoldersV2Component", () => {
   let component: FoldersV2Component;
   let fixture: ComponentFixture<FoldersV2Component>;
   const folderViews$ = new BehaviorSubject<FolderView[]>([]);
-  const open = jest.fn();
+  const open = jest.spyOn(AddEditFolderDialogComponent, "open");
+  const mockDialogService = { open: jest.fn() };
 
   beforeEach(async () => {
     open.mockClear();
@@ -64,7 +65,7 @@ describe("FoldersV2Component", () => {
           imports: [MockPopupHeaderComponent, MockPopupFooterComponent],
         },
       })
-      .overrideProvider(DialogService, { useValue: { open } })
+      .overrideProvider(DialogService, { useValue: mockDialogService })
       .compileComponents();
 
     fixture = TestBed.createComponent(FoldersV2Component);
@@ -97,9 +98,7 @@ describe("FoldersV2Component", () => {
 
     editButton.triggerEventHandler("click");
 
-    expect(open).toHaveBeenCalledWith(AddEditFolderDialogComponent, {
-      data: { editFolderConfig: { folder } },
-    });
+    expect(open).toHaveBeenCalledWith(mockDialogService, { editFolderConfig: { folder } });
   });
 
   it("opens add dialog for new folder when there are no folders", () => {
@@ -110,6 +109,6 @@ describe("FoldersV2Component", () => {
 
     addButton.triggerEventHandler("click");
 
-    expect(open).toHaveBeenCalledWith(AddEditFolderDialogComponent, { data: {} });
+    expect(open).toHaveBeenCalledWith(mockDialogService, {});
   });
 });

apps/browser/src/vault/popup/settings/folders-v2.component.ts

@@ -11,11 +11,7 @@ import {
   DialogService,
   IconButtonModule,
 } from "@bitwarden/components";
-import {
-  AddEditFolderDialogComponent,
-  AddEditFolderDialogData,
-  VaultIcons,
-} from "@bitwarden/vault";
+import { AddEditFolderDialogComponent, VaultIcons } from "@bitwarden/vault";
 
 import { ItemGroupComponent } from "../../../../../../libs/components/src/item/item-group.component";
 import { ItemModule } from "../../../../../../libs/components/src/item/item.module";
@@ -67,8 +63,6 @@ export class FoldersV2Component {
     // If a folder is provided, the edit variant should be shown
     const editFolderConfig = folder ? { folder } : undefined;
 
-    this.dialogService.open<unknown, AddEditFolderDialogData>(AddEditFolderDialogComponent, {
-      data: { editFolderConfig },
-    });
+    AddEditFolderDialogComponent.open(this.dialogService, { editFolderConfig });
   }
 }

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

@@ -74,7 +74,6 @@ import { ServiceUtils } from "@bitwarden/common/vault/service-utils";
 import { DialogService, Icons, ToastService } from "@bitwarden/components";
 import {
   AddEditFolderDialogComponent,
-  AddEditFolderDialogData,
   AddEditFolderDialogResult,
   CipherFormConfig,
   CollectionAssignmentResult,
@@ -572,16 +571,13 @@ export class VaultComponent implements OnInit, OnDestroy {
   }
 
   addFolder = (): void => {
-    this.dialogService.open(AddEditFolderDialogComponent);
+    AddEditFolderDialogComponent.open(this.dialogService);
   };
 
   editFolder = async (folder: FolderFilter): Promise<void> => {
-    const dialogRef = this.dialogService.open<AddEditFolderDialogResult, AddEditFolderDialogData>(
-      AddEditFolderDialogComponent,
-      {
-        data: { editFolderConfig: { folder } },
-      },
-    );
+    const dialogRef = AddEditFolderDialogComponent.open(this.dialogService, {
+      editFolderConfig: { folder },
+    });
 
     const result = await lastValueFrom(dialogRef.closed);
 

libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.ts

@@ -163,4 +163,11 @@ export class AddEditFolderDialogComponent implements AfterViewInit, OnInit {
   private close(result: AddEditFolderDialogResult) {
     this.dialogRef.close(result);
   }
+
+  static open(dialogService: DialogService, data?: AddEditFolderDialogData) {
+    return dialogService.open<AddEditFolderDialogResult, AddEditFolderDialogData>(
+      AddEditFolderDialogComponent,
+      { data },
+    );
+  }
 }