feat: [FC-0099] Add a new role to a library member (#9)

* refactor: support components as action & connect API to add roles to users

* fix: the value of LIBRARY_AUTHZ_SCOPE was misspelled

* feat: add role assignment functionality with modal and trigger components

* feat: add success toast message for role assignment and update user management logic

* refactor: update handleAddRole to display all roles

* refactor: group under AssignNewRoleModal

* test: add unit tests for AssignNewRoleModal and AssignNewRoleTrigger components

* fix: remove duplicated exports after rebase

---------

Co-authored-by: Diana Olarte <diana.olarte@edunext.co>

Author: bra-i-am

src/authz-module/data/api.ts

@@ -24,7 +24,6 @@ export interface AssignTeamMembersRoleRequest {
   scope: string;
 }
 
-// TODO: replece api path once is created
 export const getTeamMembers = async (object: string): Promise<TeamMember[]> => {
   const { data } = await getAuthenticatedHttpClient().get(getApiUrl(`/api/authz/v1/roles/users/?scope=${object}`));
   return camelCaseObject(data.results);

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

@@ -6,6 +6,7 @@ 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 { buildPermissionsByRoleMatrix } from './utils';
 
@@ -15,7 +16,7 @@ const LibrariesUserManager = () => {
   const intl = useIntl();
   const { username } = useParams();
   const {
-    libraryId, permissions, roles, resources,
+    libraryId, permissions, roles, resources, canManageTeam,
   } = useLibraryAuthZ();
   const { data: library } = useLibrary(libraryId);
   const rootBreadcrumb = intl.formatMessage(messages['library.authz.breadcrumb.root']) || '';
@@ -42,7 +43,13 @@ const LibrariesUserManager = () => {
         activeLabel={user?.username || ''}
         pageTitle={user?.username || ''}
         pageSubtitle={<p>{user?.email}</p>}
-        actions={[]}
+        actions={user && canManageTeam
+          ? [<AssignNewRoleTrigger
+              username={user.username}
+              libraryId={libraryId}
+              currentUserRoles={userRoles.map(role => role.role)}
+          />]
+          : []}
       >
         <Container className="bg-light-200 p-5">
           {isLoading ? <Skeleton count={2} height={200} /> : null}

src/authz-module/libraries-manager/components/AssignNewRoleModal/AssignNewRoleModal.test.tsx

@@ -0,0 +1,219 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderWrapper } from '@src/setupTest';
+import { Role } from 'types';
+import AssignNewRoleModal from './AssignNewRoleModal';
+
+describe('AssignNewRoleModal', () => {
+  const defaultProps = {
+    isOpen: true,
+    isLoading: false,
+    roleOptions: [
+      {
+        role: 'instructor',
+        name: 'Instructor',
+        description: 'Can create and edit content',
+        userCount: 5,
+        permissions: ['view', 'edit'],
+      },
+      {
+        role: 'admin',
+        name: 'Administrator',
+        description: 'Full access to the library',
+        userCount: 2,
+        permissions: ['view', 'edit', 'delete', 'manage'],
+      },
+      {
+        role: 'viewer',
+        name: 'Viewer',
+        description: 'Can only view content',
+        userCount: 10,
+        permissions: ['view'],
+      },
+    ] as Role[],
+    selectedRole: '',
+    close: jest.fn(),
+    onSave: jest.fn(),
+    handleChangeSelectedRole: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const renderComponent = (props = {}) => {
+    const finalProps = { ...defaultProps, ...props };
+    return renderWrapper(<AssignNewRoleModal {...finalProps} />);
+  };
+
+  describe('Modal Visibility', () => {
+    it('renders modal when isOpen is true', () => {
+      renderComponent({ isOpen: true });
+
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+      expect(screen.getByText('Add New Role')).toBeInTheDocument();
+    });
+
+    it('does not render modal when isOpen is false', () => {
+      renderComponent({ isOpen: false });
+
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+      expect(screen.queryByText('Add New Role')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Modal Structure', () => {
+    it('renders modal header with correct title', () => {
+      renderComponent({ isOpen: true });
+
+      expect(screen.getByText('Add New Role')).toBeInTheDocument();
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+    });
+
+    it('renders close button in header', () => {
+      renderComponent();
+
+      expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument();
+    });
+  });
+
+  describe('Role Selection Form', () => {
+    it('renders role selection form with correct label', () => {
+      renderComponent();
+
+      expect(screen.getByText('Roles')).toBeInTheDocument();
+      expect(screen.getByRole('combobox')).toBeInTheDocument();
+    });
+
+    it('renders default option', () => {
+      renderComponent();
+
+      expect(screen.getByText('Select a role')).toBeInTheDocument();
+      expect(screen.getByRole('option', { name: 'Select a role' })).toBeDisabled();
+    });
+
+    it('renders all role options', () => {
+      renderComponent();
+
+      defaultProps.roleOptions.forEach((role) => {
+        expect(screen.getByRole('option', { name: role.name })).toBeInTheDocument();
+      });
+    });
+
+    it('displays selected role correctly', () => {
+      renderComponent({ selectedRole: 'instructor' });
+
+      const selectElement = screen.getByRole('combobox');
+      expect(selectElement).toHaveValue('instructor');
+    });
+
+    it('calls handleChangeSelectedRole when role selection changes', async () => {
+      const user = userEvent.setup();
+      renderComponent();
+
+      const selectElement = screen.getByRole('combobox');
+      await user.selectOptions(selectElement, 'admin');
+
+      expect(defaultProps.handleChangeSelectedRole).toHaveBeenCalled();
+    });
+  });
+
+  describe('Action Buttons', () => {
+    it('renders Cancel button with correct text', () => {
+      renderComponent();
+
+      expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+    });
+
+    it('renders Save button with correct text when not loading', () => {
+      renderComponent({ isLoading: false });
+
+      expect(screen.getByRole('button', { name: /save/i })).toBeInTheDocument();
+    });
+
+    it('renders Save button with loading text when loading', () => {
+      renderComponent({ isLoading: true });
+
+      expect(screen.getByRole('button', { name: /saving/i })).toBeInTheDocument();
+    });
+
+    it('calls close when Cancel button is clicked', async () => {
+      const user = userEvent.setup();
+      renderComponent();
+
+      const cancelButton = screen.getByRole('button', { name: /cancel/i });
+      await user.click(cancelButton);
+
+      expect(defaultProps.close).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onSave when Save button is clicked', async () => {
+      const user = userEvent.setup();
+      renderComponent({ selectedRole: 'instructor' });
+
+      const saveButton = screen.getByRole('button', { name: /save/i });
+      await user.click(saveButton);
+
+      expect(defaultProps.onSave).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Button States', () => {
+    it('disables Save button when no role is selected', () => {
+      renderComponent({ selectedRole: '' });
+
+      const saveButton = screen.getByRole('button', { name: /save/i });
+      expect(saveButton).toBeDisabled();
+    });
+
+    it('enables Save button when role is selected and not loading', () => {
+      renderComponent({ selectedRole: 'instructor', isLoading: false });
+
+      const saveButton = screen.getByRole('button', { name: /save/i });
+      expect(saveButton).not.toBeDisabled();
+    });
+
+    it('disables Save button when loading', () => {
+      renderComponent({ selectedRole: 'instructor', isLoading: true });
+
+      const saveButton = screen.getByRole('button', { name: /saving/i });
+      expect(saveButton).toBeDisabled();
+    });
+
+    it('disables Cancel button when loading', () => {
+      renderComponent({ isLoading: true });
+
+      const cancelButton = screen.getByRole('button', { name: /cancel/i });
+      expect(cancelButton).toBeDisabled();
+    });
+
+    it('enables Cancel button when not loading', () => {
+      renderComponent({ isLoading: false });
+
+      const cancelButton = screen.getByRole('button', { name: /cancel/i });
+      expect(cancelButton).not.toBeDisabled();
+    });
+  });
+
+  describe('Modal Close Behavior', () => {
+    it('does not call close when modal header close is clicked during loading', async () => {
+      const user = userEvent.setup();
+      renderComponent({ isLoading: true });
+
+      const headerCloseButton = screen.getByRole('button', { name: /close/i });
+      await user.click(headerCloseButton);
+
+      expect(defaultProps.close).not.toHaveBeenCalled();
+    });
+
+    it('calls close when modal header close is clicked and not loading', async () => {
+      const user = userEvent.setup();
+      renderComponent({ isLoading: false });
+
+      const headerCloseButton = screen.getByRole('button', { name: /close/i });
+      await user.click(headerCloseButton);
+
+      expect(defaultProps.close).toHaveBeenCalledTimes(1);
+    });
+  });
+});

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

@@ -0,0 +1,70 @@
+import { FC } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  ActionRow, Button, Form, ModalDialog,
+} from '@openedx/paragon';
+import { Role } from 'types';
+import messages from '../messages';
+
+interface AssignNewRoleModalProps {
+  isOpen: boolean;
+  isLoading: boolean;
+  roleOptions: Role[];
+  selectedRole: string;
+  close: () => void;
+  onSave: () => void;
+  handleChangeSelectedRole: (e: React.ChangeEvent<HTMLTextAreaElement | HTMLSelectElement>) => void;
+}
+
+const AssignNewRoleModal: FC<AssignNewRoleModalProps> = ({
+  isOpen, isLoading, selectedRole, roleOptions, close, onSave, handleChangeSelectedRole,
+}) => {
+  const intl = useIntl();
+  return (
+    <ModalDialog
+      title={intl.formatMessage(messages['libraries.authz.manage.assign.new.role.title'])}
+      isOpen={isOpen}
+      onClose={isLoading ? () => {} : close}
+      size="lg"
+      variant="dark"
+      hasCloseButton
+      isOverflowVisible={false}
+      zIndex={5}
+    >
+      <ModalDialog.Header className="bg-primary-500 text-light-100">
+        <ModalDialog.Title>
+          {intl.formatMessage(messages['libraries.authz.manage.assign.new.role.title'])}
+        </ModalDialog.Title>
+      </ModalDialog.Header>
+
+      <ModalDialog.Body className="my-4">
+        <Form.Group controlId="role_options">
+          <Form.Label>{intl.formatMessage(messages['library.authz.team.table.roles'])}</Form.Label>
+          <Form.Control as="select" name="role" value={selectedRole} onChange={handleChangeSelectedRole}>
+            <option value="" disabled>Select a role</option>
+            {roleOptions.map((role) => <option key={role.role} value={role.role}>{role.name}</option>)}
+          </Form.Control>
+        </Form.Group>
+      </ModalDialog.Body>
+
+      <ModalDialog.Footer>
+        <ActionRow>
+          <ModalDialog.CloseButton variant="tertiary" disabled={isLoading}>
+            {intl.formatMessage(messages['libraries.authz.manage.cancel.button'])}
+          </ModalDialog.CloseButton>
+          <Button
+            className="px-4"
+            onClick={() => onSave()}
+            disabled={!selectedRole || isLoading}
+          >
+            {isLoading
+              ? intl.formatMessage(messages['libraries.authz.manage.saving.button'])
+              : intl.formatMessage(messages['libraries.authz.manage.save.button'])}
+          </Button>
+        </ActionRow>
+      </ModalDialog.Footer>
+    </ModalDialog>
+  );
+};
+
+export default AssignNewRoleModal;