fix: hide remove role button for users without permissions

Author: jacobo-dominguez-wgu

src/authz-module/audit-user/index.test.tsx

@@ -30,6 +30,10 @@ jest.mock('@edx/frontend-component-header', () => ({
 jest.mock('@src/data/hooks', () => ({
   ...jest.requireActual('@src/data/hooks'),
   useUserAccount: jest.fn(),
+  useValidateUserPermissions: jest.fn().mockReturnValue({
+    data: [{ allowed: true }],
+    isLoading: false,
+  }),
 }));
 
 // Mock the useRevokeUserRoles hook

src/authz-module/components/TableCells.test.tsx

@@ -3,6 +3,7 @@ import { initializeMockApp } from '@edx/frontend-platform/testing';
 import { renderWrapper } from '@src/setupTest';
 import userEvent from '@testing-library/user-event';
 import { DataTableContext } from '@openedx/paragon';
+import { useValidateUserPermissions } from '@src/data/hooks';
 import {
   NameCell,
   ViewActionCell,
@@ -14,9 +15,9 @@ import {
   createActionsCell,
 } from './TableCells';
 
-// TODO: remove console.log mocks and implement actual logic for these cells, then update tests accordingly
-// Mock console.log for TODO functions
-jest.spyOn(console, 'log').mockImplementation(() => {});
+jest.mock('@src/data/hooks', () => ({
+  useValidateUserPermissions: jest.fn(),
+}));
 
 const mockNavigate = jest.fn();
 
@@ -494,6 +495,12 @@ describe('TableCells Components', () => {
     };
 
     beforeEach(() => {
+      (useValidateUserPermissions as jest.Mock).mockReturnValue({
+        isLoading: false,
+        data: [
+          { allowed: true },
+        ],
+      });
       jest.clearAllMocks();
     });
 
@@ -552,6 +559,40 @@ describe('TableCells Components', () => {
       await user.hover(infoIcon);
       expect(screen.getByText(/Please go to Django Admin to manage it/i)).toBeInTheDocument();
     });
+
+    it('renders a disabled button when user does not have permission', async () => {
+      (useValidateUserPermissions as jest.Mock).mockReturnValue({
+        isLoading: false,
+        data: [
+          { allowed: false },
+        ],
+      });
+      const CustomActionsCell = createActionsCell({
+        onClickDeleteButton: mockOnClickDeleteButton,
+        isUserAuthenticatedPage: false,
+      });
+      renderWrapper(<CustomActionsCell row={baseRow} column={{ id: 'actions' }} />);
+
+      const deleteButton = screen.queryByRole('button', { name: /delete role action/i });
+      expect(deleteButton).toBeDisabled();
+    });
+
+    it('renders no button when permissions is loading', async () => {
+      (useValidateUserPermissions as jest.Mock).mockReturnValue({
+        data: [
+          { allowed: false },
+        ],
+        isLoading: true,
+      });
+      const CustomActionsCell = createActionsCell({
+        onClickDeleteButton: mockOnClickDeleteButton,
+        isUserAuthenticatedPage: false,
+      });
+      renderWrapper(<CustomActionsCell row={baseRow} column={{ id: 'actions' }} />);
+
+      const deleteButton = screen.queryByRole('button', { name: /delete role action/i });
+      expect(deleteButton).not.toBeInTheDocument();
+    });
   });
 
   describe('ViewAllPermissionsCell', () => {

src/authz-module/components/TableCells.tsx

@@ -10,10 +10,13 @@ import {
 } from '@src/types';
 import { useNavigate } from 'react-router-dom';
 import { useContext, useMemo } from 'react';
-import { ADMIN_ROLES, DJANGO_MANAGED_ROLES, MAP_ROLE_KEY_TO_LABEL } from '@src/authz-module/constants';
+import {
+  ADMIN_ROLES, CONTENT_COURSE_PERMISSIONS, CONTENT_LIBRARY_PERMISSIONS, DJANGO_MANAGED_ROLES, MAP_ROLE_KEY_TO_LABEL,
+} from '@src/authz-module/constants';
 import {
   Icon, IconButton, OverlayTrigger, Tooltip, DataTableContext,
 } from '@openedx/paragon';
+import { useValidateUserPermissions } from '@src/data/hooks';
 import { RESOURCE_ICONS } from './constants';
 import messages from './messages';
 import ViewMoreLink from './ViewMoreLink';
@@ -162,7 +165,13 @@ const ViewAllPermissionsCell = ({ row }: CellProps) => {
 
 const ActionsCell = ({ row, onClickDeleteButton, isUserAuthenticatedPage }: ActionsCellProps) => {
   const { formatMessage } = useIntl();
-  const { role } = row.original;
+  const { role, scope } = row.original;
+  const action = role.startsWith('lib') ? CONTENT_LIBRARY_PERMISSIONS.MANAGE_LIBRARY_TEAM : CONTENT_COURSE_PERMISSIONS.MANAGE_COURSE_TEAM;
+  const permission = {
+    action,
+    scope,
+  };
+  const { data: hasPermission, isLoading } = useValidateUserPermissions([permission]);
 
   const handleDelete = () => {
     const roleToDelete = {
@@ -204,8 +213,10 @@ const ActionsCell = ({ row, onClickDeleteButton, isUserAuthenticatedPage }: Acti
     );
   }
 
+  if (isLoading) { return null; }
+
   return (
-    <IconButton variant="danger" onClick={handleDelete} alt={formatMessage(messages['authz.user.table.delete.action.alt'])} src={Delete} />
+    <IconButton disabled={!hasPermission[0]?.allowed} variant="danger" onClick={handleDelete} alt={formatMessage(messages['authz.user.table.delete.action.alt'])} src={Delete} />
   );
 };
 

src/authz-module/data/hooks.test.tsx

@@ -687,6 +687,81 @@ describe('useRevokeUserRoles', () => {
     expect(calledUrl.searchParams.get('role')).toBe(revokeRoleData.role);
     expect(calledUrl.searchParams.get('scope')).toBe(revokeRoleData.scope);
   });
+
+  it('invalidates userRoles queries on mutation completion', async () => {
+    const mockResponse = {
+      completed: [
+        {
+          userIdentifiers: 'jdoe',
+          status: 'role_removed',
+        },
+      ],
+      errors: [],
+    };
+
+    (getAuthenticatedHttpClient as jest.Mock).mockReturnValue({
+      delete: jest.fn().mockResolvedValue({ data: mockResponse }),
+    });
+
+    const queryClient = new QueryClient({
+      defaultOptions: {
+        queries: { retry: false },
+        mutations: { retry: false },
+      },
+    });
+
+    const invalidateQueriesSpy = jest.spyOn(queryClient, 'invalidateQueries');
+
+    const wrapper = ({ children }: { children: ReactNode }) => (
+      <QueryClientProvider client={queryClient}>
+        {children}
+      </QueryClientProvider>
+    );
+
+    const { result } = renderHook(() => useRevokeUserRoles(), {
+      wrapper,
+    });
+
+    const revokeRoleData = {
+      scope: 'lib:123',
+      users: 'jdoe',
+      role: 'author',
+    };
+
+    await act(async () => {
+      result.current.mutate({ data: revokeRoleData });
+    });
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+    expect(invalidateQueriesSpy).toHaveBeenCalledWith({
+      predicate: expect.any(Function),
+    });
+
+    const userRolesCalls = invalidateQueriesSpy.mock.calls.filter(call => {
+      const filters = call[0];
+      return filters && typeof (filters as any).predicate === 'function';
+    });
+
+    const userRolesCall = userRolesCalls.find(call => {
+      const filters = call[0];
+      const predicate = filters && (filters as any).predicate;
+      return typeof predicate === 'function' && predicate({ queryKey: ['test-app', 'authz', 'userRoles', 'testuser'] });
+    });
+
+    expect(userRolesCall).toBeDefined();
+
+    let predicate;
+    if (userRolesCall) {
+      const filters = userRolesCall[0];
+      predicate = filters && (filters as any).predicate;
+    }
+    expect(typeof predicate).toBe('function');
+    expect(predicate && predicate({ queryKey: ['test-app', 'authz', 'userRoles'] })).toBe(true);
+    expect(predicate && predicate({ queryKey: ['test-app', 'authz', 'teamMembers'] })).toBe(false);
+
+    invalidateQueriesSpy.mockRestore();
+  });
 });
 
 describe('useAllRoleAssignments', () => {

src/authz-module/data/hooks.ts

@@ -3,7 +3,6 @@ import {
 } from '@tanstack/react-query';
 import { appId } from '@src/constants';
 import { LibraryMetadata } from '@src/types';
-import { useQuerySettings } from '@src/authz-module/hooks/useQuerySettings';
 import {
   assignTeamMembersRole, AssignTeamMembersRoleRequest, getAllRoleAssignments,
   GetAllRoleAssignmentsResponse, getLibrary, getOrgs, GetOrgsResponse,
@@ -129,18 +128,19 @@ export const useValidateUsers = () => useMutation({
  */
 export const useRevokeUserRoles = () => {
   const queryClient = useQueryClient();
-  const { querySettings: defaultQuerySettings } = useQuerySettings();
   return useMutation({
     mutationFn: async ({ data }: {
       data: RevokeUserRolesRequest
     }) => revokeUserRoles(data),
-    onSettled: (_data, _error, { data: { scope, users, querySettings } }) => {
+    onSettled: (_data, _error, { data: { scope } }) => {
       queryClient.invalidateQueries({ queryKey: authzQueryKeys.teamMembersAll(scope) });
       queryClient.invalidateQueries({ queryKey: authzQueryKeys.permissionsByRole(scope) });
       queryClient.invalidateQueries({
-        queryKey: authzQueryKeys.userRoles(users, querySettings),
+        predicate: (query) => query.queryKey.includes('userRoles'),
+      });
+      queryClient.invalidateQueries({
+        predicate: (query) => query.queryKey.includes('allRoleAssignments'),
       });
-      queryClient.invalidateQueries({ queryKey: authzQueryKeys.allRoleAssignments(defaultQuerySettings) });
     },
   });
 };