feat: [FC-0099] add button & modal for adding new team members (#3)

* feat: add team roles management and update related hooks and types

* feat: implement add new team member functionality with modal and actions

* test: add some missing tests

* test: add unit tests for AddNewTeamMemberModal and update context mocks

* test: add toast close functionality and loading state handling in AddNewTeamMemberTrigger tests

* fix: update LibrariesAuthZTeamView to include canManageTeam check for AddNewTeamMemberTrigger

* fix: correct API endpoint paths and update authorization scope format

* refactor: improve error handling & address PR feedback

* refactor: group AddNewTeamMemberModal in 1 folder

* fix: reset modal values to close action

* refactor: replace useAddTeamMember with useAssignTeamMembersRole

* feat: add tooltip

* test: fix test after rebase

* refactor: enhance user intruction with placeholder

* style: remove unnecessary inline style

* fix:  remove the error style on change the textarea value

* fix: add useState to display toast

* fix: remove empty strings from the user input

* fix: validate error users to apply style

---------

Co-authored-by: Diana Olarte <[email protected]>

Author: bra-i-am

src/authz-module/components/AuthZTitle.test.tsx

@@ -65,4 +65,32 @@ describe('AuthZTitle', () => {
       expect(onClick).toHaveBeenCalled();
     });
   });
+
+  it('renders action buttons with icons', () => {
+    const mockIcon = () => <span data-testid="mock-icon">Icon</span>;
+    const onClick = jest.fn();
+    const actions = [
+      { label: 'Save', icon: mockIcon, onClick },
+    ];
+
+    render(<AuthZTitle {...defaultProps} actions={actions} />);
+
+    const button = screen.getByRole('button', { name: 'Icon Save' });
+    expect(button).toBeInTheDocument();
+    expect(screen.getByTestId('mock-icon')).toBeInTheDocument();
+  });
+
+  it('renders ReactNode actions alongside button actions', () => {
+    const onClick = jest.fn();
+    const customAction = <div data-testid="custom-action">Custom Action</div>;
+    const actions = [
+      { label: 'Save', onClick },
+      customAction,
+    ];
+
+    render(<AuthZTitle {...defaultProps} actions={actions} />);
+
+    expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument();
+    expect(screen.getByTestId('custom-action')).toBeInTheDocument();
+  });
 });

