feat: add beta testers

Author: diana-villalvazo-wgu

src/enrollments/EnrollmentsPage.tsx

@@ -8,11 +8,13 @@ import EnrollmentStatusModal from './components/EnrollmentStatusModal';
 import UnenrollModal from './components/UnenrollModal';
 import EnrollLearnersModal from './components/EnrollLearnersModal';
 import { Learner } from './types';
+import AddBetaTestersModal from './components/AddBetaTestersModal';
 
 const EnrollmentsPage = () => {
   const intl = useIntl();
   const [isEnrollmentStatusModalOpen, setIsEnrollmentStatusModalOpen] = useState(false);
   const [isEnrollLearnersModalOpen, setIsEnrollLearnersModalOpen] = useState(false);
+  const [isAddBetaTestersModalOpen, setIsAddBetaTestersModalOpen] = useState(false);
   const [isUnenrollModalOpen, setIsUnenrollModalOpen] = useState(false);
   const [selectedLearner, setSelectedLearner] = useState<Learner | null>(null);
 
@@ -38,6 +40,10 @@ const EnrollmentsPage = () => {
     setIsEnrollLearnersModalOpen(true);
   };
 
+  const handleAddBetaTesters = () => {
+    setIsAddBetaTestersModalOpen(true);
+  };
+
   return (
     <div className="my-4.5 mx-4">
       <div className="d-flex justify-content-between align-items-center">
@@ -49,14 +55,15 @@ const EnrollmentsPage = () => {
             iconAs={MoreVert}
             onClick={handleMoreButton}
           />
-          <Button variant="outline-primary">+ {intl.formatMessage(messages.addBetaTesters)}</Button>
+          <Button variant="outline-primary" onClick={handleAddBetaTesters}>+ {intl.formatMessage(messages.addBetaTesters)}</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)} onSuccess={() => {}} />
+      <AddBetaTestersModal isOpen={isAddBetaTestersModalOpen} onClose={() => setIsAddBetaTestersModalOpen(false)} onSuccess={() => {}} />
     </div>
   );
 };

src/enrollments/components/AddBetaTestersModal.tsx

@@ -0,0 +1,40 @@
+import { useParams } from 'react-router-dom';
+import { useAddBetaTesters } from '../data/apiHook';
+import AddModal from './AddModal';
+import { useIntl } from '@openedx/frontend-base';
+import messages from '../messages';
+
+export interface AddBetaTestersModalProps {
+  isOpen: boolean,
+  onClose: () => void,
+  onSuccess: () => void,
+}
+
+const AddBetaTestersModal = ({ isOpen, onClose, onSuccess }: AddBetaTestersModalProps) => {
+  const intl = useIntl();
+  const { courseId = '' } = useParams<{ courseId: string }>();
+  const { mutate: addBetaTesters } = useAddBetaTesters(courseId);
+
+  const handleEnroll = (emailList: string[]) => {
+    addBetaTesters(emailList, {
+      onSuccess: () => {
+        onSuccess();
+        onClose();
+      },
+      onError: (error) => {
+        console.error(error);
+      }
+    });
+  };
+  return (
+    <AddModal
+      instructions={intl.formatMessage(messages.addBetaTestersInstructions)}
+      isOpen={isOpen}
+      title={intl.formatMessage(messages.addBetaTesters)}
+      onClose={onClose}
+      onSave={handleEnroll}
+    />
+  );
+};
+
+export default AddBetaTestersModal;

src/enrollments/data/api.ts

@@ -46,3 +46,13 @@ export const unenrollLearners = async (
     { data: { users } }
   );
 };
+
+export const addBetaTesters = async (
+  courseId: string,
+  users: string[]
+): Promise<void> => {
+  await getAuthenticatedHttpClient().post(
+    `${getApiBaseUrl()}/api/instructor/v2/courses/${courseId}/beta-testers/`,
+    { users }
+  );
+};

src/enrollments/data/apiHook.ts

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

src/enrollments/messages.ts

@@ -126,6 +126,16 @@ const messages = defineMessages({
     defaultMessage: 'Notify Users by Email',
     description: 'Label for notify users by email checkbox in enroll learners modal',
   },
+  addBetaTestersInstructions: {
+    id: 'instruct.enrollments.modals.addBetaTesters.addBetaTestersInstructions',
+    defaultMessage: 'Enter email addresses and/or usernames separated by new lines or commas. Note: Users must have an activated My Open edX account before they can be enrolled as beta testers.',
+    description: 'Instructions for adding beta testers to the course',
+  },
+  uploadCSV: {
+    id: 'instruct.enrollments.modals.uploadCSV',
+    defaultMessage: 'Upload CSV',
+    description: 'Title for upload CSV tab in add modal',
+  },
 });
 
 export default messages;