diff --git a/apps/browser/src/vault/popup/services/vault-popup-list-filters.service.spec.ts b/apps/browser/src/vault/popup/services/vault-popup-list-filters.service.spec.ts index eba8f94f12..42626b5291 100644 --- a/apps/browser/src/vault/popup/services/vault-popup-list-filters.service.spec.ts +++ b/apps/browser/src/vault/popup/services/vault-popup-list-filters.service.spec.ts @@ -169,6 +169,13 @@ describe("VaultPopupListFiltersService", () => { expect(collections.map((c) => c.label)).toEqual(["Test collection 2"]); }); }); + + it("sets collection icon", (done) => { + service.collections$.subscribe((collections) => { + expect(collections.every(({ icon }) => icon === "bwi-collection")).toBeTruthy(); + done(); + }); + }); }); describe("folders$", () => { @@ -210,6 +217,22 @@ describe("VaultPopupListFiltersService", () => { }); }); + it("sets folder icon", (done) => { + service.filterForm.patchValue({ + organization: { id: MY_VAULT_ID } as Organization, + }); + + folderViews$.next([ + { id: "1234", name: "Folder 1" }, + { id: "2345", name: "Folder 2" }, + ]); + + service.folders$.subscribe((folders) => { + expect(folders.every(({ icon }) => icon === "bwi-folder")).toBeTruthy(); + done(); + }); + }); + it("returns folders that have ciphers within the selected organization", (done) => { service.folders$.pipe(skipWhile((folders) => folders.length === 2)).subscribe((folders) => { expect(folders.map((f) => f.label)).toEqual(["Folder 1"]); diff --git a/apps/browser/src/vault/popup/services/vault-popup-list-filters.service.ts b/apps/browser/src/vault/popup/services/vault-popup-list-filters.service.ts index f3522aa8e3..bc42e7cb0a 100644 --- a/apps/browser/src/vault/popup/services/vault-popup-list-filters.service.ts +++ b/apps/browser/src/vault/popup/services/vault-popup-list-filters.service.ts @@ -206,7 +206,7 @@ export class VaultPopupListFiltersService { /** * Folder array structured to be directly passed to `ChipSelectComponent` */ - folders$: Observable[]> = combineLatest([ + folders$: Observable[]> = combineLatest([ this.filters$.pipe( distinctUntilChanged( (previousFilter, currentFilter) => @@ -258,13 +258,15 @@ export class VaultPopupListFiltersService { nestedList: nestedFolders, }); }), - map((folders) => folders.nestedList.map(this.convertToChipSelectOption.bind(this))), + map((folders) => + folders.nestedList.map((f) => this.convertToChipSelectOption(f, "bwi-folder")), + ), ); /** * Collection array structured to be directly passed to `ChipSelectComponent` */ - collections$: Observable[]> = combineLatest([ + collections$: Observable[]> = combineLatest([ this.filters$.pipe( distinctUntilChanged( (previousFilter, currentFilter) => @@ -292,7 +294,9 @@ export class VaultPopupListFiltersService { nestedList: nestedCollections, }); }), - map((collections) => collections.nestedList.map(this.convertToChipSelectOption.bind(this))), + map((collections) => + collections.nestedList.map((c) => this.convertToChipSelectOption(c, "bwi-collection")), + ), ); /** @@ -300,13 +304,14 @@ export class VaultPopupListFiltersService { */ private convertToChipSelectOption( item: TreeNode, + icon: string, ): ChipSelectOption { return { value: item.node, label: item.node.name, - icon: "bwi-folder", // Organization & Folder icons are the same + icon, children: item.children - ? item.children.map(this.convertToChipSelectOption.bind(this)) + ? item.children.map((i) => this.convertToChipSelectOption(i, icon)) : undefined, }; }