[PM-16091] Add SsoExternalId to the member dialog and hide ExternalId if there is no value to display (#14126)

* Add ssoExternalId to OrganizationUserAdminView and OrganizationUserDetailsResponse

- Updated OrganizationUserAdminView to include ssoExternalId property.
- Enhanced OrganizationUserDetailsResponse constructor to initialize ssoExternalId from response data.

* Add SSO External ID copy to messages.json

* Implement SSO External ID field in member dialog

- Added a new input field for ssoExternalId in the member dialog component.
- Introduced visibility logic for both externalId and ssoExternalId based on feature flags.
- Updated form control initialization to include ssoExternalId.

apps/web/src/app/admin-console/organizations/core/views/organization-user-admin-view.ts

@@ -17,6 +17,7 @@ export class OrganizationUserAdminView {
   type: OrganizationUserType;
   status: OrganizationUserStatusType;
   externalId: string;
+  ssoExternalId: string;
   permissions: PermissionsApi;
   resetPasswordEnrolled: boolean;
   hasMasterPassword: boolean;
@@ -39,6 +40,7 @@ export class OrganizationUserAdminView {
     view.type = response.type;
     view.status = response.status;
     view.externalId = response.externalId;
+    view.ssoExternalId = response.ssoExternalId;
     view.permissions = response.permissions;
     view.resetPasswordEnrolled = response.resetPasswordEnrolled;
     view.collections = response.collections.map((c) => ({

apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.html

@@ -177,11 +177,17 @@
               </bit-label>
             </bit-form-control>
           </ng-container>
-          <bit-form-field>
+          <bit-form-field *ngIf="isExternalIdVisible$ | async">
             <bit-label>{{ "externalId" | i18n }}</bit-label>
             <input bitInput type="text" formControlName="externalId" />
             <bit-hint>{{ "externalIdDesc" | i18n }}</bit-hint>
           </bit-form-field>
+
+          <bit-form-field *ngIf="isSsoExternalIdVisible$ | async">
+            <bit-label>{{ "ssoExternalId" | i18n }}</bit-label>
+            <input bitInput type="text" formControlName="ssoExternalId" />
+            <bit-hint>{{ "ssoExternalIdDesc" | i18n }}</bit-hint>
+          </bit-form-field>
         </bit-tab>
         <bit-tab *ngIf="organization.useGroups" [label]="'groups' | i18n">
           <div class="tw-mb-6">

apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.ts

@@ -125,6 +125,7 @@ export class MemberDialogComponent implements OnDestroy {
     emails: [""],
     type: OrganizationUserType.User,
     externalId: this.formBuilder.control({ value: "", disabled: true }),
+    ssoExternalId: this.formBuilder.control({ value: "", disabled: true }),
     accessSecretsManager: false,
     access: [[] as AccessItemValue[]],
     groups: [[] as AccessItemValue[]],
@@ -155,6 +156,22 @@ export class MemberDialogComponent implements OnDestroy {
     FeatureFlag.AccountDeprovisioning,
   );
 
+  protected isExternalIdVisible$ = this.configService
+    .getFeatureFlag$(FeatureFlag.SsoExternalIdVisibility)
+    .pipe(
+      map((isEnabled) => {
+        return !isEnabled || !!this.formGroup.get("externalId")?.value;
+      }),
+    );
+
+  protected isSsoExternalIdVisible$ = this.configService
+    .getFeatureFlag$(FeatureFlag.SsoExternalIdVisibility)
+    .pipe(
+      map((isEnabled) => {
+        return isEnabled && !!this.formGroup.get("ssoExternalId")?.value;
+      }),
+    );
+
   private destroy$ = new Subject<void>();
 
   get customUserTypeSelected(): boolean {
@@ -402,6 +419,7 @@ export class MemberDialogComponent implements OnDestroy {
     this.formGroup.patchValue({
       type: userDetails.type,
       externalId: userDetails.externalId,
+      ssoExternalId: userDetails.ssoExternalId,
       access: accessSelections,
       accessSecretsManager: userDetails.accessSecretsManager,
       groups: groupAccessSelections,

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

@@ -3345,6 +3345,12 @@
   "externalIdDesc": {
     "message": "External ID is an unencrypted reference used by the Bitwarden Directory Connector and API."
   },
+  "ssoExternalId": {
+    "message": "SSO External ID"
+  },
+  "ssoExternalIdDesc": {
+    "message": "SSO External ID is an unencrypted reference between Bitwarden and your configured SSO provider."
+  },
   "nestCollectionUnder": {
     "message": "Nest collection under"
   },

libs/admin-console/src/common/organization-user/models/responses/organization-user.response.ts

@@ -64,10 +64,12 @@ export class OrganizationUserUserDetailsResponse extends OrganizationUserRespons
 
 export class OrganizationUserDetailsResponse extends OrganizationUserResponse {
   managedByOrganization: boolean;
+  ssoExternalId: string;
 
   constructor(response: any) {
     super(response);
     this.managedByOrganization = this.getResponseProperty("ManagedByOrganization") ?? false;
+    this.ssoExternalId = this.getResponseProperty("SsoExternalId");
   }
 }