[PM-30453] Archive UI Updates (#18297)

* add org icon to archive list view

* update content of archive confirmation dialog

* fix typing

apps/browser/src/_locales/en/messages.json

@@ -582,8 +582,8 @@
   "archiveItem": {
     "message": "Archive item"
   },
-  "archiveItemConfirmDesc": {
-    "message": "Archived items are excluded from general search results and autofill suggestions. Are you sure you want to archive this item?"
+  "archiveItemDialogContent": {
+    "message": "Once archived, this item will be excluded from search results and autofill suggestions."
   },
   "archived": {
     "message": "Archived"

apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.ts

@@ -376,7 +376,8 @@ export class ItemMoreOptionsComponent {
 
     const confirmed = await this.dialogService.openSimpleDialog({
       title: { key: "archiveItem" },
-      content: { key: "archiveItemConfirmDesc" },
+      content: { key: "archiveItemDialogContent" },
+      acceptButtonText: { key: "archiveVerb" },
       type: "info",
     });
 

apps/browser/src/vault/popup/settings/archive.component.html

@@ -42,9 +42,23 @@
                   <app-vault-icon [cipher]="cipher"></app-vault-icon>
                 </div>
                 <span data-testid="item-name">{{ cipher.name }}</span>
-                @if (CipherViewLikeUtils.hasAttachments(cipher)) {
-                  <i class="bwi bwi-paperclip bwi-sm" [appA11yTitle]="'attachments' | i18n"></i>
-                }
+                <div slot="default-trailing" class="tw-flex tw-gap-1.5">
+                  @if (cipher.organizationId) {
+                    <i
+                      appOrgIcon
+                      [tierType]="orgTierType(cipher)"
+                      [size]="'small'"
+                      [appA11yTitle]="orgIconTooltip(cipher)"
+                    ></i>
+                  }
+                  @if (CipherViewLikeUtils.hasAttachments(cipher)) {
+                    <i
+                      slot="default-trailing"
+                      class="bwi bwi-paperclip bwi-sm"
+                      [appA11yTitle]="'attachments' | i18n"
+                    ></i>
+                  }
+                </div>
                 <span slot="secondary">{{ CipherViewLikeUtils.subtitle(cipher) }}</span>
               </button>
               <bit-item-action slot="end">

apps/browser/src/vault/popup/settings/archive.component.ts

@@ -1,11 +1,13 @@
 import { CommonModule } from "@angular/common";
 import { Component, inject } from "@angular/core";
+import { toSignal } from "@angular/core/rxjs-interop";
 import { Router } from "@angular/router";
 import { combineLatest, firstValueFrom, map, Observable, startWith, switchMap } from "rxjs";
 
 import { CollectionService } from "@bitwarden/admin-console/common";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
+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 { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -33,6 +35,7 @@ import {
 import {
   CanDeleteCipherDirective,
   DecryptionFailureDialogComponent,
+  OrgIconDirective,
   PasswordRepromptService,
 } from "@bitwarden/vault";
 
@@ -60,6 +63,7 @@ import { ROUTES_AFTER_EDIT_DELETION } from "../components/vault-v2/add-edit/add-
     SectionComponent,
     SectionHeaderComponent,
     TypographyModule,
+    OrgIconDirective,
     CardComponent,
     ButtonComponent,
   ],
@@ -79,6 +83,26 @@ export class ArchiveComponent {
 
   private userId$: Observable<UserId> = this.accountService.activeAccount$.pipe(getUserId);
 
+  private readonly orgMap = toSignal(
+    this.userId$.pipe(
+      switchMap((userId) =>
+        this.organizationService.organizations$(userId).pipe(
+          map((orgs) => {
+            const map = new Map<string, Organization>();
+            for (const org of orgs) {
+              map.set(org.id, org);
+            }
+            return map;
+          }),
+        ),
+      ),
+    ),
+  );
+
+  private readonly collections = toSignal(
+    this.userId$.pipe(switchMap((userId) => this.collectionService.decryptedCollections$(userId))),
+  );
+
   protected archivedCiphers$ = this.userId$.pipe(
     switchMap((userId) => this.cipherArchiveService.archivedCiphers$(userId)),
   );
@@ -242,4 +266,22 @@ export class ArchiveComponent {
 
     return this.passwordRepromptService.passwordRepromptCheck(cipher);
   }
+
+  /**
+   * Get the organization tier type for the given cipher.
+   */
+  orgTierType({ organizationId }: CipherViewLike) {
+    return this.orgMap()?.get(organizationId as string)?.productTierType;
+  }
+
+  /**
+   * Get the organization icon tooltip for the given cipher.
+   */
+  orgIconTooltip({ collectionIds }: CipherViewLike) {
+    if (collectionIds.length !== 1) {
+      return this.i18nService.t("nCollections", collectionIds.length);
+    }
+
+    return this.collections()?.find((c) => c.id === collectionIds[0])?.name;
+  }
 }

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

@@ -4397,8 +4397,8 @@
   "archiveItem": {
     "message": "Archive item"
   },
-  "archiveItemConfirmDesc": {
-    "message": "Archived items are excluded from general search results and autofill suggestions. Are you sure you want to archive this item?"
+  "archiveItemDialogContent": {
+    "message": "Once archived, this item will be excluded from search results and autofill suggestions."
   },
   "unArchiveAndSave": {
     "message": "Unarchive and save"

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

@@ -746,7 +746,8 @@ export class VaultComponent<C extends CipherViewLike> implements OnInit, OnDestr
 
     const confirmed = await this.dialogService.openSimpleDialog({
       title: { key: "archiveItem" },
-      content: { key: "archiveItemConfirmDesc" },
+      content: { key: "archiveItemDialogContent" },
+      acceptButtonText: { key: "archiveVerb" },
       type: "info",
     });
 

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

@@ -11701,8 +11701,8 @@
     "message": "Archive item",
     "description": "Verb"
   },
-  "archiveItemConfirmDesc": {
-    "message": "Archived items are excluded from general search results and autofill suggestions. Are you sure you want to archive this item?"
+  "archiveItemDialogContent": {
+    "message": "Once archived, this item will be excluded from search results and autofill suggestions."
   },
   "archiveBulkItems": {
     "message": "Archive items",

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

@@ -41,7 +41,8 @@ export class ArchiveCipherUtilitiesService {
 
     const confirmed = await this.dialogService.openSimpleDialog({
       title: { key: "archiveItem" },
-      content: { key: "archiveItemConfirmDesc" },
+      content: { key: "archiveItemDialogContent" },
+      acceptButtonText: { key: "archiveVerb" },
       type: "info",
     });