Enhance user management tab (#1394)

Co-authored-by: Copilot <[email protected]>

Author: ActiveChooN

web_ui/packages/core/src/services/use-deployment-config-query.hook.test.tsx

@@ -37,7 +37,9 @@ describe('useDeploymentConfigQuery', () => {
     const renderDeploymentConfigHook = ({ isAdmin = false }: { isAdmin?: boolean } = {}) => {
         jest.mocked(isAdminLocation).mockImplementation(() => isAdmin);
 
-        return renderHookWithProviders(useDeploymentConfigQuery);
+        return renderHookWithProviders(useDeploymentConfigQuery, {
+            providerProps: { skipPrefillDeploymentConfig: true },
+        });
     };
 
     describe('not having a deployment config', () => {

web_ui/packages/core/src/users/hook/use-users.hook.ts

@@ -10,18 +10,20 @@ import { validate } from 'uuid';
 
 import { AccountStatusDTO } from '../../../../../src/core/organizations/dtos/organizations.interface';
 import { redirectTo } from '../../../../../src/shared/utils';
+import { useFeatureFlags } from '../../feature-flags/hooks/use-feature-flags.hook';
 import QUERY_KEYS from '../../requests/query-keys';
 import { useApplicationServices } from '../../services/application-services-provider.component';
 import { paths } from '../../services/routes';
 import { getErrorMessage } from '../../services/utils';
 import { ForgotPasswordDTO, ResetPasswordDTO, UpdatePasswordDTO, UserRegistrationDTO } from '../dtos/members.interface';
-import { getUsersQueryParamsDTO } from '../services/utils';
-import { RoleResource, User, UsersResponse } from '../users.interface';
+import { getRoleCreationPayload, getRoleDeletionPayload, getUsersQueryParamsDTO } from '../services/utils';
+import { RoleResource, UpdateRolePayload, User, UsersResponse } from '../users.interface';
 import {
     UseCreateUserPayload,
     UseDeleteUserPayload,
     UseDeleteUserPhotoPayload,
     UseInviteUserPayload,
+    UseUpdateRolePayload,
     UseUpdateUserPayload,
     UseUpdateUserStatusesPayload,
     UseUploadUserPhotoPayload,
@@ -325,6 +327,55 @@ export const useUsers = (): UseUsers => {
         });
     };
 
+    const useUpdateRole: UseUsers['useUpdateRole'] = () => {
+        const { FEATURE_FLAG_MANAGE_USERS_ROLES } = useFeatureFlags();
+
+        return useMutation<void, AxiosError, UseUpdateRolePayload>({
+            mutationFn: async ({ organizationId, userId, newRole, previousRole, resourceId, resourceType }) => {
+                if (FEATURE_FLAG_MANAGE_USERS_ROLES) {
+                    await usersService.updateMemberRole(organizationId, userId, {
+                        role: newRole,
+                        resourceId,
+                    });
+
+                    return;
+                }
+
+                const roleUpdates: UpdateRolePayload[] = [];
+
+                if (previousRole) {
+                    roleUpdates.push(
+                        getRoleDeletionPayload({
+                            role: previousRole,
+                            resourceId,
+                            resourceType,
+                        })
+                    );
+                }
+
+                roleUpdates.push(
+                    getRoleCreationPayload({
+                        role: newRole,
+                        resourceId,
+                        resourceType,
+                    })
+                );
+
+                await usersService.updateRoles(organizationId, userId, roleUpdates);
+            },
+            onSuccess: async (_, { organizationId, userId, resourceType }) => {
+                if (FEATURE_FLAG_MANAGE_USERS_ROLES) {
+                    await queryClient.invalidateQueries({ queryKey: QUERY_KEYS.USERS(organizationId) });
+                    await queryClient.invalidateQueries({ queryKey: QUERY_KEYS.ACTIVE_USER(organizationId) });
+                } else {
+                    await queryClient.invalidateQueries({
+                        queryKey: QUERY_KEYS.USER_ROLES(organizationId, userId, resourceType),
+                    });
+                }
+            },
+        });
+    };
+
     return {
         useActiveUser,
         useGetUsersQuery,
@@ -338,7 +389,7 @@ export const useUsers = (): UseUsers => {
         useUploadUserPhoto,
         useDeleteUserPhoto,
         useUserRoles,
-
+        useUpdateRole,
         useUpdateMemberRole,
         useDeleteMemberRole,
     };

web_ui/packages/core/src/users/hook/use-users.interface.ts

@@ -78,6 +78,13 @@ interface UseUpdateMemberRolePayload {
     role: MemberRole;
 }
 
+export interface UseUpdateRolePayload extends UseUsersBasePayload {
+    resourceId: string;
+    resourceType: RESOURCE_TYPE;
+    newRole: MemberRole['role'];
+    previousRole?: MemberRole['role'];
+}
+
 export interface UseUsers {
     useActiveUser: (organizationId: string, resource?: Resource) => UseQueryResult<User, AxiosError>;
     useGetUsersQuery: (organizationId: string, queryParams?: UsersQueryParams) => UseGetUsersQuery;
@@ -92,6 +99,7 @@ export interface UseUsers {
     useUpdateUserRoles: () => UseMutationResult<void, AxiosError, UseUpdateUserRolesPayload>;
     useInviteUserMutation: (organizationId: string) => UseMutationResult<void, AxiosError, UseInviteUserPayload>;
 
+    useUpdateRole: () => UseMutationResult<void, AxiosError, UseUpdateRolePayload>;
     useUpdateMemberRole: () => UseMutationResult<void, AxiosError, UseUpdateMemberRolePayload>;
     useDeleteMemberRole: () => UseMutationResult<void, AxiosError, UseUpdateMemberRolePayload>;
 }

web_ui/packages/core/src/users/hook/use-users.test.tsx

@@ -1,50 +1,50 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { ReactNode } from 'react';
-
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { renderHook, waitFor } from '@testing-library/react';
+import { act, waitFor } from '@testing-library/react';
 
 import { getMockedUser } from '../../../../../src/test-utils/mocked-items-factory/mocked-users';
-import { ApplicationServicesProvider } from '../../services/application-services-provider.component';
+import { renderHookWithProviders } from '../../../../../src/test-utils/render-hook-with-providers';
 import { createInMemoryUsersService } from '../services/in-memory-users-service';
+import { getRoleCreationPayload, getRoleDeletionPayload } from '../services/utils';
+import { RESOURCE_TYPE, USER_ROLE } from '../users.interface';
 import { useActiveUser, useUsers } from './use-users.hook';
 
 jest.mock('react-router-dom', () => ({
     ...jest.requireActual('react-router-dom'),
     useParams: () => ({ workspaceId: 'workspace-id', projectId: 'project-id', organizationId: 'organization-123' }),
 }));
 
-const queryClient = new QueryClient({
-    defaultOptions: {
-        queries: {
-            retry: false, // Disable query retries (default is 3)
-        },
-    },
-});
-
 const mockedUser = getMockedUser();
-const mockedUsersService = createInMemoryUsersService();
+let mockedUsersService = createInMemoryUsersService();
 mockedUsersService.getUser = jest.fn(async () => mockedUser);
+mockedUsersService.updateRoles = jest.fn(mockedUsersService.updateRoles);
+mockedUsersService.updateMemberRole = jest.fn(mockedUsersService.updateMemberRole);
 
-const wrapper = ({ children }: { children?: ReactNode }) => {
-    return (
-        <QueryClientProvider client={queryClient}>
-            <ApplicationServicesProvider usersService={mockedUsersService} useInMemoryEnvironment>
-                {children}
-            </ApplicationServicesProvider>
-        </QueryClientProvider>
-    );
-};
+const getProviderProps = (featureFlags?: Record<string, boolean>) => ({
+    usersService: mockedUsersService,
+    useInMemoryEnvironment: true as const,
+    featureFlags,
+});
 
 describe('useUsers', () => {
+    beforeEach(() => {
+        mockedUsersService = createInMemoryUsersService();
+        mockedUsersService.getUser = jest.fn(async () => mockedUser);
+        const originalUpdateRoles = mockedUsersService.updateRoles;
+        mockedUsersService.updateRoles = jest.fn(originalUpdateRoles);
+        const originalUpdateMemberRole = mockedUsersService.updateMemberRole;
+        mockedUsersService.updateMemberRole = jest.fn(originalUpdateMemberRole);
+    });
+
     afterEach(() => {
         jest.clearAllMocks();
     });
 
     it('gets activeUser', async () => {
-        const { result } = renderHook(() => useActiveUser('organization-id'), { wrapper });
+        const { result } = renderHookWithProviders(() => useActiveUser('organization-id'), {
+            providerProps: getProviderProps(),
+        });
 
         await waitFor(() => {
             expect(result.current).not.toBeNull();
@@ -56,26 +56,83 @@ describe('useUsers', () => {
     });
 
     it('query is not executed if the user id is "undefined"', async () => {
-        const { result } = renderHook(() => useUsers(), { wrapper });
-
-        renderHook(() => result.current.useGetUserQuery('organization-id', undefined), {
-            wrapper,
+        renderHookWithProviders(() => useUsers().useGetUserQuery('organization-id', undefined), {
+            providerProps: getProviderProps(),
         });
 
         expect(mockedUsersService.getUser).not.toHaveBeenCalled();
     });
 
     it('query is not executed if the user id is invalid', async () => {
-        const { result } = renderHook(() => useUsers(), { wrapper });
+        renderHookWithProviders(() => useUsers().useGetUserQuery('organization-id', '[email protected]'), {
+            providerProps: getProviderProps(),
+        });
+
+        expect(mockedUsersService.getUser).not.toHaveBeenCalled();
+    });
+
+    it('updates member role when feature flag is enabled', async () => {
+        const { result } = renderHookWithProviders(() => useUsers().useUpdateRole(), {
+            providerProps: getProviderProps({ FEATURE_FLAG_MANAGE_USERS_ROLES: true }),
+        });
 
         await waitFor(() => {
             expect(result.current).not.toBeNull();
         });
 
-        renderHook(() => result.current.useGetUserQuery('organization-id', '[email protected]'), {
-            wrapper,
+        await act(async () => {
+            await result.current.mutateAsync({
+                organizationId: 'organization-id',
+                userId: 'user-id',
+                resourceId: 'organization-id',
+                resourceType: RESOURCE_TYPE.ORGANIZATION,
+                newRole: USER_ROLE.ORGANIZATION_CONTRIBUTOR,
+            });
         });
 
-        expect(mockedUsersService.getUser).not.toHaveBeenCalled();
+        expect(mockedUsersService.updateMemberRole).toHaveBeenCalledTimes(1);
+        expect(mockedUsersService.updateMemberRole).toHaveBeenCalledWith('organization-id', 'user-id', {
+            role: USER_ROLE.ORGANIZATION_CONTRIBUTOR,
+            resourceId: 'organization-id',
+        });
+        expect(mockedUsersService.updateRoles).not.toHaveBeenCalled();
+    });
+
+    it('updates roles when feature flag is disabled', async () => {
+        const { result } = renderHookWithProviders(() => useUsers().useUpdateRole(), {
+            providerProps: getProviderProps({ FEATURE_FLAG_MANAGE_USERS_ROLES: false }),
+        });
+
+        const payload = {
+            organizationId: 'organization-id',
+            userId: 'user-id',
+            resourceId: 'organization-id',
+            resourceType: RESOURCE_TYPE.ORGANIZATION,
+            newRole: USER_ROLE.ORGANIZATION_CONTRIBUTOR,
+            previousRole: USER_ROLE.ORGANIZATION_ADMIN,
+        } as const;
+
+        await waitFor(() => {
+            expect(result.current).not.toBeNull();
+        });
+
+        await act(async () => {
+            await result.current.mutateAsync(payload);
+        });
+
+        expect(mockedUsersService.updateRoles).toHaveBeenCalledTimes(1);
+        expect(mockedUsersService.updateRoles).toHaveBeenCalledWith('organization-id', 'user-id', [
+            getRoleDeletionPayload({
+                role: payload.previousRole,
+                resourceId: payload.resourceId,
+                resourceType: payload.resourceType,
+            }),
+            getRoleCreationPayload({
+                role: payload.newRole,
+                resourceId: payload.resourceId,
+                resourceType: payload.resourceType,
+            }),
+        ]);
+        expect(mockedUsersService.updateMemberRole).not.toHaveBeenCalled();
     });
 });

web_ui/packages/core/src/users/services/utils.ts

@@ -86,6 +86,18 @@ const resourceMapDTO: Record<ResourceTypeDTO, RESOURCE_TYPE> = {
     [ResourceTypeDTO.ORGANIZATION]: RESOURCE_TYPE.ORGANIZATION,
 };
 
+export const mapResourceTypeToDTO = (
+    resourceType?: RESOURCE_TYPE | RESOURCE_TYPE[]
+): ResourceTypeDTO | ResourceTypeDTO[] | undefined => {
+    if (resourceType == null) {
+        return undefined;
+    }
+
+    return Array.isArray(resourceType)
+        ? resourceType.map((type) => USER_RESOURCE_TYPE_MAPPING_DTO[type])
+        : USER_RESOURCE_TYPE_MAPPING_DTO[resourceType];
+};
+
 const getRoles = (roles: RoleResourceDTO[]): RoleResource[] => {
     return roles.reduce<Role[]>((prev, curr) => {
         const { resourceId, resourceType, role } = curr;
@@ -220,7 +232,7 @@ export const getUsersQueryParamsDTO = (queryParams: UsersQueryParams): UsersQuer
         secondName: lastName,
         externalId: externalIdentitySystemId,
         role: role ? USER_ROLE_MAPPING_DTO[role] : undefined,
-        resourceType: resourceType ? USER_RESOURCE_TYPE_MAPPING_DTO[resourceType] : undefined,
+        resourceType: mapResourceTypeToDTO(resourceType),
         sortDirection: sortDirection ? (sortDirection === 'ASC' ? 'asc' : 'desc') : undefined,
 
         sortBy:

web_ui/packages/core/src/users/users.interface.ts

@@ -103,8 +103,8 @@ export interface Role {
 }
 
 export enum USER_ROLE {
-    WORKSPACE_ADMIN = 'Admin',
-    WORKSPACE_CONTRIBUTOR = 'Contributor',
+    WORKSPACE_ADMIN = 'Workspace admin',
+    WORKSPACE_CONTRIBUTOR = 'Workspace contributor',
     PROJECT_MANAGER = 'Project manager',
     PROJECT_CONTRIBUTOR = 'Project contributor',
     ORGANIZATION_ADMIN = 'Organization admin',
@@ -123,8 +123,9 @@ export interface UsersQueryParamsDTO
                 | 'userPhoto'
             >
         >,
-        Partial<RoleResourceDTO>,
+        Omit<Partial<RoleResourceDTO>, 'resourceType'>,
         QueryParametersDTO<keyof UserDTO> {
+    resourceType?: ResourceTypeDTO | ResourceTypeDTO[];
     lastSuccessfulLoginFrom?: string;
     lastSuccessfulLoginTo?: string;
 }
@@ -193,8 +194,9 @@ export interface UsersQueryParams
                 | 'userPhoto'
             > & { name: string }
         >,
-        Partial<RoleResource>,
+        Omit<Partial<RoleResource>, 'resourceType'>,
         QueryParameters<keyof User> {
+    resourceType?: RESOURCE_TYPE | RESOURCE_TYPE[];
     lastSuccessfulLoginFrom?: string;
     lastSuccessfulLoginTo?: string;
 }