update icons for folder & collection filters (#9508)

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"]);

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<ChipSelectOption<string>[]> = combineLatest([
+  folders$: Observable<ChipSelectOption<FolderView>[]> = 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<ChipSelectOption<string>[]> = combineLatest([
+  collections$: Observable<ChipSelectOption<CollectionView>[]> = 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<T extends ITreeNodeObject>(
     item: TreeNode<T>,
+    icon: string,
   ): ChipSelectOption<T> {
     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,
     };
   }