fix: date format depends on locale date format (#173 )

feat: fixed lint
feat: fixed layout
2023-11-16 07:23:14 -03:00 · 2023-11-14 12:37:33 -03:00 · 2023-11-14 12:37:33 -03:00 · 2023-11-14 12:36:40 -03:00 · 2023-11-03 16:57:13 -04:00 · 2023-06-14 15:33:56 +01:00
68 changed files with 15574 additions and 13668 deletions
--- a/.env
+++ b/.env
@@ -21,5 +21,3 @@ USER_INFO_COOKIE_NAME=''
 SCHEDULE_EMAIL_SECTION=''
 APP_ID=''
 MFE_CONFIG_API_URL=''
-# Fallback in local style files
-PARAGON_THEME_URLS={}
--- a/.env.development
+++ b/.env.development
@@ -22,5 +22,3 @@ USER_INFO_COOKIE_NAME='edx-user-info'
 SCHEDULE_EMAIL_SECTION='true'
 APP_ID=''
 MFE_CONFIG_API_URL=''
-# Fallback in local style files
-PARAGON_THEME_URLS={}
--- a/.env.test
+++ b/.env.test
@@ -20,4 +20,3 @@ USER_INFO_COOKIE_NAME='edx-user-info'
 SCHEDULE_EMAIL_SECTION='true'
 APP_ID=''
 MFE_CONFIG_API_URL=''
-PARAGON_THEME_URLS={}
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,6 +1,6 @@
 /* eslint-disable import/no-extraneous-dependencies */

-const { createConfig } = require('@openedx/frontend-build');
+const { createConfig } = require('@edx/frontend-build');

 module.exports = createConfig('eslint', {
  rules: {
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -18,9 +18,9 @@ jobs:
    - name: Setup Nodejs Env
      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
    - name: Setup Nodejs
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@v3
      with:
-        node-version-file: '.nvmrc'
+        node-version: ${{ env.NODE_VER }}
    - name: Install dependencies
      run: npm ci
    - name: Validate package-lock.json changes
@@ -34,7 +34,4 @@ jobs:
    - name: i18n_extract
      run: npm run i18n_extract
    - name: Coverage
-      uses: codecov/codecov-action@v4
-      with:
-        token: ${{ secrets.CODECOV_TOKEN }}
-        fail_ci_if_error: true
+      uses: codecov/codecov-action@v3
--- a/.github/workflows/update-browserslist-db.yml
+++ b/.github/workflows/update-browserslist-db.yml
@@ -1,12 +0,0 @@
-name: Update Browserslist DB
-on:
-  schedule:
-    - cron:  '0 0 * * 1'
-  workflow_dispatch:
-
-jobs:
-  update-browserslist:
-    uses: openedx/.github/.github/workflows/update-browserslist-db.yml@master
-
-    secrets:
-        requirements_bot_github_token: ${{ secrets.requirements_bot_github_token }}
--- a/.gitignore
+++ b/.gitignore
@@ -5,7 +5,6 @@ node_modules
 npm-debug.log
 coverage
 module.config.js
-env.config.*

 dist/
 src/i18n/transifex_input.json
@@ -18,4 +17,3 @@ temp/babel-plugin-react-intl
 *~
 /temp
 /.vscode
-src/i18n/messages/
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1,2 @@
-24
+18
+
--- a/9
+++ b/9
@@ -4,14 +4,14 @@ i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json

 # This directory must match .babelrc .
-transifex_temp = ./temp/babel-plugin-formatjs
+transifex_temp = ./temp/babel-plugin-react-intl

 precommit:
 	npm run lint
 	npm audit

 requirements:
-	npm ci
+	npm install

 i18n.extract:
 	# Pulling display strings from .jsx files into .json files...
@@ -33,14 +33,13 @@ pull_translations:
 	rm -rf src/i18n/messages
 	mkdir src/i18n/messages
 	cd src/i18n/messages \
-	   && atlas pull $(ATLAS_OPTIONS) \
+	   && atlas pull \
 	            translations/frontend-component-header/src/i18n/messages:frontend-component-header  \
 	            translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
 	            translations/paragon/src/i18n/messages:paragon \
-	            translations/frontend-platform/src/i18n/messages:frontend-platform \
 	            translations/frontend-app-communications/src/i18n/messages:frontend-app-communications

-	$(intl_imports) frontend-component-header frontend-component-footer paragon frontend-platform frontend-app-communications
+	$(intl_imports) frontend-component-header frontend-component-footer paragon frontend-app-communications

 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:
--- a/README.rst
+++ b/README.rst
@@ -1,72 +1,55 @@
+|Codecov| |license|
+
+.. |codecov| image:: https://codecov.io/gh/edx/frontend-app-learning/branch/master/graph/badge.svg?token=3z7XvuzTq3
+   :target: https://codecov.io/gh/edx/frontend-app-communications
+.. |license| image:: https://img.shields.io/badge/license-AGPL-informational
+   :target: https://github.com/edx/frontend-app-account/blob/master/LICENSE
+
 frontend-app-communications
-###########################
+==============================

-|license-badge| |status-badge| |ci-badge| |codecov-badge|
+Please tag **edx-aperture** on any PRs or issues.  Thanks!
+
+Introduction
+------------
+
+A tool used by course teams to communicate with thier learners. The interface for anything related to instructor to learner communications. Instructor bulk email, for example.


-Purpose
-********
+Getting started
+------------

-A tool used by course teams to communicate with their learners. The interface for anything related to instructor-to-learner communications. Instructor bulk email, for example.
+For now, this repo is not intergrated with devstack. You'll be running the app locally and not through docker. This does make setup a little easier.

-Getting Started
-***************
+1. Clone the repo into your usual workspace

-Prerequisites
-=============
+   .. code-block::

-`Tutor`_ is currently recommended as a development environment for your
-new MFE. Please refer
-to the `relevant tutor-mfe documentation`_ to get started using it.
+      mkdir -p ~/workspace/
+      cd ~/workspace/
+      git clone https://github.com/edx/frontend-app-communications.git

-.. _Tutor: https://github.com/overhangio/tutor
+2. Install frontend dependencies

-.. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development
+   .. code-block::

+      npm i

-Cloning and Startup
-===================
+3. Start the devserver. The app will be running at ``localhost:1984``, or whatever port you change it too.

-1. Clone your new repo:
-
-.. code-block:: bash
-
-   git clone https://github.com/edx/frontend-app-communications.git
-
-2. Use the version of Node specified in the ``.nvmrc`` file.
-
-   The current version of the micro-frontend build scripts supports the version of Node found in ``.nvmrc``.
-   Using other major versions of node *may* work, but this is unsupported.  For
-   convenience, this repository includes a ``.nvmrc`` file to help in setting the
-   correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
-
-3. Install npm dependencies:
-
-.. code-block:: bash
-
-   cd frontend-app-communications && npm install
-
-4. Update the application port to use for local development:
-
-   The default port is 1984. If this does not work for you, update the line
-   ``PORT=1984`` to your port in all ``.env.*`` files
-
-5. Start the devserver. The app will be running at ``localhost:1984``, or whatever port you change it too.
-
-   .. code-block:: bash
+   .. code-block::

      npm start

-
 Environment Variables/Setup Notes
 ---------------------------------

-If you wish to add new environment variables for local testing, they should be listed in 2 places:
+If you wish to add new environment varibles for local testing, they should be listed in 2 places:

 1. In ``.env.development``
 2. Added to the ``mergeConfig`` found in ``src/index.jsx``

-.. code-block:: jsx
+.. code-block::

   initialize({
      config: () => {
@@ -75,108 +58,10 @@ If you wish to add new environment variables for local testing, they should be l
       }, 'CommuncationsAppConfig');

 Running Tests
-------------
+---------------------------

 Tests use `jest` and `react-test-library`. To run all the tests for this repo:

-.. code-block::
+   .. code-block::

-   npm test
-
-Plugins
-=======
-This MFE can be customized using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
-
-The parts of this MFE that can be customized in that manner are documented `here </src/plugin-slots>`_.
-
-**Production Build**
-
-The production build is created with ``npm run build``.
-
-Internationalization
-====================
-
-Please refer to the `frontend-platform i18n howto`_ for documentation on
-internationalization.
-
-.. _frontend-platform i18n howto: https://github.com/openedx/frontend-platform/blob/master/docs/how_tos/i18n.rst
-
-Getting Help
-************
-
-If you're having trouble, we have discussion forums at
-https://discuss.openedx.org where you can connect with others in the community.
-
-Our real-time conversations are on Slack. You can request a `Slack
-invitation`_, then join our `community Slack workspace`_.  Because this is a
-frontend repository, the best place to discuss it would be in the `#wg-frontend
-channel`_.
-
-For anything non-trivial, the best path is to open an issue in this repository
-with as many details about the issue you are facing as you can provide.
-
-https://github.com/openedx/frontend-app-communications/issues
-
-For more information about these options, see the `Getting Help`_ page.
-
-.. _Slack invitation: https://openedx.org/slack
-.. _community Slack workspace: https://openedx.slack.com/
-.. _#wg-frontend channel: https://openedx.slack.com/archives/C04BM6YC7A6
-.. _Getting Help: https://openedx.org/community/connect
-
-License
-*******
-
-The code in this repository is licensed under the AGPLv3 unless otherwise
-noted.
-
-Please see `LICENSE <LICENSE>`_ for details.
-
-Contributing
-************
-
-Contributions are very welcome.  Please read `How To Contribute`_ for details.
-
-.. _How To Contribute: https://openedx.org/r/how-to-contribute
-
-This project is currently accepting all types of contributions, bug fixes,
-security fixes, maintenance work, or new features.  However, please make sure
-to have a discussion about your new feature idea with the maintainers prior to
-beginning development to maximize the chances of your change being accepted.
-You can start a conversation by creating a new issue on this repo summarizing
-your idea.
-
-The Open edX Code of Conduct
-****************************
-
-All community members are expected to follow the `Open edX Code of Conduct`_.
-
-.. _Open edX Code of Conduct: https://openedx.org/code-of-conduct/
-
-People
-******
-
-The assigned maintainers for this component and other project details may be
-found in `Backstage`_. Backstage pulls this data from the ``catalog-info.yaml``
-file in this repo.
-
-.. _Backstage: https://open-edx-backstage.herokuapp.com/catalog/default/component/frontend-app-communications
-
-Reporting Security Issues
-*************************
-
-Please do not report security issues in public, and email security@openedx.org instead.
-
-.. |license-badge| image:: https://img.shields.io/github/license/openedx/frontend-app-communications.svg
-    :target: https://github.com/openedx/frontend-app-communications/blob/master/LICENSE
-    :alt: License
-
-.. |status-badge| image:: https://img.shields.io/badge/Status-Maintained-brightgreen
-
-.. |ci-badge| image:: https://github.com/openedx/frontend-app-communications/actions/workflows/ci.yml/badge.svg
-    :target: https://github.com/openedx/frontend-app-communications/actions/workflows/ci.yml
-    :alt: Continuous Integration
-
-.. |codecov-badge| image:: https://codecov.io/github/openedx/frontend-app-communications/coverage.svg?branch=master
-    :target: https://codecov.io/github/openedx/frontend-app-communications?branch=master
-    :alt: Codecov
+      npm test
--- a/catalog-info.yaml
+++ b/catalog-info.yaml
@@ -1,19 +0,0 @@
-# This file records information about this repo. Its use is described in OEP-55:
-# https://open-edx-proposals.readthedocs.io/en/latest/processes/oep-0055-proc-project-maintainers.html
-
-apiVersion: backstage.io/v1alpha1
-kind: Component
-metadata:
-  name: "frontend-app-communications"
-  description: "A tool used by course teams to communicate with their learners."
-  links:
-    - url: "https://github.com/openedx/frontend-app-communications/blob/master/README.rst"
-      title: "README"
-      icon: "Article"
-  annotations:
-    openedx.org/arch-interest-groups: ""
-    openedx.org/release: "master"
-spec:
-  owner: group:committers-frontend
-  type: "service"
-  lifecycle: "production"
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,4 +1,4 @@
-const { createConfig } = require('@openedx/frontend-build');
+const { createConfig } = require('@edx/frontend-build');

 module.exports = createConfig('jest', {
  // setupFilesAfterEnv is used after the jest environment has been loaded.  In general this is what you want.  
--- a/module.config.js.example
+++ b/module.config.js.example
@@ -23,9 +23,9 @@ module.exports = {
    **********************************************************************************************/

    // { moduleName: '@edx/brand', dir: '../brand-openedx' }, // replace with your brand checkout
-    // { moduleName: '@openedx/paragon/scss/core', dir: '../paragon', dist: 'scss/core' },
-    // { moduleName: '@openedx/paragon/icons', dir: '../paragon', dist: 'icons' },
-    // { moduleName: '@openedx/paragon', dir: '../paragon', dist: 'dist' },
+    // { moduleName: '@edx/paragon/scss/core', dir: '../paragon', dist: 'scss/core' },
+    // { moduleName: '@edx/paragon/icons', dir: '../paragon', dist: 'icons' },
+    // { moduleName: '@edx/paragon', dir: '../paragon', dist: 'dist' },
    // { moduleName: '@edx/frontend-platform', dir: '../frontend-platform', dist: 'dist' },
  ],
 };
--- a/openedx.yaml
+++ b/openedx.yaml
@@ -0,0 +1,9 @@
+# This file describes this Open edX repo, as described in OEP-2:
+# http://open-edx-proposals.readthedocs.io/en/latest/oeps/oep-0002.html#specification
+
+oeps: {}
+openedx-release:
+  # The openedx-release key is described in OEP-10:
+  #   https://open-edx-proposals.readthedocs.io/en/latest/oep-0010-proc-openedx-releases.html
+  # The FAQ might also be helpful: https://openedx.atlassian.net/wiki/spaces/COMM/pages/1331268879/Open+edX+Release+FAQ
+  ref: master
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -11,14 +11,18 @@
  ],
  "scripts": {
    "build": "fedx-scripts webpack",
-    "i18n_extract": "fedx-scripts formatjs extract",
-    "lint": "fedx-scripts eslint --ext .js --ext .jsx src/",
-    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx src/",
+    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
+    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
+    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
    "snapshot": "fedx-scripts jest --updateSnapshot",
    "start": "fedx-scripts webpack-dev-server --progress",
-    "dev": "PUBLIC_PATH=/communications/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
    "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests"
  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run lint"
+    }
+  },
  "author": "edX",
  "license": "AGPL-3.0",
  "homepage": "https://github.com/edx/frontend-app-communications#readme",
@@ -29,19 +33,18 @@
    "url": "https://github.com/edx/frontend-app-communications/issues"
  },
  "dependencies": {
-    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer": "^14.6.0",
-    "@edx/frontend-component-header": "^6.6.1",
-    "@edx/frontend-platform": "^8.3.7",
-    "@edx/openedx-atlas": "^0.6.0",
+    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
+    "@edx/frontend-component-footer": "^12.0.0",
+    "@edx/frontend-component-header": "^4.0.0",
+    "@edx/frontend-platform": "^4.2.0",
+    "@edx/openedx-atlas": "^0.5.0",
+    "@edx/paragon": "^20.20.0",
    "@edx/tinymce-language-selector": "1.1.0",
    "@fortawesome/fontawesome-svg-core": "1.2.36",
    "@fortawesome/free-brands-svg-icons": "5.15.4",
    "@fortawesome/free-regular-svg-icons": "5.15.4",
    "@fortawesome/free-solid-svg-icons": "5.15.4",
    "@fortawesome/react-fontawesome": "0.2.0",
-    "@openedx/frontend-plugin-framework": "^1.6.0",
-    "@openedx/paragon": "^23.3.0",
    "@tinymce/tinymce-react": "3.14.0",
    "axios": "0.27.2",
    "classnames": "2.3.2",
@@ -49,25 +52,26 @@
    "jquery": "3.6.1",
    "popper.js": "1.16.1",
    "prop-types": "15.8.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
    "react-helmet": "^6.1.0",
    "react-redux": "7.2.9",
-    "react-router": "6.15.0",
-    "react-router-dom": "6.15.0",
+    "react-router": "5.3.4",
+    "react-router-dom": "5.3.4",
    "redux": "4.2.0",
    "regenerator-runtime": "0.13.11",
    "tinymce": "5.10.7"
  },
  "devDependencies": {
    "@edx/browserslist-config": "^1.2.0",
-    "@edx/typescript-config": "^1.1.0",
-    "@openedx/frontend-build": "^14.6.2",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
+    "@edx/frontend-build": "^12.7.0",
+    "@edx/reactifex": "^2.1.1",
+    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/react": "12.1.5",
    "axios-mock-adapter": "1.21.2",
    "glob": "7.2.3",
-    "jest": "29.7.0",
+    "husky": "7.0.4",
+    "jest": "27.5.1",
    "prettier": "2.8.1",
    "rosie": "2.1.0"
  }
--- a/renovate.json
+++ b/renovate.json
@@ -24,7 +24,7 @@
      "automerge": true
    },
    {
-      "matchPackagePatterns": ["@edx", "@openedx"],
+      "matchPackagePatterns": ["@edx"],
      "matchUpdateTypes": ["minor", "patch"],
      "automerge": true
    }
--- a/src/snapshots/index.test.jsx.snap
+++ b/src/snapshots/index.test.jsx.snap
@@ -1,38 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`app registry subscribe: APP_INIT_ERROR.  snapshot: displays an ErrorPage to root element 1`] = `
-<UNDEFINED>
-  <ErrorPage
-    message="test-error-message"
-  />
-</UNDEFINED>
-`;
-
-exports[`app registry subscribe: APP_READY.  links App to root element 1`] = `
-<UNDEFINED>
-  <AppProvider>
-    <HelmetWrapper
-      defer={true}
-      encodeSpecialCharacters={true}
-    >
-      <link
-        href="favicon-url"
-        rel="shortcut icon"
-        type="image/x-icon"
-      />
-    </HelmetWrapper>
-    <Routes>
-      <Route
-        element={
-          <AuthenticatedPageRoute>
-            <Page Container>
-              <Bulk Email Tool />
-            </Page Container>
-          </AuthenticatedPageRoute>
-        }
-        path="/courses/:courseId/bulk_email"
-      />
-    </Routes>
-  </AppProvider>
-</UNDEFINED>
-`;
--- a/src/components/bulk-email-tool/BulkEmailTool.jsx
+++ b/src/components/bulk-email-tool/BulkEmailTool.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { useParams } from 'react-router-dom';

 import { ErrorPage } from '@edx/frontend-platform/react';
-import { Container } from '@openedx/paragon';
+import { Container } from '@edx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import BulkEmailTaskManager from './bulk-email-task-manager/BulkEmailTaskManager';
 import NavigationTabs from '../navigation-tabs/NavigationTabs';
@@ -24,7 +24,7 @@ export default function BulkEmailTool() {
            <Container size="md">
              <BackToInstructor courseId={courseId} />
              <div className="row pb-4.5">
-                <h1 className="text-primary-500">
+                <h1 className="text-primary-500" id="main-content">
                  <FormattedMessage
                    id="bulk.email.send.email.header"
                    defaultMessage="Send an email"
@@ -33,11 +33,7 @@ export default function BulkEmailTool() {
                </h1>
              </div>
              <div className="row">
-                <BulkEmailForm
-                  courseId={courseId}
-                  cohorts={courseMetadata.cohorts}
-                  courseModes={courseMetadata.courseModes}
-                />
+                <BulkEmailForm courseId={courseId} cohorts={courseMetadata.cohorts} />
              </div>
              <div className="row py-5">
                <BulkEmailTaskManager courseId={courseId} />
--- a/src/components/bulk-email-tool/bulk-email-form/BulkEmailForm.jsx
+++ b/src/components/bulk-email-tool/bulk-email-form/BulkEmailForm.jsx
@@ -4,11 +4,11 @@ import PropTypes from 'prop-types';
 import {
  Button,
  Form, Icon, StatefulButton, Toast, useToggle,
-} from '@openedx/paragon';
+} from '@edx/paragon';
 import {
  SpinnerSimple, Cancel, Send, Event, Check,
-} from '@openedx/paragon/icons';
-import { useIntl } from '@edx/frontend-platform/i18n';
+} from '@edx/paragon/icons';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import classNames from 'classnames';
 import { getConfig } from '@edx/frontend-platform';
 import TextEditor from '../text-editor/TextEditor';
@@ -47,12 +47,7 @@ const FORM_ACTIONS = {
 };

 function BulkEmailForm(props) {
-  const {
-    courseId,
-    cohorts,
-    courseModes,
-  } = props;
-  const intl = useIntl();
+  const { courseId, cohorts, intl } = props;
  const [{ editor }, dispatch] = useContext(BulkEmailContext);
  const [emailFormStatus, setEmailFormStatus] = useState(FORM_SUBMIT_STATES.DEFAULT);
  const [emailFormValidation, setEmailFormValidation] = useState({
@@ -277,14 +272,10 @@ function BulkEmailForm(props) {
          handleCheckboxes={onRecipientChange}
          additionalCohorts={cohorts}
          isValid={emailFormValidation.recipients}
-          courseModes={courseModes}
        />
        <Form.Group controlId="emailSubject">
          <Form.Label className="h3 text-primary-500">{intl.formatMessage(messages.bulkEmailSubjectLabel)}</Form.Label>
-          <Form.Control name="emailSubject" className="w-lg-50" onChange={onFormChange} value={editor.emailSubject} maxLength={128} />
-          <Form.Control.Feedback className="px-3" type="default">
-            {intl.formatMessage(messages.bulkEmailFormSubjectTip)}
-          </Form.Control.Feedback>
+          <Form.Control name="emailSubject" className="w-lg-50" onChange={onFormChange} value={editor.emailSubject} />
          {!emailFormValidation.subject && (
            <Form.Control.Feedback className="px-3" hasIcon type="invalid">
              {intl.formatMessage(messages.bulkEmailFormSubjectError)}
@@ -392,13 +383,7 @@ BulkEmailForm.defaultProps = {
 BulkEmailForm.propTypes = {
  courseId: PropTypes.string.isRequired,
  cohorts: PropTypes.arrayOf(PropTypes.string),
-
-  courseModes: PropTypes.arrayOf(
-    PropTypes.shape({
-      slug: PropTypes.string.isRequired,
-      name: PropTypes.string.isRequired,
-    }),
-  ).isRequired,
+  intl: intlShape.isRequired,
 };

-export default BulkEmailForm;
+export default injectIntl(BulkEmailForm);
--- a/src/components/bulk-email-tool/bulk-email-form/ScheduleEmailForm.jsx
+++ b/src/components/bulk-email-tool/bulk-email-form/ScheduleEmailForm.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Form } from '@openedx/paragon';
+import { Form } from '@edx/paragon';
 import useMobileResponsive from '../../../utils/useMobileResponsive';

 function ScheduleEmailForm(props) {
--- a/src/components/bulk-email-tool/bulk-email-form/bulk-email-recipient/BulkEmailRecipient.jsx
+++ b/src/components/bulk-email-tool/bulk-email-form/bulk-email-recipient/BulkEmailRecipient.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Form } from '@openedx/paragon';
+import { Form } from '@edx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';

 import './bulkEmailRecepient.scss';
@@ -14,13 +14,7 @@ const DEFAULT_GROUPS = {
 };

 export default function BulkEmailRecipient(props) {
-  const {
-    handleCheckboxes,
-    selectedGroups,
-    additionalCohorts,
-    courseModes,
-  } = props;
-  const hasCourseModes = courseModes && courseModes.length > 1;
+  const { handleCheckboxes, selectedGroups, additionalCohorts } = props;
  return (
    <Form.Group>
      <Form.Label>
@@ -56,24 +50,18 @@ export default function BulkEmailRecipient(props) {
            description="A selectable choice from a list of potential email recipients"
          />
        </Form.Checkbox>
-        {
-          // additional modes
-          hasCourseModes
-          && courseModes.map((courseMode) => (
-            <Form.Checkbox
-              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"
-            >
-              <FormattedMessage
-                id="bulk.email.form.mode.label"
-                defaultMessage="Learners in the {courseModeName} Track"
-                values={{ courseModeName: courseMode.name }}
-              />
-            </Form.Checkbox>
-          ))
-        }
+        <Form.Checkbox
+          key="track:verified"
+          value="track:verified"
+          disabled={selectedGroups.find((group) => group === DEFAULT_GROUPS.ALL_LEARNERS)}
+          className="col col-lg-4 col-sm-6 col-12"
+        >
+          <FormattedMessage
+            id="bulk.email.form.recipients.verified"
+            defaultMessage="Learners in the verified certificate track"
+            description="A selectable choice from a list of potential email recipients"
+          />
+        </Form.Checkbox>
        {
          // additional cohorts
          additionalCohorts
@@ -92,6 +80,18 @@ export default function BulkEmailRecipient(props) {
            </Form.Checkbox>
          ))
        }
+        <Form.Checkbox
+          key="track:audit"
+          value="track:audit"
+          disabled={selectedGroups.find((group) => group === DEFAULT_GROUPS.ALL_LEARNERS)}
+          className="col col-lg-4 col-sm-6 col-12"
+        >
+          <FormattedMessage
+            id="bulk.email.form.recipients.audit"
+            defaultMessage="Learners in the audit track"
+            description="A selectable choice from a list of potential email recipients"
+          />
+        </Form.Checkbox>
        <Form.Checkbox
          key="learners"
          value="learners"
@@ -127,10 +127,4 @@ BulkEmailRecipient.propTypes = {
  handleCheckboxes: PropTypes.func.isRequired,
  isValid: PropTypes.bool,
  additionalCohorts: PropTypes.arrayOf(PropTypes.string),
-  courseModes: PropTypes.arrayOf(
-    PropTypes.shape({
-      slug: PropTypes.string.isRequired,
-      name: PropTypes.string.isRequired,
-    }),
-  ).isRequired,
 };
--- a/src/components/bulk-email-tool/bulk-email-form/data/factories/bulkEmailFormCourseMode.factory.js
+++ b/src/components/bulk-email-tool/bulk-email-form/data/factories/bulkEmailFormCourseMode.factory.js
@@ -1,22 +0,0 @@
-import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies
-
-/**
- * Generates an array of course mode objects using Rosie Factory.
- * @returns {Array<Object>} An array of course mode objects with attributes 'slug' and 'name'.
- */
-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;
--- a/src/components/bulk-email-tool/bulk-email-form/messages.js
+++ b/src/components/bulk-email-tool/bulk-email-form/messages.js
@@ -41,11 +41,6 @@ const messages = defineMessages({
    defaultMessage: 'Subject',
    description: 'Email subject line input label. Meant to have colon or equivilant punctuation.',
  },
-  bulkEmailFormSubjectTip: {
-    id: 'bulk.email.form.subject.tip',
-    defaultMessage: '(Maximum 128 characters)',
-    description: 'Default Subject tip',
-  },
  bulkEmailFormSubjectError: {
    id: 'bulk.email.form.subject.error',
    defaultMessage: 'A subject is required',
--- 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
@@ -12,7 +12,6 @@ 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');

@@ -21,17 +20,12 @@ 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}
-        courseModes={courseMode}
-      />
+      <BulkEmailForm courseId="test" cohorts={cohorts} />
    </BulkEmailProvider>
  );
 }
@@ -39,7 +33,7 @@ function renderBulkEmailForm() {
 function renderBulkEmailFormContext(value) {
  return (
    <BulkEmailContext.Provider value={[value, dispatchMock]}>
-      <BulkEmailForm courseId="test" courseModes={courseMode} />
+      <BulkEmailForm courseId="test" />
    </BulkEmailContext.Provider>
  );
 }
@@ -102,8 +96,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();
--- a/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailContentHistory.jsx
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailContentHistory.jsx
@@ -1,21 +1,20 @@
 /* eslint-disable react/no-unstable-nested-components */

-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useParams } from 'react-router-dom';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

 import {
  Button, Collapsible, Icon,
-} from '@openedx/paragon';
-import { SpinnerSimple } from '@openedx/paragon/icons';
+} from '@edx/paragon';
+import { SpinnerSimple } from '@edx/paragon/icons';
 import messages from './messages';
 import { getSentEmailHistory } from './data/api';
 import BulkEmailTaskManagerTable from './BulkEmailHistoryTable';
 import ViewEmailModal from './ViewEmailModal';

-function BulkEmailContentHistory() {
-  const intl = useIntl();
+function BulkEmailContentHistory({ intl }) {
  const { courseId } = useParams();
  const [emailHistoryData, setEmailHistoryData] = useState();
  const [errorRetrievingData, setErrorRetrievingData] = useState(false);
@@ -52,15 +51,17 @@ function BulkEmailContentHistory() {
   * up a level (the `subject` field). We also convert the `sent_to` data to be a String rather than an array to fix a
   * display bug in the table.
   */
-  const transformDataForTable = useMemo(() => {
-    const tableData = emailHistoryData?.map((item) => ({
-      ...item,
-      subject: item.email.subject,
-      sent_to: item.sent_to.join(', '),
-      created: new Date(item.created).toLocaleString(),
-    }));
-    return tableData || [];
-  }, [emailHistoryData]);
+  function transformDataForTable() {
+    let tableData = [];
+    if (emailHistoryData) {
+      tableData = emailHistoryData.map((item) => ({
+        ...item,
+        subject: item.email.subject,
+        sent_to: item.sent_to.join(', '),
+      }));
+    }
+    return tableData;
+  }

  /**
   * This function is responsible for setting the current `messageContent` state data. This will be the contents of a
@@ -101,7 +102,7 @@ function BulkEmailContentHistory() {
   * contents of a previously sent message.
   */
  const additionalColumns = () => {
-    const tableData = transformDataForTable;
+    const tableData = transformDataForTable();

    return [
      {
@@ -138,7 +139,7 @@ function BulkEmailContentHistory() {
          {showHistoricalEmailContentTable ? (
            <BulkEmailTaskManagerTable
              errorRetrievingData={errorRetrievingData}
-              tableData={transformDataForTable}
+              tableData={transformDataForTable()}
              tableDescription={intl.formatMessage(messages.emailHistoryTableViewMessageInstructions)}
              alertWarningMessage={intl.formatMessage(messages.noEmailData)}
              alertErrorMessage={intl.formatMessage(messages.errorFetchingEmailHistoryData)}
@@ -155,6 +156,7 @@ function BulkEmailContentHistory() {
 }

 BulkEmailContentHistory.propTypes = {
+  intl: intlShape.isRequired,
  row: PropTypes.shape({
    index: PropTypes.number,
  }),
@@ -164,4 +166,4 @@ BulkEmailContentHistory.defaultProps = {
  row: {},
 };

-export default BulkEmailContentHistory;
+export default injectIntl(BulkEmailContentHistory);
--- a/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailHistoryTable.jsx
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailHistoryTable.jsx
@@ -1,4 +1,4 @@
-import { Alert, DataTable } from '@openedx/paragon';
+import { Alert, DataTable } from '@edx/paragon';
 import PropTypes from 'prop-types';
 import React from 'react';

--- a/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailPendingTasks.jsx
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailPendingTasks.jsx
@@ -1,14 +1,13 @@
 import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';

-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { getInstructorTasks } from './data/api';
 import messages from './messages';
 import useInterval from '../../../utils/useInterval';
 import BulkEmailTaskManagerTable from './BulkEmailHistoryTable';

-function BulkEmailPendingTasks() {
-  const intl = useIntl();
+function BulkEmailPendingTasks({ intl }) {
  const { courseId } = useParams();

  const [instructorTaskData, setInstructorTaskData] = useState();
@@ -90,4 +89,8 @@ function BulkEmailPendingTasks() {
  );
 }

-export default BulkEmailPendingTasks;
+BulkEmailPendingTasks.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(BulkEmailPendingTasks);
--- a/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailPendingTasksAlert.jsx
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailPendingTasksAlert.jsx
@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';

 import { getConfig } from '@edx/frontend-platform';
-import { Hyperlink, Alert } from '@openedx/paragon';
-import { WarningFilled } from '@openedx/paragon/icons';
+import { Hyperlink, Alert } from '@edx/paragon';
+import { WarningFilled } from '@edx/paragon/icons';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';

 export default function BulkEmailPendingTasksAlert(props) {
--- a/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailTaskHistory.jsx
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailTaskHistory.jsx
@@ -1,9 +1,9 @@
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

-import { Icon, Collapsible } from '@openedx/paragon';
-import { SpinnerSimple } from '@openedx/paragon/icons';
+import { Icon, Collapsible } from '@edx/paragon';
+import { SpinnerSimple } from '@edx/paragon/icons';
 import { getEmailTaskHistory } from './data/api';
 import messages from './messages';

@@ -11,8 +11,7 @@ import BulkEmailTaskManagerTable from './BulkEmailHistoryTable';

 import './bulkEmailTaskHistory.scss';

-function BulkEmailTaskHistory() {
-  const intl = useIntl();
+function BulkEmailTaskHistory({ intl }) {
  const { courseId } = useParams();

  const [emailTaskHistoryData, setEmailTaskHistoryData] = useState([]);
@@ -42,14 +41,6 @@ function BulkEmailTaskHistory() {
    setShowHistoricalTaskContentTable(true);
  }

-  const transformDataForTable = useMemo(() => {
-    const tableData = emailTaskHistoryData?.map((item) => ({
-      ...item,
-      created: new Date(item.created).toLocaleString(),
-    }));
-    return tableData || [];
-  }, [emailTaskHistoryData]);
-
  const tableColumns = [
    {
      Header: `${intl.formatMessage(messages.taskHistoryTableColumnHeaderTaskType)}`,
@@ -104,7 +95,7 @@ function BulkEmailTaskHistory() {
          {showHistoricalTaskContentTable ? (
            <BulkEmailTaskManagerTable
              errorRetrievingData={errorRetrievingData}
-              tableData={transformDataForTable}
+              tableData={emailTaskHistoryData}
              alertWarningMessage={intl.formatMessage(messages.noTaskHistoryData)}
              alertErrorMessage={intl.formatMessage(messages.errorFetchingTaskHistoryData)}
              columns={tableColumns}
@@ -118,4 +109,8 @@ function BulkEmailTaskHistory() {
  );
 }

-export default BulkEmailTaskHistory;
+BulkEmailTaskHistory.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(BulkEmailTaskHistory);
--- a/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailTaskManager.jsx
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailTaskManager.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 import BulkEmailContentHistory from './BulkEmailContentHistory';
 import BulkEmailTaskHistory from './BulkEmailTaskHistory';
@@ -9,8 +9,7 @@ import messages from './messages';
 import BulkEmailScheduledEmailsTable from './bulk-email-scheduled-emails-table';
 import BulkEmailPendingTasksAlert from './BulkEmailPendingTasksAlert';

-function BulkEmailTaskManager({ courseId }) {
-  const intl = useIntl();
+function BulkEmailTaskManager({ intl, courseId }) {
  return (
    <div className="w-100">
      {getConfig().SCHEDULE_EMAIL_SECTION && (
@@ -35,7 +34,8 @@ function BulkEmailTaskManager({ courseId }) {
 }

 BulkEmailTaskManager.propTypes = {
+  intl: intlShape.isRequired,
  courseId: PropTypes.string.isRequired,
 };

-export default BulkEmailTaskManager;
+export default injectIntl(BulkEmailTaskManager);
--- a/src/components/bulk-email-tool/bulk-email-task-manager/ViewEmailModal.jsx
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/ViewEmailModal.jsx
@@ -1,25 +1,21 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { ActionRow, Button, ModalDialog } from '@openedx/paragon';
-import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { Button, Modal } from '@edx/paragon';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import messages from './messages';
 import { BulkEmailContext } from '../bulk-email-context';
 import { copyToEditor } from '../bulk-email-form/data/actions';

 function ViewEmailModal({
-  messageContent, isOpen, setModalOpen,
+  intl, messageContent, isOpen, setModalOpen,
 }) {
-  const intl = useIntl();
  const [, dispatch] = useContext(BulkEmailContext);
  return (
    <div>
-      <ModalDialog
-        isOpen={isOpen}
-        onClose={() => setModalOpen(false)}
-        hasCloseButton
-      >
-        <ModalDialog.Body>
-
+      <Modal
+        open={isOpen}
+        title=""
+        body={(
          <div>
            <div className="d-flex flex-row">
              <p>{intl.formatMessage(messages.modalMessageSubject)}</p>
@@ -44,35 +40,30 @@ function ViewEmailModal({
              <div dangerouslySetInnerHTML={{ __html: messageContent.email.html_message }} />
            </div>
          </div>
-        </ModalDialog.Body>
-        <ModalDialog.Footer>
-          <ActionRow>
-            <ModalDialog.CloseButton variant="link">
-              <FormattedMessage id="bulk.email.tool.close.modalDialog.button" defaultMessage="Close" />
-            </ModalDialog.CloseButton>
-            <Button
-              onClick={() => {
-                dispatch(
-                  copyToEditor({
-                    emailBody: messageContent.email.html_message,
-                    emailSubject: messageContent.subject,
-                  }),
-                );
-                setModalOpen(false);
-              }}
-              variant="primary"
-            >
-              <FormattedMessage id="bulk.email.tool.copy.message.button" defaultMessage="Copy to editor" />
-
-            </Button>
-          </ActionRow>
-        </ModalDialog.Footer>
-      </ModalDialog>
+        )}
+        onClose={() => setModalOpen(false)}
+        buttons={[
+          <Button
+            onClick={() => {
+              dispatch(
+                copyToEditor({
+                  emailBody: messageContent.email.html_message,
+                  emailSubject: messageContent.subject,
+                }),
+              );
+              setModalOpen(false);
+            }}
+          >
+            <FormattedMessage id="bulk.email.tool.copy.message.button" defaultMessage="Copy to editor" />
+          </Button>,
+        ]}
+      />
    </div>
  );
 }

 ViewEmailModal.propTypes = {
+  intl: intlShape.isRequired,
  messageContent: PropTypes.shape({
    subject: PropTypes.string,
    requester: PropTypes.string,
@@ -86,4 +77,4 @@ ViewEmailModal.propTypes = {
  setModalOpen: PropTypes.func.isRequired,
 };

-export default ViewEmailModal;
+export default injectIntl(ViewEmailModal);
--- a/src/components/bulk-email-tool/bulk-email-task-manager/bulk-email-scheduled-emails-table/BulkEmailScheduledEmailsTable.jsx
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/bulk-email-scheduled-emails-table/BulkEmailScheduledEmailsTable.jsx
@@ -4,13 +4,13 @@
 import React, {
  useCallback, useContext, useState, useEffect,
 } from 'react';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
  Alert, DataTable, Icon, IconButton, useToggle,
-} from '@openedx/paragon';
+} from '@edx/paragon';
 import {
  Delete, Info, Visibility, Edit,
-} from '@openedx/paragon/icons';
+} from '@edx/paragon/icons';
 import { useParams } from 'react-router-dom';
 import { BulkEmailContext } from '../../bulk-email-context';
 import { deleteScheduledEmailThunk, getScheduledBulkEmailThunk } from './data/thunks';
@@ -32,8 +32,7 @@ function flattenScheduledEmailsArray(emails) {
  }));
 }

-function BulkEmailScheduledEmailsTable() {
-  const intl = useIntl();
+function BulkEmailScheduledEmailsTable({ intl }) {
  const { courseId } = useParams();
  const [{ scheduledEmailsTable }, dispatch] = useContext(BulkEmailContext);
  const [tableData, setTableData] = useState([]);
@@ -197,4 +196,8 @@ function BulkEmailScheduledEmailsTable() {
  );
 }

-export default BulkEmailScheduledEmailsTable;
+BulkEmailScheduledEmailsTable.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(BulkEmailScheduledEmailsTable);
--- a/src/components/bulk-email-tool/bulk-email-task-manager/messages.js
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/messages.js
@@ -34,10 +34,6 @@ const messages = defineMessages({
    id: 'bulk.email.content.history.table.modal.messageBody',
    defaultMessage: 'Message:',
  },
-  modalCloseButton: {
-    id: 'bulk.email.tool.close.modalDialog.button',
-    defaultMessage: 'Close',
-  },
  emailHistoryTableViewMessageInstructions: {
    id: 'bulk.email.content.history.table.viewMessageInstructions',
    defaultMessage: 'To read a sent email message, click the `View Message` button within the table.',
--- a/src/components/bulk-email-tool/bulk-email-task-manager/test/BulkEmailContentHistory.test.jsx
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/test/BulkEmailContentHistory.test.jsx
@@ -3,7 +3,7 @@
 */
 import React from 'react';
 import {
-  render, screen, fireEvent, cleanup, initializeMockApp,
+  render, screen, fireEvent, cleanup, act, initializeMockApp,
 } from '../../../../setupTest';
 import { BulkEmailProvider } from '../../bulk-email-context';
 import BulkEmailContentHistory from '../BulkEmailContentHistory';
@@ -41,99 +41,105 @@ describe('BulkEmailContentHistory component', () => {
  });

  test('renders a table when the button is pressed and data is returned', async () => {
-    const emailHistoryData = buildEmailContentHistoryData(1);
-    getSentEmailHistory.mockImplementation(() => emailHistoryData);
+    await act(async () => {
+      const emailHistoryData = buildEmailContentHistoryData(1);
+      getSentEmailHistory.mockImplementation(() => emailHistoryData);

-    render(renderBulkEmailContentHistory());
+      render(renderBulkEmailContentHistory());

-    const showEmailContentHistoryButton = await screen.findByText('Show Sent Email History');
-    fireEvent.click(showEmailContentHistoryButton);
+      const showEmailContentHistoryButton = await screen.findByText('Show Sent Email History');
+      fireEvent.click(showEmailContentHistoryButton);

-    // verify component structure
-    const tableDescription = await screen.findByText(
-      'To read a sent email message, click the `View Message` button within the table.',
-    );
-    expect(tableDescription).toBeTruthy();
+      // verify component structure
+      const tableDescription = await screen.findByText(
+        'To read a sent email message, click the `View Message` button within the table.',
+      );
+      expect(tableDescription).toBeTruthy();

-    // verify table structure
-    expect(await screen.findByText('Subject')).toBeTruthy();
-    expect(await screen.findByText('Sent By')).toBeTruthy();
-    expect(await screen.findByText('Sent To')).toBeTruthy();
-    expect(await screen.findByText('Time Sent')).toBeTruthy();
-    expect(await screen.findByText('Number Sent')).toBeTruthy();
+      // verify table structure
+      expect(await screen.findByText('Subject')).toBeTruthy();
+      expect(await screen.findByText('Sent By')).toBeTruthy();
+      expect(await screen.findByText('Sent To')).toBeTruthy();
+      expect(await screen.findByText('Time Sent')).toBeTruthy();
+      expect(await screen.findByText('Number Sent')).toBeTruthy();

-    // verify table contents
-    const { emails } = emailHistoryData;
-    const email = emails[0];
-    const createdDate = new Date(email.created).toLocaleString();
-    expect(await screen.findByText(createdDate)).toBeTruthy();
-    expect(await screen.findByText(email.number_sent)).toBeTruthy();
-    expect(await screen.findByText(email.requester)).toBeTruthy();
-    expect(await screen.findByText(email.sent_to.join(', '))).toBeTruthy();
-    expect(await screen.findByText(email.email.subject)).toBeTruthy();
-    // verify screen reader only <span />
-    expect(await screen.findByText('0')).toHaveClass('sr-only');
-    expect(await screen.findAllByText('View Message')).toBeTruthy();
+      // verify table contents
+      const { emails } = emailHistoryData;
+      const email = emails[0];
+      expect(await screen.findByText(email.created)).toBeTruthy();
+      expect(await screen.findByText(email.number_sent)).toBeTruthy();
+      expect(await screen.findByText(email.requester)).toBeTruthy();
+      expect(await screen.findByText(email.sent_to.join(', '))).toBeTruthy();
+      expect(await screen.findByText(email.email.subject)).toBeTruthy();
+      // verify screen reader only <span />
+      expect(await screen.findByText('0')).toHaveClass('sr-only');
+      expect(await screen.findAllByText('View Message')).toBeTruthy();
+    });
  });

  test('renders a modal that will display the contents of the previously sent message to a user', async () => {
-    const emailHistoryData = buildEmailContentHistoryData(1);
-    getSentEmailHistory.mockImplementation(() => emailHistoryData);
+    await act(async () => {
+      const emailHistoryData = buildEmailContentHistoryData(1);
+      getSentEmailHistory.mockImplementation(() => emailHistoryData);

-    render(renderBulkEmailContentHistory());
+      render(renderBulkEmailContentHistory());

-    const showEmailContentHistoryButton = await screen.findByText('Show Sent Email History');
-    fireEvent.click(showEmailContentHistoryButton);
+      const showEmailContentHistoryButton = await screen.findByText('Show Sent Email History');
+      fireEvent.click(showEmailContentHistoryButton);

-    const viewMessageButton = await screen.findByText('View Message');
-    fireEvent.click(viewMessageButton);
+      const viewMessageButton = await screen.findByText('View Message');
+      fireEvent.click(viewMessageButton);

-    // verify modal components and behavior
-    const { emails } = emailHistoryData;
-    const email = emails[0];
-    const closeButton = await screen.findAllByText('Close');
+      // verify modal components and behavior
+      const { emails } = emailHistoryData;
+      const email = emails[0];
+      const closeButton = await screen.findAllByText('Close');

-    expect(closeButton).toBeTruthy();
-    expect(await screen.findByText('Subject:')).toBeTruthy();
-    expect(await screen.findByText('Sent by:')).toBeTruthy();
-    expect(await screen.findByText('Time sent:')).toBeTruthy();
-    expect(await screen.findByText('Sent to:')).toBeTruthy();
-    expect(await screen.findByText('Message:')).toBeTruthy();
-    expect(await screen.findAllByText(email.email.subject)).toBeTruthy();
-    expect(await screen.findAllByText(email.requester)).toBeTruthy();
-    const createdDate = new Date(email.created).toLocaleString();
-    expect(await screen.findAllByText(createdDate)).toBeTruthy();
-    expect(await screen.findAllByText(email.sent_to.join(', '))).toBeTruthy();
-    // .replace() call strips the HTML tags from the string
-    expect(await screen.findByText(email.email.html_message.replace(/<[^>]*>?/gm, ''))).toBeTruthy();
+      expect(closeButton).toBeTruthy();
+      expect(await screen.findByText('Subject:')).toBeTruthy();
+      expect(await screen.findByText('Sent by:')).toBeTruthy();
+      expect(await screen.findByText('Time sent:')).toBeTruthy();
+      expect(await screen.findByText('Sent to:')).toBeTruthy();
+      expect(await screen.findByText('Message:')).toBeTruthy();
+      expect(await screen.findAllByText(email.email.subject)).toBeTruthy();
+      expect(await screen.findAllByText(email.requester)).toBeTruthy();
+      expect(await screen.findAllByText(email.created)).toBeTruthy();
+      expect(await screen.findAllByText(email.sent_to.join(', '))).toBeTruthy();
+      // .replace() call strips the HTML tags from the string
+      expect(await screen.findByText(email.email.html_message.replace(/<[^>]*>?/gm, ''))).toBeTruthy();
+    });
  });

  test('renders a warning Alert when the button is pressed but there is no data to display', async () => {
-    const emailHistoryData = buildEmailContentHistoryData(0);
-    getSentEmailHistory.mockImplementation(() => emailHistoryData);
-    // render the component
-    render(renderBulkEmailContentHistory());
-    // press the `show sent email history` button to initiate data retrieval
-    const showEmailContentHistoryButton = await screen.findByText('Show Sent Email History');
-    fireEvent.click(showEmailContentHistoryButton);
-    // verify that an alert is displayed since the array of tasks is empty
-    const alertMessage = await screen.findByText('There is no email history for this course.');
-    expect(alertMessage).toBeTruthy();
+    await act(async () => {
+      const emailHistoryData = buildEmailContentHistoryData(0);
+      getSentEmailHistory.mockImplementation(() => emailHistoryData);
+      // render the component
+      render(renderBulkEmailContentHistory());
+      // press the `show sent email history` button to initiate data retrieval
+      const showEmailContentHistoryButton = await screen.findByText('Show Sent Email History');
+      fireEvent.click(showEmailContentHistoryButton);
+      // verify that an alert is displayed since the array of tasks is empty
+      const alertMessage = await screen.findByText('There is no email history for this course.');
+      expect(alertMessage).toBeTruthy();
+    });
  });

  test('renders an error Alert when the button is pressed and an error occurs retrieving data', async () => {
-    getSentEmailHistory.mockImplementation(() => {
-      throw new Error();
+    await act(async () => {
+      getSentEmailHistory.mockImplementation(() => {
+        throw new Error();
+      });
+      // render the component
+      render(renderBulkEmailContentHistory());
+      // press the `show sent email history` button to initiate data retrieval
+      const showEmailContentHistoryButton = await screen.findByText('Show Sent Email History');
+      fireEvent.click(showEmailContentHistoryButton);
+      // verify that an alert is displayed since the array of tasks is empty
+      const alertMessage = await screen.findByText(
+        'An error occurred retrieving email history data for this course. Please try again later.',
+      );
+      expect(alertMessage).toBeTruthy();
    });
-    // render the component
-    render(renderBulkEmailContentHistory());
-    // press the `show sent email history` button to initiate data retrieval
-    const showEmailContentHistoryButton = await screen.findByText('Show Sent Email History');
-    fireEvent.click(showEmailContentHistoryButton);
-    // verify that an alert is displayed since the array of tasks is empty
-    const alertMessage = await screen.findByText(
-      'An error occurred retrieving email history data for this course. Please try again later.',
-    );
-    expect(alertMessage).toBeTruthy();
  });
 });
--- a/src/components/bulk-email-tool/bulk-email-task-manager/test/BulkEmailPendingTasks.test.jsx
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/test/BulkEmailPendingTasks.test.jsx
@@ -61,7 +61,7 @@ describe('BulkEmailPendingTasks component', () => {
    expect(await screen.findByText('State')).toBeTruthy();
    expect(await screen.findByText('Status')).toBeTruthy();
    expect(await screen.findByText('Task Progress')).toBeTruthy();
-    expect(await screen.findAllByText('Showing 1 - 1 of 1.')).toBeTruthy();
+    expect(await screen.findAllByText('Showing 1 of 1.')).toBeTruthy();

    // verification of table contents
    const { tasks } = pendingInstructorTaskData;
--- a/src/components/bulk-email-tool/bulk-email-task-manager/test/BulkEmailTaskHistory.test.jsx
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/test/BulkEmailTaskHistory.test.jsx
@@ -3,7 +3,7 @@
 */
 import React from 'react';
 import {
-  render, screen, fireEvent, cleanup, initializeMockApp,
+  render, screen, fireEvent, cleanup, act, initializeMockApp,
 } from '../../../../setupTest';
 import BulkEmailTaskHistory from '../BulkEmailTaskHistory';
 import { getEmailTaskHistory } from '../data/api';
@@ -32,66 +32,71 @@ describe('BulkEmailTaskHistory component', () => {
  });

  test('renders a table properly when the button is pressed and data is returned', async () => {
-    // build our mocked response
-    const taskHistoryData = buildEmailTaskHistoryData(1);
-    getEmailTaskHistory.mockImplementation(() => taskHistoryData);
-    // render the component
-    render(<BulkEmailTaskHistory />);
-    // press the `show task history button` to initiate data retrieval and rendering of the table in our component
-    const showTaskHistoryButton = await screen.findByText('Show Email Task History');
-    fireEvent.click(showTaskHistoryButton);
-    // verification of table structure
-    expect(await screen.findByText('Task Type')).toBeTruthy();
-    expect(await screen.findByText('Task Inputs')).toBeTruthy();
-    expect(await screen.findByText('Task Id')).toBeTruthy();
-    expect(await screen.findByText('Requester')).toBeTruthy();
-    expect(await screen.findByText('Submitted')).toBeTruthy();
-    expect(await screen.findByText('Duration (seconds)')).toBeTruthy();
-    expect(await screen.findByText('State')).toBeTruthy();
-    expect(await screen.findByText('Status')).toBeTruthy();
-    expect(await screen.findByText('Task Progress')).toBeTruthy();
-    expect(await screen.findAllByText('Showing 1 - 1 of 1.')).toBeTruthy();
-    // verification of row contents
-    const { tasks } = taskHistoryData;
-    const task = tasks[0];
-    const createdDate = new Date(task.created).toLocaleString();
-    expect(await screen.findByText(createdDate)).toBeTruthy();
-    expect(await screen.findByText(task.duration_sec)).toBeTruthy();
-    expect(await screen.findByText(task.requester)).toBeTruthy();
-    expect(await screen.findByText(task.status)).toBeTruthy();
-    expect(await screen.findByText(task.task_id)).toBeTruthy();
-    expect(await screen.findByText(task.task_input)).toBeTruthy();
-    expect(await screen.findByText(task.task_message)).toBeTruthy();
-    expect(await screen.findByText(task.task_state)).toBeTruthy();
-    expect(await screen.findByText(task.task_type)).toBeTruthy();
+    await act(async () => {
+      // build our mocked response
+      const taskHistoryData = buildEmailTaskHistoryData(1);
+      getEmailTaskHistory.mockImplementation(() => taskHistoryData);
+      // render the component
+      render(<BulkEmailTaskHistory />);
+      // press the `show task history button` to initiate data retrieval and rendering of the table in our component
+      const showTaskHistoryButton = await screen.findByText('Show Email Task History');
+      fireEvent.click(showTaskHistoryButton);
+      // verification of table structure
+      expect(await screen.findByText('Task Type')).toBeTruthy();
+      expect(await screen.findByText('Task Inputs')).toBeTruthy();
+      expect(await screen.findByText('Task Id')).toBeTruthy();
+      expect(await screen.findByText('Requester')).toBeTruthy();
+      expect(await screen.findByText('Submitted')).toBeTruthy();
+      expect(await screen.findByText('Duration (seconds)')).toBeTruthy();
+      expect(await screen.findByText('State')).toBeTruthy();
+      expect(await screen.findByText('Status')).toBeTruthy();
+      expect(await screen.findByText('Task Progress')).toBeTruthy();
+      expect(await screen.findAllByText('Showing 1 of 1.')).toBeTruthy();
+      // verification of row contents
+      const { tasks } = taskHistoryData;
+      const task = tasks[0];
+      expect(await screen.findByText(task.created)).toBeTruthy();
+      expect(await screen.findByText(task.duration_sec)).toBeTruthy();
+      expect(await screen.findByText(task.requester)).toBeTruthy();
+      expect(await screen.findByText(task.status)).toBeTruthy();
+      expect(await screen.findByText(task.task_id)).toBeTruthy();
+      expect(await screen.findByText(task.task_input)).toBeTruthy();
+      expect(await screen.findByText(task.task_message)).toBeTruthy();
+      expect(await screen.findByText(task.task_state)).toBeTruthy();
+      expect(await screen.findByText(task.task_type)).toBeTruthy();
+    });
  });

  test('renders a warning Alert when the button is pressed but there is no data to display', async () => {
-    const taskHistoryData = buildEmailTaskHistoryData(0);
-    getEmailTaskHistory.mockImplementation(() => taskHistoryData);
-    // render the component
-    render(<BulkEmailTaskHistory />);
-    // press the `show task history` button to initiate data retrieval
-    const showTaskHistoryButton = await screen.findByText('Show Email Task History');
-    fireEvent.click(showTaskHistoryButton);
-    // verify that an alert is displayed since the array of tasks is empty
-    const alertMessage = await screen.findByText('There is no email task history for this course.');
-    expect(alertMessage).toBeTruthy();
+    await act(async () => {
+      const taskHistoryData = buildEmailTaskHistoryData(0);
+      getEmailTaskHistory.mockImplementation(() => taskHistoryData);
+      // render the component
+      render(<BulkEmailTaskHistory />);
+      // press the `show task history` button to initiate data retrieval
+      const showTaskHistoryButton = await screen.findByText('Show Email Task History');
+      fireEvent.click(showTaskHistoryButton);
+      // verify that an alert is displayed since the array of tasks is empty
+      const alertMessage = await screen.findByText('There is no email task history for this course.');
+      expect(alertMessage).toBeTruthy();
+    });
  });

  test('renders an error Alert when the button is pressed and an error occurs retrieving data', async () => {
-    getEmailTaskHistory.mockImplementation(() => {
-      throw new Error();
+    await act(async () => {
+      getEmailTaskHistory.mockImplementation(() => {
+        throw new Error();
+      });
+      // render the component
+      render(<BulkEmailTaskHistory />);
+      // press the `show task history` button to initiate data retrieval
+      const showTaskHistoryButton = await screen.findByText('Show Email Task History');
+      fireEvent.click(showTaskHistoryButton);
+      // verify that an alert is displayed since the array of tasks is empty
+      const alertMessage = await screen.findByText(
+        'Error fetching email task history data for this course. Please try again later.',
+      );
+      expect(alertMessage).toBeTruthy();
    });
-    // render the component
-    render(<BulkEmailTaskHistory />);
-    // press the `show task history` button to initiate data retrieval
-    const showTaskHistoryButton = await screen.findByText('Show Email Task History');
-    fireEvent.click(showTaskHistoryButton);
-    // verify that an alert is displayed since the array of tasks is empty
-    const alertMessage = await screen.findByText(
-      'Error fetching email task history data for this course. Please try again later.',
-    );
-    expect(alertMessage).toBeTruthy();
  });
 });
--- a/src/components/bulk-email-tool/task-alert-modal/TaskAlertModal.jsx
+++ b/src/components/bulk-email-tool/task-alert-modal/TaskAlertModal.jsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ActionRow, AlertModal, Button } from '@openedx/paragon';
-import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { ActionRow, AlertModal, Button } from '@edx/paragon';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';

 function TaskAlertModal(props) {
  const {
-    isOpen, close, alertMessage,
+    isOpen, close, alertMessage, intl,
  } = props;
-  const intl = useIntl();
+
  const messages = {
    taskAlertTitle: {
      id: 'bulk.email.task.alert.title',
@@ -57,6 +57,7 @@ TaskAlertModal.propTypes = {
  isOpen: PropTypes.bool.isRequired,
  close: PropTypes.func.isRequired,
  alertMessage: PropTypes.node.isRequired,
+  intl: intlShape.isRequired,
 };

-export default TaskAlertModal;
+export default injectIntl(TaskAlertModal);
--- a/src/components/bulk-email-tool/text-editor/TextEditor.jsx
+++ b/src/components/bulk-email-tool/text-editor/TextEditor.jsx
@@ -17,8 +17,8 @@ import 'tinymce/plugins/image';
 import 'tinymce/plugins/codesample';
 import '@edx/tinymce-language-selector';

-import contentUiCss from 'tinymce/skins/ui/oxide/content.css?raw';
-import contentCss from 'tinymce/skins/content/default/content.css?raw';
+import contentUiCss from 'tinymce/skins/ui/oxide/content.css';
+import contentCss from 'tinymce/skins/content/default/content.css';

 export default function TextEditor(props) {
  const {
--- a/src/components/navigation-tabs/BackToInstructor.jsx
+++ b/src/components/navigation-tabs/BackToInstructor.jsx
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';

 import { getConfig } from '@edx/frontend-platform';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Button, Icon } from '@openedx/paragon';
-import { ArrowBack } from '@openedx/paragon/icons';
+import { Button, Icon } from '@edx/paragon';
+import { ArrowBack } from '@edx/paragon/icons';

 export default function BackToInstructor(props) {
  const { courseId } = props;
--- a/src/components/navigation-tabs/NavigationTabs.jsx
+++ b/src/components/navigation-tabs/NavigationTabs.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { Nav } from '@openedx/paragon';
+import { Nav } from '@edx/paragon';

 export default function NavigationTabs(props) {
  const { tabData } = props;
--- a/src/components/page-container/PageContainer.jsx
+++ b/src/components/page-container/PageContainer.jsx
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import { useParams } from 'react-router-dom';

 import { LearningHeader as Header } from '@edx/frontend-component-header';
-import { FooterSlot } from '@edx/frontend-component-footer';
-import { Spinner } from '@openedx/paragon';
+import Footer from '@edx/frontend-component-footer';
+import { Spinner } from '@edx/paragon';

 import { getCohorts, getCourseHomeCourseMetadata } from './data/api';

@@ -39,7 +39,7 @@ export default function PageContainer(props) {
      }

      const {
-        org, number, title, tabs, originalUserIsStaff, courseModes,
+        org, number, title, tabs, originalUserIsStaff,
      } = metadataResponse;
      const { cohorts } = cohortsResponse;

@@ -48,7 +48,6 @@ export default function PageContainer(props) {
        number,
        title,
        originalUserIsStaff,
-        courseModes,
        tabs: [...tabs],
        cohorts: cohorts.map(({ name }) => name),
      });
@@ -60,20 +59,18 @@ export default function PageContainer(props) {
  if (courseMetadata) {
    return (
      <CourseMetadataContext.Provider value={courseMetadata}>
-        <>
-          <Header
-            className="learning-header"
-            courseOrg={courseMetadata.org}
-            courseNumber={courseMetadata.number}
-            courseTitle={courseMetadata.title}
-          />
-          <div className="pb-3 container">
-            <main id="main-content">
-              {children}
-            </main>
-          </div>
-          <FooterSlot />
-        </>
+        <Header
+          className="learning-header"
+          courseOrg={courseMetadata.org}
+          courseNumber={courseMetadata.number}
+          courseTitle={courseMetadata.title}
+        />
+        <div className="pb-3 container">
+          <main>
+            {children}
+          </main>
+        </div>
+        <Footer />
      </CourseMetadataContext.Provider>
    );
  }
--- a/src/components/page-container/test/PageContainer.test.jsx
+++ b/src/components/page-container/test/PageContainer.test.jsx
@@ -4,7 +4,7 @@
 import React from 'react';
 import { Factory } from 'rosie';
 import {
-  cleanup, initializeMockApp, render, screen,
+  act, cleanup, initializeMockApp, render, screen,
 } from '../../../setupTest';

 import PageContainer from '../PageContainer';
@@ -32,32 +32,36 @@ describe('PageContainer', () => {
  afterEach(cleanup);

  test('PageContainer renders properly when given course metadata', async () => {
-    const cohorts = { cohorts: [Factory.build('cohort'), Factory.build('cohort')] };
-    const courseMetadata = Factory.build('courseMetadata');
+    await act(async () => {
+      const cohorts = { cohorts: [Factory.build('cohort'), Factory.build('cohort')] };
+      const courseMetadata = Factory.build('courseMetadata');

-    getCohorts.mockImplementation(() => cohorts);
-    getCourseHomeCourseMetadata.mockImplementation(() => courseMetadata);
+      getCohorts.mockImplementation(() => cohorts);
+      getCourseHomeCourseMetadata.mockImplementation(() => courseMetadata);

-    render(<PageContainer />);
+      render(<PageContainer />);

-    // Look for the org, title, and number of the course, which should be displayed in the Header.
-    expect(await screen.findByText(`${courseMetadata.org} ${courseMetadata.number}`)).toBeTruthy();
-    expect(await screen.findByText(courseMetadata.title)).toBeTruthy();
+      // Look for the org, title, and number of the course, which should be displayed in the Header.
+      expect(await screen.findByText(`${courseMetadata.org} ${courseMetadata.number}`)).toBeTruthy();
+      expect(await screen.findByText(courseMetadata.title)).toBeTruthy();
+    });
  });

  test('PageContainer renders children nested within it.', async () => {
-    const cohorts = { cohorts: [Factory.build('cohort'), Factory.build('cohort')] };
-    const courseMetadata = Factory.build('courseMetadata');
+    await act(async () => {
+      const cohorts = { cohorts: [Factory.build('cohort'), Factory.build('cohort')] };
+      const courseMetadata = Factory.build('courseMetadata');

-    getCohorts.mockImplementation(() => cohorts);
-    getCourseHomeCourseMetadata.mockImplementation(() => courseMetadata);
+      getCohorts.mockImplementation(() => cohorts);
+      getCourseHomeCourseMetadata.mockImplementation(() => courseMetadata);

-    render(
-      <PageContainer>
-        <span>Test Text</span>
-      </PageContainer>,
-    );
+      render(
+        <PageContainer>
+          <span>Test Text</span>
+        </PageContainer>,
+      );

-    expect(await screen.findByText('Test Text')).toBeTruthy();
+      expect(await screen.findByText('Test Text')).toBeTruthy();
+    });
  });
 });
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -1 +1,41 @@
-export default [];
+import { messages as footerMessages } from '@edx/frontend-component-footer';
+import { messages as headerMessages } from '@edx/frontend-component-header';
+import { messages as paragonMessages } from '@edx/paragon';
+
+import arMessages from './messages/ar.json';
+import caMessages from './messages/ca.json';
+// no need to import en messages-- they are in the defaultMessage field
+import es419Messages from './messages/es_419.json';
+import frMessages from './messages/fr.json';
+import zhcnMessages from './messages/zh_CN.json';
+import heMessages from './messages/he.json';
+import idMessages from './messages/id.json';
+import kokrMessages from './messages/ko_kr.json';
+import plMessages from './messages/pl.json';
+import ptbrMessages from './messages/pt_br.json';
+import ruMessages from './messages/ru.json';
+import thMessages from './messages/th.json';
+import ukMessages from './messages/uk.json';
+
+const appMessages = {
+  ar: arMessages,
+  'es-419': es419Messages,
+  fr: frMessages,
+  'zh-cn': zhcnMessages,
+  ca: caMessages,
+  he: heMessages,
+  id: idMessages,
+  'ko-kr': kokrMessages,
+  pl: plMessages,
+  'pt-br': ptbrMessages,
+  ru: ruMessages,
+  th: thMessages,
+  uk: ukMessages,
+};
+
+export default [
+  headerMessages,
+  footerMessages,
+  paragonMessages,
+  appMessages,
+];
--- a/src/i18n/messages/ar.json
+++ b/src/i18n/messages/ar.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/ca.json
+++ b/src/i18n/messages/ca.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/es_419.json
+++ b/src/i18n/messages/es_419.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/fr.json
+++ b/src/i18n/messages/fr.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/he.json
+++ b/src/i18n/messages/he.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/id.json
+++ b/src/i18n/messages/id.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/ko_kr.json
+++ b/src/i18n/messages/ko_kr.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/pl.json
+++ b/src/i18n/messages/pl.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/pt_br.json
+++ b/src/i18n/messages/pt_br.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/ru.json
+++ b/src/i18n/messages/ru.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/th.json
+++ b/src/i18n/messages/th.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/uk.json
+++ b/src/i18n/messages/uk.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/zh_CN.json
+++ b/src/i18n/messages/zh_CN.json
@@ -0,0 +1 @@
+{}
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -5,11 +5,10 @@ import {
  APP_INIT_ERROR, APP_READY, subscribe, initialize, mergeConfig, getConfig,
 } from '@edx/frontend-platform';
 import { AppProvider, AuthenticatedPageRoute, ErrorPage } from '@edx/frontend-platform/react';
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
+import ReactDOM from 'react-dom';

 import { Helmet } from 'react-helmet';
-import { Routes, Route } from 'react-router-dom';
+import { Switch } from 'react-router-dom';
 import messages from './i18n';

 import './index.scss';
@@ -17,39 +16,25 @@ import BulkEmailTool from './components/bulk-email-tool';
 import PageContainer from './components/page-container/PageContainer';

 subscribe(APP_READY, () => {
-  const root = createRoot(document.getElementById('root'));
-
-  root.render(
-    <StrictMode>
-      <AppProvider>
-        <Helmet>
-          <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
-        </Helmet>
-        <Routes>
-          <Route
-            path="/courses/:courseId/bulk_email"
-            element={(
-              <AuthenticatedPageRoute>
-                <PageContainer>
-                  <BulkEmailTool />
-                </PageContainer>
-              </AuthenticatedPageRoute>
-          )}
-          />
-        </Routes>
-      </AppProvider>
-    </StrictMode>,
+  ReactDOM.render(
+    <AppProvider>
+      <Helmet>
+        <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
+      </Helmet>
+      <Switch>
+        <AuthenticatedPageRoute path="/courses/:courseId/bulk_email">
+          <PageContainer>
+            <BulkEmailTool />
+          </PageContainer>
+        </AuthenticatedPageRoute>
+      </Switch>
+    </AppProvider>,
+    document.getElementById('root'),
  );
 });

 subscribe(APP_INIT_ERROR, (error) => {
-  const root = createRoot(document.getElementById('root'));
-
-  root.render(
-    <StrictMode>
-      <ErrorPage message={error.message} />
-    </StrictMode>,
-  );
+  ReactDOM.render(<ErrorPage message={error.message} />, document.getElementById('root'));
 });

 initialize({
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,4 +1,7 @@
-@use "@openedx/paragon/styles/css/core/custom-media-breakpoints" as paragonCustomMediaBreakpoints;
+@import "~@edx/brand/paragon/fonts";
+@import "~@edx/brand/paragon/variables";
+@import "~@edx/paragon/scss/core/core";
+@import "~@edx/brand/paragon/overrides";

@import "~@edx/frontend-component-header/dist/index";
@import "~@edx/frontend-component-footer/dist/footer";
--- a/src/index.test.jsx
+++ b/src/index.test.jsx
@@ -1,67 +0,0 @@
-import {
-  APP_INIT_ERROR, APP_READY, subscribe,
-} from '@edx/frontend-platform';
-
-// Jest needs this for module resolution
-import * as app from '.'; // eslint-disable-line @typescript-eslint/no-unused-vars
-
-// These need to be var not let so they get hoisted
-// and can be used by jest.mock (which is also hoisted)
-var mockRender; // eslint-disable-line no-var
-var mockCreateRoot; // eslint-disable-line no-var
-jest.mock('react-dom/client', () => {
-  mockRender = jest.fn();
-  mockCreateRoot = jest.fn(() => ({
-    render: mockRender,
-  }));
-
-  return ({
-    createRoot: mockCreateRoot,
-  });
-});
-
-jest.mock('@edx/frontend-platform', () => ({
-  APP_READY: 'app-is-ready-key',
-  APP_INIT_ERROR: 'app-init-error',
-  subscribe: jest.fn(),
-  initialize: jest.fn(),
-  mergeConfig: jest.fn(),
-  getConfig: () => ({
-    FAVICON_URL: 'favicon-url',
-  }),
-  ensureConfig: jest.fn(),
-}));
-
-jest.mock('./components/bulk-email-tool/BulkEmailTool', () => 'Bulk Email Tool');
-jest.mock('./components/page-container/PageContainer', () => 'Page Container');
-
-describe('app registry', () => {
-  let getElement;
-
-  beforeEach(() => {
-    mockCreateRoot.mockClear();
-    mockRender.mockClear();
-
-    getElement = window.document.getElementById;
-    window.document.getElementById = jest.fn(id => ({ id }));
-  });
-  afterAll(() => {
-    window.document.getElementById = getElement;
-  });
-
-  test('subscribe: APP_READY.  links App to root element', () => {
-    const callArgs = subscribe.mock.calls[0];
-    expect(callArgs[0]).toEqual(APP_READY);
-    callArgs[1]();
-    const [rendered] = mockRender.mock.calls[0];
-    expect(rendered).toMatchSnapshot();
-  });
-  test('subscribe: APP_INIT_ERROR.  snapshot: displays an ErrorPage to root element', () => {
-    const callArgs = subscribe.mock.calls[1];
-    expect(callArgs[0]).toEqual(APP_INIT_ERROR);
-    const error = { message: 'test-error-message' };
-    callArgs[1](error);
-    const [rendered] = mockRender.mock.calls[0];
-    expect(rendered).toMatchSnapshot();
-  });
-});
--- a/src/plugin-slots/FooterSlot/README.md
+++ b/src/plugin-slots/FooterSlot/README.md
@@ -1,53 +0,0 @@
-# Footer Slot
-
-### Slot ID: `org.openedx.frontend.layout.footer.v1`
-
-### Slot ID Aliases
-* `footer_slot`
-
-## Description
-
-This slot is used to replace/modify/hide the footer.
-
-The implementation of the `FooterSlot` component lives in [the `frontend-component-footer` repository](https://github.com/openedx/frontend-component-footer/).
-
-## Example
-
-The following `env.config.jsx` will replace the default footer.
-
-![Screenshot of Default Footer](./images/default_footer.png)
-
-with a simple custom footer
-
-![Screenshot of Custom Footer](./images/custom_footer.png)
-
-```jsx
-import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
-
-const config = {
-  pluginSlots: {
-    'org.openedx.frontend.layout.footer.v1': {
-      plugins: [
-        {
-          // Hide the default footer
-          op: PLUGIN_OPERATIONS.Hide,
-          widgetId: 'default_contents',
-        },
-        {
-          // Insert a custom footer
-          op: PLUGIN_OPERATIONS.Insert,
-          widget: {
-            id: 'custom_footer',
-            type: DIRECT_PLUGIN,
-            RenderWidget: () => (
-              <h1 style={{textAlign: 'center'}}>🦶</h1>
-            ),
-          },
-        },
-      ]
-    }
-  },
-}
-
-export default config;
-```
--- a/src/plugin-slots/FooterSlot/images/custom_footer.png
+++ b/src/plugin-slots/FooterSlot/images/custom_footer.png
--- a/src/plugin-slots/FooterSlot/images/default_footer.png
+++ b/src/plugin-slots/FooterSlot/images/default_footer.png
--- a/src/plugin-slots/README.md
+++ b/src/plugin-slots/README.md
@@ -1,3 +0,0 @@
-# `frontend-app-communications` Plugin Slots
-
-* [`org.openedx.frontend.layout.footer.v1`](./FooterSlot/)
--- a/src/setupTest.js
+++ b/src/setupTest.js
@@ -13,9 +13,7 @@ import messages from './i18n';
 jest.mock('@edx/frontend-platform/react/hooks', () => ({
  ...jest.requireActual('@edx/frontend-platform/react/hooks'),
  useTrackColorSchemeChoice: jest.fn(),
-  useParagonTheme: () => [{ isThemeLoaded: true }, jest.fn()],
 }));
-
 Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: jest.fn().mockImplementation((query) => ({
@@ -30,8 +28,6 @@ Object.defineProperty(window, 'matchMedia', {
  })),
 });

-global.Date.prototype.toLocaleDateString = jest.fn();
-
 export function initializeMockApp() {
  mergeConfig({
    // MICROBA-1505: Remove this when we remove the flag from config
@@ -58,6 +54,11 @@ export function initializeMockApp() {
  return { loggingService, i18nService, authService };
 }

+jest.mock('@edx/frontend-platform/react/hooks', () => ({
+  ...jest.requireActual('@edx/frontend-platform/react/hooks'),
+  useTrackColorSchemeChoice: jest.fn(),
+}));
+
 function render(ui, options) {
  // eslint-disable-next-line react/prop-types
  function Wrapper({ children }) {
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,13 +0,0 @@
-{
-  "extends": "@edx/typescript-config",
-  "compilerOptions": {
-    "baseUrl": "./src",
-    "paths": {
-      "*": ["*"]
-    },
-    "rootDir": ".",
-    "outDir": "dist"
-  },
-  "include": ["*.js", ".eslintrc.js", "src/**/*", "plugins/**/*", "jest.config.ts"],
-  "exclude": ["*.js", ".eslintrc.js", "dist", "node_modules"]
-}
--- a/webpack.dev.config.js
+++ b/webpack.dev.config.js
@@ -1,4 +1,4 @@
-const { createConfig } = require('@openedx/frontend-build');
+const { createConfig } = require('@edx/frontend-build');

 const config = createConfig('webpack-dev');

@@ -22,13 +22,8 @@ const webpack5esmInteropRule = {
  },
 };

-const rawAssetRule = {
-  resourceQuery: /raw/,
-  type: 'asset/source',
-};
-
 const otherRules = config.module.rules;

-config.module.rules = [rawAssetRule, webpack5esmInteropRule, ...otherRules];
+config.module.rules = [webpack5esmInteropRule, ...otherRules];

 module.exports = config;
--- a/webpack.prod.config.js
+++ b/webpack.prod.config.js
@@ -1,4 +1,4 @@
-const { createConfig } = require('@openedx/frontend-build');
+const { createConfig } = require('@edx/frontend-build');

 const config = createConfig('webpack-prod');

@@ -14,13 +14,8 @@ const webpack5esmInteropRule = {
  },
 };

-const rawAssetRule = {
-  resourceQuery: /raw/,
-  type: 'asset/source',
-};
-
 const otherRules = config.module.rules;

-config.module.rules = [rawAssetRule, webpack5esmInteropRule, ...otherRules];
+config.module.rules = [webpack5esmInteropRule, ...otherRules];

 module.exports = config;
Author	SHA1	Message	Date
Ihor Romaniuk	d9cce51d86	fix: date format depends on locale date format (#173 )	2023-11-16 07:23:14 -03:00
vladislavkeblysh	925a7392cb	feat: fixed lint	2023-11-14 12:37:33 -03:00
vladislavkeblysh	42bea23bd1	feat: fixed layout	2023-11-14 12:37:33 -03:00
Stanislav Lunyachek	833de88e1c	fix: Missed favicon in Safari	2023-11-14 12:36:40 -03:00
Omar Al-Ithawi	bd85312ab3	feat: use `atlas` in `make pull_translations` on palm (#156 ) Changes ------- - Bump frontend-platform to bring intl-imports.js script - Move all i18n imports into `src/i18n/index.js` so intl-imports.js can override it with latest translations - Add `atlas` into `make pull_translations` when `OPENEDX_ATLAS_PULL` environment variable is set. - Fixed lint rules for frontend-platform@4.1.0 - Mock useTrackColorSchemeChoice to avoid test failures - Remove all broken and deprecated Tranisfex use - Install openedx-atlas Refs: [FC-0012 project](https://openedx.atlassian.net/l/cp/XGS0iCcQ) implementing Translation Infrastructure OEP-58.	2023-11-03 16:57:13 -04:00
Adolfo R. Brandes	ca7bc7d359	feat: Runtime config support, take 2 Adds a couple of missing features for proper runtime configuration: 1. Favicon runtime configuration support via react-helmet 2. Placeholder values for APP_ID and MFE_CONFIG_API_URL in the sample .env files	2023-06-14 15:33:56 +01:00
Adolfo R. Brandes	b41a336e11	feat: Support runtime configuration frontend-platform supports runtime configuration since 2.5.0 (see the PR that introduced it[1], but it requires MFE cooperation. This implements just that: by avoiding making configuration values constant, it should now be possible to change them after initialization. Only a single change related to the `LMS_BASE_URL` setting was required. [1] openedx/frontend-platform#335	2023-06-13 21:27:27 +01:00
Tobias Macey	b4032215c6	fix: Disable URL rewriting when creating links The default behavior of the TinyMCE editor is to rewrite links that share the same domain as the component to be relative to that path. Relative URLs will never work in email contents, so they _always_ need to be absolute URLs. This adds the configuration settings for `relative_urls` and `remove_script_host` in TinyMCE to always be false, enabling it to always use absolute URLs. See [here](https://www.tiny.cloud/docs/configure/url-handling/) for reference.	2023-06-13 13:08:14 +01:00
Ghassan Maslamani	b20eb50699	test: course url when public path is set The commit add two tests for the following componenets: 1. BackToInstructor 2. BulkEmailPendingTasksAlert Which tests course url when public path is set to something other than '/' and also when it is '/'.	2023-06-06 16:55:14 +01:00
Ghassan Maslamani	5c021cdc80	fix: getting course-id when public path is set, closes #126 This change change the way course-id is retrieved, in 1. BackToInstructor 2. BulkEmailPendingTasksAlert componenets, before it was resolved by guessing course-id index in the url, which would not be true if the public path is set something other than '/'. Since public path would shift the index of course-id in the url. Instead the course-id is resolved through react-router just like the container componenet, using the `useParams` hook.	2023-06-06 16:55:14 +01:00
Mashal Malik	fa826fe687	feat: upgrade to node v18 and related fixes (#123 )	2023-06-02 12:17:47 +01:00