[EC-775] [Technical Dependency] Refactor Vault Filters to be routable

apps/web/src/app/vault/individual-vault/vault-filter/components/vault-filter.component.ts

@@ -1,14 +1,12 @@
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from "@angular/core";
-import { firstValueFrom, Subject, switchMap, takeUntil } from "rxjs";
+import { firstValueFrom, Subject } from "rxjs";
 
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { PolicyService } from "@bitwarden/common/abstractions/policy/policy.service.abstraction";
 import { PolicyType } from "@bitwarden/common/enums/policyType";
 import { TreeNode } from "@bitwarden/common/models/domain/tree-node";
-import { CollectionView } from "@bitwarden/common/models/view/collection.view";
 import { CipherType } from "@bitwarden/common/vault/enums/cipher-type";
-import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";
 
 import { VaultFilterService } from "../services/abstractions/vault-filter.service";
 import {
@@ -34,7 +32,6 @@ import { OrganizationOptionsComponent } from "./organization-options.component";
 export class VaultFilterComponent implements OnInit, OnDestroy {
   filters?: VaultFilterList;
   @Input() activeFilter: VaultFilter = new VaultFilter();
-  @Output() activeFilterChanged = new EventEmitter<VaultFilter>();
   @Output() onSearchTextChanged = new EventEmitter<string>();
   @Output() onAddFolder = new EventEmitter<never>();
   @Output() onEditFolder = new EventEmitter<FolderFilter>();
@@ -88,9 +85,7 @@ export class VaultFilterComponent implements OnInit, OnDestroy {
     protected policyService: PolicyService,
     protected i18nService: I18nService,
     protected platformUtilsService: PlatformUtilsService
-  ) {
-    this.loadSubscriptions();
-  }
+  ) {}
 
   async ngOnInit(): Promise<void> {
     this.filters = await this.buildAllFilters();
@@ -104,35 +99,11 @@ export class VaultFilterComponent implements OnInit, OnDestroy {
     this.destroy$.complete();
   }
 
-  protected loadSubscriptions() {
-    this.vaultFilterService.filteredFolders$
-      .pipe(
-        switchMap(async (folders) => {
-          this.removeInvalidFolderSelection(folders);
-        }),
-        takeUntil(this.destroy$)
-      )
-      .subscribe();
-
-    this.vaultFilterService.filteredCollections$
-      .pipe(
-        switchMap(async (collections) => {
-          this.removeInvalidCollectionSelection(collections);
-        }),
-        takeUntil(this.destroy$)
-      )
-      .subscribe();
-  }
-
   searchTextChanged(t: string) {
     this.searchText = t;
     this.onSearchTextChanged.emit(t);
   }
 
-  protected applyVaultFilter(filter: VaultFilter) {
-    this.activeFilterChanged.emit(filter);
-  }
-
   applyOrganizationFilter = async (orgNode: TreeNode<OrganizationFilter>): Promise<void> => {
     if (!orgNode?.node.enabled) {
       this.platformUtilsService.showToast(
@@ -143,34 +114,31 @@ export class VaultFilterComponent implements OnInit, OnDestroy {
       return;
     }
     const filter = this.activeFilter;
-    filter.resetOrganization();
-    if (orgNode?.node.id !== "AllVaults") {
+    if (orgNode?.node.id === "AllVaults") {
+      filter.resetOrganization();
+    } else {
       filter.selectedOrganizationNode = orgNode;
     }
     this.vaultFilterService.setOrganizationFilter(orgNode.node);
     await this.vaultFilterService.expandOrgFilter();
-    this.applyVaultFilter(filter);
   };
 
   applyTypeFilter = async (filterNode: TreeNode<CipherTypeFilter>): Promise<void> => {
     const filter = this.activeFilter;
     filter.resetFilter();
     filter.selectedCipherTypeNode = filterNode;
-    this.applyVaultFilter(filter);
   };
 
   applyFolderFilter = async (folderNode: TreeNode<FolderFilter>): Promise<void> => {
     const filter = this.activeFilter;
     filter.resetFilter();
     filter.selectedFolderNode = folderNode;
-    this.applyVaultFilter(filter);
   };
 
   applyCollectionFilter = async (collectionNode: TreeNode<CollectionFilter>): Promise<void> => {
     const filter = this.activeFilter;
     filter.resetFilter();
     filter.selectedCollectionNode = collectionNode;
-    this.applyVaultFilter(filter);
   };
 
   addFolder = async (): Promise<void> => {
@@ -185,30 +153,6 @@ export class VaultFilterComponent implements OnInit, OnDestroy {
     return await firstValueFrom(this.filters?.typeFilter.data$);
   }
 
-  protected async removeInvalidFolderSelection(folders: FolderView[]) {
-    if (this.activeFilter.selectedFolderNode) {
-      if (!folders.some((f) => f.id === this.activeFilter.folderId)) {
-        const filter = this.activeFilter;
-        filter.resetFilter();
-        filter.selectedCipherTypeNode =
-          (await this.getDefaultFilter()) as TreeNode<CipherTypeFilter>;
-        this.applyVaultFilter(filter);
-      }
-    }
-  }
-
-  protected async removeInvalidCollectionSelection(collections: CollectionView[]) {
-    if (this.activeFilter.selectedCollectionNode) {
-      if (!collections.some((f) => f.id === this.activeFilter.collectionId)) {
-        const filter = this.activeFilter;
-        filter.resetFilter();
-        filter.selectedCipherTypeNode =
-          (await this.getDefaultFilter()) as TreeNode<CipherTypeFilter>;
-        this.applyVaultFilter(filter);
-      }
-    }
-  }
-
   async buildAllFilters(): Promise<VaultFilterList> {
     const builderFilter = {} as VaultFilterList;
     builderFilter.organizationFilter = await this.addOrganizationFilter();

apps/web/src/app/vault/individual-vault/vault-filter/services/abstractions/vault-filter.service.ts

@@ -19,6 +19,7 @@ export abstract class VaultFilterService {
   organizationTree$: Observable<TreeNode<OrganizationFilter>>;
   folderTree$: Observable<TreeNode<FolderFilter>>;
   collectionTree$: Observable<TreeNode<CollectionFilter>>;
+  cipherTypeTree$: Observable<TreeNode<CipherTypeFilter>>;
   reloadCollections: () => Promise<void>;
   getCollectionNodeFromTree: (id: string) => Promise<TreeNode<CollectionFilter>>;
   setCollapsedFilterNodes: (collapsedFilterNodes: Set<string>) => Promise<void>;

apps/web/src/app/vault/individual-vault/vault-filter/services/routed-vault-filter-bridge.service.ts

@@ -0,0 +1,179 @@
+import { Injectable } from "@angular/core";
+import { Router } from "@angular/router";
+import { combineLatest, map, Observable } from "rxjs";
+
+import { ServiceUtils } from "@bitwarden/common/misc/serviceUtils";
+import { TreeNode } from "@bitwarden/common/models/domain/tree-node";
+
+import { RoutedVaultFilterBridge } from "../shared/models/routed-vault-filter-bridge.model";
+import {
+  RoutedVaultFilterModel,
+  Unassigned,
+  All,
+} from "../shared/models/routed-vault-filter.model";
+import { VaultFilter } from "../shared/models/vault-filter.model";
+import {
+  CipherTypeFilter,
+  CollectionFilter,
+  FolderFilter,
+  OrganizationFilter,
+} from "../shared/models/vault-filter.type";
+
+import { VaultFilterService } from "./abstractions/vault-filter.service";
+import { RoutedVaultFilterService } from "./routed-vault-filter.service";
+
+/**
+ * This file is part of a layer that is used to temporary bridge between URL filtering and the old state-in-code method.
+ * This should be removed after we have refactored the {@link VaultItemsComponent} and introduced vertical navigation
+ * (which will refactor the {@link VaultFilterComponent}).
+ *
+ * This class listens to both the new {@link RoutedVaultFilterService} and the old {@link VaultFilterService}.
+ * When a new filter is emitted the service uses the ids to find the corresponding tree nodes needed for
+ * the old {@link VaultFilter} model. It then emits a bridge model that contains this information.
+ */
+@Injectable()
+export class RoutedVaultFilterBridgeService {
+  readonly activeFilter$: Observable<VaultFilter>;
+
+  constructor(
+    private router: Router,
+    private routedVaultFilterService: RoutedVaultFilterService,
+    legacyVaultFilterService: VaultFilterService
+  ) {
+    this.activeFilter$ = combineLatest([
+      routedVaultFilterService.filter$,
+      legacyVaultFilterService.collectionTree$,
+      legacyVaultFilterService.folderTree$,
+      legacyVaultFilterService.organizationTree$,
+      legacyVaultFilterService.cipherTypeTree$,
+    ]).pipe(
+      map(([filter, collectionTree, folderTree, organizationTree, cipherTypeTree]) => {
+        const legacyFilter = isAdminConsole(filter)
+          ? createLegacyFilterForAdminConsole(filter, collectionTree, cipherTypeTree)
+          : createLegacyFilterForEndUser(
+              filter,
+              collectionTree,
+              folderTree,
+              organizationTree,
+              cipherTypeTree
+            );
+
+        return new RoutedVaultFilterBridge(filter, legacyFilter, this);
+      })
+    );
+  }
+
+  navigate(filter: RoutedVaultFilterModel) {
+    const [commands, extras] = this.routedVaultFilterService.createRoute(filter);
+    this.router.navigate(commands, extras);
+  }
+}
+
+/**
+ * Check if the filtering is being done as part of admin console.
+ * Admin console can be identified by checking if the `organizationId`
+ * is part of the path.
+ *
+ * @param filter Model to check if origin is admin console
+ * @returns true if filtering being done as part of admin console
+ */
+function isAdminConsole(filter: RoutedVaultFilterModel) {
+  return filter.organizationIdParamType === "path";
+}
+
+function createLegacyFilterForAdminConsole(
+  filter: RoutedVaultFilterModel,
+  collectionTree: TreeNode<CollectionFilter>,
+  cipherTypeTree: TreeNode<CipherTypeFilter>
+): VaultFilter {
+  const legacyFilter = new VaultFilter();
+
+  if (filter.collectionId === undefined && filter.type === undefined) {
+    legacyFilter.selectedCollectionNode = ServiceUtils.getTreeNodeObject(
+      collectionTree,
+      "AllCollections"
+    );
+  } else if (filter.collectionId !== undefined && filter.collectionId === Unassigned) {
+    legacyFilter.selectedCollectionNode = ServiceUtils.getTreeNodeObject(collectionTree, null);
+  } else if (filter.collectionId !== undefined) {
+    legacyFilter.selectedCollectionNode = ServiceUtils.getTreeNodeObject(
+      collectionTree,
+      filter.collectionId
+    );
+  }
+
+  if (filter.collectionId === undefined && filter.type === All) {
+    legacyFilter.selectedCipherTypeNode = ServiceUtils.getTreeNodeObject(
+      cipherTypeTree,
+      "AllItems"
+    );
+  } else if (filter.type !== undefined && filter.type === "trash") {
+    legacyFilter.selectedCipherTypeNode = new TreeNode<CipherTypeFilter>(
+      { id: "trash", name: "", type: "trash", icon: "" },
+      null
+    );
+  } else if (filter.type !== undefined && filter.type !== "trash") {
+    legacyFilter.selectedCipherTypeNode = ServiceUtils.getTreeNodeObject(
+      cipherTypeTree,
+      filter.type
+    );
+  }
+
+  return legacyFilter;
+}
+
+function createLegacyFilterForEndUser(
+  filter: RoutedVaultFilterModel,
+  collectionTree: TreeNode<CollectionFilter>,
+  folderTree: TreeNode<FolderFilter>,
+  organizationTree: TreeNode<OrganizationFilter>,
+  cipherTypeTree: TreeNode<CipherTypeFilter>
+): VaultFilter {
+  const legacyFilter = new VaultFilter();
+
+  if (filter.collectionId !== undefined && filter.collectionId === Unassigned) {
+    legacyFilter.selectedCollectionNode = ServiceUtils.getTreeNodeObject(collectionTree, null);
+  } else if (filter.collectionId !== undefined && filter.collectionId === All) {
+    legacyFilter.selectedCollectionNode = ServiceUtils.getTreeNodeObject(
+      collectionTree,
+      "AllCollections"
+    );
+  } else if (filter.collectionId !== undefined) {
+    legacyFilter.selectedCollectionNode = ServiceUtils.getTreeNodeObject(
+      collectionTree,
+      filter.collectionId
+    );
+  }
+
+  if (filter.folderId !== undefined && filter.folderId === Unassigned) {
+    legacyFilter.selectedFolderNode = ServiceUtils.getTreeNodeObject(folderTree, null);
+  } else if (filter.folderId !== undefined && filter.folderId !== Unassigned) {
+    legacyFilter.selectedFolderNode = ServiceUtils.getTreeNodeObject(folderTree, filter.folderId);
+  }
+
+  if (filter.organizationId !== undefined) {
+    legacyFilter.selectedOrganizationNode = ServiceUtils.getTreeNodeObject(
+      organizationTree,
+      filter.organizationId
+    );
+  }
+
+  if (filter.type === undefined) {
+    legacyFilter.selectedCipherTypeNode = ServiceUtils.getTreeNodeObject(
+      cipherTypeTree,
+      "AllItems"
+    );
+  } else if (filter.type !== undefined && filter.type === "trash") {
+    legacyFilter.selectedCipherTypeNode = new TreeNode<CipherTypeFilter>(
+      { id: "trash", name: "", type: "trash", icon: "" },
+      null
+    );
+  } else if (filter.type !== undefined && filter.type !== "trash") {
+    legacyFilter.selectedCipherTypeNode = ServiceUtils.getTreeNodeObject(
+      cipherTypeTree,
+      filter.type
+    );
+  }
+
+  return legacyFilter;
+}