[PM-13755] Decouple Invite and Edit User Flows

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

@@ -2,9 +2,11 @@
   <bit-dialog [disablePadding]="!loading" dialogSize="large">
     <span bitDialogTitle>
       {{ title }}
-      <span class="tw-text-sm tw-normal-case tw-text-muted" *ngIf="!loading && params.name">{{
-        params.name
-      }}</span>
+      <span
+        class="tw-text-sm tw-normal-case tw-text-muted"
+        *ngIf="!loading && this.isEditDialogParams(this.params) && params.name"
+        >{{ params.name }}</span
+      >
       <span bitBadge variant="secondary" *ngIf="isRevoked">{{ "revoked" | i18n }}</span>
     </span>
     <div bitDialogContent>
@@ -263,7 +265,8 @@ <h3 class="tw-mt-4">
         </button>
         <button
           *ngIf="
-            editMode && (!(accountDeprovisioningEnabled$ | async) || !params.managedByOrganization)
+            this.isEditDialogParams(this.params) &&
+            (!(accountDeprovisioningEnabled$ | async) || !params.managedByOrganization)
           "
           type="button"
           bitIconButton="bwi-close"
@@ -275,7 +278,9 @@ <h3 class="tw-mt-4">
         ></button>
         <button
           *ngIf="
-            editMode && (accountDeprovisioningEnabled$ | async) && params.managedByOrganization
+            this.isEditDialogParams(this.params) &&
+            (accountDeprovisioningEnabled$ | async) &&
+            params.managedByOrganization
           "
           type="button"
           bitIconButton="bwi-trash"

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

@@ -52,6 +52,7 @@
 } from "../../../shared/components/access-selector";
 
 import { commaSeparatedEmails } from "./validators/comma-separated-emails.validator";
+import { inputEmailLimitValidator } from "./validators/input-email-limit.validator";
 import { orgSeatLimitReachedValidator } from "./validators/org-seat-limit-reached.validator";
 
 export enum MemberDialogTab {
@@ -60,18 +61,28 @@
   Collections = 2,
 }
 
