feat: manage cohorts

Author: diana-villalvazo-wgu

src/cohorts/components/EnabledCohortsView.test.tsx

@@ -16,6 +16,7 @@ jest.mock('../data/apiHook', () => ({
   useCohorts: jest.fn(),
   useContentGroupsData: jest.fn(),
   useCreateCohort: () => ({ mutate: jest.fn() }),
+  useAddLearnersToCohort: () => ({ mutate: jest.fn() }),
 }));
 
 const mockCohorts = [

src/cohorts/components/ManageLearners.test.tsx

@@ -0,0 +1,86 @@
+import { screen, fireEvent } from '@testing-library/react';
+import ManageLearners from './ManageLearners';
+import { useParams } from 'react-router-dom';
+import { useAddLearnersToCohort } from '../data/apiHook';
+import { useCohortContext } from './CohortContext';
+import messages from '../messages';
+import { renderWithIntl } from '../../testUtils';
+
+jest.mock('react-router-dom', () => ({
+  useParams: jest.fn(),
+}));
+
+jest.mock('../data/apiHook', () => ({
+  useAddLearnersToCohort: jest.fn(),
+}));
+
+jest.mock('./CohortContext', () => ({
+  useCohortContext: jest.fn(),
+}));
+
+describe('ManageLearners', () => {
+  const mutateMock = jest.fn();
+
+  beforeEach(() => {
+    (useParams as jest.Mock).mockReturnValue({ courseId: 'course-v1:edX+Test+2024' });
+    (useCohortContext as jest.Mock).mockReturnValue({ selectedCohort: { id: 123 } });
+    (useAddLearnersToCohort as jest.Mock).mockReturnValue({ mutate: mutateMock });
+    mutateMock.mockReset();
+  });
+
+  it('render all static texts', () => {
+    renderWithIntl(<ManageLearners />);
+    expect(screen.getByRole('heading', { name: messages.addLearnersTitle.defaultMessage })).toBeInTheDocument();
+    expect(screen.getByText(messages.addLearnersSubtitle.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByText(messages.addLearnersInstructions.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByPlaceholderText(messages.learnersExample.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByText(messages.addLearnersFootnote.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /\+ Add Learners/i })).toBeInTheDocument();
+  });
+
+  it('updates textarea value and calls mutate on button click', () => {
+    renderWithIntl(<ManageLearners />);
+    const textarea = screen.getByPlaceholderText(messages.learnersExample.defaultMessage);
+    fireEvent.change(textarea, { target: { value: '[email protected],[email protected]' } });
+    fireEvent.click(screen.getByRole('button', { name: /\+ Add Learners/i }));
+    expect(mutateMock).toHaveBeenCalledWith(
+      ['[email protected]', '[email protected]'],
+      expect.objectContaining({
+        onSuccess: expect.any(Function),
+        onError: expect.any(Function),
+      })
+    );
+  });
+
+  it('handles empty input gracefully', () => {
+    renderWithIntl(<ManageLearners />);
+    fireEvent.click(screen.getByRole('button', { name: /\+ Add Learners/i }));
+    expect(mutateMock).toHaveBeenCalledWith(
+      [''],
+      expect.objectContaining({
+        onSuccess: expect.any(Function),
+        onError: expect.any(Function),
+      })
+    );
+  });
+
+  it('calls onError if mutate fails', () => {
+    renderWithIntl(<ManageLearners />);
+    const textarea = screen.getByPlaceholderText(messages.learnersExample.defaultMessage);
+    fireEvent.change(textarea, { target: { value: '[email protected]' } });
+    fireEvent.click(screen.getByRole('button', { name: /\+ Add Learners/i }));
+
+    const callArgs = mutateMock.mock.calls[0][1];
+    const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    callArgs.onError('error!');
+    expect(consoleErrorSpy).toHaveBeenCalledWith('error!');
+    consoleErrorSpy.mockRestore();
+  });
+
+  it('uses default cohort id 0 if selectedCohort is missing', () => {
+    (useCohortContext as jest.Mock).mockReturnValue({ selectedCohort: undefined });
+    renderWithIntl(<ManageLearners />);
+    fireEvent.click(screen.getByRole('button', { name: /\+ Add Learners/i }));
+    expect(mutateMock).toHaveBeenCalled();
+  });
+});

src/cohorts/components/ManageLearners.tsx

@@ -1,5 +1,39 @@
+import { useState } from 'react';
+import { useIntl } from '@openedx/frontend-base';
+import { Button, FormControl } from '@openedx/paragon';
+import { useParams } from 'react-router-dom';
+import { useAddLearnersToCohort } from '../data/apiHook';
+import messages from '../messages';
+import { useCohortContext } from './CohortContext';
+
 const ManageLearners = () => {
-  return <div>Manage Learners Component</div>;
+  const { courseId = '' } = useParams();
+  const intl = useIntl();
+  const { selectedCohort } = useCohortContext();
+  const { mutate: addLearnersToCohort } = useAddLearnersToCohort(courseId, selectedCohort?.id ? Number(selectedCohort.id) : 0);
+  const [users, setUsers] = useState('');
+
+  const handleAddLearners = () => {
+    addLearnersToCohort(users.split(','), {
+      onSuccess: () => {
+        // Handle success (e.g., show a success message)
+      },
+      onError: (error) => {
+        console.error(error);
+      }
+    });
+  };
+
+  return (
+    <div className="mx-4 my-3.5">
+      <h3 className="text-primary-700">{intl.formatMessage(messages.addLearnersTitle)}</h3>
+      <p className="x-small mb-2.5">{intl.formatMessage(messages.addLearnersSubtitle)}</p>
+      <p className="mb-2 text-primary-500">{intl.formatMessage(messages.addLearnersInstructions)}</p>
+      <FormControl as="textarea" className="mb-2" placeholder={intl.formatMessage(messages.learnersExample)} onChange={(e) => setUsers(e.target.value)} />
+      <p className="x-small mb-2.5">{intl.formatMessage(messages.addLearnersFootnote)}</p>
+      <Button variant="primary" className="mt-2" onClick={handleAddLearners}>+ {intl.formatMessage(messages.addLearnersLabel)}</Button>
+    </div>
+  );
 };
 
 export default ManageLearners;

src/cohorts/data/api.test.ts

@@ -59,7 +59,7 @@ describe('getCohorts', () => {
 
     expect(getAppConfig).toHaveBeenCalledWith(appId);
     expect(mockHttpClient.get).toHaveBeenCalledWith(
-      `${mockBaseUrl}/api/cohorts/v1/courses/${courseId}/cohorts/`
+      `${mockBaseUrl}/api/cohorts/v1/courses/${courseId}/cohorts`
     );
     expect(camelCaseObject).toHaveBeenCalledWith(mockData);
     expect(result).toEqual(mockData);

src/cohorts/data/api.ts

@@ -9,7 +9,7 @@ export const getCohortStatus = async (courseId: string) => {
 };
 
 export const getCohorts = async (courseId: string) => {
-  const url = `${getApiBaseUrl()}/api/cohorts/v1/courses/${courseId}/cohorts/`;
+  const url = `${getApiBaseUrl()}/api/cohorts/v1/courses/${courseId}/cohorts`;
   const { data } = await getAuthenticatedHttpClient().get(url);
   return camelCaseObject(data);
 };
@@ -21,14 +21,20 @@ export const toggleCohorts = async (courseId: string, isCohorted: boolean) => {
 };
 
 export const createCohort = async (courseId: string, cohortDetails: Partial<CohortData>) => {
-  const url = `${getApiBaseUrl()}/api/cohorts/v1/courses/${courseId}/cohorts/`;
+  const url = `${getApiBaseUrl()}/api/cohorts/v1/courses/${courseId}/cohorts`;
   const cohortDetailsSnakeCase = snakeCaseObject(cohortDetails);
   const { data } = await getAuthenticatedHttpClient().post(url, cohortDetailsSnakeCase);
   return camelCaseObject(data);
 };
 
 export const getContentGroups = async (courseId: string) => {
-  const url = `${getApiBaseUrl()}/api/instructor/v1/courses/${courseId}/content_groups/`;
+  const url = `${getApiBaseUrl()}/api/instructor/v1/courses/${courseId}/content_groups`;
   const { data } = await getAuthenticatedHttpClient().get(url);
   return camelCaseObject(data);
 };
+
+export const addLearnersToCohort = async (courseId: string, cohortId: number, users: string[]) => {
+  const url = `${getApiBaseUrl()}/api/cohorts/v1/courses/${courseId}/cohorts/${cohortId}/users`;
+  const { data } = await getAuthenticatedHttpClient().post(url, { users });
+  return camelCaseObject(data);
+};

src/cohorts/data/apiHook.ts

@@ -1,5 +1,5 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { getCohorts, getCohortStatus, getContentGroups, toggleCohorts, createCohort } from './api';
+import { getCohorts, getCohortStatus, getContentGroups, toggleCohorts, createCohort, addLearnersToCohort } from './api';
 import { cohortsQueryKeys } from './queryKeys';
 import { CohortData } from '../components/CohortContext';
 
@@ -45,3 +45,13 @@ export const useContentGroupsData = (courseId: string) => (
     queryFn: () => getContentGroups(courseId),
   })
 );
+
+export const useAddLearnersToCohort = (courseId: string, cohortId: number) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (users: string[]) => addLearnersToCohort(courseId, cohortId, users),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: cohortsQueryKeys.list(courseId) });
+    },
+  });
+};

