feat: delete role functionality added to user table

Author: jacobo-dominguez-wgu

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

@@ -1,12 +1,20 @@
 import { useIntl } from '@edx/frontend-platform/i18n';
 import ViewMoreLink from '@src/authz-module/components/ViewMoreLink';
-import { Delete, ExpandMore } from '@openedx/paragon/icons';
-import { IconButton } from '@openedx/paragon';
-import { TableCellValue, UserRole } from 'types';
+import {
+  Delete, ExpandMore, AdminPanelSettings, DeleteForever,
+} from '@openedx/paragon/icons';
+import {
+  IconButton, OverlayTrigger, Tooltip,
+} from '@openedx/paragon';
+import { Role, TableCellValue, UserRole } from 'types';
+import { ADMIN_ROLES, DJANGO_ROLES } from 'authz-module/constants';
 import messages from './messages';
 import { getPermissionsCountByRole } from './utils';
 
 type CellProps = TableCellValue<UserRole>;
+type ActionsCellProps = CellProps & {
+  onClickDeleteButton: (role: Role) => void;
+};
 
 export const ViewAllPermissionsCell = ({ row }: CellProps) => {
   const { formatMessage } = useIntl();
@@ -20,13 +28,54 @@ export const ViewAllPermissionsCell = ({ row }: CellProps) => {
   );
 };
 
