[PM-13928]use the user's email address in owner dropdown rather than "You" (#11798)

* use the user's email address in owner dropdown rather than "You"

* show ownership value in individual vault when disabled

* import account service in storybook

libs/vault/src/cipher-form/cipher-form.stories.ts

@@ -13,6 +13,7 @@ import { CollectionView } from "@bitwarden/admin-console/common";
 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { AutofillSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/autofill-settings.service";
 import { DomainSettingsService } from "@bitwarden/common/autofill/services/domain-settings.service";
 import { ClientType } from "@bitwarden/common/enums";
@@ -183,6 +184,12 @@ export default {
             getClientType: () => ClientType.Browser,
           },
         },
+        {
+          provide: AccountService,
+          useValue: {
+            activeAccount$: new BehaviorSubject({ email: "test@example.com" }),
+          },
+        },
       ],
     }),
     componentWrapperDecorator(

libs/vault/src/cipher-form/components/item-details/item-details-section.component.html

@@ -27,9 +27,9 @@
         <bit-label>{{ "owner" | i18n }}</bit-label>
         <bit-select formControlName="organizationId">
           <bit-option
-            *ngIf="allowPersonalOwnership"
+            *ngIf="showPersonalOwnerOption"
             [value]="null"
-            [label]="'selfOwnershipLabel' | i18n"
+            [label]="userEmail$ | async"
           ></bit-option>
           <bit-option
             *ngFor="let org of config.organizations"

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

@@ -1,13 +1,17 @@
 import { CommonModule } from "@angular/common";
 import { ComponentFixture, fakeAsync, TestBed, tick } from "@angular/core/testing";
 import { ReactiveFormsModule } from "@angular/forms";
+import { By } from "@angular/platform-browser";
 import { mock, MockProxy } from "jest-mock-extended";
+import { BehaviorSubject } from "rxjs";
 
 import { CollectionView } from "@bitwarden/admin-console/common";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { CollectionId, OrganizationId } from "@bitwarden/common/types/guid";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { SelectComponent } from "@bitwarden/components";
 
 import { CipherFormConfig } from "../../abstractions/cipher-form-config.service";
 import { CipherFormContainer } from "../../cipher-form-container";
@@ -20,6 +24,8 @@ describe("ItemDetailsSectionComponent", () => {
   let cipherFormProvider: MockProxy<CipherFormContainer>;
   let i18nService: MockProxy<I18nService>;
 
+  const activeAccount$ = new BehaviorSubject<{ email: string }>({ email: "test@example.com" });
+
   beforeEach(async () => {
     cipherFormProvider = mock<CipherFormContainer>();
     i18nService = mock<I18nService>();
@@ -29,6 +35,7 @@ describe("ItemDetailsSectionComponent", () => {
       providers: [
         { provide: CipherFormContainer, useValue: cipherFormProvider },
         { provide: I18nService, useValue: i18nService },
+        { provide: AccountService, useValue: { activeAccount$ } },
       ],
     }).compileComponents();
 
@@ -207,6 +214,35 @@ describe("ItemDetailsSectionComponent", () => {
     });
   });
 
+  describe("showPersonalOwnerOption", () => {
+    it("should show personal ownership when the configuration allows", () => {
+      component.config.mode = "edit";
+      component.config.allowPersonalOwnership = true;
+      component.config.organizations = [{ id: "134-433-22" } as Organization];
+      fixture.detectChanges();
+
+      const select = fixture.debugElement.query(By.directive(SelectComponent));
+      const { value, label } = select.componentInstance.items[0];
+
+      expect(value).toBeNull();
+      expect(label).toBe("test@example.com");
+    });
+
+    it("should show personal ownership when the control is disabled", async () => {
+      component.config.mode = "edit";
+      component.config.allowPersonalOwnership = false;
+      component.config.organizations = [{ id: "134-433-22" } as Organization];
+      await component.ngOnInit();
+      fixture.detectChanges();
+
+      const select = fixture.debugElement.query(By.directive(SelectComponent));
+
+      const { value, label } = select.componentInstance.items[0];
+      expect(value).toBeNull();
+      expect(label).toBe("test@example.com");
+    });
+  });
+
   describe("showOwnership", () => {
     it("should return true if ownership change is allowed or in edit mode with at least one organization", () => {
       jest.spyOn(component, "allowOwnershipChange", "get").mockReturnValue(true);

libs/vault/src/cipher-form/components/item-details/item-details-section.component.ts

@@ -7,6 +7,7 @@ import { concatMap, map } from "rxjs";
 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 { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { CollectionId, OrganizationId } from "@bitwarden/common/types/guid";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
@@ -68,6 +69,9 @@ export class ItemDetailsSectionComponent implements OnInit {
 
   protected showCollectionsControl: boolean;
 
+  /** The email address associated with the active account */
+  protected userEmail$ = this.accountService.activeAccount$.pipe(map((account) => account.email));
+
   @Input({ required: true })
   config: CipherFormConfig;
 
@@ -96,11 +100,23 @@ export class ItemDetailsSectionComponent implements OnInit {
     return this.config.initialValues;
   }
 
+  /**
+   * Show the personal ownership option in the Owner dropdown when:
+   * - Personal ownership is allowed
+   * - The `organizationId` control is disabled. This avoids the scenario
+   * where a the dropdown is empty because the user personally owns the cipher
+   * but cannot edit the ownership.
+   */
+  get showPersonalOwnerOption() {
+    return this.allowPersonalOwnership || !this.itemDetailsForm.controls.organizationId.enabled;
+  }
+
   constructor(
     private cipherFormContainer: CipherFormContainer,
     private formBuilder: FormBuilder,
     private i18nService: I18nService,
     private destroyRef: DestroyRef,
+    private accountService: AccountService,
   ) {
     this.cipherFormContainer.registerChildForm("itemDetails", this.itemDetailsForm);
     this.itemDetailsForm.valueChanges