src/authz-module/components/AuthZTitle.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ComponentType, isValidElement, ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 import {
   Breadcrumb, Col, Container, Row, Button, Badge,
@@ -11,6 +11,7 @@ interface BreadcrumbLink {
 
 interface Action {
   label: string;
+  icon?: ComponentType;
   onClick: () => void;
 }
 
@@ -19,7 +20,7 @@ export interface AuthZTitleProps {
   pageTitle: string;
   pageSubtitle: string | ReactNode;
   navLinks?: BreadcrumbLink[];
-  actions?: Action[];
+  actions?: (Action | ReactNode)[];
 }
 
 const AuthZTitle = ({
@@ -41,7 +42,22 @@ const AuthZTitle = ({
       <Col xs={12} md={4}>
         <div className="d-flex justify-content-md-end">
           {
-            actions.map(({ label, onClick }) => <Button key={`authz-header-action-${label}`} onClick={onClick}>{label}</Button>)
+            actions.map((action) => {
+              if (isValidElement(action)) {
+                return action;
+              }
+
+              const { label, icon, onClick } = action as Action;
+              return (
+                <Button
+                  key={`authz-header-action-${label}`}
+                  iconBefore={icon}
+                  onClick={onClick}
+                >
+                  {label}
+                </Button>
+              );
+            })
           }
         </div>
       </Col>

src/authz-module/constants.ts

@@ -2,3 +2,11 @@ export const ROUTES = {
   LIBRARIES_TEAM_PATH: '/libraries/:libraryId',
   LIBRARIES_USER_PATH: '/libraries/:libraryId/:username',
 };
+
+export enum RoleOperationErrorStatus {
+  USER_NOT_FOUND = 'user_not_found',
+  USER_ALREADY_HAS_ROLE = 'user_already_has_role',
+  USER_DOES_NOT_HAVE_ROLE = 'user_does_not_have_role',
+  ROLE_ASSIGNMENT_ERROR = 'role_assignment_error',
+  ROLE_REMOVAL_ERROR = 'role_removal_error',
+}

src/authz-module/data/api.ts

@@ -13,13 +13,30 @@ export type PermissionsByRole = {
   permissions: string[];
   userCount: number;
 };
+export interface PutAssignTeamMembersRoleResponse {
+  completed: { user: string; status: string }[];
+  errors: { userIdentifier: string; error: string }[];
+}
+
+export interface AssignTeamMembersRoleRequest {
+  users: string[];
+  role: string;
+  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);
 };
 
+export const assignTeamMembersRole = async (
+  data: AssignTeamMembersRoleRequest,
+): Promise<PutAssignTeamMembersRoleResponse> => {
+  const res = await getAuthenticatedHttpClient().put(getApiUrl('/api/authz/v1/roles/users/'), data);
+  return camelCaseObject(res.data);
+};
+
 // TODO: this should be replaced in the future with Console API
 export const getLibrary = async (libraryId: string): Promise<LibraryMetadata> => {
   const { data } = await getAuthenticatedHttpClient().get(getStudioApiUrl(`/api/libraries/v2/${libraryId}/`));

src/authz-module/data/hooks.test.tsx

@@ -2,7 +2,9 @@ import { ReactNode } from 'react';
 import { act, renderHook, waitFor } from '@testing-library/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { useLibrary, usePermissionsByRole, useTeamMembers } from './hooks';
+import {
+  useLibrary, usePermissionsByRole, useTeamMembers, useAssignTeamMembersRole,
+} from './hooks';
 
 jest.mock('@edx/frontend-platform/auth', () => ({
   getAuthenticatedHttpClient: jest.fn(),
@@ -155,4 +157,74 @@ describe('usePermissionsByRole', () => {
       expect(e).toEqual(new Error('Not found'));
     }
   });
+
+  describe('useAssignTeamMembersRole', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('successfully adds team members', async () => {
+      const mockResponse = {
+        completed: [
+          {
+            user: 'jdoe',
+            status: 'role_added',
+          },
+          {
+            user: '[email protected]',
+            status: 'already_has_role',
+          },
+        ],
+        errors: [],
+      };
+
+      getAuthenticatedHttpClient.mockReturnValue({
+        put: jest.fn().mockResolvedValue({ data: mockResponse }),
+      });
+
+      const { result } = renderHook(() => useAssignTeamMembersRole(), {
+        wrapper: createWrapper(),
+      });
+
+      const addTeamMemberData = {
+        scope: 'lib:123',
+        users: ['jdoe'],
+        role: 'author',
+      };
+
+      await act(async () => {
+        result.current.mutate({ data: addTeamMemberData });
+      });
+
+      await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+      expect(getAuthenticatedHttpClient).toHaveBeenCalled();
+      expect(result.current.data).toEqual(mockResponse);
+    });
+
+    it('handles error when adding team members fails', async () => {
+      getAuthenticatedHttpClient.mockReturnValue({
+        put: jest.fn().mockRejectedValue(new Error('Failed to add members')),
+      });
+
+      const { result } = renderHook(() => useAssignTeamMembersRole(), {
+        wrapper: createWrapper(),
+      });
+
+      const addTeamMemberData = {
+        scope: 'lib:123',
+        users: ['jdoe'],
+        role: 'author',
+      };
+
+      await act(async () => {
+        result.current.mutate({ data: addTeamMemberData });
+      });
+
+      await waitFor(() => expect(result.current.isError).toBe(true));
+
+      expect(getAuthenticatedHttpClient).toHaveBeenCalled();
+      expect(result.current.error).toEqual(new Error('Failed to add members'));
+    });
+  });
 });

src/authz-module/data/hooks.ts

@@ -1,7 +1,11 @@
-import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
+import {
+  useMutation, useQuery, useQueryClient, useSuspenseQuery,
+} from '@tanstack/react-query';
 import { appId } from '@src/constants';
 import { LibraryMetadata, TeamMember } from '@src/types';
 import {
+  assignTeamMembersRole,
+  AssignTeamMembersRoleRequest,
   getLibrary, getPermissionsByRole, getTeamMembers, PermissionsByRole,
 } from './api';
 
@@ -60,3 +64,23 @@ export const useLibrary = (libraryId: string) => useSuspenseQuery<LibraryMetadat
   queryFn: () => getLibrary(libraryId),
   retry: false,
 });
+
+/**
+ * React Query hook to add new team members to a specific scope or manage the corresponding roles.
+ * It provides a mutation function to add users with specified roles to the team or assign new roles.
+ *
+ * @example
+ * const { mutate: assignTeamMembersRole } = useAssignTeamMembersRole();
+ * assignTeamMembersRole({ data: { libraryId: 'lib:123', users: ['jdoe'], role: 'editor' } });
+ */
+export const useAssignTeamMembersRole = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ data }: {
+      data: AssignTeamMembersRoleRequest
+    }) => assignTeamMembersRole(data),
+    onSettled: (_data, _error, { data: { scope } }) => {
+      queryClient.invalidateQueries({ queryKey: authzQueryKeys.teamMembers(scope) });
+    },
+  });
+};

