feat: add/unenroll learners

Author: diana-villalvazo-wgu

src/enrollments/EnrollmentsPage.tsx

@@ -6,11 +6,13 @@ import messages from './messages';
 import EnrollmentsList from './components/EnrollmentsList';
 import EnrollmentStatusModal from './components/EnrollmentStatusModal';
 import UnenrollModal from './components/UnenrollModal';
+import EnrollLearnersModal from './components/EnrollLearnersModal';
 import { Learner } from './types';
 
 const EnrollmentsPage = () => {
   const intl = useIntl();
   const [isEnrollmentStatusModalOpen, setIsEnrollmentStatusModalOpen] = useState(false);
+  const [isEnrollLearnersModalOpen, setIsEnrollLearnersModalOpen] = useState(false);
   const [isUnenrollModalOpen, setIsUnenrollModalOpen] = useState(false);
   const [selectedLearner, setSelectedLearner] = useState<Learner | null>(null);
 
@@ -32,6 +34,10 @@ const EnrollmentsPage = () => {
     setIsEnrollmentStatusModalOpen(false);
   };
 
+  const handleEnrollLearners = () => {
+    setIsEnrollLearnersModalOpen(true);
+  };
+
   return (
     <div className="my-4.5 mx-4">
       <div className="d-flex justify-content-between align-items-center">
@@ -44,12 +50,13 @@ const EnrollmentsPage = () => {
             onClick={handleMoreButton}
           />
           <Button variant="outline-primary">+ {intl.formatMessage(messages.addBetaTesters)}</Button>
-          <Button>+ {intl.formatMessage(messages.enrollLearners)}</Button>
+          <Button onClick={handleEnrollLearners}>+ {intl.formatMessage(messages.enrollLearners)}</Button>
         </ActionRow>
       </div>
       <EnrollmentsList onUnenroll={handleUnenroll} />
       <EnrollmentStatusModal isOpen={isEnrollmentStatusModalOpen} onClose={handleCloseEnrollmentStatusModal} />
       <UnenrollModal isOpen={isUnenrollModalOpen} learner={selectedLearner} onClose={handleUnenrollModalClose} />
+      <EnrollLearnersModal isOpen={isEnrollLearnersModalOpen} onClose={() => setIsEnrollLearnersModalOpen(false)} onEnrollSuccess={() => {}} />
     </div>
   );
 };

src/enrollments/components/EnrollLearnersModal.tsx

@@ -0,0 +1,73 @@
+import { useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useIntl } from '@openedx/frontend-base';
+import { Button, FormControl, Alert, ModalDialog } from '@openedx/paragon';
+import messages from '../messages';
+import { useEnrollLearners } from '../data/apiHook';
+import { FormCheckbox, FormCheckboxSet } from '@openedx/paragon/dist/Form';
+
+export interface EnrollLearnersModalProps {
+  isOpen: boolean,
+  onClose: () => void,
+  onEnrollSuccess: () => void,
+}
+
+const EnrollLearnersModal = ({ isOpen, onClose, onEnrollSuccess }: EnrollLearnersModalProps) => {
+  const intl = useIntl();
+  const { courseId = '' } = useParams<{ courseId: string }>();
+  const { mutate: enrollLearners } = useEnrollLearners(courseId);
+  const [isEnrolling, setIsEnrolling] = useState(false);
+  const [emails, setEmails] = useState('');
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  const handleEnroll = () => {
+    setIsEnrolling(true);
+    setErrorMessage(null);
+    const emailList = emails.split(',').map(email => email.trim()).filter(email => email);
+
+    enrollLearners(emailList, {
+      onSuccess: () => {
+        setIsEnrolling(false);
+        onEnrollSuccess();
+        onClose();
+      },
+      onError: (error) => {
+        setIsEnrolling(false);
+        // setErrorMessage(intl.formatMessage(messages.enrollLearnersError));
+        console.error(error);
+      }
+    });
+  };
+
+  return (
+    <ModalDialog isOpen={isOpen} onClose={onClose} isOverflowVisible={false} title={intl.formatMessage(messages.enrollLearners)}>
+      <ModalDialog.Header className="border-light-700 border-bottom">
+        <h3 className="text-primary-500">{intl.formatMessage(messages.enrollLearners)}</h3>
+      </ModalDialog.Header>
+      <ModalDialog.Body className="py-4">
+        <p className="text-gray-700 x-small mb-2">{intl.formatMessage(messages.enrollLearnerInstructions)}</p>
+        <FormControl
+          as="textarea"
+          rows={4}
+          placeholder={intl.formatMessage(messages.enrollLearnersPlaceholder)}
+          onChange={(e) => setEmails(e.target.value)}
+        />
+        <FormCheckboxSet isInline className="mt-3 text-primary-500">
+          <FormCheckbox controlClassName="border-primary-500">Auto Enroll</FormCheckbox>
+          <FormCheckbox controlClassName="border-primary-500" className="ml-4">Notify Users by Email</FormCheckbox>
+        </FormCheckboxSet>
+        {errorMessage && <Alert variant="danger" className="mt-3">{errorMessage}</Alert>}
+      </ModalDialog.Body>
+      <ModalDialog.Footer className="border-light-700 border-top">
+        <Button variant="tertiary" onClick={onClose} disabled={isEnrolling}>
+          {intl.formatMessage(messages.cancelButton)}
+        </Button>
+        <Button className="ml-2" variant="primary" onClick={handleEnroll} disabled={emails.trim().length === 0 || isEnrolling}>
+          {intl.formatMessage(messages.saveButton)}
+        </Button>
+      </ModalDialog.Footer>
+    </ModalDialog>
+  );
+};
+
+export default EnrollLearnersModal;

src/enrollments/components/EnrollmentStatusModal.tsx

@@ -26,7 +26,7 @@ const EnrollmentStatusModal = ({ isOpen, onClose }: EnrollmentStatusModalProps)
       <ModalDialog.Body className="py-4">
         <p>{intl.formatMessage(messages.addLearnerInstructions)}</p>
         <FormControl
-          placeholder={intl.formatMessage(messages.enrollLearnersPlaceholder)}
+          placeholder={intl.formatMessage(messages.enrollmentStatusPlaceholder)}
           value={learnerIdentifier}
           onChange={(e) => setLearnerIdentifier(e.target.value)}
         />

src/enrollments/components/UnenrollModal.tsx

@@ -1,19 +1,36 @@
+import { useIntl } from '@openedx/frontend-base';
+import { Button, ModalDialog } from '@openedx/paragon';
+import messages from '../messages';
 import { Learner } from '../types';
+
 interface UnenrollModalProps {
   learner: Learner | null,
   isOpen: boolean,
   onClose: () => void,
 }
 
 const UnenrollModal = ({ learner, isOpen, onClose }: UnenrollModalProps) => {
-  console.log(learner, isOpen);
+  const intl = useIntl();
 
   if (!isOpen || learner === null) {
     onClose();
     return null;
   }
 
-  return <div>Unenroll Modal</div>;
+  return (
+    <ModalDialog isOpen={isOpen} onClose={onClose} title={intl.formatMessage(messages.unenrollLearners)} isOverflowVisible={false}>
+      <ModalDialog.Header>
+        <h3 className="text-primary-500">{intl.formatMessage(messages.unenrollLearnerTitle)}</h3>
+      </ModalDialog.Header>
+      <ModalDialog.Body className="py-4">
+        <p>{intl.formatMessage(messages.unenrollLearnersConfirmation, { name: learner.fullName })}</p>
+      </ModalDialog.Body>
+      <ModalDialog.Footer>
+        <Button variant="tertiary" onClick={onClose}>{intl.formatMessage(messages.cancelButton)}</Button>
+        <Button className="ml-2">{intl.formatMessage(messages.unenrollButton)}</Button>
+      </ModalDialog.Footer>
+    </ModalDialog>
+  );
 };
 
 export default UnenrollModal;

src/enrollments/data/api.ts

@@ -26,3 +26,23 @@ export const getEnrollmentStatus = async (
   );
   return camelCaseObject(data);
 };
