Merge pull request #388 from auth0/feat/refactor-assignrole-removefromorg-duplicates

feat: refactor duplicate mutations for assign role and remove from org

Author: grandmaester

packages/react/src/components/auth0/my-organization/__tests__/organization-member-detail.test.tsx

@@ -1,5 +1,5 @@
 import type { ComponentAction } from '@auth0/universal-components-core';
-import { memberManagementQueryKeys } from '@auth0/universal-components-core';
+import { memberManagementQueryKeys, memberDetailQueryKeys } from '@auth0/universal-components-core';
 import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
@@ -655,9 +655,11 @@ describe('OrganizationMemberDetail', () => {
       await waitFor(() => {
         expect(apiService.organization.members.roles.assign).toHaveBeenCalled();
       });
-
       expect(invalidateQueriesSpy).toHaveBeenCalledWith({
-        queryKey: memberManagementQueryKeys.members(),
+        queryKey: memberManagementQueryKeys.all,
+      });
+      expect(invalidateQueriesSpy).toHaveBeenCalledWith({
+        queryKey: memberDetailQueryKeys.memberRoles(mockMember.user_id ?? ''),
       });
     });
 

packages/react/src/components/auth0/my-organization/organization-member-detail.tsx

@@ -189,6 +189,7 @@ export function OrganizationMemberDetailView(
               customMessages={customMessages}
               organizationName={props.organizationDisplayName}
               memberName={props.member?.name}
+              selectedMember={props.member}
               memberRoles={props.memberRoles}
               availableRoles={props.availableRoles}
               selectedRoles={props.selectedRoles}
@@ -213,6 +214,7 @@ export function OrganizationMemberDetailView(
           isOpen={modalState.type === 'removeFromOrganization'}
           isLoading={isRemovingFromOrganization}
           memberName={props.member?.name}
+          memberUserId={props.member?.user_id}
           organizationName={props.organizationDisplayName}
           customMessages={customMessages}
           onClose={closeModal}

packages/react/src/components/auth0/my-organization/shared/member-management/organization-member-detail/organization-member-roles-tab.tsx

@@ -165,6 +165,7 @@ export function OrganizationMemberEditRolesTab({
   customMessages,
   organizationName,
   memberName,
+  selectedMember,
   memberRoles,
   availableRoles,
   selectedRoles,
@@ -217,6 +218,7 @@ export function OrganizationMemberEditRolesTab({
         isLoading={isAssigningRoles || isFetchingAvailableRoles}
         availableRoles={availableRoles}
         assignedRoles={memberRoles}
+        selectedMember={selectedMember}
         customMessages={customMessages}
         onClose={onAssignRolesCancel}
         onAssign={onAssignRolesSubmit}

packages/react/src/hooks/my-organization/shared/services/use-member-detail-service.ts

@@ -63,7 +63,11 @@ export function useMemberDetailService(
     enabled: !!coreClient && isValidUserId && memberQuery.isSuccess,
   });
 
-  const { rolesQuery } = useMemberManagementService({});
+  const { rolesQuery, assignRolesMutation, removeFromOrganizationMutation } =
+    useMemberManagementService({
+      assignRolesAction,
+      removeFromOrganizationAction,
+    });
 
   const organizationQuery = useQuery({
     queryKey: memberDetailQueryKeys.organization,
@@ -74,79 +78,6 @@ export function useMemberDetailService(
     enabled: !!coreClient,
   });
 
-  const removeFromOrganizationMutation = useMutation({
-    mutationFn: async (_args: {
-      memberId?: string;
-      memberName?: string;
-      organizationName?: string;
-    }) => {
-      if (!userId) throw new Error('userId is required');
-      if (
-        removeFromOrganizationAction?.onBefore &&
-        !removeFromOrganizationAction.onBefore(userId)
-      ) {
-        throw new Error('Remove from org cancelled by onBefore');
-      }
-      await coreClient!
-        .getMyOrganizationApiClient()
-        .organization.memberships.deleteMemberships({ members: [userId] });
-    },
-    onSuccess: (_, { memberName, organizationName }) => {
-      removeFromOrganizationAction?.onAfter?.(userId);
-      showToast({
-        type: 'success',
-        message: t('member.detail.actions.remove_from_organization.success', {
-          memberName: memberName,
-          organizationName: organizationName,
-        }),
-      });
-      queryClient.invalidateQueries({ queryKey: memberManagementQueryKeys.members() });
-    },
-    onError: (error) => {
-      handleError(error, {
-        fallbackMessage: t('member.detail.error.remove_from_organization_failed'),
-      });
-    },
-  });
-
-  const assignRolesMutation = useMutation({
-    mutationFn: async ({ roleIds, memberRoles }: { roleIds: string[]; memberRoles: Role[] }) => {
-      if (!userId) throw new Error('userId is required');
-      const validationResult = validateRequestRoleForMember(t, roleIds, memberRoles, true);
-      if (validationResult?.aborted) {
-        return validationResult;
-      }
-
-      if (assignRolesAction?.onBefore && !assignRolesAction.onBefore({ userId, roleIds })) {
-        throw new Error('Assign roles cancelled by onBefore');
-      }
-      await coreClient!
-        .getMyOrganizationApiClient()
-        .organization.members.roles.assign(userId, { role_ids: roleIds });
-      assignRolesAction?.onAfter?.({ userId, roleIds });
-      return { aborted: false } as const;
-    },
-    onSuccess: (result, { roleIds }) => {
-      if (result?.aborted) return;
-      const allRoles = queryClient.getQueryData<Role[]>(memberManagementQueryKeys.roles()) ?? [];
-      const newRoles = allRoles.filter((r) => roleIds.includes(r.id));
-      queryClient.setQueryData<Role[]>(memberDetailQueryKeys.memberRoles(userId), (old) => [
-        ...(old ?? []),
-        ...newRoles,
-      ]);
-      const assignKey =
-        roleIds.length === 1
-          ? 'member.detail.roles.assign_modal.success'
-          : 'member.detail.roles.assign_modal.success_plural';
-      showToast({ type: 'success', message: t(assignKey) });
-      queryClient.invalidateQueries({ queryKey: memberDetailQueryKeys.memberRoles(userId) });
-      queryClient.invalidateQueries({ queryKey: memberManagementQueryKeys.members() });
-    },
-    onError: (error) => {
-      handleError(error, { fallbackMessage: t('member.detail.error.assign_role_failed') });
-    },
-  });
-
   const removeRolesMutation = useMutation({
     mutationFn: async (roles: Role[]) => {
       if (!userId) throw new Error('userId is required');

packages/react/src/hooks/my-organization/use-member-detail.ts

@@ -88,7 +88,7 @@ export function useOrganizationMemberDetail(
   }, []);
 
   const handleRemoveFromOrganizationConfirm = React.useCallback(
-    (userId?: string, memberName?: string, organizationName?: string) => {
+    (userId?: string | null, memberName?: string, organizationName?: string) => {
       removeFromOrganizationMutation.mutate(
         { userId, memberName, organizationName },
         {
@@ -103,9 +103,9 @@ export function useOrganizationMemberDetail(
   );
 
   const handleAssignRolesSubmit = React.useCallback(
-    (roleIds: string[], memberRoles: Role[]) => {
+    (roleIds: string[], memberRoles: Role[], userId?: string | null) => {
       assignRolesMutation.mutate(
-        { roleIds, memberRoles },
+        { roleIds, memberRoles, userId },
         {
           onSuccess: (result) => {
             if (result?.aborted) return;

packages/react/src/types/my-organization/member-management/organization-member-detail-types.ts

@@ -24,7 +24,7 @@ export interface MemberDetailServiceResult {
   removeFromOrganizationMutation: UseMutationResult<
     void,
     Error,
-    { userId?: string; memberName?: string; organizationName?: string }
+    { userId?: string | null; memberName?: string; organizationName?: string }
   >;
   assignRolesMutation: UseMutationResult<
     { aborted: boolean },
@@ -74,8 +74,12 @@ export interface UseOrganizationMemberDetailResult {
   handleBack: () => void;
   openModal: (state: MemberDetailModalState) => void;
   closeModal: () => void;
-  handleRemoveFromOrganizationConfirm: (memberName?: string, organizationName?: string) => void;
-  handleAssignRolesSubmit: (roleIds: string[], memberRoles: Role[]) => void;
+  handleRemoveFromOrganizationConfirm: (
+    userId?: string | null,
+    memberName?: string,
+    organizationName?: string,
+  ) => void;
+  handleAssignRolesSubmit: (roleIds: string[], memberRoles: Role[], userId?: string | null) => void;
   handleRemoveRolesCancel: () => void;
   handleRemoveRolesConfirm: () => void;
 }
@@ -188,6 +192,7 @@ export interface OrganizationMemberEditRolesTabProps {
   customMessages?: Partial<OrganizationMemberDetailMessages>;
   organizationName?: string;
   memberName?: string;
+  selectedMember?: OrgMember | null;
   memberRoles: Role[];
   availableRoles: Role[];
   selectedRoles: Role[];
@@ -200,7 +205,7 @@ export interface OrganizationMemberEditRolesTabProps {
   onSelectedRolesChange: (roles: Role[]) => void;
   onAssignRolesClick: () => void;
   onAssignRolesCancel: () => void;
-  onAssignRolesSubmit: (roleIds: string[], memberRoles: Role[]) => void;
+  onAssignRolesSubmit: (roleIds: string[], memberRoles: Role[], userId?: string | null) => void;
   onRemoveRolesClick: (roles: Role[]) => void;
   onRemoveRolesCancel: () => void;
   onRemoveRolesConfirm: () => void;