src/authz-module/index.scss

@@ -34,4 +34,13 @@
       height: var(--pgn-size-icon-xs);
     }
   }
+}
+
+
+.toast-container {
+  // Ensure toast appears above modal
+  z-index: 1000;
+  // Move toast to the right 
+  left: auto;
+  right: var(--pgn-spacing-toast-container-gutter-lg);
 }

src/authz-module/libraries-manager/LibrariesTeamManager.test.tsx

@@ -24,6 +24,11 @@ jest.mock('./components/TeamTable', () => ({
   default: () => <div data-testid="team-table">MockTeamTable</div>,
 }));
 
+jest.mock('./components/AddNewTeamMemberModal', () => ({
+  __esModule: true,
+  AddNewTeamMemberTrigger: () => <div data-testid="add-team-member-trigger">MockAddNewTeamMemberTrigger</div>,
+}));
+
 describe('LibrariesTeamManager', () => {
   beforeEach(() => {
     initializeMockApp({
@@ -63,5 +68,8 @@ describe('LibrariesTeamManager', () => {
 
     // TeamTable is rendered
     expect(screen.getByTestId('team-table')).toBeInTheDocument();
+
+    // AddNewTeamMemberTrigger is rendered
+    expect(screen.getByTestId('add-team-member-trigger')).toBeInTheDocument();
   });
 });

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

@@ -1,15 +1,18 @@
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Tab, Tabs } from '@openedx/paragon';
 import { useLibrary } from '@src/authz-module/data/hooks';
+import { useLocation } from 'react-router-dom';
 import TeamTable from './components/TeamTable';
 import AuthZLayout from '../components/AuthZLayout';
 import { useLibraryAuthZ } from './context';
+import { AddNewTeamMemberTrigger } from './components/AddNewTeamMemberModal';
 
 import messages from './messages';
 
 const LibrariesTeamManager = () => {
   const intl = useIntl();
-  const { libraryId } = useLibraryAuthZ();
+  const { hash } = useLocation();
+  const { libraryId, canManageTeam } = useLibraryAuthZ();
   const { data: library } = useLibrary(libraryId);
   const rootBradecrumb = intl.formatMessage(messages['library.authz.breadcrumb.root']) || '';
   const pageTitle = intl.formatMessage(messages['library.authz.manage.page.title']);
@@ -21,11 +24,15 @@ const LibrariesTeamManager = () => {
         activeLabel={pageTitle}
         pageTitle={pageTitle}
         pageSubtitle={libraryId}
-        actions={[]}
+        actions={
+          canManageTeam
+            ? [<AddNewTeamMemberTrigger libraryId={libraryId} />]
+            : []
+        }
       >
         <Tabs
           variant="tabs"
-          defaultActiveKey="team"
+          defaultActiveKey={hash ? 'permissions' : 'team'}
           className="bg-light-100 px-5"
         >
           <Tab eventKey="team" title={intl.formatMessage(messages['library.authz.tabs.team'])} className="p-5">
@@ -34,7 +41,7 @@ const LibrariesTeamManager = () => {
           <Tab eventKey="roles" title={intl.formatMessage(messages['library.authz.tabs.roles'])}>
             Role tab.
           </Tab>
-          <Tab eventKey="permissions" title={intl.formatMessage(messages['library.authz.tabs.permissions'])}>
+          <Tab id="libraries-permissions-tab" eventKey="permissions" title={intl.formatMessage(messages['library.authz.tabs.permissions'])}>
             Permissions tab.
           </Tab>
         </Tabs>