rename cipehrs component to vault items component (#4081)

apps/browser/src/popup/app-routing.module.ts

@@ -34,12 +34,12 @@ import { SyncComponent } from "./settings/sync.component";
 import { TabsComponent } from "./tabs.component";
 import { AddEditComponent } from "./vault/add-edit.component";
 import { AttachmentsComponent } from "./vault/attachments.component";
-import { CiphersComponent } from "./vault/ciphers.component";
 import { CollectionsComponent } from "./vault/collections.component";
 import { CurrentTabComponent } from "./vault/current-tab.component";
 import { PasswordHistoryComponent } from "./vault/password-history.component";
 import { ShareComponent } from "./vault/share.component";
 import { VaultFilterComponent } from "./vault/vault-filter.component";
+import { VaultItemsComponent } from "./vault/vault-items.component";
 import { ViewComponent } from "./vault/view.component";
 
 const routes: Routes = [
@@ -120,7 +120,7 @@ const routes: Routes = [
   },
   {
     path: "ciphers",
-    component: CiphersComponent,
+    component: VaultItemsComponent,
     canActivate: [AuthGuard],
     data: { state: "ciphers" },
   },

apps/browser/src/popup/app.component.ts

@@ -276,7 +276,7 @@ export class AppComponent implements OnInit, OnDestroy {
 
     await Promise.all([
       this.stateService.setBrowserGroupingComponentState(null),
-      this.stateService.setBrowserCipherComponentState(null),
+      this.stateService.setBrowserVaultItemsComponentState(null),
       this.stateService.setBrowserSendComponentState(null),
       this.stateService.setBrowserSendTypeComponentState(null),
     ]);

apps/browser/src/popup/app.module.ts

@@ -108,12 +108,12 @@ import { TabsComponent } from "./tabs.component";
 import { AddEditCustomFieldsComponent } from "./vault/add-edit-custom-fields.component";
 import { AddEditComponent } from "./vault/add-edit.component";
 import { AttachmentsComponent } from "./vault/attachments.component";
-import { CiphersComponent } from "./vault/ciphers.component";
 import { CollectionsComponent } from "./vault/collections.component";
 import { CurrentTabComponent } from "./vault/current-tab.component";
 import { PasswordHistoryComponent } from "./vault/password-history.component";
 import { ShareComponent } from "./vault/share.component";
 import { VaultFilterComponent } from "./vault/vault-filter.component";
+import { VaultItemsComponent } from "./vault/vault-items.component";
 import { VaultSelectComponent } from "./vault/vault-select.component";
 import { ViewCustomFieldsComponent } from "./vault/view-custom-fields.component";
 import { ViewComponent } from "./vault/view.component";
@@ -200,7 +200,7 @@ registerLocaleData(localeZhTw, "zh-TW");
     AppComponent,
     AttachmentsComponent,
     CipherRowComponent,
-    CiphersComponent,
+    VaultItemsComponent,
     CollectionsComponent,
     CurrentTabComponent,
     EnvironmentComponent,

apps/browser/src/popup/vault/vault-filter.component.ts

@@ -94,7 +94,7 @@ export class VaultFilterComponent implements OnInit, OnDestroy {
     this.showLeftHeader = !(
       this.popupUtils.inSidebar(window) && this.platformUtilsService.isFirefox()
     );
-    await this.browserStateService.setBrowserCipherComponentState(null);
+    await this.browserStateService.setBrowserVaultItemsComponentState(null);
 
     this.broadcasterService.subscribe(ComponentId, (message: any) => {
       this.ngZone.run(async () => {

apps/browser/src/popup/vault/vault-items.component.ts

@@ -3,7 +3,7 @@ import { ChangeDetectorRef, Component, NgZone, OnDestroy, OnInit } from "@angula
 import { ActivatedRoute, Router } from "@angular/router";
 import { first } from "rxjs/operators";
 
-import { CiphersComponent as BaseCiphersComponent } from "@bitwarden/angular/components/ciphers.component";
+import { VaultItemsComponent as BaseVaultItemsComponent } from "@bitwarden/angular/components/vault-items.component";
 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";
@@ -25,13 +25,13 @@ import { StateService } from "../../services/abstractions/state.service";
 import { VaultFilterService } from "../../services/vaultFilter.service";
 import { PopupUtilsService } from "../services/popup-utils.service";
 
-const ComponentId = "CiphersComponent";
+const ComponentId = "VaultItemsComponent";
 
 @Component({
-  selector: "app-vault-ciphers",
+  selector: "app-vault-items",
-  templateUrl: "ciphers.component.html",
+  templateUrl: "vault-items.component.html",
 })
-export class CiphersComponent extends BaseCiphersComponent implements OnInit, OnDestroy {
+export class VaultItemsComponent extends BaseVaultItemsComponent implements OnInit, OnDestroy {
   groupingTitle: string;
   state: BrowserComponentState;
   folderId: string = null;
@@ -82,7 +82,7 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
     // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
     this.route.queryParams.pipe(first()).subscribe(async (params) => {
       if (this.applySavedState) {
-        this.state = await this.stateService.getBrowserCipherComponentState();
+        this.state = await this.stateService.getBrowserVaultItemsComponentState();
         if (this.state?.searchText) {
           this.searchText = this.state.searchText;
         }
@@ -161,7 +161,7 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
           0
         );
       }
-      await this.stateService.setBrowserCipherComponentState(null);
+      await this.stateService.setBrowserVaultItemsComponentState(null);
     });
 
     this.broadcasterService.subscribe(ComponentId, (message: any) => {
@@ -291,6 +291,6 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
       scrollY: this.popupUtils.getContentScrollY(window, this.scrollingContainer),
       searchText: this.searchText,
     };
-    await this.stateService.setBrowserCipherComponentState(this.state);
+    await this.stateService.setBrowserVaultItemsComponentState(this.state);
   }
 }

apps/browser/src/services/abstractions/state.service.ts

@@ -18,8 +18,8 @@ export abstract class StateService extends BaseStateServiceAbstraction<Account>
     value: BrowserGroupingsComponentState,
     options?: StorageOptions
   ) => Promise<void>;
-  getBrowserCipherComponentState: (options?: StorageOptions) => Promise<BrowserComponentState>;
+  getBrowserVaultItemsComponentState: (options?: StorageOptions) => Promise<BrowserComponentState>;
-  setBrowserCipherComponentState: (
+  setBrowserVaultItemsComponentState: (
     value: BrowserComponentState,
     options?: StorageOptions
   ) => Promise<void>;

apps/browser/src/services/state.service.spec.ts

@@ -107,14 +107,14 @@ describe("Browser State Service", () => {
       });
     });
 
-    describe("getBrowserCipherComponentState", () => {
+    describe("getBrowserVaultItemsComponentState", () => {
       it("should return a BrowserComponentState", async () => {
         const componentState = new BrowserComponentState();
         componentState.scrollY = 0;
         componentState.searchText = "test";
         state.accounts[userId].ciphers = componentState;
 
-        const actual = await sut.getBrowserCipherComponentState();
+        const actual = await sut.getBrowserVaultItemsComponentState();
         expect(actual).toStrictEqual(componentState);
       });
     });

apps/browser/src/services/state.service.ts

@@ -68,13 +68,15 @@ export class StateService
   }
 
   @withPrototype(BrowserComponentState)
-  async getBrowserCipherComponentState(options?: StorageOptions): Promise<BrowserComponentState> {
+  async getBrowserVaultItemsComponentState(
+    options?: StorageOptions
+  ): Promise<BrowserComponentState> {
     return (
       await this.getAccount(this.reconcileOptions(options, await this.defaultInMemoryOptions()))
     )?.ciphers;
   }
 
-  async setBrowserCipherComponentState(
+  async setBrowserVaultItemsComponentState(
     value: BrowserComponentState,
     options?: StorageOptions
   ): Promise<void> {

apps/desktop/src/app/app.module.ts

@@ -90,7 +90,6 @@ import { SharedModule } from "./shared/shared.module";
 import { AddEditCustomFieldsComponent } from "./vault/add-edit-custom-fields.component";
 import { AddEditComponent } from "./vault/add-edit.component";
 import { AttachmentsComponent } from "./vault/attachments.component";
-import { CiphersComponent } from "./vault/ciphers.component";
 import { CollectionsComponent } from "./vault/collections.component";
 import { ExportComponent } from "./vault/export.component";
 import { FolderAddEditComponent } from "./vault/folder-add-edit.component";
@@ -99,6 +98,7 @@ import { PasswordGeneratorHistoryComponent } from "./vault/password-generator-hi
 import { PasswordHistoryComponent } from "./vault/password-history.component";
 import { ShareComponent } from "./vault/share.component";
 import { VaultFilterModule } from "./vault/vault-filter/vault-filter.module";
+import { VaultItemsComponent } from "./vault/vault-items.component";
 import { VaultComponent } from "./vault/vault.component";
 import { ViewCustomFieldsComponent } from "./vault/view-custom-fields.component";
 import { ViewComponent } from "./vault/view.component";
@@ -168,7 +168,7 @@ registerLocaleData(localeZhTw, "zh-TW");
     AddEditCustomFieldsComponent,
     AppComponent,
     AttachmentsComponent,
-    CiphersComponent,
+    VaultItemsComponent,
     CollectionsComponent,
     DeleteAccountComponent,
     EnvironmentComponent,

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

@@ -1,17 +1,17 @@
 import { Component } from "@angular/core";
 
-import { CiphersComponent as BaseCiphersComponent } from "@bitwarden/angular/components/ciphers.component";
+import { VaultItemsComponent as BaseVaultItemsComponent } from "@bitwarden/angular/components/vault-items.component";
 import { SearchService } from "@bitwarden/common/abstractions/search.service";
 import { CipherView } from "@bitwarden/common/models/view/cipher.view";
 
 import { SearchBarService } from "../layout/search/search-bar.service";
 
 @Component({
-  selector: "app-vault-ciphers",
+  selector: "app-vault-items",
-  templateUrl: "ciphers.component.html",
+  templateUrl: "vault-items.component.html",
 })
 // eslint-disable-next-line rxjs-angular/prefer-takeuntil
-export class CiphersComponent extends BaseCiphersComponent {
+export class VaultItemsComponent extends BaseVaultItemsComponent {
   constructor(searchService: SearchService, searchBarService: SearchBarService) {
     super(searchService);
 

apps/desktop/src/app/vault/vault.component.html

@@ -1,5 +1,5 @@
 <div id="vault" class="vault" attr.aria-hidden="{{ showingModal }}">
-  <app-vault-ciphers
+  <app-vault-items
     id="items"
     class="items"
     [activeCipherId]="cipherId"
@@ -8,7 +8,7 @@
     (onAddCipher)="addCipher($event)"
     (onAddCipherOptions)="addCipherOptions()"
   >
-  </app-vault-ciphers>
+  </app-vault-items>
   <app-vault-view
     id="details"
     class="details"

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

@@ -33,13 +33,13 @@ import { SearchBarService } from "../layout/search/search-bar.service";
 
 import { AddEditComponent } from "./add-edit.component";
 import { AttachmentsComponent } from "./attachments.component";
-import { CiphersComponent } from "./ciphers.component";
 import { CollectionsComponent } from "./collections.component";
 import { FolderAddEditComponent } from "./folder-add-edit.component";
 import { GeneratorComponent } from "./generator.component";
 import { PasswordHistoryComponent } from "./password-history.component";
 import { ShareComponent } from "./share.component";
 import { VaultFilterComponent } from "./vault-filter/vault-filter.component";
+import { VaultItemsComponent } from "./vault-items.component";
 import { ViewComponent } from "./view.component";
 
 const BroadcasterSubscriptionId = "VaultComponent";
@@ -51,7 +51,7 @@ const BroadcasterSubscriptionId = "VaultComponent";
 export class VaultComponent implements OnInit, OnDestroy {
   @ViewChild(ViewComponent) viewComponent: ViewComponent;
   @ViewChild(AddEditComponent) addEditComponent: AddEditComponent;
-  @ViewChild(CiphersComponent, { static: true }) ciphersComponent: CiphersComponent;
+  @ViewChild(VaultItemsComponent, { static: true }) vaultItemsComponent: VaultItemsComponent;
   @ViewChild("generator", { read: ViewContainerRef, static: true })
   generatorModalRef: ViewContainerRef;
   @ViewChild(VaultFilterComponent, { static: true }) vaultFilterComponent: VaultFilterComponent;
@@ -128,12 +128,12 @@ export class VaultComponent implements OnInit, OnDestroy {
             await this.openGenerator(false);
             break;
           case "syncCompleted":
-            await this.ciphersComponent.reload(this.activeFilter.buildFilter());
+            await this.vaultItemsComponent.reload(this.activeFilter.buildFilter());
             await this.vaultFilterComponent.reloadCollectionsAndFolders(this.activeFilter);
             await this.vaultFilterComponent.reloadOrganizations();
             break;
           case "refreshCiphers":
-            this.ciphersComponent.refresh();
+            this.vaultItemsComponent.refresh();
             break;
           case "modalShown":
             this.showingModal = true;
@@ -242,7 +242,7 @@ export class VaultComponent implements OnInit, OnDestroy {
         selectedOrganizationId: params.selectedOrganizationId,
         myVaultOnly: params.myVaultOnly ?? false,
       });
-      await this.ciphersComponent.reload(this.activeFilter.buildFilter());
+      await this.vaultItemsComponent.reload(this.activeFilter.buildFilter());
     });
   }
 
@@ -429,21 +429,21 @@ export class VaultComponent implements OnInit, OnDestroy {
     this.cipherId = cipher.id;
     this.action = "view";
     this.go();
-    await this.ciphersComponent.refresh();
+    await this.vaultItemsComponent.refresh();
   }
 
   async deletedCipher(cipher: CipherView) {
     this.cipherId = null;
     this.action = null;
     this.go();
-    await this.ciphersComponent.refresh();
+    await this.vaultItemsComponent.refresh();
   }
 
   async restoredCipher(cipher: CipherView) {
     this.cipherId = null;
     this.action = null;
     this.go();
-    await this.ciphersComponent.refresh();
+    await this.vaultItemsComponent.refresh();
   }
 
   async editCipherAttachments(cipher: CipherView) {
@@ -468,7 +468,7 @@ export class VaultComponent implements OnInit, OnDestroy {
     this.modal.onClosed.subscribe(async () => {
       this.modal = null;
       if (madeAttachmentChanges) {
-        await this.ciphersComponent.refresh();
+        await this.vaultItemsComponent.refresh();
       }
       madeAttachmentChanges = false;
     });
@@ -490,7 +490,7 @@ export class VaultComponent implements OnInit, OnDestroy {
     childComponent.onSharedCipher.subscribe(async () => {
       this.modal.close();
       this.viewCipher(cipher);
-      await this.ciphersComponent.refresh();
+      await this.vaultItemsComponent.refresh();
     });
     // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
     this.modal.onClosed.subscribe(async () => {
@@ -549,7 +549,7 @@ export class VaultComponent implements OnInit, OnDestroy {
       this.i18nService.t(this.calculateSearchBarLocalizationString(vaultFilter))
     );
     this.activeFilter = vaultFilter;
-    await this.ciphersComponent.reload(
+    await this.vaultItemsComponent.reload(
       this.activeFilter.buildFilter(),
       vaultFilter.status === "trash"
     );

apps/web/src/app/organizations/vault/vault-items.component.ts

@@ -15,13 +15,13 @@ import { TotpService } from "@bitwarden/common/abstractions/totp.service";
 import { Organization } from "@bitwarden/common/models/domain/organization";
 import { CipherView } from "@bitwarden/common/models/view/cipher.view";
 
-import { CiphersComponent as BaseCiphersComponent } from "../../vault/ciphers.component";
+import { VaultItemsComponent as BaseVaultItemsComponent } from "../../vault/vault-items.component";
 
 @Component({
-  selector: "app-org-vault-ciphers",
+  selector: "app-org-vault-items",
-  templateUrl: "../../vault/ciphers.component.html",
+  templateUrl: "../../vault/vault-items.component.html",
 })
-export class CiphersComponent extends BaseCiphersComponent {
+export class VaultItemsComponent extends BaseVaultItemsComponent {
   @Output() onEventsClicked = new EventEmitter<CipherView>();
 
   organization: Organization;

apps/web/src/app/organizations/vault/vault.component.html

@@ -18,7 +18,7 @@
       <div class="page-header d-flex">
         <h1>
           {{ "vaultItems" | i18n }}
-          <small #actionSpinner [appApiAction]="ciphersComponent.actionPromise">
+          <small #actionSpinner [appApiAction]="vaultItemsComponent.actionPromise">
             <ng-container *ngIf="actionSpinner.loading">
               <i
                 class="bwi bwi-spinner bwi-spin text-muted"
@@ -31,7 +31,7 @@
         </h1>
         <div class="ml-auto d-flex">
           <app-vault-bulk-actions
-            [ciphersComponent]="ciphersComponent"
+            [vaultItemsComponent]="vaultItemsComponent"
             [deleted]="deleted"
             [organization]="organization"
           >
@@ -49,7 +49,7 @@
       <app-callout type="warning" *ngIf="deleted" icon="bwi bwi-exclamation-triangle">
         {{ trashCleanupWarning }}
       </app-callout>
-      <app-org-vault-ciphers
+      <app-org-vault-items
         (onCipherClicked)="editCipher($event)"
         (onAttachmentsClicked)="editCipherAttachments($event)"
         (onAddCipher)="addCipher()"
@@ -57,7 +57,7 @@
         (onEventsClicked)="viewEvents($event)"
         (onCloneClicked)="cloneCipher($event)"
       >
-      </app-org-vault-ciphers>
+      </app-org-vault-items>
     </div>
   </div>
 </div>

apps/web/src/app/organizations/vault/vault.component.ts

@@ -29,9 +29,9 @@ import { EntityEventsComponent } from "../manage/entity-events.component";
 
 import { AddEditComponent } from "./add-edit.component";
 import { AttachmentsComponent } from "./attachments.component";
-import { CiphersComponent } from "./ciphers.component";
 import { CollectionsComponent } from "./collections.component";
 import { VaultFilterComponent } from "./vault-filter/vault-filter.component";
+import { VaultItemsComponent } from "./vault-items.component";
 
 const BroadcasterSubscriptionId = "OrgVaultComponent";
 
@@ -42,7 +42,7 @@ const BroadcasterSubscriptionId = "OrgVaultComponent";
 export class VaultComponent implements OnInit, OnDestroy {
   @ViewChild("vaultFilter", { static: true })
   vaultFilterComponent: VaultFilterComponent;
-  @ViewChild(CiphersComponent, { static: true }) ciphersComponent: CiphersComponent;
+  @ViewChild(VaultItemsComponent, { static: true }) vaultItemsComponent: VaultItemsComponent;
   @ViewChild("attachments", { read: ViewContainerRef, static: true })
   attachmentsModalRef: ViewContainerRef;
   @ViewChild("cipherAddEdit", { read: ViewContainerRef, static: true })
@@ -90,11 +90,11 @@ export class VaultComponent implements OnInit, OnDestroy {
     this.route.parent.params.subscribe(async (params: any) => {
       this.organization = await this.organizationService.get(params.organizationId);
       this.vaultFilterComponent.organization = this.organization;
-      this.ciphersComponent.organization = this.organization;
+      this.vaultItemsComponent.organization = this.organization;
 
       /* eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe, rxjs/no-nested-subscribe */
       this.route.queryParams.pipe(first()).subscribe(async (qParams) => {
-        this.ciphersComponent.searchText = this.vaultFilterComponent.searchText = qParams.search;
+        this.vaultItemsComponent.searchText = this.vaultFilterComponent.searchText = qParams.search;
         if (!this.organization.canViewAllCollections) {
           await this.syncService.fullSync(false);
           this.broadcasterService.subscribe(BroadcasterSubscriptionId, (message: any) => {
@@ -104,7 +104,7 @@ export class VaultComponent implements OnInit, OnDestroy {
                   if (message.successfully) {
                     await Promise.all([
                       this.vaultFilterComponent.reloadCollectionsAndFolders(),
-                      this.ciphersComponent.refresh(),
+                      this.vaultItemsComponent.refresh(),
                     ]);
                     this.changeDetectorRef.detectChanges();
                   }
@@ -119,10 +119,12 @@ export class VaultComponent implements OnInit, OnDestroy {
         }
         this.firstLoaded = true;
 
-        await this.ciphersComponent.reload();
+        await this.vaultItemsComponent.reload();
 
         if (qParams.viewEvents != null) {
-          const cipher = this.ciphersComponent.ciphers.filter((c) => c.id === qParams.viewEvents);
+          const cipher = this.vaultItemsComponent.ciphers.filter(
+            (c) => c.id === qParams.viewEvents
+          );
           if (cipher.length > 0) {
             this.viewEvents(cipher[0]);
           }
@@ -164,16 +166,16 @@ export class VaultComponent implements OnInit, OnDestroy {
   }
 
   async applyVaultFilter(vaultFilter: VaultFilter) {
-    this.ciphersComponent.showAddNew = vaultFilter.status !== "trash";
+    this.vaultItemsComponent.showAddNew = vaultFilter.status !== "trash";
     this.activeFilter = vaultFilter;
 
     // Hack to avoid calling cipherService.getAllFromApiForOrganization every time the vault filter changes.
-    // Call CiphersComponent.applyFilter directly instead of going through CiphersComponent.reload, which
+    // Call VaultItemsComponent.applyFilter directly instead of going through VaultItemsComponent.reload, which
     // reloads all the ciphers unnecessarily. Will be fixed properly by EC-14.
-    this.ciphersComponent.loaded = false;
+    this.vaultItemsComponent.loaded = false;
-    this.ciphersComponent.deleted = vaultFilter.status === "trash" || false;
+    this.vaultItemsComponent.deleted = vaultFilter.status === "trash" || false;
-    await this.ciphersComponent.applyFilter(this.activeFilter.buildFilter());
+    await this.vaultItemsComponent.applyFilter(this.activeFilter.buildFilter());
-    this.ciphersComponent.loaded = true;
+    this.vaultItemsComponent.loaded = true;
     // End hack
 
     this.vaultFilterComponent.searchPlaceholder =
@@ -182,8 +184,8 @@ export class VaultComponent implements OnInit, OnDestroy {
   }
 
   filterSearchText(searchText: string) {
-    this.ciphersComponent.searchText = searchText;
+    this.vaultItemsComponent.searchText = searchText;
-    this.ciphersComponent.search(200);
+    this.vaultItemsComponent.search(200);
   }
 
   async editCipherAttachments(cipher: CipherView) {
@@ -210,7 +212,7 @@ export class VaultComponent implements OnInit, OnDestroy {
     // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
     modal.onClosed.subscribe(async () => {
       if (madeAttachmentChanges) {
-        await this.ciphersComponent.refresh();
+        await this.vaultItemsComponent.refresh();
       }
       madeAttachmentChanges = false;
     });
@@ -232,7 +234,7 @@ export class VaultComponent implements OnInit, OnDestroy {
         // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
         comp.onSavedCollections.subscribe(async () => {
           modal.close();
-          await this.ciphersComponent.refresh();
+          await this.vaultItemsComponent.refresh();
         });
       }
     );
@@ -274,17 +276,17 @@ export class VaultComponent implements OnInit, OnDestroy {
         // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
         comp.onSavedCipher.subscribe(async () => {
           modal.close();
-          await this.ciphersComponent.refresh();
+          await this.vaultItemsComponent.refresh();
         });
         // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
         comp.onDeletedCipher.subscribe(async () => {
           modal.close();
-          await this.ciphersComponent.refresh();
+          await this.vaultItemsComponent.refresh();
         });
         // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
         comp.onRestoredCipher.subscribe(async () => {
           modal.close();
-          await this.ciphersComponent.refresh();
+          await this.vaultItemsComponent.refresh();
         });
       }
     );

apps/web/src/app/organizations/vault/vault.module.ts

@@ -2,14 +2,14 @@ import { NgModule } from "@angular/core";
 
 import { VaultSharedModule } from "../../vault/shared/vault-shared.module";
 
-import { CiphersComponent } from "./ciphers.component";
 import { VaultFilterModule } from "./vault-filter/vault-filter.module";
+import { VaultItemsComponent } from "./vault-items.component";
 import { VaultRoutingModule } from "./vault-routing.module";
 import { VaultComponent } from "./vault.component";
 
 @NgModule({
   imports: [VaultSharedModule, VaultRoutingModule, VaultFilterModule],
-  declarations: [VaultComponent, CiphersComponent],
+  declarations: [VaultComponent, VaultItemsComponent],
   exports: [VaultComponent],
 })
 export class VaultModule {}

apps/web/src/app/vault/bulk-actions.component.ts

@@ -11,7 +11,7 @@ import { BulkDeleteComponent } from "./bulk-delete.component";
 import { BulkMoveComponent } from "./bulk-move.component";
 import { BulkRestoreComponent } from "./bulk-restore.component";
 import { BulkShareComponent } from "./bulk-share.component";
-import { CiphersComponent } from "./ciphers.component";
+import { VaultItemsComponent } from "./vault-items.component";
 
 @Component({
   selector: "app-vault-bulk-actions",
@@ -19,7 +19,7 @@ import { CiphersComponent } from "./ciphers.component";
 })
 // eslint-disable-next-line rxjs-angular/prefer-takeuntil
 export class BulkActionsComponent {
-  @Input() ciphersComponent: CiphersComponent;
+  @Input() vaultItemsComponent: VaultItemsComponent;
   @Input() deleted: boolean;
   @Input() organization: Organization;
 
@@ -44,7 +44,7 @@ export class BulkActionsComponent {
       return;
     }
 
-    const selectedIds = this.ciphersComponent.getSelectedIds();
+    const selectedIds = this.vaultItemsComponent.getSelectedIds();
     if (selectedIds.length === 0) {
       this.platformUtilsService.showToast(
         "error",
@@ -64,7 +64,7 @@ export class BulkActionsComponent {
         // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
         comp.onDeleted.subscribe(async () => {
           modal.close();
-          await this.ciphersComponent.refresh();
+          await this.vaultItemsComponent.refresh();
         });
       }
     );
@@ -75,7 +75,7 @@ export class BulkActionsComponent {
       return;
     }
 
-    const selectedIds = this.ciphersComponent.getSelectedIds();
+    const selectedIds = this.vaultItemsComponent.getSelectedIds();
     if (selectedIds.length === 0) {
       this.platformUtilsService.showToast(
         "error",
@@ -93,7 +93,7 @@ export class BulkActionsComponent {
         // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
         comp.onRestored.subscribe(async () => {
           modal.close();
-          await this.ciphersComponent.refresh();
+          await this.vaultItemsComponent.refresh();
         });
       }
     );
@@ -104,7 +104,7 @@ export class BulkActionsComponent {
       return;
     }
 
-    const selectedCiphers = this.ciphersComponent.getSelected();
+    const selectedCiphers = this.vaultItemsComponent.getSelected();
     if (selectedCiphers.length === 0) {
       this.platformUtilsService.showToast(
         "error",
@@ -122,7 +122,7 @@ export class BulkActionsComponent {
         // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
         comp.onShared.subscribe(async () => {
           modal.close();
-          await this.ciphersComponent.refresh();
+          await this.vaultItemsComponent.refresh();
         });
       }
     );
@@ -133,7 +133,7 @@ export class BulkActionsComponent {
       return;
     }
 
-    const selectedIds = this.ciphersComponent.getSelectedIds();
+    const selectedIds = this.vaultItemsComponent.getSelectedIds();
     if (selectedIds.length === 0) {
       this.platformUtilsService.showToast(
         "error",
@@ -151,18 +151,18 @@ export class BulkActionsComponent {
         // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
         comp.onMoved.subscribe(async () => {
           modal.close();
-          await this.ciphersComponent.refresh();
+          await this.vaultItemsComponent.refresh();
         });
       }
     );
   }
 
   selectAll(select: boolean) {
-    this.ciphersComponent.selectAll(select);
+    this.vaultItemsComponent.selectAll(select);
   }
 
   private async promptPassword() {
-    const selectedCiphers = this.ciphersComponent.getSelected();
+    const selectedCiphers = this.vaultItemsComponent.getSelected();
     const notProtected = !selectedCiphers.find(
       (cipher) => cipher.reprompt !== CipherRepromptType.None
     );

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

@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, OnDestroy, Output } from "@angular/core";
 
-import { CiphersComponent as BaseCiphersComponent } from "@bitwarden/angular/components/ciphers.component";
+import { VaultItemsComponent as BaseVaultItemsComponent } from "@bitwarden/angular/components/vault-items.component";
 import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
 import { EventService } from "@bitwarden/common/abstractions/event.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@@ -22,10 +22,10 @@ import { Icons } from "@bitwarden/components";
 const MaxCheckedCount = 500;
 
 @Component({
-  selector: "app-vault-ciphers",
+  selector: "app-vault-items",
-  templateUrl: "ciphers.component.html",
+  templateUrl: "vault-items.component.html",
 })
-export class CiphersComponent extends BaseCiphersComponent implements OnDestroy {
+export class VaultItemsComponent extends BaseVaultItemsComponent implements OnDestroy {
   @Input() showAddNew = true;
   @Output() onAttachmentsClicked = new EventEmitter<CipherView>();
   @Output() onShareClicked = new EventEmitter<CipherView>();

apps/web/src/app/vault/vault.component.html

@@ -20,7 +20,7 @@
       <div class="page-header d-flex">
         <h1>
           {{ "vaultItems" | i18n }}
-          <small #actionSpinner [appApiAction]="ciphersComponent.actionPromise">
+          <small #actionSpinner [appApiAction]="vaultItemsComponent.actionPromise">
             <ng-container *ngIf="actionSpinner.loading">
               <i
                 class="bwi bwi-spinner bwi-spin text-muted"
@@ -33,7 +33,7 @@
         </h1>
         <div class="ml-auto d-flex">
           <app-vault-bulk-actions
-            [ciphersComponent]="ciphersComponent"
+            [vaultItemsComponent]="vaultItemsComponent"
             [deleted]="activeFilter.status === 'trash'"
           >
           </app-vault-bulk-actions>
@@ -54,7 +54,7 @@
       >
         {{ trashCleanupWarning }}
       </app-callout>
-      <app-vault-ciphers
+      <app-vault-items
         (onCipherClicked)="editCipher($event)"
         (onAttachmentsClicked)="editCipherAttachments($event)"
         (onAddCipher)="addCipher()"
@@ -63,7 +63,7 @@
         (onCloneClicked)="cloneCipher($event)"
         (onOrganzationBadgeClicked)="applyOrganizationFilter($event)"
       >
-      </app-vault-ciphers>
+      </app-vault-items>
     </div>
     <div class="col-3">
       <div class="card border-warning mb-4" *ngIf="showUpdateKey">

apps/web/src/app/vault/vault.component.ts

@@ -29,13 +29,13 @@ import { UpdateKeyComponent } from "../settings/update-key.component";
 
 import { AddEditComponent } from "./add-edit.component";
 import { AttachmentsComponent } from "./attachments.component";
-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 { VaultItemsComponent } from "./vault-items.component";
 
 const BroadcasterSubscriptionId = "VaultComponent";
 
@@ -45,7 +45,7 @@ const BroadcasterSubscriptionId = "VaultComponent";
 })
 export class VaultComponent implements OnInit, OnDestroy {
   @ViewChild("vaultFilter", { static: true }) filterComponent: VaultFilterComponent;
-  @ViewChild(CiphersComponent, { static: true }) ciphersComponent: CiphersComponent;
+  @ViewChild(VaultItemsComponent, { static: true }) vaultItemsComponent: VaultItemsComponent;
   @ViewChild("attachments", { read: ViewContainerRef, static: true })
   attachmentsModalRef: ViewContainerRef;
   @ViewChild("folderAddEdit", { read: ViewContainerRef, static: true })
@@ -119,7 +119,7 @@ export class VaultComponent implements OnInit, OnDestroy {
           await this.editCipher(cipherView);
         }
       }
-      await this.ciphersComponent.reload();
+      await this.vaultItemsComponent.reload();
 
       /* eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe, rxjs/no-nested-subscribe */
       this.route.queryParams.subscribe(async (params) => {
@@ -149,7 +149,7 @@ export class VaultComponent implements OnInit, OnDestroy {
                 await Promise.all([
                   this.filterComponent.reloadCollectionsAndFolders(this.activeFilter),
                   this.filterComponent.reloadOrganizations(),
-                  this.ciphersComponent.load(this.ciphersComponent.filter),
+                  this.vaultItemsComponent.load(this.vaultItemsComponent.filter),
                 ]);
                 this.changeDetectorRef.detectChanges();
               }
@@ -178,9 +178,9 @@ export class VaultComponent implements OnInit, OnDestroy {
   }
 
   async applyVaultFilter(vaultFilter: VaultFilter) {
-    this.ciphersComponent.showAddNew = vaultFilter.status !== "trash";
+    this.vaultItemsComponent.showAddNew = vaultFilter.status !== "trash";
     this.activeFilter = vaultFilter;
-    await this.ciphersComponent.reload(
+    await this.vaultItemsComponent.reload(
       this.activeFilter.buildFilter(),
       vaultFilter.status === "trash"
     );
@@ -202,8 +202,8 @@ export class VaultComponent implements OnInit, OnDestroy {
   }
 
   filterSearchText(searchText: string) {
-    this.ciphersComponent.searchText = searchText;
+    this.vaultItemsComponent.searchText = searchText;
-    this.ciphersComponent.search(200);
+    this.vaultItemsComponent.search(200);
   }
 
   async editCipherAttachments(cipher: CipherView) {
@@ -239,7 +239,7 @@ export class VaultComponent implements OnInit, OnDestroy {
     // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
     modal.onClosed.subscribe(async () => {
       if (madeAttachmentChanges) {
-        await this.ciphersComponent.refresh();
+        await this.vaultItemsComponent.refresh();
       }
       madeAttachmentChanges = false;
     });
@@ -254,7 +254,7 @@ export class VaultComponent implements OnInit, OnDestroy {
         // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
         comp.onSharedCipher.subscribe(async () => {
           modal.close();
-          await this.ciphersComponent.refresh();
+          await this.vaultItemsComponent.refresh();
         });
       }
     );
@@ -269,7 +269,7 @@ export class VaultComponent implements OnInit, OnDestroy {
         // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
         comp.onSavedCollections.subscribe(async () => {
           modal.close();
-          await this.ciphersComponent.refresh();
+          await this.vaultItemsComponent.refresh();
         });
       }
     );
@@ -352,17 +352,17 @@ export class VaultComponent implements OnInit, OnDestroy {
         // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
         comp.onSavedCipher.subscribe(async () => {
           modal.close();
-          await this.ciphersComponent.refresh();
+          await this.vaultItemsComponent.refresh();
         });
         // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
         comp.onDeletedCipher.subscribe(async () => {
           modal.close();
-          await this.ciphersComponent.refresh();
+          await this.vaultItemsComponent.refresh();
         });
         // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
         comp.onRestoredCipher.subscribe(async () => {
           modal.close();
-          await this.ciphersComponent.refresh();
+          await this.vaultItemsComponent.refresh();
         });
       }
     );

apps/web/src/app/vault/vault.module.ts

@@ -1,14 +1,14 @@
 import { NgModule } from "@angular/core";
 
-import { CiphersComponent } from "./ciphers.component";
 import { OrganizationBadgeModule } from "./organization-badge/organization-badge.module";
 import { VaultSharedModule } from "./shared/vault-shared.module";
+import { VaultItemsComponent } from "./vault-items.component";
 import { VaultRoutingModule } from "./vault-routing.module";
 import { VaultComponent } from "./vault.component";
 
 @NgModule({
   imports: [VaultSharedModule, VaultRoutingModule, OrganizationBadgeModule],
-  declarations: [VaultComponent, CiphersComponent],
+  declarations: [VaultComponent, VaultItemsComponent],
   exports: [VaultComponent],
 })
 export class VaultModule {}

libs/angular/src/components/vault-items.component.ts

@@ -4,7 +4,7 @@ import { SearchService } from "@bitwarden/common/abstractions/search.service";
 import { CipherView } from "@bitwarden/common/models/view/cipher.view";
 
 @Directive()
-export class CiphersComponent {
+export class VaultItemsComponent {
   @Input() activeCipherId: string = null;
   @Output() onCipherClicked = new EventEmitter<CipherView>();
   @Output() onCipherRightClicked = new EventEmitter<CipherView>();