[EC-14] Refactor vault filter (#3440)

* [EC-14] initial refactoring of vault filter * [EC-14] return observable trees for all filters with head node * [EC-14] Remove bindings on callbacks * [EC-14] fix formatting on disabled orgs * [EC-14] hide MyVault if personal org policy * [EC-14] add check for single org policy * [EC-14] add policies to org and change node constructor * [EC-14] don't show options if personal vault policy * [EC-14] default to all vaults * [EC-14] add default selection to filters * [EC-14] finish filter model callbacks * [EC-14] finish filter functionality and begin cleaning up * [EC-14] clean up old components and start on org vault * [EC-14] loop through filters for presentation * [EC-14] refactor VaultFilterService and put filter presentation data back into Vault Filter component. Remove VaultService * [EC-14] begin refactoring org vault * [EC-14] Refactor Vault Filter Service to use observables * [EC-14] finish org vault filter * [EC-14] fix vault model tests * [EC-14] fix org service calls * [EC-14] pull refactor out of shared code * [EC-14] include head node for collections even if collections aren't loaded yet * [EC-14] fix url params for vaults * [EC-14] remove comments * [EC-14] Remove unnecesary getter for org on vault filter * [EC-14] fix linter * [EC-14] fix prettier * [EC-14] add deprecated methods to collection service for desktop and browser * [EC-14] simplify cipher type node check * [EC-14] add getters to vault filter model * [EC-14] refactor how we build the filter list into methods * [EC-14] add getters to build filter method * [EC-14] remove param ids if false * [EC-14] fix collapsing nodes * [EC-14] add specific type to search placeholder * [EC-14] remove extra constructor and comment from org vault filter * [EC-14] extract subscription callback to methods * [EC-14] Remove unecessary await * [EC-14] Remove ternary operators while building org filter * [EC-14] remove unnecessary deps array in vault filter service declaration * [EC-14] consolidate new models into one file * [EC-14] initialize nested observable inside of service Signed-off-by: Jacob Fink <jfink@bitwarden.com> * [EC-14] change how we load orgs into the vault filter and select the default filter * [EC-14] remove get from getters name * [EC-14] remove eslint-disable comment * [EC-14] move vault filter service abstraction to angular folder and separate * [EC-14] rename filter types and delete VaultFilterLabel * [EC-14] remove changes to workspace file * [EC-14] remove deprecated service from jslib module * [EC-14] remove any remaining files from common code * [EC-14] consolidate vault filter components into components folder * [EC-14] simplify method call * [EC-14] refactor the vault filter service - orgs now have observable property - BehaviorSubjects have been migrated to ReplaySubjects if they don't need starting value - added unit tests - fix small error when selecting org badge of personal vault - renamed some properties * [EC-14] replace mergeMap with switchMap in vault filter service * [EC-14] early return to prevent nesting * [EC-14] clean up filterCollections method * [EC-14] use isDeleted helper in html * [EC-14] add jsdoc comments to ServiceUtils * [EC-14] fix linter * [EC-14] use array.slice instead of setting length * Update apps/web/src/app/vault/vault-filter/services/vault-filter.service.ts Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com> * [EC-14] add missing high level jsdoc description * [EC-14] fix storybook absolute imports * [EC-14] delete vault-shared.module * [EC-14] change search placeholder text to getter and add missing strings * [EC-14] remove two way binding from search text in vault filter * [EC-14] removed all binding from search text and just use input event * [EC-14] remove async from apply vault filter * [EC-14] remove circular observable calls in vault filter service Co-authored-by: Thomas Rittson <eliykat@users.noreply.github.com> * [EC-14] move collapsed nodes to vault filter section * [EC-14] deconstruct filter section inside component * [EC-14] fix merge conflicts and introduce refactored organization service to vault filter service * [EC-14] remove mutation from filter builders * [EC-14] fix styling on buildFolderTree * [EC-14] remove leftover folder-filters reference and use ternary for collapse icon * [EC-14] remove unecessary checks * [EC-14] stop rebuilding filters when the organization changes * [EC-14] Move subscription out of setter in vault filter section * [EC-14] remove extra policy service methods from vault filter service * [EC-14] remove new methods from old vault-filter.service * [EC-14] Use vault filter service in vault components * [EC-14] reload collections from vault now that we have vault filter service * [EC-14] remove currentFilterCollections in vault filter component * [EC-14] change VaultFilterType to more specific OrganizationFilter in organization-options * [EC-14] include org check in isNodeSelected * [EC-14] add getters to filter function, fix storybook, and add test for All Collections * [EC-14] show org options even if there's a personal vault policy * [EC-14] use !"AllCollections" instead of just !null * [EC-14] Remove extra org Subject in vault filter service * [EC-14] remove null check from vault search text * [EC-14] replace store/build names with set/get. Remove extra call to setOrganizationFilter * [EC-14] add take(1) to subscribe in test * [EC-14] move init logic in org vault filter component to ngOnInit * [EC-14] Fix linter * [EC-14] revert change to vault filter model * [EC-14] be specific about ignoring All Collections * [EC-14] move observable init logic to beforeEach in test * [EC-14] make buildAllFilters return something to reduce side effects Signed-off-by: Jacob Fink <jfink@bitwarden.com> Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com> Co-authored-by: Thomas Rittson <eliykat@users.noreply.github.com>
2025-12-23 11:43:46 +00:00 · 2022-10-05 21:21:37 -04:00
parent dc0ea9a48f
commit 4d83b81d82
57 changed files with 2174 additions and 1000 deletions
--- a/apps/web/src/app/vault/vault.component.ts
+++ b/apps/web/src/app/vault/vault.component.ts
@@ -8,10 +8,10 @@ import {
  ViewContainerRef,
 } from "@angular/core";
 import { ActivatedRoute, Params, Router } from "@angular/router";
+import { firstValueFrom } from "rxjs";
 import { first } from "rxjs/operators";

 import { ModalService } from "@bitwarden/angular/services/modal.service";
-import { VaultFilter } from "@bitwarden/angular/vault/vault-filter/models/vault-filter.model";
 import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.service";
 import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
@@ -23,6 +23,8 @@ import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUti
 import { StateService } from "@bitwarden/common/abstractions/state.service";
 import { SyncService } from "@bitwarden/common/abstractions/sync/sync.service.abstraction";
 import { TokenService } from "@bitwarden/common/abstractions/token.service";
+import { ServiceUtils } from "@bitwarden/common/misc/serviceUtils";
+import { TreeNode } from "@bitwarden/common/models/domain/treeNode";
 import { CipherView } from "@bitwarden/common/models/view/cipherView";

 import { UpdateKeyComponent } from "../settings/update-key.component";
@@ -33,9 +35,10 @@ import { CiphersComponent } from "./ciphers.component";
 import { CollectionsComponent } from "./collections.component";
 import { FolderAddEditComponent } from "./folder-add-edit.component";
 import { ShareComponent } from "./share.component";
-import { VaultService } from "./shared/vault.service";
-import { VaultFilterService } from "./vault-filter/shared/vault-filter.service";
-import { VaultFilterComponent } from "./vault-filter/vault-filter.component";
+import { VaultFilterComponent } from "./vault-filter/components/vault-filter.component";
+import { VaultFilterService } from "./vault-filter/services/abstractions/vault-filter.service";
+import { VaultFilter } from "./vault-filter/shared/models/vault-filter.model";
+import { FolderFilter, OrganizationFilter } from "./vault-filter/shared/models/vault-filter.type";

 const BroadcasterSubscriptionId = "VaultComponent";

@@ -58,8 +61,6 @@ export class VaultComponent implements OnInit, OnDestroy {
  @ViewChild("updateKeyTemplate", { read: ViewContainerRef, static: true })
  updateKeyModalRef: ViewContainerRef;

-  folderId: string = null;
-  myVaultOnly = false;
  showVerifyEmail = false;
  showBrowserOutdated = false;
  showUpdateKey = false;
@@ -82,10 +83,9 @@ export class VaultComponent implements OnInit, OnDestroy {
    private ngZone: NgZone,
    private stateService: StateService,
    private organizationService: OrganizationService,
-    private vaultService: VaultService,
+    private vaultFilterService: VaultFilterService,
    private cipherService: CipherService,
-    private passwordRepromptService: PasswordRepromptService,
-    private vaultFilterService: VaultFilterService
+    private passwordRepromptService: PasswordRepromptService
  ) {}

  async ngOnInit() {
@@ -104,8 +104,7 @@ export class VaultComponent implements OnInit, OnDestroy {
      this.showPremiumCallout =
        !this.showVerifyEmail && !canAccessPremium && !this.platformUtilsService.isSelfHost();

-      this.filterComponent.reloadCollectionsAndFolders(this.activeFilter);
-      this.filterComponent.reloadOrganizations();
+      await this.vaultFilterService.reloadCollections();
      this.showUpdateKey = !(await this.cryptoService.hasEncKey());

      const cipherId = getCipherIdFromParams(params);
@@ -147,8 +146,7 @@ export class VaultComponent implements OnInit, OnDestroy {
            case "syncCompleted":
              if (message.successfully) {
                await Promise.all([
-                  this.filterComponent.reloadCollectionsAndFolders(this.activeFilter),
-                  this.filterComponent.reloadOrganizations(),
+                  this.vaultFilterService.reloadCollections(),
                  this.ciphersComponent.load(this.ciphersComponent.filter),
                ]);
                this.changeDetectorRef.detectChanges();
@@ -173,30 +171,57 @@ export class VaultComponent implements OnInit, OnDestroy {
    this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
  }

-  async applyVaultFilter(vaultFilter: VaultFilter) {
-    this.ciphersComponent.showAddNew = vaultFilter.status !== "trash";
-    this.activeFilter = vaultFilter;
+  async applyVaultFilter(filter: VaultFilter) {
+    this.activeFilter = filter;
+    this.ciphersComponent.showAddNew = !this.activeFilter.isDeleted;
    await this.ciphersComponent.reload(
      this.activeFilter.buildFilter(),
-      vaultFilter.status === "trash"
-    );
-    this.filterComponent.searchPlaceholder = this.vaultService.calculateSearchBarLocalizationString(
-      this.activeFilter
+      this.activeFilter.isDeleted
    );
    this.go();
  }

  async applyOrganizationFilter(orgId: string) {
    if (orgId == null) {
-      this.activeFilter.resetOrganization();
-      this.activeFilter.myVaultOnly = true;
-    } else {
-      this.activeFilter.selectedOrganizationId = orgId;
+      orgId = "MyVault";
    }
-    await this.vaultFilterService.ensureVaultFiltersAreExpanded();
-    await this.applyVaultFilter(this.activeFilter);
+    const orgs = await firstValueFrom(this.filterComponent.filters.organizationFilter.data$);
+    const orgNode = ServiceUtils.getTreeNodeObject(orgs, orgId) as TreeNode<OrganizationFilter>;
+    this.filterComponent.filters?.organizationFilter?.action(orgNode);
  }

+  addFolder = async (): Promise<void> => {
+    const [modal] = await this.modalService.openViewRef(
+      FolderAddEditComponent,
+      this.folderAddEditModalRef,
+      (comp) => {
+        comp.folderId = null;
+        // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
+        comp.onSavedFolder.subscribe(async () => {
+          modal.close();
+        });
+      }
+    );
+  };
+
+  editFolder = async (folder: FolderFilter): Promise<void> => {
+    const [modal] = await this.modalService.openViewRef(
+      FolderAddEditComponent,
+      this.folderAddEditModalRef,
+      (comp) => {
+        comp.folderId = folder.id;
+        // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
+        comp.onSavedFolder.subscribe(async () => {
+          modal.close();
+        });
+        // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
+        comp.onDeletedFolder.subscribe(async () => {
+          modal.close();
+        });
+      }
+    );
+  };
+
  filterSearchText(searchText: string) {
    this.ciphersComponent.searchText = searchText;
    this.ciphersComponent.search(200);
@@ -208,7 +233,7 @@ export class VaultComponent implements OnInit, OnDestroy {
      this.messagingService.send("premiumRequired");
      return;
    } else if (cipher.organizationId != null) {
-      const org = await this.organizationService.get(cipher.organizationId);
+      const org = this.organizationService.get(cipher.organizationId);
      if (org != null && (org.maxStorageGb == null || org.maxStorageGb === 0)) {
        this.messagingService.send("upgradeOrganization", {
          organizationId: cipher.organizationId,
@@ -271,60 +296,20 @@ export class VaultComponent implements OnInit, OnDestroy {
    );
  }

-  async addFolder() {
-    const [modal] = await this.modalService.openViewRef(
-      FolderAddEditComponent,
-      this.folderAddEditModalRef,
-      (comp) => {
-        comp.folderId = null;
-        // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
-        comp.onSavedFolder.subscribe(async () => {
-          modal.close();
-          await this.filterComponent.reloadCollectionsAndFolders(this.activeFilter);
-        });
-      }
-    );
-  }
-
-  async editFolder(folderId: string) {
-    const [modal] = await this.modalService.openViewRef(
-      FolderAddEditComponent,
-      this.folderAddEditModalRef,
-      (comp) => {
-        comp.folderId = folderId;
-        // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
-        comp.onSavedFolder.subscribe(async () => {
-          modal.close();
-          await this.filterComponent.reloadCollectionsAndFolders(this.activeFilter);
-        });
-        // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
-        comp.onDeletedFolder.subscribe(async () => {
-          modal.close();
-          await this.filterComponent.reloadCollectionsAndFolders(this.activeFilter);
-        });
-      }
-    );
-  }
-
  async addCipher() {
    const component = await this.editCipher(null);
    component.type = this.activeFilter.cipherType;
-    component.folderId = this.folderId === "none" ? null : this.folderId;
-    if (this.activeFilter.selectedCollectionId != null) {
-      const collection = this.filterComponent.collections.fullList.filter(
-        (c) => c.id === this.activeFilter.selectedCollectionId
-      );
-      if (collection.length > 0) {
-        component.organizationId = collection[0].organizationId;
-        component.collectionIds = [this.activeFilter.selectedCollectionId];
-      }
+    if (this.activeFilter.organizationId !== "MyVault") {
+      component.organizationId = this.activeFilter.organizationId;
+      component.collections = (
+        await firstValueFrom(this.vaultFilterService.filteredCollections$)
+      ).filter((c) => !c.readOnly && c.id != null);
    }
-    if (this.activeFilter.selectedFolderId && this.activeFilter.selectedFolder) {
-      component.folderId = this.activeFilter.selectedFolderId;
-    }
-    if (this.activeFilter.selectedOrganizationId) {
-      component.organizationId = this.activeFilter.selectedOrganizationId;
+    const selectedColId = this.activeFilter.collectionId;
+    if (selectedColId !== "AllCollections") {
+      component.collectionIds = [selectedColId];
    }
+    component.folderId = this.activeFilter.folderId;
  }

  async editCipher(cipher: CipherView) {
@@ -382,11 +367,11 @@ export class VaultComponent implements OnInit, OnDestroy {
  private go(queryParams: any = null) {
    if (queryParams == null) {
      queryParams = {
-        favorites: this.activeFilter.status === "favorites" ? true : null,
+        favorites: this.activeFilter.isFavorites || null,
        type: this.activeFilter.cipherType,
-        folderId: this.activeFilter.selectedFolderId,
-        collectionId: this.activeFilter.selectedCollectionId,
-        deleted: this.activeFilter.status === "trash" ? true : null,
+        folderId: this.activeFilter.folderId,
+        collectionId: this.activeFilter.collectionId,
+        deleted: this.activeFilter.isDeleted || null,
      };
    }