Course team - roles tab

src/courseTeam/CourseTeamPage.test.tsx

@@ -0,0 +1,60 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderWithIntl } from '@src/testUtils';
+import CourseTeamPage from './CourseTeamPage';
+
+// Mock the child components, each component should have its own test suite
+jest.mock('./components/MembersContent', () => {
+  return function MembersContent() {
+    return <div>Members Content</div>;
+  };
+});
+
+jest.mock('./components/RolesContent', () => {
+  return function RolesContent() {
+    return <div>Roles Content</div>;
+  };
+});
+
+describe('CourseTeamPage', () => {
+  it('renders the course team title', () => {
+    renderWithIntl(<CourseTeamPage />);
+    expect(screen.getByRole('heading', { level: 3 })).toBeInTheDocument();
+  });
+
+  it('renders the add team member button', () => {
+    renderWithIntl(<CourseTeamPage />);
+    expect(screen.getByRole('button', { name: /add team member/i })).toBeInTheDocument();
+  });
+
+  it('renders both tabs', () => {
+    renderWithIntl(<CourseTeamPage />);
+    expect(screen.getByRole('tab', { name: /members/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /roles/i })).toBeInTheDocument();
+  });
+
+  it('renders MembersContent by default', () => {
+    renderWithIntl(<CourseTeamPage />);
+    expect(screen.getByText('Members Content')).toBeInTheDocument();
+  });
+
+  it('has correct CSS classes on title', () => {
+    renderWithIntl(<CourseTeamPage />);
+    const title = screen.getByRole('heading', { level: 3 });
+    expect(title).toHaveClass('text-primary-700', 'mb-0');
+  });
+
+  it('has primary variant on add button', () => {
+    renderWithIntl(<CourseTeamPage />);
+    const button = screen.getByRole('button', { name: /add team member/i });
+    expect(button).toHaveClass('btn-primary');
+  });
+
+  it('renders RolesContent when Roles tab is selected', async () => {
+    renderWithIntl(<CourseTeamPage />);
+    const rolesTab = screen.getByRole('tab', { name: /roles/i });
+    const user = userEvent.setup();
+    await user.click(rolesTab);
+    expect(screen.getByText('Roles Content')).toBeInTheDocument();
+  });
+});

src/courseTeam/CourseTeamPage.tsx

@@ -1,8 +1,27 @@
+import { useIntl } from '@openedx/frontend-base';
+import messages from './messages';
+import { Button, Tab, Tabs } from '@openedx/paragon';
+import MembersContent from './components/MembersContent';
+import RolesContent from './components/RolesContent';
+
 const CourseTeamPage = () => {
+  const intl = useIntl();
+
   return (
-    <div>
-      <h3>Course Team</h3>
-    </div>
+    <>
+      <div className="d-flex justify-content-between align-items-center mb-3">
+        <h3 className="text-primary-700 mb-0">{intl.formatMessage(messages.courseTeamTitle)}</h3>
+        <Button variant="primary">+ {intl.formatMessage(messages.addTeamMember)}</Button>
+      </div>
+      <Tabs>
+        <Tab eventKey="members" title={intl.formatMessage(messages.membersTab)}>
+          <MembersContent />
+        </Tab>
+        <Tab eventKey="roles" title={intl.formatMessage(messages.rolesTab)}>
+          <RolesContent />
+        </Tab>
+      </Tabs>
+    </>
   );
 };
 

src/courseTeam/components/MembersContent.test.tsx

