hide ownership view when viewing a cipher in the admin console (#11852)

apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.html

@@ -7,6 +7,7 @@
       *ngIf="showCipherView"
       [cipher]="cipher"
       [collections]="collections"
+      [isAdminConsole]="formConfig.isAdminConsole"
     ></app-cipher-view>
     <vault-cipher-form
       *ngIf="loadForm"

libs/vault/src/cipher-view/cipher-view.component.html

@@ -18,6 +18,7 @@
     [organization]="organization$ | async"
     [collections]="collections"
     [folder]="folder$ | async"
+    [hideOwner]="isAdminConsole"
   >
   </app-item-details-v2>
 

libs/vault/src/cipher-view/cipher-view.component.ts

@@ -51,6 +51,10 @@ export class CipherViewComponent implements OnChanges, OnDestroy {
    * `CipherService` and the `collectionIds` property of the cipher.
    */
   @Input() collections: CollectionView[];
+
+  /** Should be set to true when the component is used within the Admin Console */
+  @Input() isAdminConsole?: boolean = false;
+
   organization$: Observable<Organization>;
   folder$: Observable<FolderView>;
   private destroyed$: Subject<void> = new Subject();

libs/vault/src/cipher-view/item-details/item-details-v2.component.html

@@ -4,10 +4,8 @@
   </bit-section-header>
   <bit-card>
     <bit-form-field
-      [disableMargin]="!cipher.collectionIds?.length && !cipher.organizationId && !cipher.folderId"
+      [disableMargin]="!cipher.collectionIds?.length && !showOwnership && !cipher.folderId"
-      [disableReadOnlyBorder]="
+      [disableReadOnlyBorder]="!cipher.collectionIds?.length && !showOwnership && !cipher.folderId"
-        !cipher.collectionIds?.length && !cipher.organizationId && !cipher.folderId
-      "
     >
       <bit-label>
         {{ "itemName" | i18n }}
@@ -24,11 +22,11 @@
 
     <ul
       [attr.aria-label]="'itemLocation' | i18n"
-      *ngIf="cipher.collectionIds?.length || cipher.organizationId || cipher.folderId"
+      *ngIf="cipher.collectionIds?.length || showOwnership || cipher.folderId"
       class="tw-mb-0 tw-pl-0"
     >
       <li
-        *ngIf="cipher.organizationId && organization"
+        *ngIf="showOwnership && organization"
         class="tw-flex tw-items-center tw-list-none"
         [ngClass]="{ 'tw-mb-3': cipher.collectionIds }"
         bitTypography="body2"

libs/vault/src/cipher-view/item-details/item-details-v2.component.spec.ts

@@ -0,0 +1,83 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
+
+import { CollectionView } from "@bitwarden/admin-console/common";
+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 { ItemDetailsV2Component } from "./item-details-v2.component";
+
+describe("ItemDetailsV2Component", () => {
+  let component: ItemDetailsV2Component;
+  let fixture: ComponentFixture<ItemDetailsV2Component>;
+
+  const cipher = {
+    id: "cipher1",
+    collectionIds: ["col1", "col2"],
+    organizationId: "org1",
+    folderId: "folder1",
+    name: "cipher name",
+  } as CipherView;
+
+  const organization = {
+    id: "org1",
+    name: "Organization 1",
+  } as Organization;
+
+  const collection = {
+    id: "col1",
+    name: "Collection 1",
+  } as CollectionView;
+
+  const collection2 = {
+    id: "col2",
+    name: "Collection 2",
+  } as CollectionView;
+
+  const folder = {
+    id: "folder1",
+    name: "Folder 1",
+  } as FolderView;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ItemDetailsV2Component],
+      providers: [{ provide: I18nService, useValue: { t: (key: string) => key } }],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ItemDetailsV2Component);
+    component = fixture.componentInstance;
+    component.cipher = cipher;
+    component.organization = organization;
+    component.collections = [collection, collection2];
+    component.folder = folder;
+    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"]'));
+
+    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);
+  });
+
+  it("does not render owner when `hideOwner` is true", () => {
+    component.hideOwner = true;
+    fixture.detectChanges();
+
+    const owner = fixture.debugElement.query(By.css('[data-testid="owner"]'));
+    expect(owner).toBeNull();
+  });
+});

libs/vault/src/cipher-view/item-details/item-details-v2.component.ts

@@ -36,4 +36,9 @@ export class ItemDetailsV2Component {
   @Input() organization?: Organization;
   @Input() collections?: CollectionView[];
   @Input() folder?: FolderView;
+  @Input() hideOwner?: boolean = false;
+
+  get showOwnership() {
+    return this.cipher.organizationId && this.organization && !this.hideOwner;
+  }
 }