[PM-18066] new item details view (#15311)

* update item details v2 in libs for new view design. targets web, browser, and desktop
2025-12-11 22:03:36 +00:00 · 2025-08-07 13:21:24 -04:00
parent c3f6892f9e
commit 2ef8b1a6bf
9 changed files with 273 additions and 119 deletions
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -5573,5 +5573,11 @@
  "wasmNotSupported": {
    "message": "WebAssembly is not supported on your browser or is not enabled. WebAssembly is required to use the Bitwarden app.",
    "description": "'WebAssembly' is a technical term and should not be translated."
+  },
+  "showMore": {
+    "message": "Show more"
+  },
+  "showLess": {
+    "message": "Show less"
  }
 }
--- a/apps/desktop/src/locales/en/messages.json
+++ b/apps/desktop/src/locales/en/messages.json
@@ -4066,6 +4066,12 @@
      }
    }
  },
+  "showMore": {
+    "message": "Show more"
+  },
+  "showLess": {
+    "message": "Show less"
+  },
  "enableAutotype": {
    "message": "Enable Autotype"
  },
--- a/apps/web/src/app/auth/settings/emergency-access/view/emergency-view-dialog.component.spec.ts
+++ b/apps/web/src/app/auth/settings/emergency-access/view/emergency-view-dialog.component.spec.ts
@@ -2,11 +2,14 @@ import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { By } from "@angular/platform-browser";
 import { NoopAnimationsModule } from "@angular/platform-browser/animations";
 import { mock } from "jest-mock-extended";
+import { of } from "rxjs";

 import { CollectionService } from "@bitwarden/admin-console/common";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { DomainSettingsService } from "@bitwarden/common/autofill/services/domain-settings.service";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
@@ -60,6 +63,11 @@ describe("EmergencyViewDialogComponent", () => {
        { provide: AccountService, useValue: accountService },
        { provide: TaskService, useValue: mock<TaskService>() },
        { provide: LogService, useValue: mock<LogService>() },
+        {
+          provide: EnvironmentService,
+          useValue: { environment$: of({ getIconsUrl: () => "https://icons.example.com" }) },
+        },
+        { provide: DomainSettingsService, useValue: { showFavicons$: of(true) } },
      ],
    })
      .overrideComponent(EmergencyViewDialogComponent, {
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -11002,5 +11002,11 @@
  },
  "providersubCanceledmessage": {
    "message" : "To resubscribe, contact Bitwarden Customer Support."
+  },
+  "showMore": {
+    "message": "Show more"
+  },
+  "showLess": {
+    "message": "Show less"
  }
 }
--- a/libs/angular/src/vault/components/icon.component.html
+++ b/libs/angular/src/vault/components/icon.component.html
@@ -1,19 +1,44 @@
-<div class="tw-flex tw-justify-center tw-items-center" aria-hidden="true">
+<!-- Applying width and height styles directly to synchronize icon sizing between web/browser/desktop -->
+<div
+  class="tw-flex tw-justify-center tw-items-center"
+  [ngStyle]="coloredIcon() ? { width: '36px', height: '36px' } : {}"
+  aria-hidden="true"
+>
  <ng-container *ngIf="data$ | async as data">
+    @if (data.imageEnabled && data.image) {
      <img
        [src]="data.image"
-      *ngIf="data.imageEnabled && data.image"
-      class="tw-size-6 tw-rounded-md"
+        class="tw-rounded-md"
        alt=""
        decoding="async"
        loading="lazy"
-      [ngClass]="{ 'tw-invisible tw-absolute': !imageLoaded() }"
+        [ngClass]="{
+          'tw-invisible tw-absolute': !imageLoaded(),
+          'tw-size-6': !coloredIcon(),
+        }"
+        [ngStyle]="coloredIcon() ? { width: '36px', height: '36px' } : {}"
        (load)="imageLoaded.set(true)"
        (error)="imageLoaded.set(false)"
      />
