[EC-861] Add external id to member modal (#4504)

* [EC-861] feat: add `externalId` field to ui

* [EC-861] feat: add `externalId` to services and data classes

apps/web/src/app/organizations/core/services/user-admin.service.ts

@@ -72,6 +72,7 @@ export class UserAdminService {
       view.userId = u.userId;
       view.type = u.type;
       view.status = u.status;
+      view.externalId = u.externalId;
       view.accessAll = u.accessAll;
       view.permissions = u.permissions;
       view.resetPasswordEnrolled = u.resetPasswordEnrolled;

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

@@ -10,6 +10,7 @@ export class OrganizationUserAdminView {
   organizationId: string;
   type: OrganizationUserType;
   status: OrganizationUserStatusType;
+  externalId: string;
   accessAll: boolean;
   permissions: PermissionsApi;
   resetPasswordEnrolled: boolean;

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

@@ -26,7 +26,7 @@
               <bit-hint>{{ "inviteMultipleEmailDesc" | i18n: "20" }}</bit-hint>
             </bit-form-field>
           </ng-container>
-          <fieldset role="radiogroup" aria-labelledby="roleGroupLabel">
+          <fieldset role="radiogroup" aria-labelledby="roleGroupLabel" class="tw-mb-6">
             <legend
               id="roleGroupLabel"
               class="tw-mb-2 tw-block tw-text-base tw-font-semibold tw-text-main"
@@ -105,7 +105,7 @@
                 </div>
               </label>
             </div>
-            <div class="tw-mb-2 tw-flex tw-items-baseline">
+            <div class="tw-flex tw-items-baseline">
               <input
                 type="radio"
                 id="userTypeCustom"
@@ -134,6 +134,11 @@
               </label>
             </div>
           </fieldset>
+          <bit-form-field>
+            <bit-label>{{ "externalId" | i18n }}</bit-label>
+            <input bitInput type="text" formControlName="externalId" />
+            <bit-hint>{{ "externalIdDesc" | i18n }}</bit-hint>
+          </bit-form-field>
           <ng-container *ngIf="customUserTypeSelected">
             <h3 class="mt-4 d-flex tw-font-semibold">
               {{ "permissions" | i18n }}

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

@@ -78,6 +78,7 @@ export class MemberDialogComponent implements OnInit, OnDestroy {
   protected formGroup = this.formBuilder.group({
     emails: ["", [Validators.required, commaSeparatedEmails]],
     type: OrganizationUserType.User,
+    externalId: this.formBuilder.control({ value: "", disabled: true }),
     accessAllCollections: false,
     accessSecretsManager: false,
     access: [[] as AccessItemValue[]],
@@ -227,6 +228,7 @@ export class MemberDialogComponent implements OnInit, OnDestroy {
           this.formGroup.removeControl("emails");
           this.formGroup.patchValue({
             type: userDetails.type,
+            externalId: userDetails.externalId,
             accessAllCollections: userDetails.accessAll,
             access: accessSelections,
             accessSecretsManager: userDetails.accessSecretsManager,

libs/common/src/abstractions/organization-user/responses/organization-user.response.ts

@@ -10,6 +10,7 @@ export class OrganizationUserResponse extends BaseResponse {
   userId: string;
   type: OrganizationUserType;
   status: OrganizationUserStatusType;
+  externalId: string;
   accessAll: boolean;
   accessSecretsManager: boolean;
   permissions: PermissionsApi;
@@ -24,6 +25,7 @@ export class OrganizationUserResponse extends BaseResponse {
     this.type = this.getResponseProperty("Type");
     this.status = this.getResponseProperty("Status");
     this.permissions = new PermissionsApi(this.getResponseProperty("Permissions"));
+    this.externalId = this.getResponseProperty("ExternalId");
     this.accessAll = this.getResponseProperty("AccessAll");
     this.accessSecretsManager = this.getResponseProperty("AccessSecretsManager");
     this.resetPasswordEnrolled = this.getResponseProperty("ResetPasswordEnrolled");