+
+export const enrollLearners = async (
+  courseId: string,
+  users: string[]
+): Promise<void> => {
+  await getAuthenticatedHttpClient().post(
+    `${getApiBaseUrl()}/api/instructor/v2/courses/${courseId}/enrollments/`,
+    { users }
+  );
+};
+
+export const unenrollLearners = async (
+  courseId: string,
+  users: string[]
+): Promise<void> => {
+  await getAuthenticatedHttpClient().delete(
+    `${getApiBaseUrl()}/api/instructor/v2/courses/${courseId}/enrollments/`,
+    { data: { users } }
+  );
+};

src/enrollments/data/apiHook.ts

@@ -1,5 +1,5 @@
-import { useQuery } from '@tanstack/react-query';
-import { getEnrollments, getEnrollmentStatus, PaginationParams } from './api';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { enrollLearners, getEnrollments, getEnrollmentStatus, PaginationParams } from './api';
 import { enrollmentsQueryKeys } from './queryKeys';
 
 export const useEnrollments = (courseId: string, pagination: PaginationParams) => (
@@ -16,3 +16,13 @@ export const useEnrollmentByUserId = (courseId: string, userIdentifier: string)
     enabled: false,
   })
 );
+
+export const useEnrollLearners = (courseId: string) => {
+  const queryClient = useQueryClient();
+  return (useMutation({
+    mutationFn: (users: string[]) => enrollLearners(courseId, users),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: enrollmentsQueryKeys.byCourse(courseId) });
+    },
+  }));
+};

