feat: delete role functionality added to user table

Author: jacobo-dominguez-wgu

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

@@ -1,5 +1,7 @@
-import React, { useMemo } from 'react';
+import React, { useContext, useMemo, useState } from 'react';
 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,
@@ -12,19 +14,30 @@ import { useUserAccount } from '@src/data/hooks';
 import baseMessages from '@src/authz-module/messages';
 import AddRoleButton from '@src/authz-module/components/AddRoleButton';
 import {
-  OrgCell, RoleCell, ScopeCell, PermissionsCell, ViewAllPermissionsCell, ActionsCell,
+  OrgCell, RoleCell, ScopeCell, PermissionsCell, ViewAllPermissionsCell,
+  createActionsCell,
 } from '@src/authz-module/components/TableCells';
 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 ConfirmDeletionModal from '../components/ConfirmDeletionModal';
 
 const AuditUserPage = () => {
   const { formatMessage } = useIntl();
   const { username } = useParams();
+  const { authenticatedUser } = useContext(AppContext) as AppContextType;
   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: isRevokingUserRolePending } = useRevokeUserRoles();
   const { isLoading: isLoadingUser, data: user } = useUserAccount(username ?? '');
   const { querySettings, handleTableFetch } = useQuerySettings();
-  const { data: { results: userAssignments } = { results: [] } } = useUserAssignedRoles(username ?? '', querySettings);
+  const { data: { results: userAssignments, count } = { results: [] } } = useUserAssignedRoles(username ?? '', querySettings);
 
   if (!user && !isLoadingUser) {
     navigate(AUTHZ_HOME_PATH);
@@ -35,18 +48,7 @@ const AuditUserPage = () => {
       to: AUTHZ_HOME_PATH,
     },
   ];
-  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']),
@@ -75,8 +77,103 @@ const AuditUserPage = () => {
 
   const fetchData = useMemo(() => debounce(handleTableFetch, 500), [handleTableFetch]);
 
+  const handleShowConfirmDeletionModal = (role: Role) => {
+    if (isRevokingUserRolePending) { 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) => {
+      const variablesData = {
+        data: {
+          ...variables.data,
+          querySettings,
+        },
+
+      };
+      revokeUserRoles(variablesData, {
+        onSuccess: (response) => {
+          const { errors } = response;
+
+          if (errors.length) {
+            showToast({
+              type: 'error',
+              message: formatMessage(
+                baseMessages['authz.team.toast.default.error.message'],
+                { Bold, Br },
+              ),
+            });
+            // authzQueryKeys.userRoles(username, querySettings),
+            return;
+          }
+
+          const remainingRolesCount = count ? count - 1 : 0;
+          showToast({
+            message: formatMessage(
+              baseMessages['authz.team.remove.user.toast.success.description'],
+              {
+                role: roleToDelete.name,
+                rolesCount: remainingRolesCount,
+              },
+            ),
+            type: 'success',
+          });
+          handleCloseConfirmDeletionModal();
+        },
+        onError: (error, retryVariables) => {
+          showErrorToast(error, () => runRevokeRole(retryVariables));
+        },
+      });
+    };
+
+    runRevokeRole({ data });
+  };
+
+  const additionalColumns = [
+    {
+      id: 'view_permissions',
+      Header: '',
+      Cell: ViewAllPermissionsCell,
+    },
+    {
+      id: 'action',
+      Header: formatMessage(messages['authz.user.table.action.column.header']),
+      Cell: createActionsCell({
+        onClickDeleteButton: handleShowConfirmDeletionModal,
+        isUserAuthenticatedPage: username === authenticatedUser.username,
+      }),
+    },
+  ];
+
   return (
     <div className="authz-module">
+      <ConfirmDeletionModal
+        isOpen={showConfirmDeletionModal}
+        close={handleCloseConfirmDeletionModal}
+        onSave={handleRevokeUserRole}
+        isDeleting={isRevokingUserRolePending}
+        context={{
+          userName: user?.username || '',
+          scope: roleToDelete?.scope || '',
+          role: roleToDelete?.name || '',
+          rolesCount: count || 0,
+        }}
+      />
       <AuthZLayout
         context={{
           id: '',

src/authz-module/audit-user/index.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;