[PM-20642] - [Vault] [Web App] Front End Changes to Enforce "Remove card item type policy" (#15097)

* add restricted item types service and apply it to filter web cipher * code cleanup. add shareReplay * account for multiple orgs when restricting item types * restrict item types for specific orgs * clean up logic. use policiesByType$ * track by item.type * clean up filtering. prefer observable. do not exempt owners for restricted item types * simplify in vault-filter. move item filter logic to vault. fix tests * don't return early in filter-function
2025-12-16 16:23:44 +00:00 · 2025-06-11 09:30:12 -07:00
parent 8b42edf9dc
commit 1175da3845
15 changed files with 423 additions and 102 deletions
--- a/apps/web/src/app/admin-console/organizations/collections/vault-filter/vault-filter.component.ts
+++ b/apps/web/src/app/admin-console/organizations/collections/vault-filter/vault-filter.component.ts
@@ -12,6 +12,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { TreeNode } from "@bitwarden/common/vault/models/domain/tree-node";
 import { DialogService, ToastService } from "@bitwarden/components";
+import { RestrictedItemTypesService } from "@bitwarden/vault";

 import { VaultFilterComponent as BaseVaultFilterComponent } from "../../../../vault/individual-vault/vault-filter/components/vault-filter.component";
 import { VaultFilterService } from "../../../../vault/individual-vault/vault-filter/services/abstractions/vault-filter.service";
@@ -51,6 +52,7 @@ export class VaultFilterComponent
    protected dialogService: DialogService,
    protected configService: ConfigService,
    protected accountService: AccountService,
+    protected restrictedItemTypesService: RestrictedItemTypesService,
  ) {
    super(
      vaultFilterService,
@@ -62,6 +64,7 @@ export class VaultFilterComponent
      dialogService,
      configService,
      accountService,
+      restrictedItemTypesService,
    );
  }

--- a/apps/web/src/app/admin-console/organizations/policies/restricted-item-types.component.ts
+++ b/apps/web/src/app/admin-console/organizations/policies/restricted-item-types.component.ts
@@ -7,7 +7,7 @@ import { BasePolicy, BasePolicyComponent } from "./base-policy.component";
 export class RestrictedItemTypesPolicy extends BasePolicy {
  name = "restrictedItemTypesPolicy";
  description = "restrictedItemTypesPolicyDesc";
-  type = PolicyType.RestrictedItemTypesPolicy;
+  type = PolicyType.RestrictedItemTypes;
  component = RestrictedItemTypesPolicyComponent;
 }

--- a/apps/web/src/app/vault/components/vault-items/vault-items.component.ts
+++ b/apps/web/src/app/vault/components/vault-items/vault-items.component.ts
@@ -342,8 +342,6 @@ export class VaultItemsComponent {
    const ciphers: VaultItem[] = this.ciphers.map((cipher) => ({ cipher }));
    const items: VaultItem[] = [].concat(collections).concat(ciphers);

-    this.selection.clear();
-
    // All ciphers are selectable, collections only if they can be edited or deleted
    this.editableItems = items.filter(
      (item) =>
--- a/apps/web/src/app/vault/components/vault-items/vault-items.stories.ts
+++ b/apps/web/src/app/vault/components/vault-items/vault-items.stories.ts
@@ -29,6 +29,7 @@ import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { LoginUriView } from "@bitwarden/common/vault/models/view/login-uri.view";
 import { LoginView } from "@bitwarden/common/vault/models/view/login.view";
 import { CipherAuthorizationService } from "@bitwarden/common/vault/services/cipher-authorization.service";
+import { RestrictedItemTypesService } from "@bitwarden/vault";

 import { GroupView } from "../../../admin-console/organizations/core";
 import { PreloadedEnglishI18nModule } from "../../../core/tests";
@@ -125,6 +126,12 @@ export default {
            },
          },
        },