src/enrollments/messages.ts

@@ -14,7 +14,7 @@ const messages = defineMessages({
   enrollLearners: {
     id: 'instruct.enrollments.enrollLearners',
     defaultMessage: 'Enroll Learners',
-    description: 'Button label for enrolling learners',
+    description: 'Button label an modal title for enrolling learners',
   },
   checkEnrollmentStatus: {
     id: 'instruct.enrollments.checkEnrollmentStatus',
@@ -62,25 +62,60 @@ const messages = defineMessages({
     description: 'Label for true boolean value',
   },
   addLearnerInstructions: {
-    id: 'instruct.enrollments.checkEnrollmentStatusModal.addLearnerInstructions',
+    id: 'instruct.enrollments.modals.checkEnrollmentStatus.addLearnerInstructions',
     defaultMessage: 'Learner’s My Open edX email address or username',
     description: 'Instructions for enroll learners to the course',
   },
-  enrollLearnersPlaceholder: {
-    id: 'instruct.enrollments.checkEnrollmentStatusModal.enrollLearnersPlaceholder',
+  enrollmentStatusPlaceholder: {
+    id: 'instruct.enrollments.modals.checkEnrollmentStatus.enrollmentStatusPlaceholder',
     defaultMessage: 'Learner email address or username',
     description: 'Placeholder text for enrolling learners textarea',
   },
   closeButton: {
-    id: 'instruct.enrollments.checkEnrollmentStatusModal.closeButton',
+    id: 'instruct.enrollments.modals.closeButton',
     defaultMessage: 'Close',
     description: 'Label for close button in modals',
   },
   statusResponseMessage: {
-    id: 'instruct.enrollments.checkEnrollmentStatusModal.statusResponseMessage',
+    id: 'instruct.enrollments.modals.checkEnrollmentStatus.statusResponseMessage',
     defaultMessage: 'Enrollment status for {learnerIdentifier}: {status}',
     description: 'Message displaying the enrollment status for a learner',
-  }
+  },
+  enrollLearnersPlaceholder: {
+    id: 'instruct.enrollments.modals.enrollLearners.enrollLearnersPlaceholder',
+    defaultMessage: 'Email addresses / Usernames',
+    description: 'Placeholder text for enrolling learners textarea',
+  },
+  enrollLearnerInstructions: {
+    id: 'instruct.enrollments.modals.enrollLearners.enrollLearnerInstructions',
+    defaultMessage: 'Enter email addresses and/or usernames separated by new lines or commas. You will not get notification for emails that bounce, so please double-check spelling.',
+    description: 'Instructions for enrolling learners to the course',
+  },
+  unenrollLearners: {
+    id: 'instruct.enrollments.modals.unenrollLearners',
+    defaultMessage: 'Unenroll Learners',
+    description: 'Title for unenroll learners modal',
+  },
+  unenrollLearnersConfirmation: {
+    id: 'instruct.enrollments.modals.unenrollLearnersConfirmation',
+    defaultMessage: 'Unenroll {name} from course?',
+    description: 'Confirmation message for unenrolling learners',
+  },
+  unenrollLearnerTitle: {
+    id: 'instruct.enrollments.modals.unenrollLearnerTitle',
+    defaultMessage: 'Unenroll Learner?',
+    description: 'Title for unenroll learner modal',
+  },
+  saveButton: {
+    id: 'instruct.enrollments.modals.saveButton',
+    defaultMessage: 'Save',
+    description: 'Label for save button in modals',
+  },
+  cancelButton: {
+    id: 'instruct.enrollments.modals.cancelButton',
+    defaultMessage: 'Cancel',
+    description: 'Label for cancel button in modals',
+  },
 });
 
 export default messages;