fix: adding missing tooltip to delete button and fixing race condition

Author: jacobo-dominguez-wgu

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

@@ -30,8 +30,8 @@ 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 }],
+  useValidateUserPermissionsNonSuspense: jest.fn().mockReturnValue({
+    data: [{ scope: 'lib:test', allowed: true }],
     isLoading: false,
   }),
 }));

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

@@ -5,7 +5,6 @@ import {
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
 import type { AppContextType } from '@edx/frontend-platform/react';
-import debounce from 'lodash.debounce';
 import {
   Container, DataTable,
 } from '@openedx/paragon';
@@ -15,7 +14,7 @@ import {
 } from '@src/authz-module/constants';
 import AuthZLayout from '@src/authz-module/components/AuthZLayout';
 import { useNavigate, useParams } from 'react-router-dom';
-import { useUserAccount, useValidateUserPermissions } from '@src/data/hooks';
+import { useUserAccount, useValidateUserPermissionsNonSuspense } from '@src/data/hooks';
 import baseMessages from '@src/authz-module/messages';
 import AddRoleButton from '@src/authz-module/components/AddRoleButton';
 import {
@@ -59,9 +58,25 @@ const AuditUserPage = () => {
     return uniqueScopes.map(scope => getScopeManageActionPermission(scope));
   }, [userAssignments]);
 
-  const { data: permissionsToManageScope } = useValidateUserPermissions(deletePermissions);
+  const {
+    data: permissionsToManageScope,
+  } = useValidateUserPermissionsNonSuspense(deletePermissions);
+
+  const rowsWithPermissions = useMemo(() => {
+    if (!permissionsToManageScope) { return userAssignments; }
+
+    return userAssignments.map(assignment => {
+      const canManageScope = permissionsToManageScope.some(
+        permission => permission.scope === assignment.scope && permission.allowed,
+      );
+      return {
+        ...assignment,
+        canManageScope,
+      };
+    });
+  }, [userAssignments, permissionsToManageScope]);
 
-  const fetchData = useMemo(() => debounce(handleTableFetch, 500), [handleTableFetch]);
+  const fetchData = useMemo(() => handleTableFetch, [handleTableFetch]);
 
   useEffect(() => {
     if (!user && !isLoadingUser) {
@@ -72,20 +87,13 @@ const AuditUserPage = () => {
     }
   }, [user, isLoadingUser, navigate, isErrorUser, errorUser]);
 
-  useEffect(() => () => fetchData.cancel(), [fetchData]);
-
   const handleShowConfirmDeletionModal = useCallback((role: RoleToDelete) => {
     if (isRevokingUserRolePending) { return; }
 
     setRoleToDelete(role);
     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']),
@@ -105,10 +113,9 @@ const AuditUserPage = () => {
       Cell: createActionsCell({
         onClickDeleteButton: handleShowConfirmDeletionModal,
         isUserAuthenticatedPage: username === authenticatedUser.username,
-        hasPermissionToDeleteScope,
       }),
     },
-  ], [authenticatedUser.username, formatMessage, handleShowConfirmDeletionModal, hasPermissionToDeleteScope, username]);
+  ], [authenticatedUser.username, formatMessage, handleShowConfirmDeletionModal, username]);
 
   const columns = useMemo(() => [
     {
@@ -242,7 +249,7 @@ const AuditUserPage = () => {
             isFilterable
             isSortable
             manualPagination
-            data={userAssignments}
+            data={rowsWithPermissions}
             manualFilters
             manualSortBy
             fetchData={fetchData}

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

@@ -486,6 +486,7 @@ describe('TableCells Components', () => {
         org: 'Test Org',
         scope: 'Test Scope',
         permissionCount: 1,
+        canManageScope: true,
       },
     };
 
@@ -497,7 +498,6 @@ describe('TableCells Components', () => {
       const user = userEvent.setup();
       const CustomActionsCell = createActionsCell({
         onClickDeleteButton: mockOnClickDeleteButton,
-        hasPermissionToDeleteScope: () => true,
         isUserAuthenticatedPage: false,
       });
       renderWrapper(<CustomActionsCell row={baseRow} column={{ id: 'actions' }} />);
@@ -509,7 +509,7 @@ describe('TableCells Components', () => {
       expect(mockOnClickDeleteButton).toHaveBeenCalledWith({ name: 'Library Admin', role: 'library_admin', scope: 'Test Scope' });
     });
 
-    it('renders a disabled button for admin roles when isUserAuthenticatedPage is true', () => {
+    it('renders a disabled delete icon for admin roles when isUserAuthenticatedPage is true', () => {
       const adminRow = {
         original: {
           role: 'course_admin',
@@ -521,12 +521,32 @@ describe('TableCells Components', () => {
       const CustomActionsCell = createActionsCell({
         onClickDeleteButton: mockOnClickDeleteButton,
         isUserAuthenticatedPage: true,
-        hasPermissionToDeleteScope: () => true,
       });
       renderWrapper(<CustomActionsCell row={adminRow} column={{ id: 'actions' }} />);
 
-      const button = screen.getByRole('button', { name: /delete role action/i });
-      expect(button).toBeDisabled();
+      const infoIcon = screen.getByRole('img', { hidden: true });
+      expect(infoIcon).toBeInTheDocument();
+    });
+
+    it('renders a tooltip when hovering over delete icon for admin roles when isUserAuthenticatedPage is true', async () => {
+      const adminRow = {
+        original: {
+          role: 'course_admin',
+          org: 'Test Org',
+          scope: 'Test Scope',
+          permissionCount: 1,
+        },
+      };
+      const user = userEvent.setup();
+      const CustomActionsCell = createActionsCell({
+        onClickDeleteButton: mockOnClickDeleteButton,
+        isUserAuthenticatedPage: true,
+      });
+      renderWrapper(<CustomActionsCell row={adminRow} column={{ id: 'actions' }} />);
+
+      const infoIcon = screen.getByRole('img', { hidden: true });
+      await user.hover(infoIcon);
+      expect(screen.getByText(/You can’t remove your own admin role/i)).toBeInTheDocument();
     });
 
     it('renders info icon with tooltip for Django managed roles', async () => {
@@ -541,7 +561,6 @@ describe('TableCells Components', () => {
       const user = userEvent.setup();
       const CustomActionsCell = createActionsCell({
         onClickDeleteButton: mockOnClickDeleteButton,
-        hasPermissionToDeleteScope: () => true,
         isUserAuthenticatedPage: true,
       });
       renderWrapper(<CustomActionsCell row={djangoRow} column={{ id: 'actions' }} />);
@@ -556,9 +575,14 @@ describe('TableCells Components', () => {
       const CustomActionsCell = createActionsCell({
         onClickDeleteButton: mockOnClickDeleteButton,
         isUserAuthenticatedPage: false,
-        hasPermissionToDeleteScope: () => false,
       });
-      renderWrapper(<CustomActionsCell row={baseRow} column={{ id: 'actions' }} />);
+      const customRow = {
+        original: {
+          ...baseRow,
+          canManageScope: false,
+        },
+      };
+      renderWrapper(<CustomActionsCell row={customRow} column={{ id: 'actions' }} />);
 
       const deleteButton = screen.queryByRole('button', { name: /delete role action/i });
       expect(deleteButton).toBeDisabled();

src/authz-module/components/TableCells.tsx

@@ -6,7 +6,7 @@ import {
   Info,
 } from '@openedx/paragon/icons';
 import {
-  TableCellValue, AppContextType, UserRole, RoleToDelete,
+  TableCellValue, AppContextType, UserRoleWithPermissions, RoleToDelete,
 } from '@src/types';
 import { useNavigate } from 'react-router-dom';
 import { useContext, useMemo } from 'react';
@@ -27,7 +27,7 @@ interface DataTableInstance {
   toggleRowExpanded?: (rowId: string, expanded: boolean) => void;
 }
 
-type CellProps = TableCellValue<UserRole>;
+type CellProps = TableCellValue<UserRoleWithPermissions>;
 type CellPropsWithValue = CellProps & {
   value: string;
 };
@@ -39,7 +39,6 @@ type ExtendedCellProps = CellPropsWithValue & {
 
 type ActionsCellExtraProps = {
   onClickDeleteButton: (role: RoleToDelete) => void;
-  hasPermissionToDeleteScope: (scope: string) => boolean;
   isUserAuthenticatedPage: boolean;
 };
 
@@ -164,12 +163,10 @@ const ViewAllPermissionsCell = ({ row }: CellProps) => {
 };
 
 const ActionsCell = ({
-  row, onClickDeleteButton, isUserAuthenticatedPage, hasPermissionToDeleteScope,
+  row, onClickDeleteButton, isUserAuthenticatedPage,
 }: ActionsCellProps) => {
   const { formatMessage } = useIntl();
-  const { role, scope } = row.original;
-
-  const hasPermissionsToDelete = useMemo(() => hasPermissionToDeleteScope(scope), [hasPermissionToDeleteScope, scope]);
+  const { role, canManageScope } = row.original;
 
   const handleDelete = () => {
     const roleToDelete = {
@@ -200,21 +197,26 @@ const ActionsCell = ({
 
   if (ADMIN_ROLES.includes(role) && isUserAuthenticatedPage) {
     return (
-      <IconButton
-        // @ts-ignore
-        disabled
-        isActive={false}
-        variant="light"
-        alt={formatMessage(messages['authz.user.table.delete.action.alt'])}
-        src={Delete}
-      />
+      <OverlayTrigger
+        placement="left"
+        overlay={(
+          <Tooltip variant="light" id="tooltip-left">
+            {formatMessage(messages['authz.user.table.delete.action.adminrole.tooltip'])}
+          </Tooltip>
+      )}
+      >
+        <Icon
+          className="mx-2 pl-1 text-light-500"
+          src={Delete}
+        />
+      </OverlayTrigger>
     );
   }
 
   return (
     <IconButton
-      disabled={!hasPermissionsToDelete}
-      variant={hasPermissionsToDelete ? 'danger' : 'light'}
+      disabled={!canManageScope}
+      variant={canManageScope ? 'danger' : 'light'}
       onClick={handleDelete}
       alt={formatMessage(messages['authz.user.table.delete.action.alt'])}
       src={Delete}

src/authz-module/components/messages.ts

@@ -157,6 +157,11 @@ const messages = defineMessages({
     defaultMessage: 'You can’t remove this role here. Please go to Django Admin to manage it.',
     description: 'Tooltip for delete button when hovering over Django roles',
   },
+  'authz.user.table.delete.action.adminrole.tooltip': {
+    id: 'authz.user.table.delete.action.adminrole.tooltip',
+    defaultMessage: 'You can’t remove your own admin role. This prevents a resource from being left without an admin. Another user with the required permissions can revoke it.',
+    description: 'Tooltip for delete button when hovering over Admin roles',
+  },
   'authz.user.table.view_all_permissions.link.text.close': {
     id: 'authz.user.table.view_all_permissions.link.text.close',
     defaultMessage: 'Hide all permissions',