move types into the grid component to streamline the api integration

Author: nick-livefront

libs/vault/src/components/add-item-dialog/add-item-dialog.component.html

@@ -7,9 +7,7 @@
       [canCreateFolder]="data.canCreateFolder"
       [canCreateCollection]="data.canCreateCollection"
       [canCreateSshKey]="data.canCreateSshKey"
-      (cipherSelected)="onCipherSelected($event)"
-      (folderSelected)="onFolderSelected()"
-      (collectionSelected)="onCollectionSelected()"
+      (itemSelected)="onItemSelected($event)"
     />
   </div>
 </bit-dialog>

libs/vault/src/components/add-item-dialog/add-item-dialog.component.spec.ts

@@ -59,7 +59,10 @@ describe("AddItemDialogComponent", () => {
       canCreateSshKey: true,
     });
 
-    getGrid().cipherSelected.emit(CipherType.Login);
+    getGrid().itemSelected.emit({
+      result: AddItemDialogResult.Cipher,
+      cipherType: CipherType.Login,
+    });
 
     expect(close).toHaveBeenCalledWith({
       result: AddItemDialogResult.Cipher,
@@ -74,7 +77,7 @@ describe("AddItemDialogComponent", () => {
       canCreateSshKey: false,
     });
 
-    getGrid().folderSelected.emit();
+    getGrid().itemSelected.emit({ result: AddItemDialogResult.Folder });
 
     expect(close).toHaveBeenCalledWith({ result: AddItemDialogResult.Folder });
   });
@@ -86,7 +89,7 @@ describe("AddItemDialogComponent", () => {
       canCreateSshKey: false,
     });
 
-    getGrid().collectionSelected.emit();
+    getGrid().itemSelected.emit({ result: AddItemDialogResult.Collection });
 
     expect(close).toHaveBeenCalledWith({ result: AddItemDialogResult.Collection });
   });

libs/vault/src/components/add-item-dialog/add-item-dialog.component.ts

@@ -1,24 +1,12 @@
 import { ChangeDetectionStrategy, Component, inject } from "@angular/core";
 
-import { CipherType } from "@bitwarden/common/vault/enums";
-import { UnionOfValues } from "@bitwarden/common/vault/types/union-of-values";
 import { DIALOG_DATA, DialogModule, DialogRef, DialogService } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
 
-import { AddItemGridComponent } from "../add-item-grid/add-item-grid.component";
+import { AddItemGridComponent, AddItemGridResult } from "../add-item-grid/add-item-grid.component";
 
