[feat] Allow the org badge click event to expand collapsed vault filters (#2885)

* [feat] Allow the org badge click event to expand collapsed vault filters

* [fix] Restore a blank line

apps/web/src/app/modules/vault-filter/vault-filter.component.ts

@@ -20,6 +20,13 @@ export class VaultFilterComponent extends BaseVaultFilterComponent {
     super(vaultFilterService);
   }
 
+  async ngOnInit() {
+    await super.ngOnInit();
+    this.vaultFilterService.collapsedFilterNodes$.subscribe((nodes) => {
+      this.collapsedFilterNodes = nodes;
+    });
+  }
+
   searchTextChanged() {
     this.onSearchTextChanged.emit(this.searchText);
   }

apps/web/src/app/modules/vault-filter/vault-filter.service.ts

@@ -1,3 +1,5 @@
+import { BehaviorSubject, Observable } from "rxjs";
+
 import { Injectable } from "@angular/core";
 
 import { DynamicTreeNode } from "jslib-angular/modules/vault-filter/models/dynamic-tree-node.model";
@@ -16,6 +18,9 @@ import { CollectionView } from "jslib-common/models/view/collectionView";
 
 @Injectable()
 export class VaultFilterService extends BaseVaultFilterService {
+  private _collapsedFilterNodes = new BehaviorSubject<Set<string>>(null);
+  collapsedFilterNodes$: Observable<Set<string>> = this._collapsedFilterNodes.asObservable();
+
   constructor(
     stateService: StateService,
     organizationService: OrganizationService,
@@ -35,6 +40,26 @@ export class VaultFilterService extends BaseVaultFilterService {
     );
   }
 
+  async buildCollapsedFilterNodes(): Promise<Set<string>> {
+    const nodes = await super.buildCollapsedFilterNodes();
+    this._collapsedFilterNodes.next(nodes);
+    return nodes;
+  }
+
+  async storeCollapsedFilterNodes(collapsedFilterNodes: Set<string>): Promise<void> {
+    await super.storeCollapsedFilterNodes(collapsedFilterNodes);
+    this._collapsedFilterNodes.next(collapsedFilterNodes);
+  }
+
+  async ensureVaultFiltersAreExpanded() {
+    const collapsedFilterNodes = await super.buildCollapsedFilterNodes();
+    if (!collapsedFilterNodes.has("vaults")) {
+      return;
+    }
+    collapsedFilterNodes.delete("vaults");
+    await this.storeCollapsedFilterNodes(collapsedFilterNodes);
+  }
+
   async buildAdminCollections(organizationId: string) {
     let result: CollectionView[] = [];
     const collectionResponse = await this.apiService.getCollections(organizationId);

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

@@ -34,6 +34,7 @@ import { CollectionsComponent } from "../../../../vault/collections.component";
 import { FolderAddEditComponent } from "../../../../vault/folder-add-edit.component";
 import { ShareComponent } from "../../../../vault/share.component";
 import { VaultFilterComponent } from "../../../vault-filter/vault-filter.component";
+import { VaultFilterService } from "../../../vault-filter/vault-filter.service";
 import { VaultService } from "../../vault.service";
 
 const BroadcasterSubscriptionId = "VaultComponent";
@@ -87,7 +88,8 @@ export class IndividualVaultComponent implements OnInit, OnDestroy {
     private organizationService: OrganizationService,
     private vaultService: VaultService,
     private cipherService: CipherService,
-    private passwordRepromptService: PasswordRepromptService
+    private passwordRepromptService: PasswordRepromptService,
+    private vaultFilterService: VaultFilterService
   ) {}
 
   async ngOnInit() {
@@ -186,6 +188,7 @@ export class IndividualVaultComponent implements OnInit, OnDestroy {
       this.activeFilter.myVaultOnly = true;
     } else {
       this.activeFilter.selectedOrganizationId = orgId;
+      await this.vaultFilterService.ensureVaultFiltersAreExpanded();
     }
     await this.applyVaultFilter(this.activeFilter);
   }