@@ -0,0 +1,128 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderWithIntl } from '@src/testUtils';
+import { useTeamMembers } from '../data/apiHook';
+import MembersContent from './MembersContent';
+import messages from '../messages';
+
+const courseId = 'course-v1:edX+DemoX+Demo_Course';
+
+jest.mock('../data/apiHook', () => ({
+  useTeamMembers: jest.fn(),
+}));
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({ courseId: courseId }),
+}));
+
+const mockTeamMembers = [
+  { username: 'user1', email: 'user1@example.com', role: 'Admin' },
+  { username: 'user2', email: 'user2@example.com', role: 'Staff' },
+];
+
+const renderComponent = () => renderWithIntl(<MembersContent />);
+
+describe('MembersContent', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders loading state correctly', () => {
+    (useTeamMembers as jest.Mock).mockReturnValue({
+      data: { results: [], numPages: 1, count: 0 },
+      isLoading: true,
+    });
+
+    renderComponent();
+    expect(screen.getByRole('table')).toBeInTheDocument();
+  });
+
+  it('renders team members data correctly', () => {
+    (useTeamMembers as jest.Mock).mockReturnValue({
+      data: { results: mockTeamMembers, numPages: 1, count: 2 },
+      isLoading: false,
+    });
+
+    renderComponent();
+
+    expect(screen.getByText(mockTeamMembers[0].username)).toBeInTheDocument();
+    expect(screen.getByText(mockTeamMembers[0].email)).toBeInTheDocument();
+    expect(screen.getByText(mockTeamMembers[0].role)).toBeInTheDocument();
+    expect(screen.getByText(mockTeamMembers[1].username)).toBeInTheDocument();
+    expect(screen.getByText(mockTeamMembers[1].email)).toBeInTheDocument();
+    expect(screen.getByText(mockTeamMembers[1].role)).toBeInTheDocument();
+  });
+
+  it('renders empty state when no team members', () => {
+    (useTeamMembers as jest.Mock).mockReturnValue({
+      data: { results: [], numPages: 1, count: 0 },
+      isLoading: false,
+    });
+
+    renderComponent();
+    expect(screen.getByText(messages.noTeamMembers.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('calls useTeamMembers with correct parameters', () => {
+    (useTeamMembers as jest.Mock).mockReturnValue({
+      data: { results: [], numPages: 1, count: 0 },
+      isLoading: false,
+    });
+
+    renderComponent();
+
+    expect(useTeamMembers).toHaveBeenCalledWith(courseId, {
+      page: 0,
+      emailOrUsername: '',
+      role: '',
+      pageSize: 25,
+    });
+  });
+
+  it('handles pagination correctly', async () => {
+    (useTeamMembers as jest.Mock).mockReturnValue({
+      data: { results: mockTeamMembers, numPages: 3, count: 50 },
+      isLoading: false,
+    });
+
+    renderComponent();
+
+    const nextPageButton = screen.getByLabelText(/next/i);
+    const user = userEvent.setup();
+    await user.click(nextPageButton);
+
+    expect(useTeamMembers).toHaveBeenLastCalledWith(courseId, {
+      page: 1,
+      emailOrUsername: '',
+      role: '',
+      pageSize: 25,
+    });
+  });
+
+  it('renders action buttons for each row', () => {
+    (useTeamMembers as jest.Mock).mockReturnValue({
+      data: { results: mockTeamMembers, numPages: 1, count: 2 },
+      isLoading: false,
+    });
+
+    renderComponent();
+
+    const editButtons = screen.getAllByText(messages.edit.defaultMessage);
+    expect(editButtons).toHaveLength(2);
+  });
+
+  it('renders table headers correctly', () => {
+    (useTeamMembers as jest.Mock).mockReturnValue({
+      data: { results: mockTeamMembers, numPages: 1, count: 2 },
+      isLoading: false,
+    });
+
+    renderComponent();
+
+    expect(screen.getByText(messages.username.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByText(messages.email.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByText(messages.role.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByText(messages.actions.defaultMessage)).toBeInTheDocument();
+  });
+});

src/courseTeam/components/MembersContent.tsx

@@ -0,0 +1,73 @@
+import { useState, useCallback, useMemo } from 'react';
+import { useParams } from 'react-router-dom';
+import { useIntl } from '@openedx/frontend-base';
+import { Button, DataTable } from '@openedx/paragon';
+import messages from '../messages';
+import { useTeamMembers } from '../data/apiHook';
+
+const TEAM_MEMBERS_PAGE_SIZE = 25;
+
+const MembersContent = () => {
+  const intl = useIntl();
+  const { courseId = '' } = useParams<{ courseId: string }>();
+  const [filters, setFilters] = useState({ page: 0, emailOrUsername: '', role: '' });
+  const { data: { results: teamMembers = [], numPages = 1, count = 0 } = {}, isLoading = false } = useTeamMembers(courseId, { ...filters, pageSize: TEAM_MEMBERS_PAGE_SIZE });
+
+  const tableColumns = useMemo(() => [
+    { accessor: 'username', Header: intl.formatMessage(messages.username) },
+    { accessor: 'email', Header: intl.formatMessage(messages.email) },
+    { accessor: 'role', Header: intl.formatMessage(messages.role) },
+  ], [intl]);
+
+  const additionalColumns = useMemo(() => [{
+    id: 'actions',
+    Header: intl.formatMessage(messages.actions),
+    Cell: () => (
+      <Button variant="link" size="inline">
+        {intl.formatMessage(messages.edit)}
+      </Button>
+    )
+  }], [intl]);
+
+  const handleFetchData = useCallback(({ pageIndex, filters: tableFilters }: { pageIndex: number, filters: { id: string, value: string }[] }) => {
+    // Filters will be handled in a future iteration, for now we will just update pagination
+    console.log(pageIndex, tableFilters);
+    if (pageIndex !== filters.page) {
+      setFilters(prevFilters => ({
+        ...prevFilters,
+        page: pageIndex,
+      }));
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const tableState = useMemo(() => ({
+    pageIndex: filters.page,
+    pageSize: TEAM_MEMBERS_PAGE_SIZE,
+  }), [filters.page]);
+
+  return (
+    <DataTable
+      additionalColumns={additionalColumns}
+      columns={tableColumns}
+      data={teamMembers}
+      fetchData={handleFetchData}
+      state={tableState}
+      isLoading={isLoading}
+      isPaginated
+      itemCount={count}
+      manualFilters
+      manualPagination
+      pageSize={TEAM_MEMBERS_PAGE_SIZE}
+      pageCount={numPages}
+      RowStatusComponent={() => null}
+    >
+      <DataTable.TableControlBar />
+      <DataTable.Table />
+      <DataTable.EmptyTable content={intl.formatMessage(messages.noTeamMembers)} />
+      <DataTable.TableFooter />
+    </DataTable>
+  );
+};
+
+export default MembersContent;

src/courseTeam/components/RolesContent.test.tsx

@@ -0,0 +1,45 @@
+import { screen } from '@testing-library/react';
+import { renderWithIntl } from '@src/testUtils';
+import RolesContent, { rolesOrder } from './RolesContent';
+import messages from '../messages';
+import { useRoles } from '../data/apiHook';
+
+jest.mock('../data/apiHook', () => ({
+  useRoles: jest.fn(),
+}));
+
+const mockRoles = rolesOrder.map((role) => ({ id: role, name: messages[role].defaultMessage }));
+
+describe('RolesContent', () => {
+  it('renders all roles in the correct order with their descriptions', () => {
+    (useRoles as jest.Mock).mockReturnValue({ data: mockRoles });
+    renderWithIntl(<RolesContent />);
+
+    rolesOrder.forEach((role) => {
+      expect(screen.getByText(messages[role].defaultMessage)).toBeInTheDocument();
+      expect(screen.getByText(messages[`${role}Description`].defaultMessage)).toBeInTheDocument();
+    });
+  });
+
+  it('does not render CCX Coach role when isCCXCoachEnabled is false', () => {
+    (useRoles as jest.Mock).mockReturnValue({ data: mockRoles });
+    renderWithIntl(<RolesContent />);
+    expect(screen.queryByText(messages.ccxCoach.defaultMessage)).not.toBeInTheDocument();
+    expect(screen.queryByText(messages.ccxCoachDescription.defaultMessage)).not.toBeInTheDocument();
+  });
+
+  it('renders correct number of role sections', () => {
+    (useRoles as jest.Mock).mockReturnValue({ data: mockRoles });
+    renderWithIntl(<RolesContent />);
+    // There are 9 roles in rolesOrder
+    expect(screen.getAllByRole('heading', { level: 4 })).toHaveLength(9);
+  });
+
+  it('renders CCX Coach role when isCCXCoachEnabled is true', () => {
+    (useRoles as jest.Mock).mockReturnValue({ data: [...mockRoles, { id: 'ccxCoach', name: messages.ccxCoach.defaultMessage }] });
+
+    renderWithIntl(<RolesContent />);
+    expect(screen.getByText(messages.ccxCoach.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByText(messages.ccxCoachDescription.defaultMessage)).toBeInTheDocument();
+  });
+});

src/courseTeam/components/RolesContent.tsx

@@ -0,0 +1,46 @@
+import { useIntl } from '@openedx/frontend-base';
+import messages from '../messages';
+import { useParams } from 'react-router-dom';
+import { useRoles } from '../data/apiHook';
+
+export const rolesOrder = [
+  'staff',
+  'limitedStaff',
+  'admin',
+  'betaTesters',
+  'courseDataResearchers',
+  'discussionAdmin',
+  'discussionModerator',
+  'groupCommunityTA',
+  'communityTA'
+];
+
+const RolesContent = () => {
+  const intl = useIntl();
+  const { courseId = '' } = useParams<{ courseId: string }>();
+  const { data: roles = [] } = useRoles(courseId);
+  const isCCXCoachEnabled = roles.find((role) => role.id === 'ccxCoach');
+
+  return (
+    <div className="mt-4">
+      {
+        rolesOrder.map((role) => (
+          <div key={role} className="mb-4">
+            <h4 className="text-primary-500">{intl.formatMessage(messages[role])}</h4>
+            <p className="text-gray-700">{intl.formatMessage(messages[`${role}Description`])}</p>
+          </div>
+        ))
+      }
+      {
+        isCCXCoachEnabled && (
+          <div className="mb-4">
+            <h4 className="text-primary-500">{intl.formatMessage(messages.ccxCoach)}</h4>
+            <p className="text-gray-700">{intl.formatMessage(messages.ccxCoachDescription)}</p>
+          </div>
+        )
+      }
+    </div>
+  );
+};
+
+export default RolesContent;