Course team main content

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 '@src/courseTeam/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,28 @@
+import { useIntl } from '@openedx/frontend-base';
+import { Button, Tab, Tabs } from '@openedx/paragon';
+import { Plus } from '@openedx/paragon/icons';
+import MembersContent from '@src/courseTeam/components/MembersContent';
+import RolesContent from '@src/courseTeam/components/RolesContent';
+import messages from '@src/courseTeam/messages';
+
 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 iconBefore={Plus} 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 MembersContent from '@src/courseTeam/components/MembersContent';
+import { useTeamMembers } from '@src/courseTeam/data/apiHook';
+import messages from '@src/courseTeam/messages';
+
+const courseId = 'course-v1:edX+DemoX+Demo_Course';
+
+jest.mock('@src/courseTeam/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,72 @@
+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 { useTeamMembers } from '@src/courseTeam/data/apiHook';
+import messages from '@src/courseTeam/messages';
+
+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,
+      }));
+    }
+  }, [filters.page]);
+
+  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.tsx

@@ -0,0 +1,9 @@
+const RolesContent = () => {
+  return (
+    <div className="mt-4">
+      Roles content goes here.
+    </div>
+  );
+};
+
+export default RolesContent;

src/courseTeam/data/api.test.ts

@@ -0,0 +1,79 @@
+import { getAuthenticatedHttpClient } from '@openedx/frontend-base';
+import { getTeamMembers, getRoles } from '@src/courseTeam/data/api';
+
+jest.mock('@openedx/frontend-base', () => ({
+  ...jest.requireActual('@openedx/frontend-base'),
+  getAuthenticatedHttpClient: jest.fn(),
+}));
+
+jest.mock('../../data/api', () => ({
+  getApiBaseUrl: jest.fn().mockReturnValue(''),
+}));
+
+const httpClientMock = {
+  get: jest.fn(),
+};
+
+beforeEach(() => {
+  (getAuthenticatedHttpClient as jest.Mock).mockReturnValue(httpClientMock);
+});
+
+describe('courseTeam API', () => {
+  describe('getTeamMembers', () => {
+    it('should call the correct endpoint to get team members', async () => {
+      const courseId = 'course-v1:edX+DemoX+Demo_Course';
+      const params = { page: 0, pageSize: 10 };
+      httpClientMock.get.mockResolvedValue({ data: { results: [], count: 0 } });
+
+      await getTeamMembers(courseId, params);
+
+      const expectedUrl = `/api/instructor/v2/courses/${courseId}/team?page=1&page_size=10`;
+      expect(httpClientMock.get).toHaveBeenCalledWith(expectedUrl);
+    });
+
+    it('should include email_or_username in query params if provided', async () => {
+      const courseId = 'course-v1:edX+DemoX+Demo_Course';
+      const params = { page: 0, pageSize: 10, emailOrUsername: 'test@example.com' };
+      httpClientMock.get.mockResolvedValue({ data: { results: [], count: 0 } });
+
+      await getTeamMembers(courseId, params);
+
+      const expectedUrl = `/api/instructor/v2/courses/${courseId}/team?page=1&page_size=10&email_or_username=test%40example.com`;
+      expect(httpClientMock.get).toHaveBeenCalledWith(expectedUrl);
+    });
+
+    it('should include role in query params if provided', async () => {
+      const courseId = 'course-v1:edX+DemoX+Demo_Course';
+      const params = { page: 0, pageSize: 10, role: 'instructor' };
+      httpClientMock.get.mockResolvedValue({ data: { results: [], count: 0 } });
+
+      await getTeamMembers(courseId, params);
+
+      const expectedUrl = `/api/instructor/v2/courses/${courseId}/team?page=1&page_size=10&role=instructor`;
+      expect(httpClientMock.get).toHaveBeenCalledWith(expectedUrl);
+    });
+  });
+
+  describe('getRoles', () => {
+    it('should call the correct endpoint to get roles', async () => {
+      const courseId = 'course-v1:edX+DemoX+Demo_Course';
+      httpClientMock.get.mockResolvedValue({ data: { roles: [] } });
+
+      await getRoles(courseId);
+
+      const expectedUrl = `/api/instructor/v2/courses/${courseId}/team/roles`;
+      expect(httpClientMock.get).toHaveBeenCalledWith(expectedUrl);
+    });
+
+    it('should return the roles from the response', async () => {
+      const courseId = 'course-v1:edX+DemoX+Demo_Course';
+      const snakeCaseData = { results: [{ role: 'instructor', display_name: 'Instructor' }, { role: 'staff', display_name: 'Staff' }] };
+      const data = { results: [{ role: 'instructor', displayName: 'Instructor' }, { role: 'staff', displayName: 'Staff' }] };
+      httpClientMock.get.mockResolvedValue({ data: snakeCaseData });
+
+      const result = await getRoles(courseId);
+
+      expect(result).toEqual(data);
+    });
+  });
+});