feat: add ConfirmDeletionModal for role removal confirmation in LibrariesUserManager

Author: bra-i-am

src/authz-module/libraries-manager/LibrariesUserManager.tsx

@@ -1,8 +1,9 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Container } from '@openedx/paragon';
 import { ROUTES } from '@src/authz-module/constants';
+import { Role } from 'types';
 import AuthZLayout from '../components/AuthZLayout';
 import { useLibraryAuthZ } from './context';
 import RoleCard from '../components/RoleCard';
@@ -11,6 +12,7 @@ import { useLibrary, useRevokeUserRoles, useTeamMembers } from '../data/hooks';
 import { buildPermissionsByRoleMatrix } from './utils';
 
 import messages from './messages';
+import ConfirmDeletionModal from './components/ConfirmDeletionModal';
 
 const LibrariesUserManager = () => {
   const intl = useIntl();
@@ -20,11 +22,14 @@ const LibrariesUserManager = () => {
     libraryId, permissions, roles, resources, canManageTeam,
   } = useLibraryAuthZ();
   const { data: library } = useLibrary(libraryId);
-  const { mutate: revokeUserRoles } = useRevokeUserRoles();
+  const { mutate: revokeUserRoles, isPending: isRevokingUserRole } = useRevokeUserRoles();
   const rootBreadcrumb = intl.formatMessage(messages['library.authz.breadcrumb.root']) || '';
   const pageManageTitle = intl.formatMessage(messages['library.authz.manage.page.title']);
   const teamMembersPath = `/authz/${ROUTES.LIBRARIES_TEAM_PATH.replace(':libraryId', libraryId)}`;
 
+  const [roleToDelete, setRoleToDelete] = useState('');
+  const [showConfirmDeletionModal, setShowConfirmDeletionModal] = useState(false);
+
   const { data: teamMembers, isLoading: isLoadingTeamMembers } = useTeamMembers(libraryId);
   const user = teamMembers?.find(member => member.username === username);
   const userRoles = useMemo(() => {
@@ -38,15 +43,29 @@ const LibrariesUserManager = () => {
     return assignedRoles;
   }, [roles, user?.roles, permissions, resources, intl]);
 
+  const handleCloseConfirmDeletionModal = () => {
+    setShowConfirmDeletionModal(false);
+    setRoleToDelete('');
+  };
+
+  const handleShowConfirmDeletionModal = (role: Pick<Role, 'name' | 'role'>) => {
+    setRoleToDelete(role.name);
+    setShowConfirmDeletionModal(true);
+  };
+
   const handleRevokeUserRole = (role: string) => {
     if (user) {
       const data = {
         users: user.username,
-        role,
+        role: roles.find(r => r.name === role)!.role,
         scope: libraryId,
       };
 
-      revokeUserRoles({ data });
+      revokeUserRoles({ data }, {
+        onSuccess: () => {
+          handleCloseConfirmDeletionModal();
+        },
+      });
     }
   };
 
@@ -59,6 +78,19 @@ const LibrariesUserManager = () => {
 
   return (
     <div className="authz-libraries">
+      <ConfirmDeletionModal
+        isOpen={showConfirmDeletionModal}
+        close={handleCloseConfirmDeletionModal}
+        onSave={() => handleRevokeUserRole(roleToDelete)}
+        isDeleting={isRevokingUserRole}
+        context={{
+          userName: user?.username || '',
+          scope: library.title,
+          role: roleToDelete,
+          rolesCount: userRoles.length,
+        }}
+      />
+
       <AuthZLayout
         context={{ id: libraryId, title: library.title, org: library.org }}
         navLinks={[{ label: rootBreadcrumb }, { label: pageManageTitle, to: teamMembersPath }]}
@@ -80,7 +112,7 @@ const LibrariesUserManager = () => {
               title={role.name}
               objectName={library.title}
               description={role.description}
-              handleDelete={() => handleRevokeUserRole(role.role)}
+              handleDelete={() => handleShowConfirmDeletionModal(role)}
               permissions={role.permissions as any[]}
             />
           ))}

src/authz-module/libraries-manager/components/ConfirmDeletionModal.tsx

@@ -0,0 +1,84 @@
+import { FC } from 'react';
+import {
+  ActionRow, 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: FC<ConfirmDeletionModalProps> = ({
+  isOpen, close, onSave, isDeleting, context,
+}) => {
+  const intl = useIntl();
+  return (
+    <ModalDialog
+      title={intl.formatMessage(messages['library.authz.team.remove.user.modal.title'])}
+      isOpen={isOpen}
+      onClose={close}
+      size="lg"
+      hasCloseButton
+      isFullscreenOnMobile
+      isOverflowVisible={false}
+    >
+      <ModalDialog.Header>
+        <ModalDialog.Title className="text-primary-500">
+          {intl.formatMessage(messages['library.authz.team.remove.user.modal.title'])}
+        </ModalDialog.Title>
+      </ModalDialog.Header>
+
+      <ModalDialog.Body>
+        <Stack gap={3}>
+          <p>{intl.formatMessage(messages['library.authz.team.remove.user.modal.body.1'], {
+            userName: context.userName,
+            scope: context.scope,
+            role: context.role,
+          })}
+          </p>
+          {context.rolesCount === 1 && (
+            <p>{intl.formatMessage(messages['library.authz.team.remove.user.modal.body.2'])}</p>
+          )}
+          <p>{intl.formatMessage(messages['library.authz.team.remove.user.modal.body.3'])}</p>
+        </Stack>
+      </ModalDialog.Body>
+
+      <ModalDialog.Footer>
+        <ActionRow>
+          <ModalDialog.CloseButton variant="tertiary">
+            {intl.formatMessage(messages['libraries.authz.manage.cancel.button'])}
+          </ModalDialog.CloseButton>
+          <StatefulButton
+            className="px-4"
+            variant="danger"
+            labels={{
+              default: intl.formatMessage(messages['libraries.authz.manage.save.button']),
+              pending: intl.formatMessage(messages['libraries.authz.manage.saving.button']),
+            }}
+            icons={{
+              pending: <Icon src={SpinnerSimple} />,
+            }}
+            state={isDeleting ? 'pending' : 'default'}
+            onClick={() => onSave()}
+            disabledStates={['pending']}
+          />
+        </ActionRow>
+      </ModalDialog.Footer>
+    </ModalDialog>
+  );
+};
+
+export default ConfirmDeletionModal;

src/authz-module/libraries-manager/components/messages.ts

@@ -35,6 +35,25 @@ const messages = defineMessages({
     id: 'libraries.authz.manage.assign.new.role.title',
     defaultMessage: 'Add New Role',
     description: 'Libraries AuthZ assign a new role to a user button title',
+  'library.authz.team.remove.user.modal.title': {
+    id: 'library.authz.team.remove.user.modal.title',
+    defaultMessage: 'Remove role?',
+    description: 'Libraries team management remove user modal title',
+  },
+  'library.authz.team.remove.user.modal.body.1': {
+    id: 'library.authz.team.remove.user.modal.body',
+    defaultMessage: 'Are you sure you want to remove the {role} role from the user “{userName}” in the library {scope}?',
+    description: 'Libraries team management remove user modal body',
+  },
+  'library.authz.team.remove.user.modal.body.2': {
+    id: 'library.authz.team.remove.user.modal.body',
+    defaultMessage: "This is the user's only role in this library. Removing it will revoke their access completely, and they will no longer appear in the library's member List.",
+    description: 'Libraries team management remove user modal body',
+  },
+  'library.authz.team.remove.user.modal.body.3': {
+    id: 'library.authz.team.remove.user.modal.body',
+    defaultMessage: 'Are you sure you want to proceed?',
+    description: 'Libraries team management remove user modal body',
   },
   'libraries.authz.manage.cancel.button': {
     id: 'libraries.authz.manage.cancel.button',