-export interface MemberDialogParams {
-  name: string;
+interface CommonMemberDialogParams {
+  isOnSecretsManagerStandalone: boolean;
   organizationId: string;
-  organizationUserId: string;
+}
+
+export interface AddMemberDialogParams extends CommonMemberDialogParams {
+  kind: "Add";
+  occupiedSeatCount: number;
   allOrganizationUserEmails: string[];
+}
+
+export interface EditMemberDialogParams extends CommonMemberDialogParams {
+  kind: "Edit";
+  name: string;
+  organizationUserId: string;
   usesKeyConnector: boolean;
-  isOnSecretsManagerStandalone: boolean;
-  initialTab?: MemberDialogTab;
-  numConfirmedMembers: number;
   managedByOrganization?: boolean;
+  initialTab: MemberDialogTab;
 }
 
+export type MemberDialogParams = EditMemberDialogParams | AddMemberDialogParams;
+
 export enum MemberDialogResult {
   Saved = "saved",
   Canceled = "canceled",
@@ -139,6 +150,12 @@
     return this.formGroup.value.type === OrganizationUserType.Custom;
   }
 
+  isEditDialogParams(
+    params: EditMemberDialogParams | AddMemberDialogParams,
+  ): params is EditMemberDialogParams {
+    return params.kind === "Edit";
+  }
+
   constructor(
     @Inject(DIALOG_DATA) protected params: MemberDialogParams,
     private dialogRef: DialogRef<MemberDialogResult>,
@@ -159,9 +176,22 @@
       .get$(this.params.organizationId)
       .pipe(shareReplay({ refCount: true, bufferSize: 1 }));
 
-    this.editMode = this.params.organizationUserId != null;
-    this.tabIndex = this.params.initialTab ?? MemberDialogTab.Role;
-    this.title = this.i18nService.t(this.editMode ? "editMember" : "inviteMember");
+    let userDetails$;
+    if (this.isEditDialogParams(this.params)) {
+      this.editMode = true;
+      this.title = this.i18nService.t("editMember");
+      userDetails$ = this.userService.get(
+        this.params.organizationId,
+        this.params.organizationUserId,
+      );
+      this.tabIndex = this.params.initialTab;
+    } else {
+      this.editMode = false;
+      this.title = this.i18nService.t("inviteMember");
+      userDetails$ = of(null);
+      this.tabIndex = MemberDialogTab.Role;
+    }
+
     this.isOnSecretsManagerStandalone = this.params.isOnSecretsManagerStandalone;
 
     if (this.isOnSecretsManagerStandalone) {
@@ -178,10 +208,6 @@
       ),
     );
 
-    const userDetails$ = this.params.organizationUserId
-      ? this.userService.get(this.params.organizationId, this.params.organizationUserId)
-      : of(null);
-
     this.allowAdminAccessToAllCollectionItems$ = this.organization$.pipe(
       map((organization) => {
         return organization.allowAdminAccessToAllCollectionItems;
@@ -263,13 +289,21 @@
   }
 
   private setFormValidators(organization: Organization) {
+    if (this.isEditDialogParams(this.params)) {
+      return;
+    }
+
     const emailsControlValidators = [
       Validators.required,
       commaSeparatedEmails,
+      inputEmailLimitValidator(organization, (maxEmailsCount: number) =>
+        this.i18nService.t("tooManyEmails", maxEmailsCount),
+      ),
       orgSeatLimitReachedValidator(
         organization,
         this.params.allOrganizationUserEmails,
         this.i18nService.t("subscriptionUpgrade", organization.seats),
+        this.params.occupiedSeatCount,
       ),
     ];
 
@@ -420,14 +454,25 @@
       return;
     }
 
+    const userView = await this.getUserView();
+
+    if (this.isEditDialogParams(this.params)) {
+      await this.handleEditUser(userView, this.params);
+    } else {
+      await this.handleInviteUsers(userView, organization);
+    }
+  };
+
+  private async getUserView(): Promise<OrganizationUserAdminView> {
     const userView = new OrganizationUserAdminView();
-    userView.id = this.params.organizationUserId;
     userView.organizationId = this.params.organizationId;
     userView.type = this.formGroup.value.type;
+
     userView.permissions = this.setRequestPermissions(
       userView.permissions ?? new PermissionsApi(),
       userView.type !== OrganizationUserType.Custom,
     );
+
     userView.collections = this.formGroup.value.access
       .filter((v) => v.type === AccessItemType.Collection)
       .map(convertToSelectionView);
@@ -438,44 +483,40 @@
 
     userView.accessSecretsManager = this.formGroup.value.accessSecretsManager;
 
-    if (this.editMode) {
-      await this.userService.save(userView);
-    } else {
-      userView.id = this.params.organizationUserId;
-      const maxEmailsCount =
-        organization.productTierType === ProductTierType.TeamsStarter ? 10 : 20;
-      const emails = [...new Set(this.formGroup.value.emails.trim().split(/\s*,\s*/))];
-      if (emails.length > maxEmailsCount) {
-        this.formGroup.controls.emails.setErrors({
-          tooManyEmails: { message: this.i18nService.t("tooManyEmails", maxEmailsCount) },
-        });
-        return;
-      }
-      if (
-        organization.hasReseller &&
-        this.params.numConfirmedMembers + emails.length > organization.seats
-      ) {
-        this.formGroup.controls.emails.setErrors({
-          tooManyEmails: { message: this.i18nService.t("seatLimitReachedContactYourProvider") },
-        });
-        return;
-      }
-      await this.userService.invite(emails, userView);
-    }
+    return userView;
+  }
+
+  private async handleEditUser(
+    userView: OrganizationUserAdminView,
+    params: EditMemberDialogParams,
+  ) {
+    userView.id = params.organizationUserId;
+    await this.userService.save(userView);
 
     this.toastService.showToast({
       variant: "success",
       title: null,
-      message: this.i18nService.t(
-        this.editMode ? "editedUserId" : "invitedUsers",
-        this.params.name,
-      ),
+      message: this.i18nService.t("editedUserId", params.name),
     });
+
     this.close(MemberDialogResult.Saved);
-  };
+  }
+
+  private async handleInviteUsers(userView: OrganizationUserAdminView, organization: Organization) {
+    const emails = [...new Set(this.formGroup.value.emails.trim().split(/\s*,\s*/))];
+
+    await this.userService.invite(emails, userView);
+
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("invitedUsers"),
+    });
+    this.close(MemberDialogResult.Saved);
+  }
 
   remove = async () => {
-    if (!this.editMode) {
+    if (!this.isEditDialogParams(this.params)) {
       return;
     }
 
@@ -494,7 +535,7 @@
     }
 
     if (this.showNoMasterPasswordWarning) {
-      confirmed = await this.noMasterPasswordConfirmationDialog();
+      confirmed = await this.noMasterPasswordConfirmationDialog(this.params.name);
 
       if (!confirmed) {
         return false;
@@ -515,7 +556,7 @@
   };
 
   revoke = async () => {
-    if (!this.editMode) {
+    if (!this.isEditDialogParams(this.params)) {
       return;
     }
 
@@ -531,7 +572,7 @@
     }
 
     if (this.showNoMasterPasswordWarning) {
-      confirmed = await this.noMasterPasswordConfirmationDialog();
+      confirmed = await this.noMasterPasswordConfirmationDialog(this.params.name);
 
       if (!confirmed) {
         return false;
@@ -553,7 +594,7 @@
   };
 
   restore = async () => {
-    if (!this.editMode) {
+    if (!this.isEditDialogParams(this.params)) {
       return;
     }
 
@@ -572,7 +613,7 @@
   };
 
   delete = async () => {
-    if (!this.editMode) {
+    if (!this.isEditDialogParams(this.params)) {
       return;
     }
 
@@ -620,14 +661,14 @@
     this.dialogRef.close(result);
   }
 
-  private noMasterPasswordConfirmationDialog() {
+  private noMasterPasswordConfirmationDialog(username: string) {
     return this.dialogService.openSimpleDialog({
       title: {
         key: "removeOrgUserNoMasterPasswordTitle",
       },
       content: {
         key: "removeOrgUserNoMasterPasswordDesc",
-        placeholders: [this.params.name],
+        placeholders: [username],
       },
       type: "warning",
     });