-export const ActionsCell = ({ row }: CellProps) => {
+export const ActionsCell = ({ row, onClickDeleteButton }: ActionsCellProps) => {
   const { formatMessage } = useIntl();
+  const { role } = row.original;
   const handleDelete = () => {
-    // TODO: Implement delete functionality
-    console.log('Delete clicked for row:', row);
+    const roleToDelete = {
+      name: role,
+      scope: row.original.scope,
+    } as Role;
+    onClickDeleteButton(roleToDelete);
   };
 
+  // TODO: change icon when design is ready for non-deletable roles,
+  // currently using the AdminPanelSettings icon with a tooltip to indicate why it's not deletable
+  if (DJANGO_ROLES.includes(role)) {
+    return (
+      <OverlayTrigger
+        placement="left"
+        overlay={(
+          <Tooltip variant="light" id="tooltip-left">
+            {formatMessage(messages['authz.user.table.delete.action.djangorole.tooltip'])}
+          </Tooltip>
+      )}
+      >
+        <IconButton
+          isActive={false}
+          variant="danger"
+          alt={formatMessage(messages['authz.user.table.delete.action.alt'])}
+          src={AdminPanelSettings}
+        />
+      </OverlayTrigger>
+    );
+  }
+
+  // TODO: change icon when design is ready for admin roles that are not deletable,
+  // currently using the DeleteForever icon with a tooltip to indicate why it's not deletable
+  if (ADMIN_ROLES.includes(role)) {
+    return (
+      <IconButton
+        // @ts-ignore
+        disabled
+        isActive={false}
+        variant="light"
+        alt={formatMessage(messages['authz.user.table.delete.action.alt'])}
+        src={DeleteForever}
+      />
+    );
+  }
+
   return (
     <IconButton variant="danger" onClick={handleDelete} alt={formatMessage(messages['authz.user.table.delete.action.alt'])} src={Delete} />
   );

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import debounce from 'lodash.debounce';
 import {
@@ -11,13 +11,16 @@ import { useUserAccount } from '@src/data/hooks';
 import baseMessages from '@src/authz-module/messages';
 import AddRoleButton from '@src/authz-module/components/AddRoleButton';
 import { useQuerySettings } from '@src/authz-module/hooks/useQuerySettings';
-import { useUserAssignedRoles } from '@src/authz-module/data/hooks';
+import { useRevokeUserRoles, useUserAssignedRoles } from '@src/authz-module/data/hooks';
+import { Role } from 'types';
+import { useToastManager } from 'authz-module/libraries-manager/ToastManagerContext';
 import messages from './messages';
 import { ViewAllPermissionsCell, ActionsCell, PermissionsCell } from './CustomCells';
+import ConfirmDeletionModal from '../components/ConfirmDeletionModal';
 
 const dummyData = [
   {
-    role: 'Course Admin',
+    role: 'Super Admin',
     organization: 'edX',
     scope: 'Course: Demo Course',
     permissions: ['View', 'Edit', 'Delete'],
@@ -29,7 +32,7 @@ const dummyData = [
     permissions: ['View', 'Edit'],
   },
   {
-    role: 'Course Admin',
+    role: 'Global Staff',
     organization: 'edX',
     scope: 'Course: Demo Course',
     permissions: ['View', 'Edit', 'Delete'],
@@ -106,6 +109,12 @@ const AuditUserPage = () => {
   const { formatMessage } = useIntl();
   const { username } = useParams();
   const navigate = useNavigate();
+  const [roleToDelete, setRoleToDelete] = useState<Role | null>(null);
+  const [showConfirmDeletionModal, setShowConfirmDeletionModal] = useState(false);
+  const {
+    showToast, showErrorToast, Bold, Br,
+  } = useToastManager();
+  const { mutate: revokeUserRoles, isPending: isRevokingUserRole } = useRevokeUserRoles();
   const { isLoading: isLoadingUser, data: user } = useUserAccount(username ?? '');
   const { querySettings, handleTableFetch } = useQuerySettings();
   // TODO: use actual assigned roles data when API is ready, currently using dummy data for development purpose
@@ -120,18 +129,7 @@ const AuditUserPage = () => {
       to: authzHomePath,
     },
   ];
-  const additionalColumns = [
-    {
-      id: 'view_permissions',
-      Header: '',
-      Cell: ViewAllPermissionsCell,
-    },
-    {
-      id: 'action',
-      Header: formatMessage(messages['authz.user.table.action.column.header']),
-      Cell: ActionsCell,
-    },
-  ];
+
   const columns = [
     {
       Header: formatMessage(messages['authz.user.table.role.column.header']),
@@ -157,8 +155,98 @@ const AuditUserPage = () => {
 
   const fetchData = useMemo(() => debounce(handleTableFetch, 500), [handleTableFetch]);
 
+  const handleShowConfirmDeletionModal = (role: Role) => {
+    if (isRevokingUserRole) { return; }
+
+    setRoleToDelete(role);
+    setShowConfirmDeletionModal(true);
+  };
+
+  const handleCloseConfirmDeletionModal = () => {
+    setRoleToDelete(null);
+    setShowConfirmDeletionModal(false);
+  };
+
+  const handleRevokeUserRole = () => {
+    if (!user || !roleToDelete) { return; }
+
+    const data = {
+      users: user.username,
+      role: roleToDelete.role,
+      scope: roleToDelete.scope,
+    };
+
+    const runRevokeRole = (variables = { data }) => {
+      revokeUserRoles(variables, {
+        onSuccess: (response) => {
+          const { errors } = response;
+
+          if (errors.length) {
+            showToast({
+              type: 'error',
+              message: formatMessage(
+                messages['library.authz.team.toast.default.error.message'],
+                { Bold, Br },
+              ),
+            });
+            return;
+          }
+
+          const remainingRolesCount = dummyData.length - 1;
+          showToast({
+            message: formatMessage(
+              messages['library.authz.team.remove.user.toast.success.description'],
+              {
+                role: roleToDelete.name,
+                rolesCount: remainingRolesCount,
+              },
+            ),
+            type: 'success',
+          });
+        },
+        onError: (error, retryVariables) => {
+          showErrorToast(error, () => runRevokeRole(retryVariables));
+        },
+      });
+    };
+
+    handleCloseConfirmDeletionModal();
+    runRevokeRole();
+  };
+
+  // TODO:
+  // eslint-disable-next-line func-names, react/no-unstable-nested-components
+  const createActionsCell = (extraProps) => function (cellProps) {
+    return <ActionsCell {...cellProps} {...extraProps} />;
+  };
+
+  const additionalColumns = [
+    {
+      id: 'view_permissions',
+      Header: '',
+      Cell: ViewAllPermissionsCell,
+    },
+    {
+      id: 'action',
+      Header: formatMessage(messages['authz.user.table.action.column.header']),
+      Cell: createActionsCell({ onClickDeleteButton: handleShowConfirmDeletionModal }),
+    },
+  ];
+
   return (
     <div className="authz-module">
+      <ConfirmDeletionModal
+        isOpen={showConfirmDeletionModal}
+        close={handleCloseConfirmDeletionModal}
+        onSave={handleRevokeUserRole}
+        isDeleting={isRevokingUserRole}
+        context={{
+          userName: user?.username || '',
+          scope: roleToDelete?.scope || '',
+          role: roleToDelete?.name || '',
+          rolesCount: dummyData.length,
+        }}
+      />
       <AuthZLayout
         context={{
           id: '',

src/authz-module/audit-user/messages.ts

@@ -42,6 +42,11 @@ const messages = defineMessages(
       defaultMessage: '{count, plural, one {# permission available} other {# permissions available}}',
       description: 'Text showing the number of permissions available, with proper pluralization',
     },
+    'authz.user.table.delete.action.djangorole.tooltip': {
+      id: 'authz.user.table.delete.action.djangorole.tooltip',
+      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',
+    },
   },
 );
 

src/authz-module/components/ConfirmDeletionModal.tsx

@@ -0,0 +1,73 @@
+import {
+  ActionRow, AlertModal, Icon, ModalDialog, Stack,
+  StatefulButton,
+} from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { SpinnerSimple } from '@openedx/paragon/icons';
+import messages from './messages';
+
+interface ConfirmDeletionModalProps {
+  isOpen: boolean;
+  close: () => void;
+  onSave: () => void;
+  isDeleting?: boolean;
+  context: {
+    userName: string;
+    scope: string;
+    role: string;
+    rolesCount: number;
+  }
+}
+
+const ConfirmDeletionModal = ({
+  isOpen, close, onSave, isDeleting, context,
+}: ConfirmDeletionModalProps) => {
+  const intl = useIntl();
+  return (
+    <AlertModal
+      title={intl.formatMessage(messages['authz.team.remove.user.modal.title'])}
+      isOpen={isOpen}
+      onClose={close}
+      size="lg"
+      footerNode={(
+        <ActionRow>
+          <ModalDialog.CloseButton variant="tertiary">
+            {intl.formatMessage(messages['authz.manage.cancel.button'])}
+          </ModalDialog.CloseButton>
+          <StatefulButton
+            className="px-4"
+            variant="danger"
+            labels={{
+              default: intl.formatMessage(messages['authz.manage.remove.button']),
+              pending: intl.formatMessage(messages['authz.manage.removing.button']),
+            }}
+            icons={{
+              pending: <Icon src={SpinnerSimple} />,
+            }}
+            state={isDeleting ? 'pending' : 'default'}
+            onClick={() => onSave()}
+            disabledStates={['pending']}
+          />
+        </ActionRow>
+      )}
+      isOverflowVisible={false}
+    >
+      <Stack gap={3}>
+        <p>{intl.formatMessage(messages['authz.team.remove.user.modal.body.1'], {
+          userName: context.userName,
+          scope: context.scope,
+          role: context.role,
+        })}
+        </p>
+        {context.rolesCount === 1 && (
+        <p>{intl.formatMessage(messages['authz.team.remove.user.modal.body.2'])}</p>
+        )}
+        <p>{intl.formatMessage(messages['authz.team.remove.user.modal.body.3'])}</p>
+      </Stack>
+
+    </AlertModal>
+  );
+};
+
+export default ConfirmDeletionModal;

src/authz-module/components/messages.ts

@@ -11,6 +11,41 @@ const messages = defineMessages({
     defaultMessage: 'Permission denied in {roleName} role',
     description: 'Label for denied status of a permission in the permissions table',
   },
+  'authz.team.remove.user.modal.title': {
+    id: 'authz.team.remove.user.modal.title',
+    defaultMessage: 'Remove role?',
+    description: 'AuthZ team management remove user modal title',
+  },
+  'authz.manage.cancel.button': {
+    id: 'authz.manage.cancel.button',
+    defaultMessage: 'Cancel',
+    description: 'AuthZ cancel button title',
+  },
+  'authz.manage.remove.button': {
+    id: 'authz.manage.remove.button',
+    defaultMessage: 'Remove',
+    description: 'AuthZ remove button title',
+  },
+  'authz.manage.removing.button': {
+    id: 'authz.manage.removing.button',
+    defaultMessage: 'Removing...',
+    description: 'AuthZ removing button title',
+  },
+  'authz.team.remove.user.modal.body.1': {
+    id: 'authz.team.remove.user.modal.body.1',
+    defaultMessage: 'Are you sure you want to remove the {role} role from the user “{userName}” in the scope {scope}?',
+    description: 'AuthZ team management remove user modal body',
+  },
+  'authz.team.remove.user.modal.body.2': {
+    id: 'authz.team.remove.user.modal.body.2',
+    defaultMessage: "This is the user's only role in this scope. Removing it will revoke their access completely, and they will no longer appear in the scope's member list.",
+    description: 'AuthZ team management remove user modal body',
+  },
+  'authz.team.remove.user.modal.body.3': {
+    id: 'authz.team.remove.user.modal.body.3',
+    defaultMessage: 'Are you sure you want to proceed?',
+    description: 'AuthZ team management remove user modal body',
+  },
 });
 
 export default messages;

src/authz-module/constants.ts

@@ -119,3 +119,7 @@ export enum RoleOperationErrorStatus {
 }
 
 export const TABLE_DEFAULT_PAGE_SIZE = 10;
+
+export const DJANGO_ROLES = ['Super Admin', 'Global Staff'];
+
+export const ADMIN_ROLES = ['Course Admin', 'Library Admin'];

src/types.ts

@@ -29,7 +29,9 @@ export interface RoleMetadata {
   name: string;
   description: string;
 }
+// TODO: remove unnecessary fields when libraries gets removed
 export interface Role extends RoleMetadata {
+  scope: string;
   userCount: number;
   permissions: string[];
 }