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/audit-user/index.tsx

@@ -10,10 +10,12 @@ import {
   Container, DataTable,
 } from '@openedx/paragon';
 import TableFooter from '@src/authz-module/components/TableFooter/TableFooter';
-import { AUTHZ_HOME_PATH, TABLE_DEFAULT_PAGE_SIZE } from '@src/authz-module/constants';
+import {
+  AUTHZ_HOME_PATH, TABLE_DEFAULT_PAGE_SIZE,
+} from '@src/authz-module/constants';
 import AuthZLayout from '@src/authz-module/components/AuthZLayout';
 import { useNavigate, useParams } from 'react-router-dom';
-import { useUserAccount } from '@src/data/hooks';
+import { useUserAccount, useValidateUserPermissions } from '@src/data/hooks';
 import baseMessages from '@src/authz-module/messages';
 import AddRoleButton from '@src/authz-module/components/AddRoleButton';
 import {
@@ -30,7 +32,7 @@ import RolesFilter from '@src/authz-module/components/TableControlBar/RolesFilte
 import TableControlBar from '@src/authz-module/components/TableControlBar/TableControlBar';
 import messages from './messages';
 import ConfirmDeletionModal from '../components/ConfirmDeletionModal';
-import { getCellHeader } from '../components/utils';
+import { getCellHeader, getScopeManageActionPermission } from '../utils';
 
 const AuditUserPage = () => {
   const { formatMessage } = useIntl();
@@ -52,6 +54,13 @@ const AuditUserPage = () => {
   } = useToastManager();
   const { mutate: revokeUserRoles, isPending: isRevokingUserRolePending } = useRevokeUserRoles();
 
+  const deletePermissions = useMemo(() => {
+    const uniqueScopes = [...new Set(userAssignments.map(assignment => assignment.scope))];
+    return uniqueScopes.map(scope => getScopeManageActionPermission(scope));
+  }, [userAssignments]);
+
+  const { data: permissionsToManageScope } = useValidateUserPermissions(deletePermissions);
+
   const fetchData = useMemo(() => debounce(handleTableFetch, 500), [handleTableFetch]);
 
   useEffect(() => {
@@ -72,6 +81,11 @@ const AuditUserPage = () => {
     setShowConfirmDeletionModal(true);
   }, [isRevokingUserRolePending]);
 
+  const hasPermissionToDeleteScope = useCallback((scope: string) => {
+    const permissionIndex = deletePermissions.findIndex(permission => permission.scope === scope);
+    return permissionsToManageScope?.[permissionIndex]?.allowed;
+  }, [deletePermissions, permissionsToManageScope]);
+
   const navLinks = useMemo(() => [
     {
       label: formatMessage(baseMessages['authz.management.home.nav.link']),
@@ -91,9 +105,10 @@ const AuditUserPage = () => {
       Cell: createActionsCell({
         onClickDeleteButton: handleShowConfirmDeletionModal,
         isUserAuthenticatedPage: username === authenticatedUser.username,
+        hasPermissionToDeleteScope,
       }),
     },
-  ], [authenticatedUser.username, formatMessage, handleShowConfirmDeletionModal, username]);
+  ], [authenticatedUser.username, formatMessage, handleShowConfirmDeletionModal, hasPermissionToDeleteScope, username]);
 
   const columns = useMemo(() => [
     {

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

@@ -14,10 +14,6 @@ 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(() => {});
-
 const mockNavigate = jest.fn();
 
 jest.mock('react-router-dom', () => ({
@@ -501,6 +497,7 @@ describe('TableCells Components', () => {
       const user = userEvent.setup();
       const CustomActionsCell = createActionsCell({
         onClickDeleteButton: mockOnClickDeleteButton,
+        hasPermissionToDeleteScope: () => true,
         isUserAuthenticatedPage: false,
       });
       renderWrapper(<CustomActionsCell row={baseRow} column={{ id: 'actions' }} />);
@@ -524,6 +521,7 @@ describe('TableCells Components', () => {
       const CustomActionsCell = createActionsCell({
         onClickDeleteButton: mockOnClickDeleteButton,
         isUserAuthenticatedPage: true,
+        hasPermissionToDeleteScope: () => true,
       });
       renderWrapper(<CustomActionsCell row={adminRow} column={{ id: 'actions' }} />);
 
@@ -543,6 +541,7 @@ describe('TableCells Components', () => {
       const user = userEvent.setup();
       const CustomActionsCell = createActionsCell({
         onClickDeleteButton: mockOnClickDeleteButton,
+        hasPermissionToDeleteScope: () => true,
         isUserAuthenticatedPage: true,
       });
       renderWrapper(<CustomActionsCell row={djangoRow} column={{ id: 'actions' }} />);
@@ -552,6 +551,18 @@ 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 () => {
+      const CustomActionsCell = createActionsCell({
+        onClickDeleteButton: mockOnClickDeleteButton,
+        isUserAuthenticatedPage: false,
+        hasPermissionToDeleteScope: () => false,
+      });
+      renderWrapper(<CustomActionsCell row={baseRow} column={{ id: 'actions' }} />);
+
+      const deleteButton = screen.queryByRole('button', { name: /delete role action/i });
+      expect(deleteButton).toBeDisabled();
+    });
   });
 
   describe('ViewAllPermissionsCell', () => {

src/authz-module/components/TableCells.tsx

@@ -10,7 +10,9 @@ 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, DJANGO_MANAGED_ROLES, MAP_ROLE_KEY_TO_LABEL,
+} from '@src/authz-module/constants';
 import {
   Icon, IconButton, OverlayTrigger, Tooltip, DataTableContext,
 } from '@openedx/paragon';
@@ -37,6 +39,7 @@ type ExtendedCellProps = CellPropsWithValue & {
 
 type ActionsCellExtraProps = {
   onClickDeleteButton: (role: RoleToDelete) => void;
+  hasPermissionToDeleteScope: (scope: string) => boolean;
   isUserAuthenticatedPage: boolean;
 };
 
@@ -160,9 +163,13 @@ const ViewAllPermissionsCell = ({ row }: CellProps) => {
   );
 };
 
-const ActionsCell = ({ row, onClickDeleteButton, isUserAuthenticatedPage }: ActionsCellProps) => {
+const ActionsCell = ({
+  row, onClickDeleteButton, isUserAuthenticatedPage, hasPermissionToDeleteScope,
+}: ActionsCellProps) => {
   const { formatMessage } = useIntl();
-  const { role } = row.original;
+  const { role, scope } = row.original;
+
+  const hasPermissionsToDelete = useMemo(() => hasPermissionToDeleteScope(scope), [hasPermissionToDeleteScope, scope]);
 
   const handleDelete = () => {
     const roleToDelete = {
@@ -205,7 +212,13 @@ const ActionsCell = ({ row, onClickDeleteButton, isUserAuthenticatedPage }: Acti
   }
 
   return (
-    <IconButton variant="danger" onClick={handleDelete} alt={formatMessage(messages['authz.user.table.delete.action.alt'])} src={Delete} />
+    <IconButton
+      disabled={!hasPermissionsToDelete}
+      variant={hasPermissionsToDelete ? 'danger' : 'light'}
+      onClick={handleDelete}
+      alt={formatMessage(messages['authz.user.table.delete.action.alt'])}
+      src={Delete}
+    />
   );
 };
 

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

@@ -687,6 +687,95 @@ 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),
+    });
+
+  // Type workaround for SpyInstance type not matching function signature
+  type MockCall = Parameters<any>[0];
+  type PredicateCall = MockCall & { predicate: (query: { queryKey: readonly unknown[] }) => boolean };
+
+  const predicateCalls = invalidateQueriesSpy.mock.calls
+    .map(call => call[0])
+    .filter((call): call is PredicateCall => call !== undefined
+      && 'predicate' in call
+      && typeof call.predicate === 'function');
+
+  const userRolesCall = predicateCalls.find(call => {
+    const { predicate } = call;
+    return predicate({ queryKey: ['test-app', 'authz', 'userRoles', 'testuser'] });
+  });
+
+  expect(userRolesCall).toBeDefined();
+
+  if (userRolesCall) {
+    const { predicate } = userRolesCall;
+    expect(predicate({ queryKey: ['test-app', 'authz', 'userRoles'] })).toBe(true);
+    expect(predicate({ queryKey: ['test-app', 'authz', 'teamMembers'] })).toBe(false);
+  }
+
+  const allRoleAssignmentsCall = predicateCalls.find(call => {
+    const { predicate } = call;
+    return predicate({ queryKey: ['test-app', 'authz', 'allRoleAssignments', {}] });
+  });
+
+  expect(allRoleAssignmentsCall).toBeDefined();
+
+  if (allRoleAssignmentsCall) {
+    const { predicate } = allRoleAssignmentsCall;
+    expect(predicate({ queryKey: ['test-app', 'authz', 'allRoleAssignments'] })).toBe(true);
+    expect(predicate({ queryKey: ['test-app', 'authz', 'userRoles'] })).toBe(false);
+  }
+
+  invalidateQueriesSpy.mockRestore();
+  });
 });
 
 describe('useAllRoleAssignments', () => {