+    }
+    @if (!data.imageEnabled || !data.image || !imageLoaded()) {
+      <div
+        [ngClass]="{
+          'tw-flex tw-items-center tw-justify-center': coloredIcon(),
+          'tw-bg-illustration-bg-primary tw-rounded-full':
+            data.icon?.startsWith('bwi-') && coloredIcon(),
+        }"
+        [ngStyle]="coloredIcon() ? { width: '36px', height: '36px' } : {}"
+      >
        <i
-      class="tw-w-6 tw-text-muted bwi bwi-lg {{ data.icon }}"
-      *ngIf="!data.imageEnabled || !data.image || !imageLoaded()"
+          class="tw-text-muted bwi bwi-lg {{ data.icon }}"
+          [ngStyle]="{
+            color: coloredIcon() ? 'rgb(var(--color-illustration-outline))' : null,
+            width: data.icon?.startsWith('credit-card') && coloredIcon() ? '36px' : null,
+            height: data.icon?.startsWith('credit-card') && coloredIcon() ? '30px' : null,
+          }"
        ></i>
+      </div>
+    }
  </ng-container>
 </div>
--- a/libs/angular/src/vault/components/icon.component.ts
+++ b/libs/angular/src/vault/components/icon.component.ts
@@ -27,6 +27,11 @@ export class IconComponent {
   */
  cipher = input.required<CipherViewLike>();

+  /**
+   * coloredIcon will adjust the size of favicons and the colors of the text icon when user is in the item details view.
+   */
+  coloredIcon = input<boolean>(false);
+
  imageLoaded = signal(false);

  protected data$: Observable<CipherIconDetails>;
--- a/libs/vault/src/cipher-view/item-details/item-details-v2.component.html
+++ b/libs/vault/src/cipher-view/item-details/item-details-v2.component.html
@@ -1,83 +1,86 @@
 <section class="tw-mb-5 bit-compact:tw-mb-4">
-  <bit-section-header>
-    <h2 bitTypography="h6">{{ "itemDetails" | i18n }}</h2>
-  </bit-section-header>
  <bit-card>
-    <bit-form-field
-      [disableMargin]="!cipher.collectionIds?.length && !showOwnership && !cipher.folderId"
-      [disableReadOnlyBorder]="!cipher.collectionIds?.length && !showOwnership && !cipher.folderId"
+    <div
+      class="tw-flex tw-place-items-center"
+      [ngClass]="{
+        'tw-mb-2': allItems.length > 0,
+      }"
    >
