feat: same titles for sent email groups

Author: Kyrylo Hudym-Levkovych

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

@@ -40,7 +40,10 @@ export default function BulkEmailTool() {
                 />
               </div>
               <div className="row py-5">
-                <BulkEmailTaskManager courseId={courseId} />
+                <BulkEmailTaskManager
+                  courseId={courseId}
+                  courseModes={courseMetadata.courseModes}
+                />
               </div>
             </Container>
           </BulkEmailProvider>

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

@@ -28,6 +28,7 @@ import {
 } from './data/actions';
 import { editScheduledEmailThunk, postBulkEmailThunk } from './data/thunks';
 import { getScheduledBulkEmailThunk } from '../bulk-email-task-manager/bulk-email-scheduled-emails-table/data/thunks';
+import { getDisplayText } from '../utils';
 
 import './bulkEmailForm.scss';
 
@@ -219,7 +220,7 @@ function BulkEmailForm(props) {
       <p>{intl.formatMessage(messages.bulkEmailTaskAlertRecipients, { subject: editor.emailSubject })}</p>
       <ul className="list-unstyled">
         {editor.emailRecipients.map((group) => (
-          <li key={group}>{group}</li>
+          <li key={group}>{getDisplayText(group, courseModes)}</li>
         ))}
       </ul>
       {!isScheduled && (
@@ -246,7 +247,7 @@ function BulkEmailForm(props) {
       <p>{intl.formatMessage(messages.bulkEmailTaskAlertEditingTo)}</p>
       <ul className="list-unstyled">
         {editor.emailRecipients.map((group) => (
-          <li key={group}>{group}</li>
+          <li key={group}>{getDisplayText(group, courseModes)}</li>
         ))}
       </ul>
       <p>{intl.formatMessage(messages.bulkEmailTaskAlertEditingWarning)}</p>

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

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Form } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { RECIPIENTS_DISPLAY_NAMES } from '../../utils';
 
 import './bulkEmailRecepient.scss';
 
@@ -41,7 +42,7 @@ export default function BulkEmailRecipient(props) {
         <Form.Checkbox key="myself" value="myself" className="mt-2.5 col col-lg-4 col-sm-6 col-12">
           <FormattedMessage
             id="bulk.email.form.recipients.myself"
-            defaultMessage="Myself"
+            defaultMessage={RECIPIENTS_DISPLAY_NAMES.myself}
             description="A selectable choice from a list of potential email recipients"
           />
         </Form.Checkbox>
@@ -52,7 +53,7 @@ export default function BulkEmailRecipient(props) {
         >
           <FormattedMessage
             id="bulk.email.form.recipients.staff"
-            defaultMessage="Staff/Administrators"
+            defaultMessage={RECIPIENTS_DISPLAY_NAMES.staff}
             description="A selectable choice from a list of potential email recipients"
           />
         </Form.Checkbox>
@@ -99,7 +100,7 @@ export default function BulkEmailRecipient(props) {
         >
           <FormattedMessage
             id="bulk.email.form.recipients.learners"
-            defaultMessage="All Learners"
+            defaultMessage={RECIPIENTS_DISPLAY_NAMES.learners}
             description="A selectable choice from a list of potential email recipients"
           />
         </Form.Checkbox>

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

@@ -13,6 +13,7 @@ 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';
+import { RECIPIENTS_DISPLAY_NAMES } from '../../utils';
 
 jest.mock('../../text-editor/TextEditor');
 
@@ -75,8 +76,8 @@ describe('bulk-email-form', () => {
       success: true,
     });
     render(renderBulkEmailForm());
-    fireEvent.click(screen.getByRole('checkbox', { name: 'Myself' }));
-    expect(screen.getByRole('checkbox', { name: 'Myself' })).toBeChecked();
+    fireEvent.click(screen.getByRole('checkbox', { name: RECIPIENTS_DISPLAY_NAMES.myself }));
+    expect(screen.getByRole('checkbox', { name: RECIPIENTS_DISPLAY_NAMES.myself })).toBeChecked();
     fireEvent.change(screen.getByRole('textbox', { name: 'Subject' }), { target: { value: 'test subject' } });
     fireEvent.change(screen.getByTestId('textEditor'), { target: { value: 'test body' } });
     fireEvent.click(screen.getByText('Send email'));
@@ -90,7 +91,7 @@ describe('bulk-email-form', () => {
     axiosMock.onPost(`${getConfig().LMS_BASE_URL}/courses/test/instructor/api/send_email`).reply(500);
     render(renderBulkEmailForm());
     const subjectLine = screen.getByRole('textbox', { name: 'Subject' });
-    const recipient = screen.getByRole('checkbox', { name: 'Myself' });
+    const recipient = screen.getByRole('checkbox', { name: RECIPIENTS_DISPLAY_NAMES.myself });
     fireEvent.click(recipient);
     fireEvent.change(subjectLine, { target: { value: 'test subject' } });
     fireEvent.change(screen.getByTestId('textEditor'), { target: { value: 'test body' } });
@@ -99,9 +100,9 @@ describe('bulk-email-form', () => {
     fireEvent.click(await screen.findByRole('button', { name: /continue/i }));
     expect(await screen.findByText('An error occured while attempting to send the email.')).toBeInTheDocument();
   });
-  test('Checking "All Learners" disables each learner group', async () => {
+  test('Checking "All Students" disables each learner group', async () => {
     render(renderBulkEmailForm());
-    fireEvent.click(screen.getByRole('checkbox', { name: 'All Learners' }));
+    fireEvent.click(screen.getByRole('checkbox', { name: RECIPIENTS_DISPLAY_NAMES.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 { cohorts } = cohortFactory.build();
@@ -130,7 +131,7 @@ describe('bulk-email-form', () => {
   test('Adds scheduling data to POST requests when schedule is selected', async () => {
     const postBulkEmailInstructorTask = jest.spyOn(bulkEmailFormApi, 'postBulkEmailInstructorTask');
     render(renderBulkEmailForm());
-    fireEvent.click(screen.getByRole('checkbox', { name: 'Myself' }));
+    fireEvent.click(screen.getByRole('checkbox', { name: RECIPIENTS_DISPLAY_NAMES.myself }));
     fireEvent.change(screen.getByRole('textbox', { name: 'Subject' }), { target: { value: 'test subject' } });
     fireEvent.change(screen.getByTestId('textEditor'), { target: { value: 'test body' } });
     const scheduleCheckbox = screen.getByText('Schedule this email for a future date');

src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailContentHistory.jsx

@@ -13,6 +13,7 @@ import messages from './messages';
 import { getSentEmailHistory } from './data/api';
 import BulkEmailTaskManagerTable from './BulkEmailHistoryTable';
 import ViewEmailModal from './ViewEmailModal';
+import { RECIPIENTS_DISPLAY_NAMES } from '../utils';
 
 function BulkEmailContentHistory({ intl }) {
   const { courseId } = useParams();
@@ -55,7 +56,7 @@ function BulkEmailContentHistory({ intl }) {
     const tableData = emailHistoryData?.map((item) => ({
       ...item,
       subject: item.email.subject,
-      sent_to: item.sent_to.join(', '),
+      sent_to: item.sent_to.map((recipient) => RECIPIENTS_DISPLAY_NAMES[recipient] || recipient).join(', '),
       created: new Date(item.created).toLocaleString(),
     }));
     return tableData || [];

src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailTaskManager.jsx

@@ -9,13 +9,13 @@ import messages from './messages';
 import BulkEmailScheduledEmailsTable from './bulk-email-scheduled-emails-table';
 import BulkEmailPendingTasksAlert from './BulkEmailPendingTasksAlert';
 
-function BulkEmailTaskManager({ intl, courseId }) {
+function BulkEmailTaskManager({ intl, courseId, courseModes }) {
   return (
     <div className="w-100">
       {getConfig().SCHEDULE_EMAIL_SECTION && (
         <div>
           <h2 className="h3 text-primary-500">{intl.formatMessage(messages.scheduledEmailsTableHeader)}</h2>
-          <BulkEmailScheduledEmailsTable />
+          <BulkEmailScheduledEmailsTable courseModes={courseModes} />
         </div>
       )}
       <div>
@@ -36,6 +36,12 @@ function BulkEmailTaskManager({ intl, courseId }) {
 BulkEmailTaskManager.propTypes = {
   intl: intlShape.isRequired,
   courseId: PropTypes.string.isRequired,
+  courseModes: PropTypes.arrayOf(
+    PropTypes.shape({
+      slug: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+    }),
+  ).isRequired,
 };
 
 export default injectIntl(BulkEmailTaskManager);

src/components/bulk-email-tool/bulk-email-task-manager/ViewEmailModal.jsx

@@ -33,7 +33,7 @@ function ViewEmailModal({
               <p className="pl-2">{messageContent.created}</p>
             </div>
             <div className="d-flex flex-row">
-              <p>{intl.formatMessage(messages.modalMessageSentTo)}</p>
+              <p className="flex-shrink-0">{intl.formatMessage(messages.modalMessageSentTo)}</p>
               <p className="pl-2">{messageContent.sent_to}</p>
             </div>
             <hr className="py-2" />

src/components/bulk-email-tool/bulk-email-task-manager/bulk-email-scheduled-emails-table/BulkEmailScheduledEmailsTable.jsx

@@ -4,6 +4,7 @@
 import React, {
   useCallback, useContext, useState, useEffect,
 } from 'react';
+import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
   Alert, DataTable, Icon, IconButton, useToggle,
@@ -19,20 +20,22 @@ import ViewEmailModal from '../ViewEmailModal';
 import { copyToEditor } from '../../bulk-email-form/data/actions';
 import TaskAlertModal from '../../task-alert-modal';
 import { formatDate, formatTime } from '../../../../utils/formatDateAndTime';
+import { getDisplayText, getRecipientFromDisplayText } from '../../utils';
 
-function flattenScheduledEmailsArray(emails) {
+function flattenScheduledEmailsArray(emails, courseModes) {
   return emails.map((email) => ({
     schedulingId: email.id,
     emailId: email.courseEmail.id,
     task: email.task,
     taskDue: new Date(email.taskDue).toLocaleString(),
     taskDueUTC: email.taskDue,
     ...email.courseEmail,
-    targets: email.courseEmail.targets.join(', '),
+    targets: email.courseEmail.targets
+      .map((recipient) => getDisplayText(recipient, courseModes)).join(', '),
   }));
 }
 
-function BulkEmailScheduledEmailsTable({ intl }) {
+function BulkEmailScheduledEmailsTable({ intl, courseModes }) {
   const { courseId } = useParams();
   const [{ scheduledEmailsTable }, dispatch] = useContext(BulkEmailContext);
   const [tableData, setTableData] = useState([]);
@@ -44,8 +47,8 @@ function BulkEmailScheduledEmailsTable({ intl }) {
   const [currentTask, setCurrentTask] = useState({});
 
   useEffect(() => {
-    setTableData(flattenScheduledEmailsArray(scheduledEmailsTable.results));
-  }, [scheduledEmailsTable.results]);
+    setTableData(flattenScheduledEmailsArray(scheduledEmailsTable.results, courseModes));
+  }, [scheduledEmailsTable.results, courseModes]);
 
   const fetchTableData = useCallback((args) => {
     dispatch(getScheduledBulkEmailThunk(courseId, args.pageIndex + 1));
@@ -96,7 +99,8 @@ function BulkEmailScheduledEmailsTable({ intl }) {
       },
     } = row;
     const dateTime = new Date(taskDueUTC);
-    const emailRecipients = targets.replaceAll('-', ':').split(', ');
+    const emailRecipients = targets
+      .split(', ').map((recipient) => getRecipientFromDisplayText(recipient, courseModes));
     const scheduleDate = formatDate(dateTime);
     const scheduleTime = formatTime(dateTime);
     dispatch(
@@ -198,6 +202,12 @@ function BulkEmailScheduledEmailsTable({ intl }) {
 
 BulkEmailScheduledEmailsTable.propTypes = {
   intl: intlShape.isRequired,
+  courseModes: PropTypes.arrayOf(
+    PropTypes.shape({
+      slug: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+    }),
+  ).isRequired,
 };
 
 export default injectIntl(BulkEmailScheduledEmailsTable);

src/components/bulk-email-tool/bulk-email-task-manager/bulk-email-scheduled-emails-table/test/BulkEmailScheduledEmailsTable.test.jsx

@@ -13,6 +13,7 @@ import { BulkEmailProvider } from '../../../bulk-email-context';
 import BulkEmailScheduledEmailsTable from '..';
 import scheduledEmailsFactory from './__factories__/scheduledEmails.factory';
 import * as actions from '../../../bulk-email-form/data/actions';
+import { RECIPIENTS_DISPLAY_NAMES } from '../../../utils';
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -42,7 +43,7 @@ describe('BulkEmailScheduledEmailsTable', () => {
       .onGet(`${getConfig().LMS_BASE_URL}/api/instructor_task/v1/schedules/test-id/bulk_email/?page=1`)
       .reply(200, scheduledEmailsFactory.build(1));
     render(renderBulkEmailScheduledEmailsTable());
-    expect(await screen.findByText('learners')).toBeTruthy();
+    expect(await screen.findByText(RECIPIENTS_DISPLAY_NAMES.learners)).toBeTruthy();
     expect(await screen.findByText('subject')).toBeTruthy();
     expect(await screen.findByText('edx')).toBeTruthy();
     expect(await screen.findByLabelText('View')).toBeTruthy();

src/components/bulk-email-tool/utils.js

@@ -0,0 +1,49 @@
+export const RECIPIENTS_DISPLAY_NAMES = {
+  myself: 'Myself',
+  staff: 'Staff/Administrators',
+  learners: 'All Learners',
+  'Staff and instructors': 'Staff/Administrators',
+  'All students': 'All Learners',
+};
+
+// Output: { 'Myself': 'myself', 'Staff/Administrators': 'staff', 'All Learners': 'learners' }
+export const REVERSE_RECIPIENTS_DISPLAY_NAMES = Object.fromEntries(
+  Object.entries(RECIPIENTS_DISPLAY_NAMES).map(([key, value]) => [value, key]),
+);
+
+export const getDisplayText = (recipient, courseModes) => {
+  const normalizedRecipient = recipient.replace(/-/, ':');
+
+  if (normalizedRecipient.startsWith('track') && courseModes) {
+    const courseModeSlug = normalizedRecipient.split(':')[1];
+    const courseMode = courseModes.find((mode) => mode.slug === courseModeSlug);
+    if (courseMode) {
+      return `Learners in the ${courseMode.name} Track`;
+    }
+  }
+
+  if (normalizedRecipient.startsWith('cohort')) {
+    const cohort = normalizedRecipient.replace(/:/, ': ');
+    return cohort.charAt(0).toUpperCase() + cohort.slice(1);
+  }
+
+  return RECIPIENTS_DISPLAY_NAMES[recipient] || recipient;
+};
+
+export const getRecipientFromDisplayText = (displayText, courseModes) => {
+  const trackMatch = displayText.match(/^Learners in the (.+) Track$/);
+  if (trackMatch) {
+    const courseModeName = trackMatch[1];
+    const courseMode = courseModes.find(mode => mode.name === courseModeName);
+    if (courseMode) {
+      return `track:${courseMode.slug}`;
+    }
+  }
+
+  const cohortMatch = displayText.match(/^Cohort: (.+)$/);
+  if (cohortMatch) {
+    return `cohort:${cohortMatch[1].replace(' ', '-')}`;
+  }
+
+  return REVERSE_RECIPIENTS_DISPLAY_NAMES[displayText] || displayText;
+};