[PM-20643] - [Vault] [Desktop] Front End Changes to Enforce "Remove card item type policy" (#15176)

* add restricted item types to legacy vault components

* filter out restricted item types from new menu item in desktop

* use CIPHER_MENU_ITEMS

* use CIPHER_MENU_ITEMS. move restricted cipher service to common

* use move restricted item types service to libs. re-use cipher menu items

* add shareReplay. change variable name

* move restricted filter to search service. remove unecessary import

* add reusable service method

* clean up spec

* add optional chain

* remove duplicate import

* move isCipherViewRestricted to service module

* fix logic

* fix logic

* remove extra space

---------

Co-authored-by: SmithThe4th <gsmith@bitwarden.com>

apps/desktop/src/locales/en/messages.json

@@ -23,6 +23,9 @@
   "typeIdentity": {
     "message": "Identity"
   },
+  "typeNote": {
+    "message": "Note"
+  },
   "typeSecureNote": {
     "message": "Secure note"
   },

apps/desktop/src/vault/app/vault/add-edit.component.html

@@ -12,7 +12,9 @@
           <div class="box-content-row" *ngIf="!editMode" appBoxRow>
             <label for="type">{{ "type" | i18n }}</label>
             <select id="type" name="Type" [(ngModel)]="cipher.type" (change)="typeChange()">
-              <option *ngFor="let o of typeOptions" [ngValue]="o.value">{{ o.name }}</option>
+              <option *ngFor="let item of menuItems$ | async" [ngValue]="item.type">
+                {{ item.labelKey | i18n }}
+              </option>
             </select>
           </div>
           <div class="box-content-row" appBoxRow>

apps/desktop/src/vault/app/vault/add-edit.component.ts

@@ -3,6 +3,7 @@
 import { DatePipe } from "@angular/common";
 import { Component, NgZone, OnChanges, OnDestroy, OnInit, ViewChild } from "@angular/core";
 import { NgForm } from "@angular/forms";
+import { map, shareReplay } from "rxjs";
 
 import { CollectionService } from "@bitwarden/admin-console/common";
 import { AddEditComponent as BaseAddEditComponent } from "@bitwarden/angular/vault/components/add-edit.component";
@@ -22,6 +23,8 @@ import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.servi
 import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { CipherAuthorizationService } from "@bitwarden/common/vault/services/cipher-authorization.service";
+import { RestrictedItemTypesService } from "@bitwarden/common/vault/services/restricted-item-types.service";
+import { CIPHER_MENU_ITEMS } from "@bitwarden/common/vault/types/cipher-menu-items";
 import { DialogService, ToastService } from "@bitwarden/components";
 import { PasswordRepromptService, SshImportPromptService } from "@bitwarden/vault";
 
@@ -35,6 +38,18 @@ const BroadcasterSubscriptionId = "AddEditComponent";
 export class AddEditComponent extends BaseAddEditComponent implements OnInit, OnChanges, OnDestroy {
   @ViewChild("form")
   private form: NgForm;
+  menuItems$ = this.restrictedItemTypesService.restricted$.pipe(
+    map((restrictedItemTypes) =>
+      // Filter out restricted item types from the default CIPHER_MENU_ITEMS array
+      CIPHER_MENU_ITEMS.filter(
+        (typeOption) =>
+          !restrictedItemTypes.some(
+            (restrictedType) => restrictedType.cipherType === typeOption.type,
+          ),
+      ),
+    ),
+    shareReplay({ bufferSize: 1, refCount: true }),
+  );
 
   constructor(
     cipherService: CipherService,
@@ -59,6 +74,7 @@ export class AddEditComponent extends BaseAddEditComponent implements OnInit, On
     cipherAuthorizationService: CipherAuthorizationService,
     sdkService: SdkService,
     sshImportPromptService: SshImportPromptService,
+    protected restrictedItemTypesService: RestrictedItemTypesService,
   ) {
     super(
       cipherService,

apps/desktop/src/vault/app/vault/vault-filter/filters/type-filter.component.html

@@ -20,78 +20,20 @@
   </h2>
 </div>
 <ul id="type-filters" *ngIf="!isCollapsed" class="filter-options">
-  <li
-    class="filter-option"
-    [ngClass]="{ active: activeFilter.cipherType === cipherTypeEnum.Login }"
-  >
-    <span class="filter-buttons">
-      <button
-        type="button"
-        class="filter-button"
-        (click)="applyFilter(cipherTypeEnum.Login)"
-        [attr.aria-pressed]="activeFilter.cipherType === cipherTypeEnum.Login"
-      >
-        <i class="bwi bwi-fw bwi-globe" aria-hidden="true"></i>&nbsp;{{ "typeLogin" | i18n }}
-      </button>
-    </span>
-  </li>
-  <li class="filter-option" [ngClass]="{ active: activeFilter.cipherType === cipherTypeEnum.Card }">
-    <span class="filter-buttons">
-      <button
-        type="button"
-        class="filter-button"
-        (click)="applyFilter(cipherTypeEnum.Card)"
-        [attr.aria-pressed]="activeFilter.cipherType === cipherTypeEnum.Card"
-      >
-        <i class="bwi bwi-fw bwi-credit-card" aria-hidden="true"></i>&nbsp;{{ "typeCard" | i18n }}
-      </button>
-    </span>
-  </li>
-  <li
-    class="filter-option"
-    [ngClass]="{ active: activeFilter.cipherType === cipherTypeEnum.Identity }"
-  >
-    <span class="filter-buttons">
-      <button
-        type="button"
-        class="filter-button"
-        (click)="applyFilter(cipherTypeEnum.Identity)"
-        [attr.aria-pressed]="activeFilter.cipherType === cipherTypeEnum.Identity"
-      >
-        <i class="bwi bwi-fw bwi-id-card" aria-hidden="true"></i>&nbsp;{{ "typeIdentity" | i18n }}
-      </button>
-    </span>
-  </li>
-  <li
-    class="filter-option"
-    [ngClass]="{ active: activeFilter.cipherType === cipherTypeEnum.SecureNote }"
-  >
-    <span class="filter-buttons">
-      <button
-        type="button"
-        class="filter-button"
-        (click)="applyFilter(cipherTypeEnum.SecureNote)"
-        [attr.aria-pressed]="activeFilter.cipherType === cipherTypeEnum.SecureNote"
-      >
-        <i class="bwi bwi-fw bwi-sticky-note" aria-hidden="true"></i>&nbsp;{{
-          "typeSecureNote" | i18n
-        }}
-      </button>
-    </span>
-  </li>
-  <li
-    class="filter-option"
-    [ngClass]="{ active: activeFilter.cipherType === cipherTypeEnum.SshKey }"
-  >
-    <span class="filter-buttons">
-      <button
-        type="button"
-        class="filter-button"
-        (click)="applyFilter(cipherTypeEnum.SshKey)"
-        [attr.aria-pressed]="activeFilter.cipherType === cipherTypeEnum.SshKey"
-      >
-        <i class="bwi bwi-fw bwi-key" aria-hidden="true"></i>&nbsp;{{ "typeSshKey" | i18n }}
-      </button>
-    </span>
-  </li>
+  @for (typeFilter of typeFilters$ | async; track typeFilter) {
+    <li class="filter-option" [ngClass]="{ active: activeFilter.cipherType === typeFilter.type }">
+      <span class="filter-buttons">
+        <button
+          type="button"
+          class="filter-button"
+          (click)="applyFilter(typeFilter.type)"
+          [attr.aria-pressed]="activeFilter.cipherType === typeFilter.type"
+        >
+          <i class="bwi bwi-fw {{ typeFilter.icon }}" aria-hidden="true"></i>&nbsp;{{
+            typeFilter.labelKey | i18n
+          }}
+        </button>
+      </span>
+    </li>
+  }
 </ul>

apps/desktop/src/vault/app/vault/vault-filter/filters/type-filter.component.ts

@@ -1,6 +1,9 @@
 import { Component } from "@angular/core";
+import { map, shareReplay } from "rxjs";
 
 import { TypeFilterComponent as BaseTypeFilterComponent } from "@bitwarden/angular/vault/vault-filter/components/type-filter.component";
+import { RestrictedItemTypesService } from "@bitwarden/common/vault/services/restricted-item-types.service";
+import { CIPHER_MENU_ITEMS } from "@bitwarden/common/vault/types/cipher-menu-items";
 
 @Component({
   selector: "app-type-filter",
@@ -8,7 +11,22 @@ import { TypeFilterComponent as BaseTypeFilterComponent } from "@bitwarden/angul
   standalone: false,
 })
 export class TypeFilterComponent extends BaseTypeFilterComponent {
-  constructor() {
+  protected typeFilters$ = this.restrictedItemTypesService.restricted$.pipe(
+    map((restrictedItemTypes) =>
+      // Filter out restricted item types from the typeFilters array
+      CIPHER_MENU_ITEMS.filter(
+        (typeFilter) =>
+          !restrictedItemTypes.some(
+            (restrictedType) =>
+              restrictedType.allowViewOrgIds.length === 0 &&
+              restrictedType.cipherType === typeFilter.type,
+          ),
+      ),
+    ),
+    shareReplay({ bufferSize: 1, refCount: true }),
+  );
+
+  constructor(private restrictedItemTypesService: RestrictedItemTypesService) {
     super();
   }
 }

apps/desktop/src/vault/app/vault/vault-items-v2.component.html

@@ -72,25 +72,11 @@
     <i class="bwi bwi-plus bwi-lg" aria-hidden="true"></i>
   </button>
   <bit-menu #addCipherMenu>
-    <button type="button" bitMenuItem (click)="addCipher(CipherType.Login)">
-      <i class="bwi bwi-globe tw-mr-1" aria-hidden="true"></i>
-      {{ "typeLogin" | i18n }}
-    </button>
-    <button type="button" bitMenuItem (click)="addCipher(CipherType.Card)">
-      <i class="bwi bwi-credit-card tw-mr-1" aria-hidden="true"></i>
-      {{ "typeCard" | i18n }}
-    </button>
-    <button type="button" bitMenuItem (click)="addCipher(CipherType.Identity)">
-      <i class="bwi bwi-id-card tw-mr-1" aria-hidden="true"></i>
-      {{ "typeIdentity" | i18n }}
-    </button>
-    <button type="button" bitMenuItem (click)="addCipher(CipherType.SecureNote)">
-      <i class="bwi bwi-sticky-note tw-mr-1" aria-hidden="true"></i>
-      {{ "typeSecureNote" | i18n }}
-    </button>
-    <button type="button" bitMenuItem (click)="addCipher(CipherType.SshKey)">
-      <i class="bwi bwi-key tw-mr-1" aria-hidden="true"></i>
-      {{ "typeSshKey" | i18n }}
-    </button>
+    @for (itemTypes of itemTypes$ | async; track itemTypes.type) {
+      <button type="button" bitMenuItem (click)="addCipher(itemTypes.type)">
+        <i class="bwi {{ itemTypes.icon }} tw-mr-1" aria-hidden="true"></i>
+        {{ itemTypes.labelKey | i18n }}
+      </button>
+    }
   </bit-menu>
 </ng-template>

apps/desktop/src/vault/app/vault/vault-items-v2.component.ts

@@ -10,6 +10,7 @@ import { SearchService } from "@bitwarden/common/abstractions/search.service";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { RestrictedItemTypesService } from "@bitwarden/common/vault/services/restricted-item-types.service";
 import { MenuModule } from "@bitwarden/components";
 
 import { SearchBarService } from "../../../app/layout/search/search-bar.service";
@@ -25,8 +26,9 @@ export class VaultItemsV2Component extends BaseVaultItemsComponent {
     private readonly searchBarService: SearchBarService,
     cipherService: CipherService,
     accountService: AccountService,
+    restrictedItemTypesService: RestrictedItemTypesService,
   ) {
-    super(searchService, cipherService, accountService);
+    super(searchService, cipherService, accountService, restrictedItemTypesService);
 
     this.searchBarService.searchText$
       .pipe(distinctUntilChanged(), takeUntilDestroyed())

apps/desktop/src/vault/app/vault/vault-items.component.ts

@@ -8,6 +8,7 @@ import { SearchService } from "@bitwarden/common/abstractions/search.service";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { RestrictedItemTypesService } from "@bitwarden/common/vault/services/restricted-item-types.service";
 
 import { SearchBarService } from "../../../app/layout/search/search-bar.service";
 
@@ -22,8 +23,9 @@ export class VaultItemsComponent extends BaseVaultItemsComponent {
     searchBarService: SearchBarService,
     cipherService: CipherService,
     accountService: AccountService,
+    protected restrictedItemTypesService: RestrictedItemTypesService,
   ) {
-    super(searchService, cipherService, accountService);
+    super(searchService, cipherService, accountService, restrictedItemTypesService);
 
     // eslint-disable-next-line rxjs-angular/prefer-takeuntil
     searchBarService.searchText$.pipe(distinctUntilChanged()).subscribe((searchText) => {