+        {
+          provide: RestrictedItemTypesService,
+          useValue: {
+            restricted$: of([]), // No restricted item types for this story
+          },
+        },
      ],
    }),
    applicationConfig({
--- a/apps/web/src/app/vault/individual-vault/vault-filter/components/vault-filter.component.ts
+++ b/apps/web/src/app/vault/individual-vault/vault-filter/components/vault-filter.component.ts
@@ -1,8 +1,15 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
 import { Component, EventEmitter, inject, Input, OnDestroy, OnInit, Output } from "@angular/core";
 import { Router } from "@angular/router";
-import { firstValueFrom, merge, Subject, switchMap, takeUntil } from "rxjs";
+import {
+  distinctUntilChanged,
+  firstValueFrom,
+  map,
+  merge,
+  shareReplay,
+  Subject,
+  switchMap,
+  takeUntil,
+} from "rxjs";

 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { PolicyType } from "@bitwarden/common/admin-console/enums";
@@ -16,6 +23,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { CipherType } from "@bitwarden/common/vault/enums";
 import { TreeNode } from "@bitwarden/common/vault/models/domain/tree-node";
 import { DialogService, ToastService } from "@bitwarden/components";
+import { RestrictedItemTypesService } from "@bitwarden/vault";

 import { TrialFlowService } from "../../../../billing/services/trial-flow.service";
 import { VaultFilterService } from "../services/abstractions/vault-filter.service";
@@ -56,6 +64,45 @@ export class VaultFilterComponent implements OnInit, OnDestroy {
    return this.filters ? Object.values(this.filters) : [];
  }

+  allTypeFilters: CipherTypeFilter[] = [
+    {
+      id: "favorites",
+      name: this.i18nService.t("favorites"),
+      type: "favorites",
+      icon: "bwi-star",
+    },
+    {
+      id: "login",
+      name: this.i18nService.t("typeLogin"),
+      type: CipherType.Login,
+      icon: "bwi-globe",
+    },
+    {
+      id: "card",
+      name: this.i18nService.t("typeCard"),
+      type: CipherType.Card,
+      icon: "bwi-credit-card",
+    },
+    {
+      id: "identity",
+      name: this.i18nService.t("typeIdentity"),
+      type: CipherType.Identity,
+      icon: "bwi-id-card",
+    },
+    {
+      id: "note",
+      name: this.i18nService.t("note"),
+      type: CipherType.SecureNote,
+      icon: "bwi-sticky-note",
+    },
+    {
+      id: "sshKey",
+      name: this.i18nService.t("typeSshKey"),
+      type: CipherType.SshKey,
+      icon: "bwi-key",
+    },
+  ];
+
  get searchPlaceholder() {
    if (this.activeFilter.isFavorites) {
      return "searchFavorites";
@@ -107,12 +154,17 @@ export class VaultFilterComponent implements OnInit, OnDestroy {
    protected dialogService: DialogService,
    protected configService: ConfigService,
    protected accountService: AccountService,
+    protected restrictedItemTypesService: RestrictedItemTypesService,
  ) {}

  async ngOnInit(): Promise<void> {
    this.filters = await this.buildAllFilters();
-    this.activeFilter.selectedCipherTypeNode =
-      (await this.getDefaultFilter()) as TreeNode<CipherTypeFilter>;
+    if (this.filters?.typeFilter?.data$) {
+      this.activeFilter.selectedCipherTypeNode = (await firstValueFrom(
+        this.filters?.typeFilter.data$,
+      )) as TreeNode<CipherTypeFilter>;
+    }
+
    this.isLoaded = true;

    // Without refactoring the entire component, we need to manually update the organization filter whenever the policies update
@@ -133,6 +185,9 @@ export class VaultFilterComponent implements OnInit, OnDestroy {
        takeUntil(this.destroy$),
      )
      .subscribe((orgFilters) => {
+        if (!this.filters) {
+          return;
+        }
        this.filters.organizationFilter = orgFilters;
      });
  }
@@ -151,7 +206,6 @@ export class VaultFilterComponent implements OnInit, OnDestroy {
    if (!orgNode?.node.enabled) {
      this.toastService.showToast({
        variant: "error",
-        title: null,
        message: this.i18nService.t("disabledOrganizationFilterError"),
      });
      const metadata = await this.billingApiService.getOrganizationBillingMetadata(orgNode.node.id);
@@ -190,10 +244,6 @@ export class VaultFilterComponent implements OnInit, OnDestroy {
    this.onEditFolder.emit(folder);
  };

-  async getDefaultFilter(): Promise<TreeNode<VaultFilterType>> {
-    return await firstValueFrom(this.filters?.typeFilter.data$);
-  }
-
  async buildAllFilters(): Promise<VaultFilterList> {
    const builderFilter = {} as VaultFilterList;
    builderFilter.organizationFilter = await this.addOrganizationFilter();
@@ -225,7 +275,7 @@ export class VaultFilterComponent implements OnInit, OnDestroy {

    const addAction = !singleOrgPolicy
      ? { text: "newOrganization", route: "/create-organization" }
-      : null;
+      : undefined;

    const orgFilterSection: VaultFilterSection = {
      data$: this.vaultFilterService.organizationTree$,
@@ -233,7 +283,7 @@ export class VaultFilterComponent implements OnInit, OnDestroy {
        showHeader: !(singleOrgPolicy && personalVaultPolicy),
        isSelectable: true,
      },
-      action: this.applyOrganizationFilter,
+      action: this.applyOrganizationFilter as (orgNode: TreeNode<VaultFilterType>) => Promise<void>,
      options: { component: OrganizationOptionsComponent },
      add: addAction,
      divider: true,
@@ -243,55 +293,31 @@ export class VaultFilterComponent implements OnInit, OnDestroy {
  }

  protected async addTypeFilter(excludeTypes: CipherStatus[] = []): Promise<VaultFilterSection> {
-    const allTypeFilters: CipherTypeFilter[] = [
-      {
-        id: "favorites",
-        name: this.i18nService.t("favorites"),
-        type: "favorites",
-        icon: "bwi-star",
-      },
-      {
-        id: "login",
-        name: this.i18nService.t("typeLogin"),
-        type: CipherType.Login,
-        icon: "bwi-globe",
-      },
-      {
-        id: "card",
-        name: this.i18nService.t("typeCard"),
-        type: CipherType.Card,
-        icon: "bwi-credit-card",
-      },
-      {
-        id: "identity",
-        name: this.i18nService.t("typeIdentity"),
-        type: CipherType.Identity,
-        icon: "bwi-id-card",
-      },
-      {
-        id: "note",
-        name: this.i18nService.t("note"),
-        type: CipherType.SecureNote,
-        icon: "bwi-sticky-note",
-      },
-      {
-        id: "sshKey",
-        name: this.i18nService.t("typeSshKey"),
-        type: CipherType.SshKey,
-        icon: "bwi-key",
-      },
-    ];
+    const allFilter: CipherTypeFilter = { id: "AllItems", name: "allItems", type: "all", icon: "" };
+
+    const data$ = this.restrictedItemTypesService.restricted$.pipe(
+      map((restricted) => {
+        // List of types restricted by all orgs
+        const restrictedByAll = restricted
+          .filter((r) => r.allowViewOrgIds.length === 0)
+          .map((r) => r.cipherType);
+        const toExclude = [...excludeTypes, ...restrictedByAll];
+        return this.allTypeFilters.filter(
+          (f) => typeof f.type !== "string" && !toExclude.includes(f.type),
+        );
+      }),
+      switchMap((allowed) => this.vaultFilterService.buildTypeTree(allFilter, allowed)),
+      distinctUntilChanged(),
+      shareReplay({ bufferSize: 1, refCount: true }),
+    );

    const typeFilterSection: VaultFilterSection = {
-      data$: this.vaultFilterService.buildTypeTree(
-        { id: "AllItems", name: "allItems", type: "all", icon: "" },
-        allTypeFilters.filter((f) => !excludeTypes.includes(f.type)),
-      ),
+      data$,
      header: {
        showHeader: true,
        isSelectable: true,
      },
-      action: this.applyTypeFilter,
+      action: this.applyTypeFilter as (filterNode: TreeNode<VaultFilterType>) => Promise<void>,
    };
    return typeFilterSection;
  }
@@ -303,10 +329,10 @@ export class VaultFilterComponent implements OnInit, OnDestroy {
        showHeader: true,
        isSelectable: false,
      },
-      action: this.applyFolderFilter,
+      action: this.applyFolderFilter as (filterNode: TreeNode<VaultFilterType>) => Promise<void>,
      edit: {
        filterName: this.i18nService.t("folder"),
-        action: this.editFolder,
+        action: this.editFolder as (filter: VaultFilterType) => void,
      },
    };
    return folderFilterSection;
@@ -319,7 +345,9 @@ export class VaultFilterComponent implements OnInit, OnDestroy {
        showHeader: true,
        isSelectable: true,
      },
-      action: this.applyCollectionFilter,
+      action: this.applyCollectionFilter as (
+        filterNode: TreeNode<VaultFilterType>,
+      ) => Promise<void>,
    };
    return collectionFilterSection;
  }
@@ -346,7 +374,7 @@ export class VaultFilterComponent implements OnInit, OnDestroy {
        showHeader: false,
        isSelectable: true,
      },
-      action: this.applyTypeFilter,
+      action: this.applyTypeFilter as (filterNode: TreeNode<VaultFilterType>) => Promise<void>,
    };
    return trashFilterSection;
  }
--- a/apps/web/src/app/vault/individual-vault/vault-filter/shared/models/filter-function.spec.ts
+++ b/apps/web/src/app/vault/individual-vault/vault-filter/shared/models/filter-function.spec.ts
@@ -3,6 +3,7 @@
 import { Unassigned } from "@bitwarden/admin-console/common";
 import { CipherType } from "@bitwarden/common/vault/enums";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { RestrictedCipherType } from "@bitwarden/vault";

 import { createFilterFunction } from "./filter-function";
 import { All } from "./routed-vault-filter.model";
@@ -214,6 +215,46 @@ describe("createFilter", () => {
      expect(result).toBe(true);
    });
  });
+
+  describe("given restricted types", () => {
+    const restrictedTypes: RestrictedCipherType[] = [
+      { cipherType: CipherType.Login, allowViewOrgIds: [] },
+    ];
+
+    it("should filter out a cipher whose type is fully restricted", () => {
+      const cipher = createCipher({ type: CipherType.Login });
+      const filterFunction = createFilterFunction({}, restrictedTypes);
+
+      expect(filterFunction(cipher)).toBe(false);
+    });
+
+    it("should allow a cipher when the cipher's organization allows it", () => {
+      const cipher = createCipher({ type: CipherType.Login, organizationId: "org1" });
+      const restricted: RestrictedCipherType[] = [
+        { cipherType: CipherType.Login, allowViewOrgIds: ["org1"] },
+      ];
+      const filterFunction2 = createFilterFunction({}, restricted);
+
+      expect(filterFunction2(cipher)).toBe(true);
+    });
+
+    it("should filter out a personal vault cipher when the owning orgs does not allow it", () => {
+      const cipher = createCipher({ type: CipherType.Card, organizationId: "org1" });
+      const restricted2: RestrictedCipherType[] = [
+        { cipherType: CipherType.Card, allowViewOrgIds: [] },
+      ];
+      const filterFunction3 = createFilterFunction({}, restricted2);
+
+      expect(filterFunction3(cipher)).toBe(false);
+    });
+
+    it("should not filter a cipher if there are no restricted types", () => {
+      const cipher = createCipher({ type: CipherType.Login });
+      const filterFunction = createFilterFunction({}, []);
+
+      expect(filterFunction(cipher)).toBe(true);
+    });
+  });
 });

 function createCipher(options: Partial<CipherView> = {}) {
--- a/apps/web/src/app/vault/individual-vault/vault-filter/shared/models/filter-function.ts
+++ b/apps/web/src/app/vault/individual-vault/vault-filter/shared/models/filter-function.ts
@@ -1,12 +1,16 @@
 import { Unassigned } from "@bitwarden/admin-console/common";
 import { CipherType } from "@bitwarden/common/vault/enums";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { RestrictedCipherType } from "@bitwarden/vault";

 import { All, RoutedVaultFilterModel } from "./routed-vault-filter.model";

 export type FilterFunction = (cipher: CipherView) => boolean;

-export function createFilterFunction(filter: RoutedVaultFilterModel): FilterFunction {
+export function createFilterFunction(
+  filter: RoutedVaultFilterModel,
+  restrictedTypes?: RestrictedCipherType[],
+): FilterFunction {
  return (cipher) => {
    if (filter.type === "favorites" && !cipher.favorite) {
      return false;
@@ -80,6 +84,24 @@ export function createFilterFunction(filter: RoutedVaultFilterModel): FilterFunc
      return false;
    }

+    // Restricted types
+    if (restrictedTypes && restrictedTypes.length > 0) {
+      // Filter the cipher if that type is restricted unless
+      // - The cipher belongs to an organization and that organization allows viewing the cipher type
+      // OR
+      // - The cipher belongs to the user's personal vault and at least one other organization does not restrict that type
+      if (
+        restrictedTypes.some(
+          (restrictedType) =>
+            restrictedType.cipherType === cipher.type &&
+            (cipher.organizationId
+              ? !restrictedType.allowViewOrgIds.includes(cipher.organizationId)
+              : restrictedType.allowViewOrgIds.length === 0),
+        )
+      ) {
+        return false;
+      }
+    }
    return true;
  };
 }
--- a/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.html
+++ b/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.html
@@ -81,26 +81,12 @@
        {{ "new" | i18n }}<i class="bwi tw-ml-2" aria-hidden="true"></i>
      </button>
      <bit-menu #addOptions aria-labelledby="newItemDropdown">
-        <button type="button" bitMenuItem (click)="addCipher(CipherType.Login)">
-          <i class="bwi bwi-globe" slot="start" aria-hidden="true"></i>
-          {{ "typeLogin" | i18n }}
-        </button>
-        <button type="button" bitMenuItem (click)="addCipher(CipherType.Card)">
-          <i class="bwi bwi-credit-card" slot="start" aria-hidden="true"></i>
-          {{ "typeCard" | i18n }}
-        </button>
-        <button type="button" bitMenuItem (click)="addCipher(CipherType.Identity)">
-          <i class="bwi bwi-id-card" slot="start" aria-hidden="true"></i>
-          {{ "typeIdentity" | i18n }}
-        </button>
-        <button type="button" bitMenuItem (click)="addCipher(CipherType.SecureNote)">
-          <i class="bwi bwi-sticky-note" slot="start" aria-hidden="true"></i>
-          {{ "note" | i18n }}
-        </button>
-        <button type="button" bitMenuItem (click)="addCipher(CipherType.SshKey)">
-          <i class="bwi bwi-key" slot="start" aria-hidden="true"></i>
-          {{ "typeSshKey" | i18n }}
-        </button>
+        @for (item of cipherMenuItems$ | async; track item.type) {
+          <button type="button" bitMenuItem (click)="addCipher(item.type)">
+            <i class="bwi {{ item.icon }}" slot="start" aria-hidden="true"></i>
+            {{ item.labelKey | i18n }}
+          </button>
+        }
        <bit-menu-divider />
        <button type="button" bitMenuItem (click)="addFolder()">
          <i class="bwi bwi-fw bwi-folder" aria-hidden="true"></i>
--- a/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.ts
+++ b/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.ts
@@ -1,16 +1,9 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { CommonModule } from "@angular/common";
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  Input,
-  OnInit,
-  Output,
-} from "@angular/core";
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from "@angular/core";
 import { Router } from "@angular/router";
-import { firstValueFrom } from "rxjs";
+import { firstValueFrom, map, shareReplay } from "rxjs";

 import {
  Unassigned,
@@ -31,6 +24,7 @@ import {
  MenuModule,
  SimpleDialogOptions,
 } from "@bitwarden/components";
+import { RestrictedItemTypesService } from "@bitwarden/vault";

 import { CollectionDialogTabType } from "../../../admin-console/organizations/shared/components/collection-dialog";
 import { HeaderModule } from "../../../layouts/header/header.module";
@@ -55,11 +49,26 @@ import {
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class VaultHeaderComponent implements OnInit {
+export class VaultHeaderComponent {
  protected Unassigned = Unassigned;
  protected All = All;
  protected CollectionDialogTabType = CollectionDialogTabType;
  protected CipherType = CipherType;
+  protected allCipherMenuItems = [
+    { type: CipherType.Login, icon: "bwi-globe", labelKey: "typeLogin" },
+    { type: CipherType.Card, icon: "bwi-credit-card", labelKey: "typeCard" },
+    { type: CipherType.Identity, icon: "bwi-id-card", labelKey: "typeIdentity" },
+    { type: CipherType.SecureNote, icon: "bwi-sticky-note", labelKey: "note" },
+    { type: CipherType.SshKey, icon: "bwi-key", labelKey: "typeSshKey" },
+  ];
+  protected cipherMenuItems$ = this.restrictedItemTypesService.restricted$.pipe(
+    map((restrictedTypes) => {
+      return this.allCipherMenuItems.filter((item) => {
+        return !restrictedTypes.some((restrictedType) => restrictedType.cipherType === item.type);
+      });
+    }),
+    shareReplay({ bufferSize: 1, refCount: true }),
+  );

  /**
   * Boolean to determine the loading state of the header.
@@ -100,10 +109,9 @@ export class VaultHeaderComponent implements OnInit {
    private dialogService: DialogService,
    private router: Router,
    private configService: ConfigService,
+    private restrictedItemTypesService: RestrictedItemTypesService,
  ) {}

-  async ngOnInit() {}
-
  /**
   * The id of the organization that is currently being filtered on.
   * This can come from a collection filter or organization filter, if applied.
--- a/apps/web/src/app/vault/individual-vault/vault.component.ts
+++ b/apps/web/src/app/vault/individual-vault/vault.component.ts
@@ -79,6 +79,7 @@ import {
  DecryptionFailureDialogComponent,
  DefaultCipherFormConfigService,
  PasswordRepromptService,
+  RestrictedItemTypesService,
 } from "@bitwarden/vault";

 import {
@@ -273,6 +274,7 @@ export class VaultComponent implements OnInit, OnDestroy {
    private organizationBillingService: OrganizationBillingServiceAbstraction,
    private billingNotificationService: BillingNotificationService,
    private configService: ConfigService,
+    private restrictedItemTypesService: RestrictedItemTypesService,
  ) {}

  async ngOnInit() {
@@ -356,12 +358,13 @@ export class VaultComponent implements OnInit, OnDestroy {
      this.cipherService.cipherViews$(activeUserId).pipe(filter((c) => c !== null)),
      filter$,
      this.currentSearchText$,
+      this.restrictedItemTypesService.restricted$,
    ]).pipe(
      filter(([ciphers, filter]) => ciphers != undefined && filter != undefined),
-      concatMap(async ([ciphers, filter, searchText]) => {
+      concatMap(async ([ciphers, filter, searchText, restrictedTypes]) => {
        const failedCiphers =
          (await firstValueFrom(this.cipherService.failedToDecryptCiphers$(activeUserId))) ?? [];
-        const filterFunction = createFilterFunction(filter);
+        const filterFunction = createFilterFunction(filter, restrictedTypes);
        // Append any failed to decrypt ciphers to the top of the cipher list
        const allCiphers = [...failedCiphers, ...ciphers];