src/cohorts/messages.ts

@@ -135,7 +135,37 @@ const messages = defineMessages({
     id: 'instruct.cohorts.studentsOnCohort',
     defaultMessage: '(contains {users} students)',
     description: 'Label showing the number of students on this cohort'
-  }
+  },
+  addLearnersTitle: {
+    id: 'instruct.cohorts.addLearnersTitle',
+    defaultMessage: 'Add Learners to this cohort',
+    description: 'Title for the add learners section'
+  },
+  addLearnersSubtitle: {
+    id: 'instruct.cohorts.addLearnersSubtitle',
+    defaultMessage: 'Note: Learners can be in only one cohort. Adding learners to this group overrides any previous group assignment.',
+    description: 'Subtitle for the add learners section'
+  },
+  addLearnersInstructions: {
+    id: 'instruct.cohorts.addLearnersInstructions',
+    defaultMessage: 'Enter email addresses and/or usernames, separated by new lines or commas, for the learners you want to add.*',
+    description: 'Instructions for adding learners to a cohort'
+  },
+  addLearnersFootnote: {
+    id: 'instruct.cohorts.addLearnersFootnote',
+    defaultMessage: 'You will not receive notification for emails that bounce, so double-check your spelling.',
+    description: 'Footnote for adding learners to a cohort'
+  },
+  learnersExample: {
+    id: 'instruct.cohorts.learnersExample',
+    defaultMessage: 'e.g. [email protected], JaneDoe, [email protected]',
+    description: 'Placeholder for the learners example'
+  },
+  addLearnersLabel: {
+    id: 'instruct.cohorts.addLearnersLabel',
+    defaultMessage: 'Add Learners',
+    description: 'Label for the add learners button'
+  },
 });
 
 export default messages;