feat: update RoleCard to use handleDelete prop and integrate revokeUserRoles functionality

Author: bra-i-am

src/authz-module/components/RoleCard/index.tsx

@@ -14,7 +14,7 @@ interface CardTitleProps {
 interface RoleCardProps extends CardTitleProps {
   objectName?: string | null;
   description: string;
-  showDelete?: boolean;
+  handleDelete?: () => void;
   permissions: any[];
 }
 
@@ -31,7 +31,7 @@ const CardTitle = ({ title, userCounter }: CardTitleProps) => (
 );
 
 const RoleCard = ({
-  title, objectName, description, showDelete, permissions, userCounter,
+  title, objectName, description, handleDelete, permissions, userCounter,
 }: RoleCardProps) => {
   const intl = useIntl();
 
@@ -41,7 +41,9 @@ const RoleCard = ({
         title={<CardTitle title={title} userCounter={userCounter} />}
         subtitle={(objectName && <span className="text-info-400 lead">{objectName}</span>) || ''}
         actions={
-          showDelete && <IconButton variant="danger" alt="Delete role action" src={Delete} />
+          handleDelete && (
+            <IconButton variant="danger" onClick={handleDelete} alt="Delete role action" src={Delete} />
+          )
         }
       />
       <Card.Section>

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

@@ -1,28 +1,31 @@
-import { useMemo } from 'react';
-import { useParams } from 'react-router-dom';
+import { useEffect, useMemo } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Container, Skeleton } from '@openedx/paragon';
+import { Container } from '@openedx/paragon';
 import { ROUTES } from '@src/authz-module/constants';
 import AuthZLayout from '../components/AuthZLayout';
 import { useLibraryAuthZ } from './context';
 import RoleCard from '../components/RoleCard';
 import { AssignNewRoleTrigger } from './components/AssignNewRoleModal';
-import { useLibrary, useTeamMembers } from '../data/hooks';
+import { useLibrary, useRevokeUserRoles, useTeamMembers } from '../data/hooks';
 import { buildPermissionsByRoleMatrix } from './utils';
 
 import messages from './messages';
 
 const LibrariesUserManager = () => {
   const intl = useIntl();
+  const navigate = useNavigate();
   const { username } = useParams();
   const {
     libraryId, permissions, roles, resources, canManageTeam,
   } = useLibraryAuthZ();
   const { data: library } = useLibrary(libraryId);
+  const { mutate: revokeUserRoles } = 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 { data: teamMembers, isLoading } = useTeamMembers(libraryId);
+  const { data: teamMembers, isLoading: isLoadingTeamMembers } = useTeamMembers(libraryId);
   const user = teamMembers?.find(member => member.username === username);
   const userRoles = useMemo(() => {
     const assignedRoles = roles.filter(role => user?.roles.includes(role.role))
@@ -35,11 +38,30 @@ const LibrariesUserManager = () => {
     return assignedRoles;
   }, [roles, user?.roles, permissions, resources, intl]);
 
+  const handleRevokeUserRole = (role: string) => {
+    if (user) {
+      const data = {
+        users: user.username,
+        role,
+        scope: libraryId,
+      };
+
+      revokeUserRoles({ data });
+    }
+  };
+
+  useEffect(() => {
+    if (!isLoadingTeamMembers && !userRoles.length) {
+      navigate(teamMembersPath);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [userRoles, libraryId]);
+
   return (
     <div className="authz-libraries">
       <AuthZLayout
         context={{ id: libraryId, title: library.title, org: library.org }}
-        navLinks={[{ label: rootBreadcrumb }, { label: pageManageTitle, to: `/authz/${ROUTES.LIBRARIES_TEAM_PATH.replace(':libraryId', libraryId)}` }]}
+        navLinks={[{ label: rootBreadcrumb }, { label: pageManageTitle, to: teamMembersPath }]}
         activeLabel={user?.username || ''}
         pageTitle={user?.username || ''}
         pageSubtitle={<p>{user?.email}</p>}
@@ -52,14 +74,13 @@ const LibrariesUserManager = () => {
           : []}
       >
         <Container className="bg-light-200 p-5">
-          {isLoading ? <Skeleton count={2} height={200} /> : null}
           {userRoles && userRoles.map(role => (
             <RoleCard
               key={`${role}-${username}`}
               title={role.name}
               objectName={library.title}
               description={role.description}
-              showDelete
+              handleDelete={() => handleRevokeUserRole(role.role)}
               permissions={role.permissions as any[]}
             />
           ))}