[PM-19337] Desktop Archive (#16787)

* fix typescript errors

* add archive filter to desktop

* exclude archive items from search

* add left click menu options for archive

* add MP prompt checks for archive/unarchive

* assure that a cipher cannot be assigned to collections when archived

* move cipher from archive vault if a user loses premium

* ensure clone only shows when archive is active

* refactor right side footer actions to getter so it can be expanded

* add confirmation prompt for archiving cipher

* add utility service for archiving/unarchiving a cipher

* add archive/unarchive ability to footer of desktop

* add tests for utilities service

* handle null emission of `cipherViews$`

* use active user id directly from activeAccount

* remove unneeded load of vault items

* refresh internal cipher when archive is toggled - forcing the footer view to update

* refresh current cipher when archived from the left-click menu

* only show archive for viewing a cipher

* add cipher form tests

* clear archive date when soft deleting

* update success messages

* remove archive date when cloning

* fix crowdin message swap

* fix test

* move MP prompt before archive prompt - match PM-26994

* fix failing test

* add optional chaining

* move template logic into class

* condense logic

* `unArchive`

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

@@ -4167,7 +4167,7 @@
   "itemWasSentToArchive": {
     "message": "Item was sent to archive"
   },
-  "itemUnarchived": {
+  "itemWasUnarchived": {
     "message": "Item was unarchived"
   },
   "archiveItem": {

apps/desktop/src/vault/app/vault/item-footer.component.html

@@ -46,7 +46,23 @@
       <i class="bwi bwi-files bwi-fw bwi-lg" aria-hidden="true"></i>
     </button>
   </ng-container>
-  <div class="right" *ngIf="cipher.permissions.delete && (action === 'edit' || action === 'view')">
+  <div class="right" *ngIf="hasFooterAction">
+    <button
+      type="button"
+      *ngIf="showArchiveButton"
+      (click)="archive()"
+      appA11yTitle="{{ 'archiveVerb' | i18n }}"
+    >
+      <i class="bwi bwi-archive bwi-lg bwi-fw" aria-hidden="true"></i>
+    </button>
+    <button
+      type="button"
+      *ngIf="showUnarchiveButton"
+      (click)="unarchive()"
+      appA11yTitle="{{ 'unarchive' | i18n }}"
+    >
+      <i class="bwi bwi-unarchive bwi-lg bwi-fw" aria-hidden="true"></i>
+    </button>
     <button
       type="button"
       (click)="delete()"

apps/desktop/src/vault/app/vault/item-footer.component.ts

@@ -1,6 +1,15 @@
 import { CommonModule } from "@angular/common";
-import { Input, Output, EventEmitter, Component, OnInit, ViewChild } from "@angular/core";
-import { firstValueFrom } from "rxjs";
+import {
+  Input,
+  Output,
+  EventEmitter,
+  Component,
+  OnInit,
+  ViewChild,
+  OnChanges,
+  SimpleChanges,
+} from "@angular/core";
+import { combineLatest, firstValueFrom, switchMap } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
@@ -8,19 +17,20 @@ import { getUserId } from "@bitwarden/common/auth/services/account.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { UserId } from "@bitwarden/common/types/guid";
+import { CipherArchiveService } from "@bitwarden/common/vault/abstractions/cipher-archive.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherRepromptType } from "@bitwarden/common/vault/enums";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { CipherAuthorizationService } from "@bitwarden/common/vault/services/cipher-authorization.service";
 import { ButtonComponent, ButtonModule, DialogService, ToastService } from "@bitwarden/components";
-import { PasswordRepromptService } from "@bitwarden/vault";
+import { ArchiveCipherUtilitiesService, PasswordRepromptService } from "@bitwarden/vault";
 
 @Component({
   selector: "app-vault-item-footer",
   templateUrl: "item-footer.component.html",
   imports: [ButtonModule, CommonModule, JslibModule],
 })
-export class ItemFooterComponent implements OnInit {
+export class ItemFooterComponent implements OnInit, OnChanges {
   @Input({ required: true }) cipher: CipherView = new CipherView();
   @Input() collectionId: string | null = null;
   @Input({ required: true }) action: string = "view";
@@ -30,11 +40,15 @@ export class ItemFooterComponent implements OnInit {
   @Output() onDelete = new EventEmitter<CipherView>();
   @Output() onRestore = new EventEmitter<CipherView>();
   @Output() onCancel = new EventEmitter<CipherView>();
+  @Output() onArchiveToggle = new EventEmitter<CipherView>();
   @ViewChild("submitBtn", { static: false }) submitBtn: ButtonComponent | null = null;
 
   activeUserId: UserId | null = null;
   passwordReprompted: boolean = false;
 
+  protected showArchiveButton = false;
+  protected showUnarchiveButton = false;
+
   constructor(
     protected cipherService: CipherService,
     protected dialogService: DialogService,
@@ -44,11 +58,20 @@ export class ItemFooterComponent implements OnInit {
     protected toastService: ToastService,
     protected i18nService: I18nService,
     protected logService: LogService,
+    protected cipherArchiveService: CipherArchiveService,
+    protected archiveCipherUtilitiesService: ArchiveCipherUtilitiesService,
   ) {}
 
   async ngOnInit() {
     this.activeUserId = await firstValueFrom(this.accountService.activeAccount$.pipe(getUserId));
     this.passwordReprompted = this.masterPasswordAlreadyPrompted;
+    await this.checkArchiveState();
+  }
+
+  async ngOnChanges(changes: SimpleChanges) {
+    if (changes.cipher) {
+      await this.checkArchiveState();
+    }
   }
 
   async clone() {
@@ -76,6 +99,14 @@ export class ItemFooterComponent implements OnInit {
     this.onEdit.emit(this.cipher);
   }
 
+  protected get hasFooterAction() {
+    return (
+      this.showArchiveButton ||
+      this.showUnarchiveButton ||
+      (this.cipher.permissions?.delete && (this.action === "edit" || this.action === "view"))
+    );
+  }
+
   cancel() {
     this.onCancel.emit(this.cipher);
   }
@@ -151,4 +182,36 @@ export class ItemFooterComponent implements OnInit {
 
     return (this.passwordReprompted = await this.passwordRepromptService.showPasswordPrompt());
   }
+
+  protected async archive() {
+    await this.archiveCipherUtilitiesService.archiveCipher(this.cipher);
+    this.onArchiveToggle.emit();
+  }
+
+  protected async unarchive() {
+    await this.archiveCipherUtilitiesService.unarchiveCipher(this.cipher);
+    this.onArchiveToggle.emit();
+  }
+
+  private async checkArchiveState() {
+    const cipherCanBeArchived = !this.cipher.isDeleted && this.cipher.organizationId == null;
+    const [userCanArchive, hasArchiveFlagEnabled] = await firstValueFrom(
+      this.accountService.activeAccount$.pipe(
+        getUserId,
+        switchMap((id) =>
+          combineLatest([
+            this.cipherArchiveService.userCanArchive$(id),
+            this.cipherArchiveService.hasArchiveFlagEnabled$(),
+          ]),
+        ),
+      ),
+    );
+
+    this.showArchiveButton =
+      cipherCanBeArchived && userCanArchive && this.action === "view" && !this.cipher.isArchived;
+
+    // A user should always be able to unarchive an archived item
+    this.showUnarchiveButton =
+      hasArchiveFlagEnabled && this.action === "view" && this.cipher.isArchived;
+  }
 }

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

@@ -29,6 +29,22 @@
         </button>
       </span>
     </li>
+    <li
+      class="filter-option"
+      *ngIf="!hideArchive"
+      [ngClass]="{ active: activeFilter.status === 'archive' }"
+    >
+      <span class="filter-buttons">
+        <button
+          type="button"
+          class="filter-button"
+          (click)="applyFilter('archive')"
+          [attr.aria-pressed]="activeFilter.status === 'archive'"
+        >
+          <i class="bwi bwi-fw bwi-archive" aria-hidden="true"></i>&nbsp;{{ "archiveNoun" | i18n }}
+        </button>
+      </span>
+    </li>
     <li
       class="filter-option"
       *ngIf="!hideTrash"

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

@@ -17,6 +17,7 @@
     class="filter"
     [hideFavorites]="hideFavorites"
     [hideTrash]="hideTrash"
+    [hideArchive]="!showArchiveVaultFilter"
     [activeFilter]="activeFilter"
     (onFilterChange)="applyFilter($event)"
   ></app-status-filter>

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

@@ -7,6 +7,7 @@ import { distinctUntilChanged, debounceTime } from "rxjs";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { VaultItemsComponent as BaseVaultItemsComponent } from "@bitwarden/angular/vault/components/vault-items.component";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { uuidAsString } from "@bitwarden/common/platform/abstractions/sdk/sdk.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { SearchService } from "@bitwarden/common/vault/abstractions/search.service";
@@ -33,8 +34,9 @@ export class VaultItemsV2Component<C extends CipherViewLike> extends BaseVaultIt
     cipherService: CipherService,
     accountService: AccountService,
     restrictedItemTypesService: RestrictedItemTypesService,
+    configService: ConfigService,
   ) {
-    super(searchService, cipherService, accountService, restrictedItemTypesService);
+    super(searchService, cipherService, accountService, restrictedItemTypesService, configService);
 
     this.searchBarService.searchText$
       .pipe(debounceTime(SearchTextDebounceInterval), distinctUntilChanged(), takeUntilDestroyed())

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

@@ -19,6 +19,7 @@
       (onClone)="cloneCipher($event)"
       (onDelete)="deleteCipher()"
       (onCancel)="cancelCipher($event)"
+      (onArchiveToggle)="refreshCurrentCipher()"
       [masterPasswordAlreadyPrompted]="cipherRepromptId === cipherId"
     ></app-vault-item-footer>
     <div class="content">

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

@@ -20,6 +20,8 @@ import { AuthRequestServiceAbstraction } from "@bitwarden/auth/common";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
+import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
+import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { Account, AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
@@ -33,6 +35,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { getByIds } from "@bitwarden/common/platform/misc";
 import { SyncService } from "@bitwarden/common/platform/sync";
 import { CipherId, OrganizationId, UserId } from "@bitwarden/common/types/guid";
+import { CipherArchiveService } from "@bitwarden/common/vault/abstractions/cipher-archive.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
 import { PremiumUpgradePromptService } from "@bitwarden/common/vault/abstractions/premium-upgrade-prompt.service";
@@ -74,6 +77,7 @@ import {
   DefaultCipherFormConfigService,
   PasswordRepromptService,
   CipherFormComponent,
+  ArchiveCipherUtilitiesService,
 } from "@bitwarden/vault";
 
 import { NavComponent } from "../../../app/layout/nav.component";
@@ -211,6 +215,9 @@ export class VaultV2Component<C extends CipherViewLike>
     private folderService: FolderService,
     private configService: ConfigService,
     private authRequestService: AuthRequestServiceAbstraction,
+    private cipherArchiveService: CipherArchiveService,
+    private policyService: PolicyService,
+    private archiveCipherUtilitiesService: ArchiveCipherUtilitiesService,
   ) {}
 
   async ngOnInit() {
@@ -490,6 +497,12 @@ export class VaultV2Component<C extends CipherViewLike>
 
   async viewCipherMenu(c: CipherViewLike) {
     const cipher = await this.cipherService.getFullCipherView(c);
+    const userId = await firstValueFrom(this.accountService.activeAccount$.pipe(getUserId));
+    const userCanArchive = await firstValueFrom(this.cipherArchiveService.userCanArchive$(userId));
+    const orgOwnershipPolicy = await firstValueFrom(
+      this.policyService.policyAppliesToUser$(PolicyType.OrganizationDataOwnership, userId),
+    );
+
     const menu: RendererMenuItem[] = [
       {
         label: this.i18nService.t("view"),
@@ -514,7 +527,11 @@ export class VaultV2Component<C extends CipherViewLike>
           });
         },
       });
-      if (!cipher.organizationId) {
+
+      const archivedWithOrgOwnership = cipher.isArchived && orgOwnershipPolicy;
+      const canCloneArchived = !cipher.isArchived || userCanArchive;
+
+      if (!cipher.organizationId && !archivedWithOrgOwnership && canCloneArchived) {
         menu.push({
           label: this.i18nService.t("clone"),
           click: () => {
@@ -538,6 +555,26 @@ export class VaultV2Component<C extends CipherViewLike>
       }
     }
 
+    if (userCanArchive && !cipher.organizationId && !cipher.isDeleted && !cipher.isArchived) {
+      menu.push({
+        label: this.i18nService.t("archiveVerb"),
+        click: async () => {
+          await this.archiveCipherUtilitiesService.archiveCipher(cipher);
+          await this.refreshCurrentCipher();
+        },
+      });
+    }
+
+    if (cipher.isArchived) {
+      menu.push({
+        label: this.i18nService.t("unArchive"),
+        click: async () => {
+          await this.archiveCipherUtilitiesService.unarchiveCipher(cipher);
+          await this.refreshCurrentCipher();
+        },
+      });
+    }
+
     switch (cipher.type) {
       case CipherType.Login:
         if (
@@ -723,8 +760,6 @@ export class VaultV2Component<C extends CipherViewLike>
 
     this.cipherId = cipher.id;
     this.cipher = cipher;
-
-    await this.vaultItemsComponent?.load(this.activeFilter.buildFilter()).catch(() => {});
     await this.go().catch(() => {});
     await this.vaultItemsComponent?.refresh().catch(() => {});
   }
@@ -757,7 +792,11 @@ export class VaultV2Component<C extends CipherViewLike>
     );
     this.activeFilter = vaultFilter;
     await this.vaultItemsComponent
-      ?.reload(this.activeFilter.buildFilter(), vaultFilter.status === "trash")
+      ?.reload(
+        this.activeFilter.buildFilter(),
+        vaultFilter.status === "trash",
+        vaultFilter.status === "archive",
+      )
       .catch(() => {});
     await this.go().catch(() => {});
   }
@@ -831,6 +870,20 @@ export class VaultV2Component<C extends CipherViewLike>
     }
   }
 
+  /** Refresh the current cipher object */
+  protected async refreshCurrentCipher() {
+    if (!this.cipher) {
+      return;
+    }
+
+    this.cipher = await firstValueFrom(
+      this.cipherService.cipherViews$(this.activeUserId!).pipe(
+        filter((c) => !!c),
+        map((ciphers) => ciphers.find((c) => c.id === this.cipherId) ?? null),
+      ),
+    );
+  }
+
   private dirtyInput(): boolean {
     return (
       (this.action === "add" || this.action === "edit" || this.action === "clone") &&

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

@@ -11,11 +11,14 @@ import {
   of,
   shareReplay,
   switchMap,
+  take,
 } from "rxjs";
 
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { SearchService } from "@bitwarden/common/vault/abstractions/search.service";
 import { CipherType } from "@bitwarden/common/vault/enums";
@@ -37,6 +40,7 @@ export class VaultItemsComponent<C extends CipherViewLike> implements OnDestroy
   loaded = false;
   ciphers: C[] = [];
   deleted = false;
+  archived = false;
   organization: Organization;
   CipherType = CipherType;
 
@@ -73,13 +77,24 @@ export class VaultItemsComponent<C extends CipherViewLike> implements OnDestroy
     this._filter$.next(value);
   }
 
+  private archiveFeatureEnabled = false;
+
   constructor(
     protected searchService: SearchService,
     protected cipherService: CipherService,
     protected accountService: AccountService,
     protected restrictedItemTypesService: RestrictedItemTypesService,
+    private configService: ConfigService,
   ) {
     this.subscribeToCiphers();
+
+    // Check if archive feature flag is enabled
+    this.configService
+      .getFeatureFlag$(FeatureFlag.PM19148_InnovationArchive)
+      .pipe(takeUntilDestroyed(), take(1))
+      .subscribe((isEnabled) => {
+        this.archiveFeatureEnabled = isEnabled;
+      });
   }
 
   ngOnDestroy(): void {
@@ -87,19 +102,20 @@ export class VaultItemsComponent<C extends CipherViewLike> implements OnDestroy
     this.destroy$.complete();
   }
 
-  async load(filter: (cipher: C) => boolean = null, deleted = false) {
+  async load(filter: (cipher: C) => boolean = null, deleted = false, archived = false) {
     this.deleted = deleted ?? false;
+    this.archived = archived;
     await this.applyFilter(filter);
     this.loaded = true;
   }
 
-  async reload(filter: (cipher: C) => boolean = null, deleted = false) {
+  async reload(filter: (cipher: C) => boolean = null, deleted = false, archived = false) {
     this.loaded = false;
-    await this.load(filter, deleted);
+    await this.load(filter, deleted, archived);
   }
 
   async refresh() {
-    await this.reload(this.filter, this.deleted);
+    await this.reload(this.filter, this.deleted, this.archived);
   }
 
   async applyFilter(filter: (cipher: C) => boolean = null) {
@@ -125,6 +141,16 @@ export class VaultItemsComponent<C extends CipherViewLike> implements OnDestroy
   protected deletedFilter: (cipher: C) => boolean = (c) =>
     CipherViewLikeUtils.isDeleted(c) === this.deleted;
 
+  protected archivedFilter: (cipher: C) => boolean = (c) => {
+    // When the archive feature is not enabled,
+    // always return true to avoid filtering out any items.
+    if (!this.archiveFeatureEnabled) {
+      return true;
+    }
+
+    return CipherViewLikeUtils.isArchived(c) === this.archived;
+  };
+
   /**
    * Creates stream of dependencies that results in the list of ciphers to display
    * within the vault list.
@@ -158,7 +184,7 @@ export class VaultItemsComponent<C extends CipherViewLike> implements OnDestroy
           return this.searchService.searchCiphers(
             userId,
             searchText,
-            [filter, this.deletedFilter, restrictedTypeFilter],
+            [filter, this.deletedFilter, this.archivedFilter, restrictedTypeFilter],
             allCiphers,
           );
         }),

libs/angular/src/vault/services/custom-nudges-services/new-item-nudge.service.ts

@@ -1,5 +1,5 @@
 import { inject, Injectable } from "@angular/core";
-import { combineLatest, Observable, switchMap } from "rxjs";
+import { combineLatest, filter, Observable, switchMap } from "rxjs";
 
 import { UserId } from "@bitwarden/common/types/guid";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
@@ -20,7 +20,7 @@ export class NewItemNudgeService extends DefaultSingleNudgeService {
   nudgeStatus$(nudgeType: NudgeType, userId: UserId): Observable<NudgeStatus> {
     return combineLatest([
       this.getNudgeStatus$(nudgeType, userId),
-      this.cipherService.cipherViews$(userId),
+      this.cipherService.cipherViews$(userId).pipe(filter((ciphers) => ciphers != null)),
     ]).pipe(
       switchMap(async ([nudgeStatus, ciphers]) => {
         if (nudgeStatus.hasSpotlightDismissed) {

libs/angular/src/vault/vault-filter/components/status-filter.component.ts

@@ -9,11 +9,12 @@ import { VaultFilter } from "../models/vault-filter.model";
 export class StatusFilterComponent {
   @Input() hideFavorites = false;
   @Input() hideTrash = false;
+  @Input() hideArchive = false;
   @Output() onFilterChange: EventEmitter<VaultFilter> = new EventEmitter<VaultFilter>();
   @Input() activeFilter: VaultFilter;
 
   get show() {
-    return !(this.hideFavorites && this.hideTrash);
+    return !(this.hideFavorites && this.hideTrash && this.hideArchive);
   }
 
   applyFilter(cipherStatus: CipherStatus) {

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

@@ -10,6 +10,7 @@ import { Organization } from "@bitwarden/common/admin-console/models/domain/orga
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
 import { UserId } from "@bitwarden/common/types/guid";
+import { CipherArchiveService } from "@bitwarden/common/vault/abstractions/cipher-archive.service";
 import { ITreeNodeObject } from "@bitwarden/common/vault/models/domain/tree-node";
 import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";
 
@@ -42,9 +43,12 @@ export class VaultFilterComponent implements OnInit {
   collections: DynamicTreeNode<CollectionView>;
   folders$: Observable<DynamicTreeNode<FolderView>>;
 
+  protected showArchiveVaultFilter = false;
+
   constructor(
     protected vaultFilterService: DeprecatedVaultFilterService,
     protected accountService: AccountService,
+    protected cipherArchiveService: CipherArchiveService,
   ) {}
 
   get displayCollections() {
@@ -65,6 +69,15 @@ export class VaultFilterComponent implements OnInit {
     }
     this.folders$ = await this.vaultFilterService.buildNestedFolders();
     this.collections = await this.initCollections();
+
+    const userCanArchive = await firstValueFrom(
+      this.cipherArchiveService.userCanArchive$(this.activeUserId),
+    );
+    const showArchiveVault = await firstValueFrom(
+      this.cipherArchiveService.showArchiveVault$(this.activeUserId),
+    );
+
+    this.showArchiveVaultFilter = userCanArchive || showArchiveVault;
     this.isLoaded = true;
   }
 

libs/angular/src/vault/vault-filter/models/cipher-status.model.ts

@@ -1 +1 @@
-export type CipherStatus = "all" | "favorites" | "trash";
+export type CipherStatus = "all" | "favorites" | "trash" | "archive";

libs/angular/src/vault/vault-filter/models/vault-filter.model.spec.ts

@@ -56,6 +56,34 @@ describe("VaultFilter", () => {
       });
     });
 
+    describe("given a archived cipher", () => {
+      const cipher = createCipher({ archivedDate: new Date() });
+
+      it("should return true when filtering for archive", () => {
+        const filterFunction = createFilterFunction({ status: "archive" });
+
+        const result = filterFunction(cipher);
+
+        expect(result).toBe(true);
+      });
+
+      it("should return false when filtering for favorites", () => {
+        const filterFunction = createFilterFunction({ status: "favorites" });
+
+        const result = filterFunction(cipher);
+
+        expect(result).toBe(false);
+      });
+
+      it("should return false when filtering for trash", () => {
+        const filterFunction = createFilterFunction({ status: "trash" });
+
+        const result = filterFunction(cipher);
+
+        expect(result).toBe(false);
+      });
+    });
+
     describe("given a cipher with type", () => {
       it("should return true when filter matches cipher type", () => {
         const cipher = createCipher({ type: CipherType.Identity });
@@ -103,12 +131,12 @@ describe("VaultFilter", () => {
     });
 
     describe("given a cipher without folder", () => {
-      const cipher = createCipher({ folderId: null });
+      const cipher = createCipher({ folderId: undefined });
 
       it("should return true when filtering on unassigned folder", () => {
         const filterFunction = createFilterFunction({
           selectedFolder: true,
-          selectedFolderId: null,
+          selectedFolderId: undefined,
         });
 
         const result = filterFunction(cipher);
@@ -175,7 +203,7 @@ describe("VaultFilter", () => {
       it("should return true when filtering for unassigned collection", () => {
         const filterFunction = createFilterFunction({
           selectedCollection: true,
-          selectedCollectionId: null,
+          selectedCollectionId: undefined,
         });
 
         const result = filterFunction(cipher);
@@ -195,12 +223,12 @@ describe("VaultFilter", () => {
     });
 
     describe("given an individual cipher (without organization or collection)", () => {
-      const cipher = createCipher({ organizationId: null, collectionIds: [] });
+      const cipher = createCipher({ organizationId: undefined, collectionIds: [] });
 
       it("should return false when filtering for unassigned collection", () => {
         const filterFunction = createFilterFunction({
           selectedCollection: true,
-          selectedCollectionId: null,
+          selectedCollectionId: undefined,
         });
 
         const result = filterFunction(cipher);
@@ -209,7 +237,7 @@ describe("VaultFilter", () => {
       });
 
       it("should return true when filtering for my vault only", () => {
-        const cipher = createCipher({ organizationId: null });
+        const cipher = createCipher({ organizationId: undefined });
         const filterFunction = createFilterFunction({
           myVaultOnly: true,
         });
@@ -230,11 +258,12 @@ function createCipher(options: Partial<CipherView> = {}) {
   const cipher = new CipherView();
 
   cipher.favorite = options.favorite ?? false;
-  cipher.deletedDate = options.deletedDate;
-  cipher.type = options.type;
-  cipher.folderId = options.folderId;
-  cipher.collectionIds = options.collectionIds;
-  cipher.organizationId = options.organizationId;
+  cipher.deletedDate = options.deletedDate ?? null;
+  cipher.archivedDate = options.archivedDate ?? null;
+  cipher.type = options.type ?? CipherType.Login;
+  cipher.folderId = options.folderId ?? undefined;
+  cipher.collectionIds = options.collectionIds ?? [];
+  cipher.organizationId = options.organizationId ?? undefined;
 
   return cipher;
 }

libs/angular/src/vault/vault-filter/models/vault-filter.model.ts

@@ -50,6 +50,9 @@ export class VaultFilter {
       if (this.status === "trash" && cipherPassesFilter) {
         cipherPassesFilter = CipherViewLikeUtils.isDeleted(cipher);
       }
+      if (this.status === "archive" && cipherPassesFilter) {
+        cipherPassesFilter = CipherViewLikeUtils.isArchived(cipher);
+      }
       if (this.cipherType != null && cipherPassesFilter) {
         cipherPassesFilter = CipherViewLikeUtils.getType(cipher) === this.cipherType;
       }

libs/common/src/vault/models/view/cipher.view.ts

@@ -160,6 +160,10 @@ export class CipherView implements View, InitializerMetadata {
   }
 
   get canAssignToCollections(): boolean {
+    if (this.isArchived) {
+      return false;
+    }
+
     if (this.organizationId == null) {
       return true;
     }

libs/vault/src/cipher-form/components/cipher-form.component.spec.ts

@@ -2,7 +2,7 @@ import { ChangeDetectorRef } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { ReactiveFormsModule } from "@angular/forms";
 import { mock } from "jest-mock-extended";
-import { of } from "rxjs";
+import { Observable, of } from "rxjs";
 
 import { ViewCacheService } from "@bitwarden/angular/platform/view-cache";
 import { Account, AccountService } from "@bitwarden/common/auth/abstractions/account.service";
@@ -13,7 +13,6 @@ import { Cipher } from "@bitwarden/common/vault/models/domain/cipher";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { Fido2CredentialView } from "@bitwarden/common/vault/models/view/fido2-credential.view";
 import { ToastService } from "@bitwarden/components";
-import { UserId } from "@bitwarden/user-core";
 
 import { CipherFormConfig } from "../abstractions/cipher-form-config.service";
 import { CipherFormService } from "../abstractions/cipher-form.service";
@@ -72,7 +71,7 @@ describe("CipherFormComponent", () => {
     });
 
     it("should remove archivedDate when user cannot archive and cipher is archived", async () => {
-      mockAccountService.activeAccount$ = of({ id: "user-id" as UserId } as Account);
+      mockAccountService.activeAccount$ = of({ id: "user-id" }) as Observable<Account | null>;
       mockCipherArchiveService.userCanArchive$.mockReturnValue(of(false));
       mockAddEditFormService.saveCipher = jest.fn().mockResolvedValue(new CipherView());
 
@@ -154,6 +153,15 @@ describe("CipherFormComponent", () => {
 
       expect(component["updatedCipherView"]?.login.fido2Credentials).toBeNull();
     });
+
+    it("clears archiveDate on updatedCipherView", async () => {
+      cipherView.archivedDate = new Date();
+      decryptCipher.mockResolvedValue(cipherView);
+
+      await component.ngOnInit();
+
+      expect(component["updatedCipherView"]?.archivedDate).toBeNull();
+    });
   });
 
   describe("enableFormFields", () => {

libs/vault/src/cipher-form/components/cipher-form.component.ts

@@ -263,6 +263,7 @@ export class CipherFormComponent implements AfterViewInit, OnInit, OnChanges, Ci
 
       if (this.config.mode === "clone") {
         this.updatedCipherView.id = null;
+        this.updatedCipherView.archivedDate = null;
 
         if (this.updatedCipherView.login) {
           this.updatedCipherView.login.fido2Credentials = null;

libs/vault/src/index.ts

@@ -27,3 +27,4 @@ export { SshImportPromptService } from "./services/ssh-import-prompt.service";
 
 export * from "./abstractions/change-login-password.service";
 export * from "./services/default-change-login-password.service";
+export * from "./services/archive-cipher-utilities.service";

libs/vault/src/services/archive-cipher-utilities.service.spec.ts

@@ -0,0 +1,122 @@
+import { MockProxy, mock } from "jest-mock-extended";
+import { BehaviorSubject } from "rxjs";
+
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { CipherId } from "@bitwarden/common/types/guid";
+import { CipherArchiveService } from "@bitwarden/common/vault/abstractions/cipher-archive.service";
+import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { DialogService, ToastService } from "@bitwarden/components";
+
+import { ArchiveCipherUtilitiesService } from "./archive-cipher-utilities.service";
+import { PasswordRepromptService } from "./password-reprompt.service";
+
+describe("ArchiveCipherUtilitiesService", () => {
+  let service: ArchiveCipherUtilitiesService;
+
+  let cipherArchiveService: MockProxy<CipherArchiveService>;
+  let dialogService: MockProxy<DialogService>;
+  let passwordRepromptService: MockProxy<PasswordRepromptService>;
+  let toastService: MockProxy<ToastService>;
+  let i18nService: MockProxy<I18nService>;
+  let accountService: MockProxy<AccountService>;
+
+  const mockCipher = new CipherView();
+  mockCipher.id = "cipher-id" as CipherId;
+  const mockUserId = "user-id";
+
+  beforeEach(() => {
+    cipherArchiveService = mock<CipherArchiveService>();
+    dialogService = mock<DialogService>();
+    passwordRepromptService = mock<PasswordRepromptService>();
+    toastService = mock<ToastService>();
+    i18nService = mock<I18nService>();
+    accountService = mock<AccountService>();
+
+    accountService.activeAccount$ = new BehaviorSubject({ id: mockUserId } as any).asObservable();
+
+    dialogService.openSimpleDialog.mockResolvedValue(true);
+    passwordRepromptService.passwordRepromptCheck.mockResolvedValue(true);
+    cipherArchiveService.archiveWithServer.mockResolvedValue(undefined);
+    cipherArchiveService.unarchiveWithServer.mockResolvedValue(undefined);
+    i18nService.t.mockImplementation((key) => key);
+
+    service = new ArchiveCipherUtilitiesService(
+      cipherArchiveService,
+      dialogService,
+      passwordRepromptService,
+      toastService,
+      i18nService,
+      accountService,
+    );
+  });
+
+  describe("archiveCipher()", () => {
+    it("returns early when confirmation dialog is cancelled", async () => {
+      dialogService.openSimpleDialog.mockResolvedValue(false);
+
+      await service.archiveCipher(mockCipher);
+
+      expect(passwordRepromptService.passwordRepromptCheck).toHaveBeenCalled();
+      expect(cipherArchiveService.archiveWithServer).not.toHaveBeenCalled();
+    });
+
+    it("returns early when password reprompt fails", async () => {
+      passwordRepromptService.passwordRepromptCheck.mockResolvedValue(false);
+
+      await service.archiveCipher(mockCipher);
+
+      expect(cipherArchiveService.archiveWithServer).not.toHaveBeenCalled();
+    });
+
+    it("archives cipher and shows success toast when successful", async () => {
+      await service.archiveCipher(mockCipher);
+
+      expect(cipherArchiveService.archiveWithServer).toHaveBeenCalledWith(
+        mockCipher.id,
+        mockUserId,
+      );
+      expect(toastService.showToast).toHaveBeenCalledWith({
+        variant: "success",
+        message: "itemWasSentToArchive",
+      });
+    });
+
+    it("shows error toast when archiving fails", async () => {
+      cipherArchiveService.archiveWithServer.mockRejectedValue(new Error("test error"));
+
+      await service.archiveCipher(mockCipher);
+
+      expect(toastService.showToast).toHaveBeenCalledWith({
+        variant: "error",
+        message: "errorOccurred",
+      });
+    });
+  });
+
+  describe("unarchiveCipher()", () => {
+    it("unarchives cipher and shows success toast when successful", async () => {
+      await service.unarchiveCipher(mockCipher);
+
+      expect(cipherArchiveService.unarchiveWithServer).toHaveBeenCalledWith(
+        mockCipher.id,
+        mockUserId,
+      );
+      expect(toastService.showToast).toHaveBeenCalledWith({
+        variant: "success",
+        message: "itemWasUnarchived",
+      });
+    });
+
+    it("shows error toast when unarchiving fails", async () => {
+      cipherArchiveService.unarchiveWithServer.mockRejectedValue(new Error("test error"));
+
+      await service.unarchiveCipher(mockCipher);
+
+      expect(toastService.showToast).toHaveBeenCalledWith({
+        variant: "error",
+        message: "errorOccurred",
+      });
+    });
+  });
+});

libs/vault/src/services/archive-cipher-utilities.service.ts

@@ -0,0 +1,80 @@
+import { Injectable } from "@angular/core";
+import { firstValueFrom } from "rxjs";
+
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { getUserId } from "@bitwarden/common/auth/services/account.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { CipherId } from "@bitwarden/common/types/guid";
+import { CipherArchiveService } from "@bitwarden/common/vault/abstractions/cipher-archive.service";
+import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { DialogService, ToastService } from "@bitwarden/components";
+
+import { PasswordRepromptService } from "./password-reprompt.service";
+
+/**
+ * Wrapper around {@link CipherArchiveService} to provide UI enhancements for archiving/unarchiving ciphers.
+ */
+@Injectable({ providedIn: "root" })
+export class ArchiveCipherUtilitiesService {
+  constructor(
+    private cipherArchiveService: CipherArchiveService,
+    private dialogService: DialogService,
+    private passwordRepromptService: PasswordRepromptService,
+    private toastService: ToastService,
+    private i18nService: I18nService,
+    private accountService: AccountService,
+  ) {}
+
+  /** Archive a cipher, with confirmation dialog and password reprompt checks. */
+  async archiveCipher(cipher: CipherView) {
+    const repromptPassed = await this.passwordRepromptService.passwordRepromptCheck(cipher);
+    if (!repromptPassed) {
+      return;
+    }
+
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "archiveItem" },
+      content: { key: "archiveItemConfirmDesc" },
+      type: "info",
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
+    const userId = await firstValueFrom(this.accountService.activeAccount$.pipe(getUserId));
+    await this.cipherArchiveService
+      .archiveWithServer(cipher.id as CipherId, userId)
+      .then(() => {
+        this.toastService.showToast({
+          variant: "success",
+          message: this.i18nService.t("itemWasSentToArchive"),
+        });
+      })
+      .catch(() => {
+        this.toastService.showToast({
+          variant: "error",
+          message: this.i18nService.t("errorOccurred"),
+        });
+      });
+  }
+
+  /** Unarchives a cipher  */
+  async unarchiveCipher(cipher: CipherView) {
+    const userId = await firstValueFrom(this.accountService.activeAccount$.pipe(getUserId));
+    await this.cipherArchiveService
+      .unarchiveWithServer(cipher.id as CipherId, userId)
+      .then(() => {
+        this.toastService.showToast({
+          variant: "success",
+          message: this.i18nService.t("itemWasUnarchived"),
+        });
+      })
+      .catch(() => {
+        this.toastService.showToast({
+          variant: "error",
+          message: this.i18nService.t("errorOccurred"),
+        });
+      });
+  }
+}