-      <bit-label [appTextDrag]="cipher.name">
-        {{ "itemName" | i18n }}
-      </bit-label>
-      <input
-        readonly
-        id="itemName"
-        bitInput
-        type="text"
-        [value]="cipher.name"
-        aria-readonly="true"
-        data-testid="item-name"
-      />
-    </bit-form-field>
-
-    <ul
-      [attr.aria-label]="'itemLocation' | i18n"
-      *ngIf="cipher.collectionIds?.length || showOwnership || cipher.folderId"
-      class="tw-mb-0 tw-pl-0"
-    >
-      <li
-        *ngIf="showOwnership && organization"
-        class="tw-flex tw-items-center tw-list-none"
-        [ngClass]="{ 'tw-mb-3': cipher.collectionIds }"
+      <!-- Applying width and height styles directly to synchronize icon sizing between web/browser/desktop -->
+      <div class="tw-flex tw-items-center tw-justify-center" style="width: 40px; height: 40px">
+        <app-vault-icon [cipher]="cipher()" [coloredIcon]="true"></app-vault-icon>
+      </div>
+      <h2 bitTypography="h4" class="tw-ml-2 tw-mt-2" data-testid="item-name">
+        {{ cipher().name }}
+      </h2>
+    </div>
+    <ng-container>
+      <div class="tw-flex tw-flex-col tw-mt-2 md:tw-flex-row md:tw-flex-wrap">
+        @for (item of showItems(); track item.id; let last = $last) {
+          <span
+            class="tw-flex tw-items-center tw-mt-2 tw-mr-4"
            bitTypography="body2"
-        [attr.aria-label]="('owner' | i18n) + organization.name"
-        data-testid="owner"
+            [attr.aria-label]="getAriaLabel(item)"
+            [ngClass]="{ 'tw-mb-2': last && hasSmallScreen() }"
+            data-testid="item-details-list"
          >
+            @if (isOrgIcon(item)) {
              <i
                appOrgIcon
-          [tierType]="organization.productTierType"
+                [tierType]="organization().productTierType"
                [size]="'large'"
                [title]="'owner' | i18n"
              ></i>
-        <span aria-hidden="true" class="tw-pl-1.5">
-          {{ organization.name }}
-        </span>
-      </li>
-      <li
-        class="tw-list-none"
-        *ngIf="cipher.collectionIds && collections"
-        [attr.aria-label]="'collection' | i18n"
-      >
-        <ul data-testid="collections" [ngClass]="{ 'tw-mb-0': !cipher.folderId }" class="tw-pl-0">
-          <li
-            *ngFor="let collection of collections; let last = last"
-            class="tw-flex tw-items-center tw-list-none"
-            bitTypography="body2"
-            [ngClass]="{ 'tw-mb-3': last && cipher.folderId }"
-            [attr.aria-label]="collection.name"
-          >
+            } @else {
              <i
-              class="bwi bwi-collection-shared bwi-lg"
+                class="bwi bwi-lg"
+                [ngClass]="getIconClass(item)"
                aria-hidden="true"
-              [title]="'collection' | i18n"
+                [title]="getItemTitle(item)"
              ></i>
+            }
            <span aria-hidden="true" class="tw-pl-1.5">
-              {{ collection.name }}
+              {{ item.name }}
            </span>
-          </li>
-        </ul>
-      </li>
-      <li
-        *ngIf="cipher.folderId && folder"
+          </span>
+        }
+        @if (allItems().length === 0) {
+          <span
+            class="tw-flex tw-items-center tw-mt-2 tw-mr-4"
            bitTypography="body2"
-        class="tw-flex tw-items-center tw-list-none"
-        [attr.aria-label]="('folder' | i18n) + folder.name"
-        data-testid="folder"
+            [attr.aria-label]="'noneFolder' | i18n"
          >
            <i class="bwi bwi-folder bwi-lg" aria-hidden="true" [title]="'folder' | i18n"></i>
-        <span aria-hidden="true" class="tw-pl-1.5">{{ folder.name }} </span>
-      </li>
-    </ul>
+            <span aria-hidden="true" class="tw-pl-1.5">
+              {{ "noneFolder" | i18n }}
+            </span>
+          </span>
+        }
+        @if (hasSmallScreen() && allItems().length > 2 && cipher().collectionIds.length > 1) {
+          <button
+            bitTypography="body2"
+            type="button"
+            bitLink
+            linkType="primary"
+            class="tw-mt-1.5"
+            (click)="toggleShowMore()"
+            *ngIf="!showAllDetails()"
+          >
+            {{ "showMore" | i18n }}
+          </button>
+          <button
+            bitTypography="body2"
+            type="button"
+            bitLink
+            linkType="primary"
+            class="tw-mt-1.5"
+            (click)="toggleShowMore()"
+            *ngIf="showAllDetails()"
+          >
+            {{ "showLess" | i18n }}
+          </button>
+        }
+      </div>
+    </ng-container>
  </bit-card>
 </section>
--- a/libs/vault/src/cipher-view/item-details/item-details-v2.component.spec.ts
+++ b/libs/vault/src/cipher-view/item-details/item-details-v2.component.spec.ts
@@ -1,11 +1,17 @@
+import { ComponentRef } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { By } from "@angular/platform-browser";
+import { of } from "rxjs";

 // This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
 // eslint-disable-next-line no-restricted-imports
 import { CollectionView } from "@bitwarden/admin-console/common";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
