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.ts

@@ -129,18 +129,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) });
     },
   });
 };