-export const AddItemDialogResult = Object.freeze({
-  Cipher: "cipher",
-  Folder: "folder",
-  Collection: "collection",
-} as const);
-
-export type AddItemDialogResult = UnionOfValues<typeof AddItemDialogResult>;
-
-export type AddItemDialogCloseResult =
-  | { result: typeof AddItemDialogResult.Cipher; cipherType: CipherType }
-  | { result: typeof AddItemDialogResult.Folder }
-  | { result: typeof AddItemDialogResult.Collection };
+export { AddItemGridResult as AddItemDialogResult } from "../add-item-grid/add-item-grid.component";
+export type AddItemDialogCloseResult = AddItemGridResult;
 
 export type AddItemDialogData = {
   canCreateFolder: boolean;
@@ -36,16 +24,8 @@ export class AddItemDialogComponent {
   protected readonly dialogRef = inject<DialogRef<AddItemDialogCloseResult>>(DialogRef);
   protected readonly data = inject<AddItemDialogData>(DIALOG_DATA);
 
-  protected onCipherSelected(cipherType: CipherType): void {
-    this.dialogRef.close({ result: AddItemDialogResult.Cipher, cipherType });
-  }
-
-  protected onFolderSelected(): void {
-    this.dialogRef.close({ result: AddItemDialogResult.Folder });
-  }
-
-  protected onCollectionSelected(): void {
-    this.dialogRef.close({ result: AddItemDialogResult.Collection });
+  protected onItemSelected(closeResult: AddItemDialogCloseResult): void {
+    this.dialogRef.close(closeResult);
   }
 
   static open(

libs/vault/src/components/add-item-grid/add-item-grid.component.spec.ts

@@ -6,7 +6,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { CipherType } from "@bitwarden/common/vault/enums";
 import { RestrictedItemTypesService } from "@bitwarden/common/vault/services/restricted-item-types.service";
 
-import { AddItemGridComponent } from "./add-item-grid.component";
+import { AddItemGridComponent, AddItemGridResult } from "./add-item-grid.component";
 
 describe("AddItemGridComponent", () => {
   let component: AddItemGridComponent;
@@ -125,51 +125,54 @@ describe("AddItemGridComponent", () => {
     expect(items.map((i) => i.labelKey)).not.toContain("typeLogin");
   });
 
-  it("emits cipherSelected when a cipher type is selected", () => {
+  it("emits itemSelected with cipher result when a cipher type is selected", () => {
     createComponent({
       canCreateFolder: false,
       canCreateCollection: false,
       canCreateSshKey: true,
     });
 
-    const cipherSelected = jest.fn();
-    component.cipherSelected.subscribe(cipherSelected);
+    const itemSelected = jest.fn();
+    component.itemSelected.subscribe(itemSelected);
 
     const loginItem = component["items"]().find((i) => i.labelKey === "typeLogin");
     loginItem!.action();
 
-    expect(cipherSelected).toHaveBeenCalledWith(CipherType.Login);
+    expect(itemSelected).toHaveBeenCalledWith({
+      result: AddItemGridResult.Cipher,
+      cipherType: CipherType.Login,
+    });
   });
 
-  it("emits folderSelected when folder is selected", () => {
+  it("emits itemSelected with folder result when folder is selected", () => {
     createComponent({
       canCreateFolder: true,
       canCreateCollection: false,
       canCreateSshKey: false,
     });
 
-    const folderSelected = jest.fn();
-    component.folderSelected.subscribe(folderSelected);
+    const itemSelected = jest.fn();
+    component.itemSelected.subscribe(itemSelected);
 
     const folderItem = component["items"]().find((i) => i.labelKey === "folder");
     folderItem!.action();
 
-    expect(folderSelected).toHaveBeenCalled();
+    expect(itemSelected).toHaveBeenCalledWith({ result: AddItemGridResult.Folder });
   });
 
-  it("emits collectionSelected when collection is selected", () => {
+  it("emits itemSelected with collection result when collection is selected", () => {
     createComponent({
       canCreateFolder: false,
       canCreateCollection: true,
       canCreateSshKey: false,
     });
 
-    const collectionSelected = jest.fn();
-    component.collectionSelected.subscribe(collectionSelected);
+    const itemSelected = jest.fn();
+    component.itemSelected.subscribe(itemSelected);
 
     const collectionItem = component["items"]().find((i) => i.labelKey === "collection");
     collectionItem!.action();
 
-    expect(collectionSelected).toHaveBeenCalled();
+    expect(itemSelected).toHaveBeenCalledWith({ result: AddItemGridResult.Collection });
   });
 });

libs/vault/src/components/add-item-grid/add-item-grid.component.ts

@@ -17,7 +17,18 @@ import {
 } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
 
-type DialogItem = {
+export const AddItemGridResult = Object.freeze({
+  Cipher: "cipher",
+  Folder: "folder",
+  Collection: "collection",
+} as const);
+
+export type AddItemGridResult =
+  | { result: typeof AddItemGridResult.Cipher; cipherType: CipherType }
+  | { result: typeof AddItemGridResult.Folder }
+  | { result: typeof AddItemGridResult.Collection };
+
+type GridItem = {
   icon: BitwardenIcon;
   labelKey: string;
   subtitleKey: string;
@@ -35,17 +46,15 @@ export class AddItemGridComponent {
   readonly canCreateCollection = input(false);
   readonly canCreateSshKey = input(false);
 
-  readonly cipherSelected = output<CipherType>();
-  readonly folderSelected = output();
-  readonly collectionSelected = output();
+  readonly itemSelected = output<AddItemGridResult>();
 
   private readonly restrictedTypes = toSignal(this.restrictedItemTypesService.restricted$, {
     initialValue: [] as RestrictedCipherType[],
   });
 
-  protected readonly items = computed<DialogItem[]>(() => {
+  protected readonly items = computed<GridItem[]>(() => {
     const restrictedTypes = this.restrictedTypes();
-    const items: DialogItem[] = DIALOG_CIPHER_MENU_ITEMS.filter((item) => {
+    const items: GridItem[] = DIALOG_CIPHER_MENU_ITEMS.filter((item) => {
       if (!this.canCreateSshKey() && item.type === CipherType.SshKey) {
         return false;
       }
@@ -54,15 +63,16 @@ export class AddItemGridComponent {
       icon: item.icon as BitwardenIcon,
       labelKey: item.labelKey,
       subtitleKey: item.subtitleKey,
-      action: () => this.cipherSelected.emit(item.type),
+      action: () =>
+        this.itemSelected.emit({ result: AddItemGridResult.Cipher, cipherType: item.type }),
     }));
 
     if (this.canCreateFolder()) {
       items.push({
         icon: "bwi-folder",
         labelKey: "folder",
         subtitleKey: "folderSubtitle",
-        action: () => this.folderSelected.emit(),
+        action: () => this.itemSelected.emit({ result: AddItemGridResult.Folder }),
       });
     }
 
@@ -71,7 +81,7 @@ export class AddItemGridComponent {
         icon: "bwi-collection-shared",
         labelKey: "collection",
         subtitleKey: "collectionSubtitle",
-        action: () => this.collectionSelected.emit(),
+        action: () => this.itemSelected.emit({ result: AddItemGridResult.Collection }),
       });
     }