fix: [RGOeX-26199] Quality

src/components/bulk-email-tool/BulkEmailTool.jsx

@@ -33,7 +33,11 @@ export default function BulkEmailTool() {
                 </h1>
               </div>
               <div className="row">
-                <BulkEmailForm courseId={courseId} cohorts={courseMetadata.cohorts} courseModes={courseMetadata.courseModes} />
+                <BulkEmailForm
+                  courseId={courseId}
+                  cohorts={courseMetadata.cohorts}
+                  courseModes={courseMetadata.courseModes}
+                />
               </div>
               <div className="row py-5">
                 <BulkEmailTaskManager courseId={courseId} />

src/components/bulk-email-tool/bulk-email-form/BulkEmailForm.jsx

@@ -47,7 +47,12 @@ const FORM_ACTIONS = {
 };
 
 function BulkEmailForm(props) {
-  const { courseId, cohorts, courseModes, intl } = props;
+  const {
+    courseId,
+    cohorts,
+    courseModes,
+    intl,
+  } = props;
   const [{ editor }, dispatch] = useContext(BulkEmailContext);
   const [emailFormStatus, setEmailFormStatus] = useState(FORM_SUBMIT_STATES.DEFAULT);
   const [emailFormValidation, setEmailFormValidation] = useState({
@@ -385,6 +390,7 @@ BulkEmailForm.propTypes = {
   courseId: PropTypes.string.isRequired,
   cohorts: PropTypes.arrayOf(PropTypes.string),
   intl: intlShape.isRequired,
+  courseModes: PropTypes.arrayOf(PropTypes.string).isRequired,
 };
 
 export default injectIntl(BulkEmailForm);

src/components/bulk-email-tool/bulk-email-form/bulk-email-recipient/BulkEmailRecipient.jsx

@@ -14,7 +14,12 @@ const DEFAULT_GROUPS = {
 };
 
 export default function BulkEmailRecipient(props) {
-  const { handleCheckboxes, selectedGroups, additionalCohorts, courseModes } = props;
+  const {
+    handleCheckboxes,
+    selectedGroups,
+    additionalCohorts,
+    courseModes,
+  } = props;
   return (
     <Form.Group>
       <Form.Label>
@@ -56,7 +61,7 @@ export default function BulkEmailRecipient(props) {
           && courseModes.length > 1
           && courseModes.map((courseMode) => (
             <Form.Checkbox
-              key="track:{courseMode.slug}"
+              key={`track:${courseMode.slug}`}
               value={`track:${courseMode.slug}`}
               disabled={selectedGroups.find((group) => group === DEFAULT_GROUPS.ALL_LEARNERS)}
               className="col col-lg-4 col-sm-6 col-12"
@@ -121,4 +126,5 @@ BulkEmailRecipient.propTypes = {
   handleCheckboxes: PropTypes.func.isRequired,
   isValid: PropTypes.bool,
   additionalCohorts: PropTypes.arrayOf(PropTypes.string),
+  courseModes: PropTypes.arrayOf(PropTypes.object).isRequired,
 };

src/components/bulk-email-tool/bulk-email-form/data/__factories__/bulkEmailFormCourseMode.factory.js

@@ -0,0 +1,18 @@
+import { Factory } from 'rosie';
+
+const courseModeFactory = () => {
+  const AuditModeFactory = Factory.define('AuditModeFactory')
+    .attr('slug', 'audit')
+    .attr('name', 'Audit');
+
+  const VerifiedModeFactory = Factory.define('VerifiedModeFactory')
+    .attr('slug', 'verified')
+    .attr('name', 'Verified Certificate');
+
+  return [
+    AuditModeFactory.build(),
+    VerifiedModeFactory.build(),
+  ];
+};
+
+export default courseModeFactory;

src/components/bulk-email-tool/bulk-email-form/test/BulkEmailForm.test.jsx

@@ -12,6 +12,7 @@ import * as bulkEmailFormApi from '../data/api';
 import { BulkEmailContext, BulkEmailProvider } from '../../bulk-email-context';
 import { formatDate } from '../../../../utils/formatDateAndTime';
 import cohortFactory from '../data/__factories__/bulkEmailFormCohort.factory';
+import courseModeFactory from '../data/__factories__/bulkEmailFormCourseMode.factory';
 
 jest.mock('../../text-editor/TextEditor');
 
@@ -20,20 +21,25 @@ const dispatchMock = jest.fn();
 
 const tomorrow = new Date();
 tomorrow.setDate(new Date().getDate() + 1);
+const courseMode = courseModeFactory();
 
 function renderBulkEmailForm() {
   const { cohorts } = cohortFactory.build();
   return (
     <BulkEmailProvider>
-      <BulkEmailForm courseId="test" cohorts={cohorts} />
+      <BulkEmailForm
+        courseId="test"
+        cohorts={cohorts}
+        courseModes={courseMode}
+      />
     </BulkEmailProvider>
   );
 }
 
 function renderBulkEmailFormContext(value) {
   return (
     <BulkEmailContext.Provider value={[value, dispatchMock]}>
-      <BulkEmailForm courseId="test" />
+      <BulkEmailForm courseId="test" courseMode={courseMode}/>
     </BulkEmailContext.Provider>
   );
 }
@@ -96,8 +102,8 @@ describe('bulk-email-form', () => {
   test('Checking "All Learners" disables each learner group', async () => {
     render(renderBulkEmailForm());
     fireEvent.click(screen.getByRole('checkbox', { name: 'All Learners' }));
-    const verifiedLearners = screen.getByRole('checkbox', { name: 'Learners in the verified certificate track' });
-    const auditLearners = screen.getByRole('checkbox', { name: 'Learners in the audit track' });
+    const verifiedLearners = screen.getByRole('checkbox', { name: 'Learners in the Verified Certificate Track' });
+    const auditLearners = screen.getByRole('checkbox', { name: 'Learners in the Audit Track' });
     const { cohorts } = cohortFactory.build();
     cohorts.forEach(cohort => expect(screen.getByRole('checkbox', { name: `Cohort: ${cohort}` })).toBeDisabled());
     expect(verifiedLearners).toBeDisabled();

src/components/page-container/PageContainer.jsx

@@ -39,7 +39,7 @@ export default function PageContainer(props) {
       }
 
       const {
-        org, number, title, tabs, originalUserIsStaff, courseModes
+        org, number, title, tabs, originalUserIsStaff, courseModes,
       } = metadataResponse;
       const { cohorts } = cohortsResponse;
 
@@ -48,7 +48,7 @@ export default function PageContainer(props) {
         number,
         title,
         originalUserIsStaff,
-        courseModes: courseModes,
+        courseModes,
         tabs: [...tabs],
         cohorts: cohorts.map(({ name }) => name),
       });