+import { DomainSettingsService } from "@bitwarden/common/autofill/services/domain-settings.service";
+import { ClientType } from "@bitwarden/common/enums";
+import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";

@@ -14,6 +20,7 @@ import { ItemDetailsV2Component } from "./item-details-v2.component";
 describe("ItemDetailsV2Component", () => {
  let component: ItemDetailsV2Component;
  let fixture: ComponentFixture<ItemDetailsV2Component>;
+  let componentRef: ComponentRef<ItemDetailsV2Component>;

  const cipher = {
    id: "cipher1",
@@ -46,37 +53,46 @@ describe("ItemDetailsV2Component", () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [ItemDetailsV2Component],
-      providers: [{ provide: I18nService, useValue: { t: (key: string) => key } }],
+      providers: [
+        { provide: I18nService, useValue: { t: (key: string) => key } },
+        { provide: PlatformUtilsService, useValue: { getClientType: () => ClientType.Web } },
+        {
+          provide: EnvironmentService,
+          useValue: { environment$: of({ getIconsUrl: () => "https://icons.example.com" }) },
+        },
+        { provide: DomainSettingsService, useValue: { showFavicons$: of(true) } },
+      ],
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(ItemDetailsV2Component);
    component = fixture.componentInstance;
-    component.cipher = cipher;
-    component.organization = organization;
-    component.collections = [collection, collection2];
-    component.folder = folder;
+    componentRef = fixture.componentRef;
+    componentRef.setInput("cipher", cipher);
+    componentRef.setInput("organization", organization);
+    componentRef.setInput("collections", [collection, collection2]);
+    componentRef.setInput("folder", folder);
+    jest.spyOn(component, "hasSmallScreen").mockReturnValue(false); // Mocking small screen check
    fixture.detectChanges();
  });

  it("displays all available fields", () => {
    const itemName = fixture.debugElement.query(By.css('[data-testid="item-name"]'));
-    const owner = fixture.debugElement.query(By.css('[data-testid="owner"]'));
-    const collections = fixture.debugElement.queryAll(By.css('[data-testid="collections"] li'));
-    const folderElement = fixture.debugElement.query(By.css('[data-testid="folder"]'));
+    const itemDetailsList = fixture.debugElement.queryAll(
+      By.css('[data-testid="item-details-list"]'),
+    );

-    expect(itemName.nativeElement.value).toBe(cipher.name);
-    expect(owner.nativeElement.textContent.trim()).toBe(organization.name);
-    expect(collections.map((c) => c.nativeElement.textContent.trim())).toEqual([
-      collection.name,
-      collection2.name,
-    ]);
-    expect(folderElement.nativeElement.textContent.trim()).toBe(folder.name);
+    expect(itemName.nativeElement.textContent.trim()).toEqual(cipher.name);
+    expect(itemDetailsList.length).toBe(4); // Organization, Collection, Collection2, Folder
+    expect(itemDetailsList[0].nativeElement.textContent.trim()).toContain(organization.name);
+    expect(itemDetailsList[1].nativeElement.textContent.trim()).toContain(collection.name);
+    expect(itemDetailsList[2].nativeElement.textContent.trim()).toContain(collection2.name);
+    expect(itemDetailsList[3].nativeElement.textContent.trim()).toContain(folder.name);
  });

  it("does not render owner when `hideOwner` is true", () => {
-    component.hideOwner = true;
+    componentRef.setInput("hideOwner", true);
    fixture.detectChanges();

    const owner = fixture.debugElement.query(By.css('[data-testid="owner"]'));
--- a/libs/vault/src/cipher-view/item-details/item-details-v2.component.ts
+++ b/libs/vault/src/cipher-view/item-details/item-details-v2.component.ts
@@ -1,19 +1,22 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { CommonModule } from "@angular/common";
-import { Component, Input } from "@angular/core";
-
+import { Component, computed, input, signal } from "@angular/core";
 // This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
+import { toSignal } from "@angular/core/rxjs-interop";
+import { fromEvent, map, startWith } from "rxjs";
+
 // eslint-disable-next-line no-restricted-imports
 import { CollectionView } from "@bitwarden/admin-console/common";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";
 import {
+  ButtonLinkDirective,
  CardComponent,
  FormFieldModule,
-  SectionHeaderComponent,
  TypographyModule,
 } from "@bitwarden/components";

@@ -26,20 +29,96 @@ import { OrgIconDirective } from "../../components/org-icon.directive";
    CommonModule,
    JslibModule,
    CardComponent,
-    SectionHeaderComponent,
    TypographyModule,
    OrgIconDirective,
    FormFieldModule,
+    ButtonLinkDirective,
  ],
 })
 export class ItemDetailsV2Component {
-  @Input() cipher: CipherView;
-  @Input() organization?: Organization;
-  @Input() collections?: CollectionView[];
-  @Input() folder?: FolderView;
-  @Input() hideOwner?: boolean = false;
+  hideOwner = input<boolean>(false);
+  cipher = input.required<CipherView>();
+  organization = input<Organization | undefined>();
+  folder = input<FolderView | undefined>();
+  collections = input<CollectionView[] | undefined>();
+  showAllDetails = signal(false);

-  get showOwnership() {
-    return this.cipher.organizationId && this.organization && !this.hideOwner;
+  showOwnership = computed(() => {
+    return this.cipher().organizationId && this.organization() && !this.hideOwner();
+  });
+
+  hasSmallScreen = toSignal(
+    fromEvent(window, "resize").pipe(
+      map(() => window.innerWidth),
+      startWith(window.innerWidth),
+      map((width) => width < 681),
+    ),
+  );
+
+  // Array to hold all details of item. Organization, Collections, and Folder
+  allItems = computed(() => {
+    let items: any[] = [];
+    if (this.showOwnership() && this.organization()) {
+      items.push(this.organization());
+    }
+    if (this.cipher().collectionIds?.length > 0 && this.collections()) {
+      items = [...items, ...this.collections()];
+    }
+    if (this.cipher().folderId && this.folder()) {
+      items.push(this.folder());
+    }
+    return items;
+  });
+
+  showItems = computed(() => {
+    if (
+      this.hasSmallScreen() &&
+      this.allItems().length > 2 &&
+      !this.showAllDetails() &&
+      this.cipher().collectionIds?.length > 1
+    ) {
+      return this.allItems().slice(0, 2);
+    } else {
+      return this.allItems();
+    }
+  });
+
+  constructor(private i18nService: I18nService) {}
+
+  toggleShowMore() {
+    this.showAllDetails.update((value) => !value);
+  }
+
+  getAriaLabel(item: Organization | CollectionView | FolderView): string {
+    if (item instanceof Organization) {
+      return this.i18nService.t("owner") + item.name;
+    } else if (item instanceof CollectionView) {
+      return this.i18nService.t("collection") + item.name;
+    } else if (item instanceof FolderView) {
+      return this.i18nService.t("folder") + item.name;
+    }
+    return "";
+  }
+
+  getIconClass(item: Organization | CollectionView | FolderView): string {
+    if (item instanceof CollectionView) {
+      return "bwi-collection-shared";
+    } else if (item instanceof FolderView) {
+      return "bwi-folder";
+    }
+    return "";
+  }
+
+  getItemTitle(item: Organization | CollectionView | FolderView): string {
+    if (item instanceof CollectionView) {
+      return this.i18nService.t("collection");
+    } else if (item instanceof FolderView) {
+      return this.i18nService.t("folder");
+    }
+    return "";
+  }
+
+  isOrgIcon(item: Organization | CollectionView | FolderView): boolean {
+    return item instanceof Organization;
  }
 }