-
-
-
-
-
-
-
-
-
-
-
+ return courseMetadata.isStaff ? (
+
+ ) : (
+
);
}
return (
@@ -64,7 +60,7 @@ export default function BulkEmailTool() {
animation="border"
variant="primary"
role="status"
- screenReaderText="loading"
+ screenreadertext="loading"
className="spinner-border spinner-border-lg text-primary p-5 m-5"
/>
diff --git a/src/components/bulk-email-tool/bulk-email-form/BulkEmailForm.jsx b/src/components/bulk-email-tool/bulk-email-form/BulkEmailForm.jsx
new file mode 100644
index 0000000..dd19344
--- /dev/null
+++ b/src/components/bulk-email-tool/bulk-email-form/BulkEmailForm.jsx
@@ -0,0 +1,225 @@
+import React, { useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+ Form, Icon, StatefulButton, useCheckboxSetValues, useToggle,
+} from '@edx/paragon';
+import { SpinnerSimple, CheckCircle, Cancel } from '@edx/paragon/icons';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import TextEditor from '../text-editor/TextEditor';
+import { postBulkEmail } from './api';
+import BulkEmailRecipient from './BulkEmailRecipient';
+import TaskAlertModal from './TaskAlertModal';
+import useTimeout from '../../../utils/useTimeout';
+
+export const FORM_SUBMIT_STATES = {
+ DEFAULT: 'default',
+ PENDING: 'pending',
+ COMPLETE: 'complete',
+ COMPLETED_DEFAULT: 'completed_default',
+ ERROR: 'error',
+};
+
+export default function BulkEmailForm(props) {
+ const { courseId } = props;
+ const [subject, setSubject] = useState('');
+ const [emailFormStatus, setEmailFormStatus] = useState(FORM_SUBMIT_STATES.DEFAULT);
+ const [emailFormValidation, setEmailFormValidation] = useState({
+ // set these as true on initialization, to prevent invalid messages from prematurely showing
+ subject: true,
+ body: true,
+ recipients: true,
+ });
+ const [selectedRecipients, { add, remove }] = useCheckboxSetValues([]);
+ const [isTaskAlertOpen, openTaskAlert, closeTaskAlert] = useToggle(false);
+ const editorRef = useRef(null);
+ const resetEmailForm = useTimeout(() => {
+ setEmailFormStatus(FORM_SUBMIT_STATES.COMPLETED_DEFAULT);
+ }, 3000);
+
+ const onRecipientChange = (event) => {
+ if (event.target.checked) {
+ add(event.target.value);
+ } else {
+ remove(event.target.value);
+ }
+ };
+ const onInit = (event, editor) => {
+ editorRef.current = editor;
+ };
+
+ const onSubjectChange = (event) => setSubject(event.target.value);
+
+ const validateEmailForm = () => {
+ const subjectValid = subject.length !== 0;
+ const bodyValid = editorRef.current.getContent().length !== 0;
+ const recipientsValid = selectedRecipients.length !== 0;
+
+ setEmailFormValidation({
+ subject: subjectValid,
+ recipients: recipientsValid,
+ body: bodyValid,
+ });
+
+ return subjectValid && bodyValid && recipientsValid;
+ };
+
+ const createEmailTask = async () => {
+ const emailData = new FormData();
+ if (validateEmailForm()) {
+ setEmailFormStatus(() => FORM_SUBMIT_STATES.PENDING);
+ emailData.append('action', 'send');
+ emailData.append('send_to', JSON.stringify(selectedRecipients));
+ emailData.append('subject', subject);
+ emailData.append('message', editorRef.current.getContent());
+ let data;
+ try {
+ data = await postBulkEmail(emailData, courseId);
+ } catch (e) {
+ setEmailFormStatus(FORM_SUBMIT_STATES.ERROR);
+ return;
+ }
+ if (data.status === 200) {
+ setEmailFormStatus(FORM_SUBMIT_STATES.COMPLETE);
+ resetEmailForm();
+ }
+ }
+ };
+
+ return (
+
+
+
+
+
+
+ {selectedRecipients.map((group) => (
+ - {group}
+ ))}
+
+
+
+
+
+ )}
+ close={(event) => {
+ closeTaskAlert();
+ if (event.target.name === 'continue') {
+ createEmailTask();
+ }
+ }}
+ />
+
+
+ );
+}
+
+BulkEmailForm.propTypes = {
+ courseId: PropTypes.string.isRequired,
+};
diff --git a/src/components/bulk-email-tool/bulk-email-form/BulkEmailRecipient.jsx b/src/components/bulk-email-tool/bulk-email-form/BulkEmailRecipient.jsx
new file mode 100644
index 0000000..3fb3c04
--- /dev/null
+++ b/src/components/bulk-email-tool/bulk-email-form/BulkEmailRecipient.jsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Form } from '@edx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+const DEFAULT_GROUPS = {
+ SELF: 'myself',
+ STAFF: 'staff',
+ ALL_LEARNERS: 'learners',
+ VERIFIED: 'track:verified',
+ AUDIT: 'track:audit',
+};
+
+export default function BulkEmailRecipient(props) {
+ const { handleCheckboxes, selectedGroups } = props;
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ group === DEFAULT_GROUPS.ALL_LEARNERS)}
+ >
+
+
+ group === DEFAULT_GROUPS.ALL_LEARNERS)}
+ >
+
+
+ group === (DEFAULT_GROUPS.AUDIT || DEFAULT_GROUPS.VERIFIED))}
+ >
+
+
+
+ {!props.isValid && (
+
+
+
+ )}
+
+ );
+}
+
+BulkEmailRecipient.defaultProps = {
+ isValid: true,
+};
+
+BulkEmailRecipient.propTypes = {
+ selectedGroups: PropTypes.arrayOf(PropTypes.string).isRequired,
+ handleCheckboxes: PropTypes.func.isRequired,
+ isValid: PropTypes.bool,
+};
diff --git a/src/components/bulk-email-tool/bulk-email-form/TaskAlertModal.jsx b/src/components/bulk-email-tool/bulk-email-form/TaskAlertModal.jsx
new file mode 100644
index 0000000..6044d9b
--- /dev/null
+++ b/src/components/bulk-email-tool/bulk-email-form/TaskAlertModal.jsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ActionRow, AlertModal, Button } from '@edx/paragon';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+function TaskAlertModal(props) {
+ const {
+ isOpen, close, alertMessage, intl,
+ } = props;
+
+ const messages = {
+ taskAlertTitle: {
+ id: 'bulk.email.task.alert.title',
+ defaultMessage: 'Caution',
+ description: 'Title in the header of the alert',
+ },
+ };
+ return (
+
+
+
+
+ )}
+ >
+ {alertMessage}
+
+ );
+}
+
+TaskAlertModal.propTypes = {
+ isOpen: PropTypes.bool.isRequired,
+ close: PropTypes.func.isRequired,
+ alertMessage: PropTypes.node.isRequired,
+ intl: intlShape.isRequired,
+};
+
+export default injectIntl(TaskAlertModal);
diff --git a/src/components/bulk-email-tool/bulk-email-form/api.js b/src/components/bulk-email-tool/bulk-email-form/api.js
new file mode 100644
index 0000000..50caf4e
--- /dev/null
+++ b/src/components/bulk-email-tool/bulk-email-form/api.js
@@ -0,0 +1,8 @@
+/* eslint-disable import/prefer-default-export */
+import { getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+export async function postBulkEmail(email, courseId) {
+ const url = `${getConfig().LMS_BASE_URL}/courses/${courseId}/instructor/api/send_email`;
+ return getAuthenticatedHttpClient().post(url, email);
+}
diff --git a/src/components/bulk-email-tool/bulk-email-form/index.js b/src/components/bulk-email-tool/bulk-email-form/index.js
new file mode 100644
index 0000000..4cef79c
--- /dev/null
+++ b/src/components/bulk-email-tool/bulk-email-form/index.js
@@ -0,0 +1 @@
+export { default } from './BulkEmailForm';
diff --git a/src/components/bulk-email-tool/bulk-email-form/test/BulkEmailForm.test.jsx b/src/components/bulk-email-tool/bulk-email-form/test/BulkEmailForm.test.jsx
new file mode 100644
index 0000000..5ad15d3
--- /dev/null
+++ b/src/components/bulk-email-tool/bulk-email-form/test/BulkEmailForm.test.jsx
@@ -0,0 +1,65 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import {
+ render, screen, cleanup, act, fireEvent,
+} from '../../../../setupTest';
+import BulkEmailForm from '..';
+import { postBulkEmail } from '../api';
+
+jest.mock('../../text-editor/TextEditor');
+jest.mock('../api', () => ({
+ __esModule: true,
+ postBulkEmail: jest.fn(() => ({ status: 200 })),
+}));
+
+describe('bulk-email-form', () => {
+ beforeEach(() => jest.resetModules());
+ afterEach(cleanup);
+ test('it renders', () => {
+ render(
);
+ expect(screen.getByText('Submit')).toBeTruthy();
+ });
+ test('it shows a warning when clicking submit', async () => {
+ render(
);
+ fireEvent.click(screen.getByText('Submit'));
+ const warning = await screen.findByText('CAUTION!', { exact: false });
+ expect(warning).toBeTruthy();
+ });
+ test('Prevent form POST if invalid', async () => {
+ render(
);
+ fireEvent.click(screen.getByText('Submit'));
+ expect(await screen.findByRole('button', { name: /continue/i })).toBeInTheDocument();
+ fireEvent.click(screen.getByRole('button', { name: /continue/i }));
+ expect(await screen.findByText('At least one recipient is required', { exact: false })).toBeInTheDocument();
+ expect(await screen.findByText('A subject is required')).toBeInTheDocument();
+ });
+ test('Shows complete message on completed POST', async () => {
+ render(
);
+ fireEvent.click(screen.getByRole('checkbox', { name: 'Myself' }));
+ expect(screen.getByRole('checkbox', { name: 'Myself' })).toBeChecked();
+ fireEvent.change(screen.getByRole('textbox', { name: 'Subject:' }), { target: { value: 'test subject' } });
+ fireEvent.click(screen.getByText('Submit'));
+ expect(await screen.findByRole('button', { name: /continue/i })).toBeInTheDocument();
+ fireEvent.click(screen.getByRole('button', { name: /continue/i }));
+ expect(await screen.findByText('Submitting')).toBeInTheDocument();
+ expect(await screen.findByText('A task to send the emails has been successfully created!')).toBeInTheDocument();
+ });
+ test('Shows Error on failed POST', async () => {
+ postBulkEmail.mockImplementation(() => {
+ throw Error('api-response-error');
+ });
+ await act(async () => {
+ render(
);
+ const subjectLine = screen.getByRole('textbox', { name: 'Subject:' });
+ const recipient = screen.getByRole('checkbox', { name: 'Myself' });
+ fireEvent.click(recipient);
+ fireEvent.change(subjectLine, { target: { value: 'test subject' } });
+ fireEvent.click(screen.getByText('Submit'));
+ expect(await screen.findByRole('button', { name: /continue/i })).toBeInTheDocument();
+ fireEvent.click(screen.getByRole('button', { name: /continue/i }));
+ expect(await screen.findByText('Error')).toBeInTheDocument();
+ });
+ });
+});
diff --git a/src/components/bulk-email-tool/data/__factories__/courseMetadata.factory.js b/src/components/bulk-email-tool/data/__factories__/courseMetadata.factory.js
new file mode 100644
index 0000000..3ab0878
--- /dev/null
+++ b/src/components/bulk-email-tool/data/__factories__/courseMetadata.factory.js
@@ -0,0 +1,77 @@
+import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies
+import './tab.factory';
+
+export default Factory.define('courseMetadata')
+ .sequence('id', i => `course-v1:edX+DemoX+Demo_Course_${i}`)
+ .option('host', 'http://localhost:18000')
+ .attrs({
+ is_staff: true,
+ original_user_is_staff: false,
+ number: 'DemoX',
+ org: 'edX',
+ verified_mode: {
+ upgrade_url: 'test',
+ price: 10,
+ currency_symbol: '$',
+ },
+ })
+ .attr('tabs', ['id', 'host'], (id, host) => {
+ const tabs = [
+ Factory.build(
+ 'tab',
+ {
+ title: 'Course',
+ slug: 'courseware',
+ type: 'courseware',
+ },
+ { courseId: id, host, path: 'course/' },
+ ),
+ Factory.build(
+ 'tab',
+ {
+ title: 'Discussion',
+ slug: 'discussion',
+ type: 'discussion',
+ },
+ { courseId: id, host, path: 'discussion/forum/' },
+ ),
+ Factory.build(
+ 'tab',
+ {
+ title: 'Wiki',
+ slug: 'wiki',
+ type: 'wiki',
+ },
+ { courseId: id, host, path: 'course_wiki' },
+ ),
+ Factory.build(
+ 'tab',
+ {
+ title: 'Progress',
+ slug: 'progress',
+ type: 'progress',
+ },
+ { courseId: id, host, path: 'progress' },
+ ),
+ Factory.build(
+ 'tab',
+ {
+ title: 'Instructor',
+ slug: 'instructor',
+ type: 'instructor',
+ },
+ { courseId: id, host, path: 'instructor' },
+ ),
+ Factory.build(
+ 'tab',
+ {
+ title: 'Dates',
+ slug: 'dates',
+ type: 'dates',
+ },
+ { courseId: id, host, path: 'dates' },
+ ),
+ ];
+
+ return tabs;
+ });
diff --git a/src/components/bulk-email-tool/data/__factories__/tab.factory.js b/src/components/bulk-email-tool/data/__factories__/tab.factory.js
new file mode 100644
index 0000000..ceeff90
--- /dev/null
+++ b/src/components/bulk-email-tool/data/__factories__/tab.factory.js
@@ -0,0 +1,12 @@
+import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies
+
+Factory.define('tab')
+ .option('courseId', 'course-v1:edX+DemoX+Demo_Course')
+ .option('path', 'course/')
+ .option('host', 'http://localhost:18000')
+ .attrs({
+ title: 'Course',
+ slug: 'courseware',
+ })
+ .attr('tab_id', ['slug'], slug => slug)
+ .attr('url', ['courseId', 'path', 'host'], (courseId, path, host) => `${host}/courses/${courseId}/${path}`);
diff --git a/src/components/bulk-email-tool/api.js b/src/components/bulk-email-tool/data/api.js
similarity index 100%
rename from src/components/bulk-email-tool/api.js
rename to src/components/bulk-email-tool/data/api.js
diff --git a/src/components/bulk-email-tool/test/BulkEmailTool.test.jsx b/src/components/bulk-email-tool/test/BulkEmailTool.test.jsx
new file mode 100644
index 0000000..5ff2d15
--- /dev/null
+++ b/src/components/bulk-email-tool/test/BulkEmailTool.test.jsx
@@ -0,0 +1,42 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { Factory } from 'rosie';
+import { render, screen } from '../../../setupTest';
+import BulkEmailTool from '../BulkEmailTool';
+import { getCourseHomeCourseMetadata } from '../data/api';
+import '../data/__factories__/courseMetadata.factory';
+
+jest.mock('../text-editor/TextEditor');
+jest.mock('../bulk-email-task-manager/api', () => ({
+ getInstructorTasks: jest.fn(() => ({ tasks: {} })),
+ getEmailTaskHistory: jest.fn(() => ({ tasks: {} })),
+}));
+jest.mock('../data/api', () => ({
+ __esModule: true,
+ getCourseHomeCourseMetadata: jest.fn(() => {}),
+}));
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useParams: jest.fn(() => ({
+ courseId: 'test-course-id',
+ })),
+}));
+
+describe('BulkEmailTool', () => {
+ test('BulkEmailTool renders properly when given course metadata', async () => {
+ const courseMetadata = Factory.build('courseMetadata');
+ getCourseHomeCourseMetadata.mockImplementation(() => courseMetadata);
+ render(
);
+ expect(await screen.findByText('Course')).toBeTruthy();
+ });
+ test('BulkEmailTool renders error page on no staff user', async () => {
+ const courseMetadata = Factory.build('courseMetadata', { is_staff: false });
+ getCourseHomeCourseMetadata.mockImplementation(() => courseMetadata);
+ render(
);
+ expect(
+ await screen.findByText('An unexpected error occurred. Please click the button below to refresh the page.'),
+ ).toBeTruthy();
+ });
+});
diff --git a/src/components/bulk-email-tool/TextEditor.jsx b/src/components/bulk-email-tool/text-editor/TextEditor.jsx
similarity index 97%
rename from src/components/bulk-email-tool/TextEditor.jsx
rename to src/components/bulk-email-tool/text-editor/TextEditor.jsx
index b473a9e..ac06705 100644
--- a/src/components/bulk-email-tool/TextEditor.jsx
+++ b/src/components/bulk-email-tool/text-editor/TextEditor.jsx
@@ -13,7 +13,7 @@ import 'tinymce/plugins/emoticons/js/emojis';
import 'tinymce/plugins/link';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/table';
-import 'tinymce-language-selector';
+import '@edx/tinymce-language-selector';
import contentUiCss from 'tinymce/skins/ui/oxide/content.css';
import contentCss from 'tinymce/skins/content/default/content.css';
diff --git a/src/components/bulk-email-tool/text-editor/__mocks__/TextEditor.jsx b/src/components/bulk-email-tool/text-editor/__mocks__/TextEditor.jsx
new file mode 100644
index 0000000..fbec83b
--- /dev/null
+++ b/src/components/bulk-email-tool/text-editor/__mocks__/TextEditor.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function MockTinyMCE({ onInit }) {
+ const mockedEditor = {
+ getContent: () => 'test body',
+ };
+ onInit({}, mockedEditor);
+
+ return
;
+}
+
+MockTinyMCE.propTypes = {
+ onInit: PropTypes.func.isRequired,
+};
+
+export default function TextEditor({ onInit }) {
+ return
;
+}
+
+TextEditor.propTypes = {
+ onInit: PropTypes.func.isRequired,
+};
diff --git a/src/components/bulk-email-tool/text-editor/index.js b/src/components/bulk-email-tool/text-editor/index.js
new file mode 100644
index 0000000..0f49036
--- /dev/null
+++ b/src/components/bulk-email-tool/text-editor/index.js
@@ -0,0 +1 @@
+export { default } from './TextEditor';
diff --git a/src/components/navigation-tabs/NavigationTabs.jsx b/src/components/navigation-tabs/NavigationTabs.jsx
index b2797d4..7cfbc54 100644
--- a/src/components/navigation-tabs/NavigationTabs.jsx
+++ b/src/components/navigation-tabs/NavigationTabs.jsx
@@ -11,7 +11,7 @@ export default function NavigationTabs(props) {
@@ -20,7 +20,7 @@ export default function NavigationTabs(props) {
}
NavigationTabs.propTypes = {
- tabData: PropTypes.arrayOf(PropTypes.exact({
+ tabData: PropTypes.arrayOf(PropTypes.shape({
tab_id: PropTypes.string,
title: PropTypes.string,
url: PropTypes.string,
diff --git a/src/setupTest.js b/src/setupTest.js
index 8665fa5..661bd5d 100644
--- a/src/setupTest.js
+++ b/src/setupTest.js
@@ -1,5 +1,6 @@
import 'core-js/stable';
import 'regenerator-runtime/runtime';
+import '@testing-library/jest-dom';
import React from 'react';
import PropTypes from 'prop-types';
import { render } from '@testing-library/react';
@@ -50,9 +51,7 @@ configureI18n({
function Wrapper({ children }) {
return (
// eslint-disable-next-line react/jsx-filename-extension
-
- {children}
-
+
{children}
);
}
@@ -67,6 +66,4 @@ Wrapper.propTypes = {
export * from '@testing-library/react';
// Override `render` method.
-export {
- renderWithProviders as render,
-};
+export { renderWithProviders as render };
diff --git a/src/utils/useTimeout.js b/src/utils/useTimeout.js
new file mode 100644
index 0000000..3f4b8a0
--- /dev/null
+++ b/src/utils/useTimeout.js
@@ -0,0 +1,28 @@
+import { useRef, useEffect } from 'react';
+
+/**
+ * React hook to delay a function being called by a given delay amount.
+ * Works by creating a ref to a setTimeout() function call to the DOM and
+ * waiting for the timer to end before firing the callback. if multiple
+ * timouts are made at once, the hook will remove all previous timeouts
+ * and only allow one at a time.
+ * @param {function} callback The function to call once the delay ends
+ * @param {millisecond} delay time to delay function call
+ */
+export default function useTimeout(callback, delay) {
+ const timeoutRef = useRef(null);
+
+ useEffect(() => {
+ const timeout = timeoutRef.current;
+ if (timeout) {
+ clearTimeout(timeout);
+ }
+ }, []);
+
+ return () => {
+ if (timeoutRef.current) {
+ clearTimeout(timeoutRef.current);
+ }
+ timeoutRef.current = setTimeout(callback, delay);
+ };
+}