[fix] Expose observable without write access to callers

1. Extend the BaseVaultFiltersService to manage an observable for collapsed nodes that can be modified from outside the VaultFiltersComponent
2. Subscribe to the new observable in VaultFiltersComponent.ngOnInit() to update the collapsed state of filters when changed from outside the VaultFiltersComponent
3. Add a helper method to VaultFiltersService for expanding vault filters if they are collapsed that sends a new value through the subscription
4. Wire everything up in the IndividualVaultComponent so applying a not null organization filter expanded the vault filters

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

@@ -1,9 +1,10 @@
 import { Component, EventEmitter, Input, Output } from "@angular/core";
 
 import { VaultFilterComponent as BaseVaultFilterComponent } from "jslib-angular/modules/vault-filter/vault-filter.component";
-import { VaultFilterService } from "jslib-angular/modules/vault-filter/vault-filter.service";
 import { Organization } from "jslib-common/models/domain/organization";
 
+import { VaultFilterService } from "./vault-filter.service";
+
 @Component({
   selector: "app-vault-filter",
   templateUrl: "vault-filter.component.html",
@@ -20,10 +21,17 @@ export class VaultFilterComponent extends BaseVaultFilterComponent {
 
   organization: Organization;
 
-  constructor(vaultFilterService: VaultFilterService) {
+  constructor(protected vaultFilterService: VaultFilterService) {
     super(vaultFilterService);
   }
 
+  async ngOnInit() {
+    await super.ngOnInit();
+    this.vaultFilterService.collapsedFilterNodes$.subscribe((nodes) => {
+      this.collapsedFilterNodes = nodes;
+    });
+  }
+
   searchTextChanged() {
     this.onSearchTextChanged.emit(this.searchText);
   }

src/app/modules/vault-filter/vault-filter.module.ts

@@ -1,6 +1,5 @@
 import { NgModule } from "@angular/core";
 
-import { VaultFilterService } from "jslib-angular/modules/vault-filter/vault-filter.service";
 import { CipherService } from "jslib-common/abstractions/cipher.service";
 import { CollectionService } from "jslib-common/abstractions/collection.service";
 import { FolderService } from "jslib-common/abstractions/folder.service";
@@ -17,6 +16,7 @@ import { OrganizationOptionsComponent } from "./components/organization-options.
 import { StatusFilterComponent } from "./components/status-filter.component";
 import { TypeFilterComponent } from "./components/type-filter.component";
 import { VaultFilterComponent } from "./vault-filter.component";
+import { VaultFilterService } from "./vault-filter.service";
 
 @NgModule({
   imports: [SharedModule],

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

@@ -1,3 +1,28 @@
+import { BehaviorSubject, Observable } from "rxjs";
+
 import { VaultFilterService as BaseVaultFilterService } from "jslib-angular/modules/vault-filter/vault-filter.service";
 
-export class VaultFilterService extends BaseVaultFilterService {}
+export class VaultFilterService extends BaseVaultFilterService {
+  private _collapsedFilterNodes = new BehaviorSubject<Set<string>>(null);
+  collapsedFilterNodes$: Observable<Set<string>> = this._collapsedFilterNodes.asObservable();
+
+  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);
+  }
+}

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";
@@ -88,7 +89,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() {
@@ -187,6 +189,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);
   }