fix: limit email subject length

Add limitation for subject length (128 chars) and the
corresponding help text.

.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: {

.github/workflows/ci.yml

@@ -9,9 +9,6 @@ on:
 jobs:
   tests:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node: [18, 20]
 
     steps:
     - name: Checkout
@@ -21,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: ${{ matrix.node }}
+        node-version: ${{ env.NODE_VER }}
     - name: Install dependencies
       run: npm ci
     - name: Validate package-lock.json changes
@@ -37,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

.github/workflows/lockfileversion-check.yml

@@ -10,4 +10,4 @@ on:
 
 jobs:
   version-check:
-    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master
+    uses: openedx/.github/.github/workflows/lockfile-check.yml@master

.gitignore

@@ -17,4 +17,3 @@ temp/babel-plugin-react-intl
 *~
 /temp
 /.vscode
-src/i18n/messages/

.nvmrc

@@ -1,2 +1,2 @@
-20
+18
 

Makefile

@@ -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:

README.rst

@@ -1,5 +1,5 @@
 frontend-app-communications
-###########################
+#############################
 
 |license-badge| |status-badge| |ci-badge| |codecov-badge|
 
@@ -7,56 +7,52 @@ frontend-app-communications
 Purpose
 *******
 
-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.
+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.
 
 Getting started
----------------
+------------
 
-For now, this repo is not integrated with devstack. You'll be running the app locally and not through docker. This does make setup a little easier.
+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.
 
 Cloning and Startup
 ===================
 
-1. Clone your new repo:
+   1. Clone your new repo:
 
-.. code-block:: bash
+   ``git clone https://github.com/edx/frontend-app-communications.git``
 
-   git clone https://github.com/edx/frontend-app-communications.git
+   2. Use node v18.x.
 
-2. Use node v18.x.
+      The current version of the micro-frontend build scripts support node 18.
+      Using other major versions of node *may* work, but this is unsupported.  For
+      convenience, this repository includes an .nvmrc file to help in setting the
+      correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
 
-   The current version of the micro-frontend build scripts supports node 18.
-   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:
 
-3. Install npm dependencies:
+   ``cd frontend-app-communications && npm install``
 
-.. code-block:: bash
+   4. Update the application port to use for local development:
 
-   cd frontend-app-communications && npm install
+      Default port is 1984. If this does not work for you, update the line
+      `PORT=1984` to your port in all .env.* files
 
-4. Update the application port to use for local development:
+   5. Start the devserver. The app will be running at ``localhost:1984``, or whatever port you change it too.
 
-   The default port is 1984. If this does not work for you, update the line
-   ``PORT=1984`` to your port in all ``.env.*`` files
+      .. code-block::
 
-5. Start the devserver. The app will be running at ``localhost:1984``, or whatever port you change it too.
-
-   .. code-block:: bash
-
-      npm start
+         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: () => {
@@ -65,19 +61,14 @@ 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
+      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**
 
@@ -86,7 +77,7 @@ The production build is created with ``npm run build``.
 Internationalization
 ====================
 
-Please refer to the `frontend-platform i18n howto`_ for documentation on
+Please see 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
@@ -169,4 +160,4 @@ Please do not report security issues in public, and email security@openedx.org i
 
 .. |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
+    :alt: Codecov

catalog-info.yaml

@@ -13,6 +13,6 @@ metadata:
   annotations:
     openedx.org/arch-interest-groups: ""
 spec:
-  owner: group:committers-frontend
+  owner: group:frontend-all
   type: "service"
   lifecycle: "production"

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.  

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' },
   ],
 };

package.json

@@ -11,7 +11,7 @@
   ],
   "scripts": {
     "build": "fedx-scripts webpack",
-    "i18n_extract": "fedx-scripts formatjs extract",
+    "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",
@@ -33,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-header": "^5.6.0",
-    "@edx/frontend-platform": "^8.0.0",
-    "@edx/openedx-atlas": "^0.6.0",
+    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
+    "@edx/frontend-component-footer": "12.2.0",
+    "@edx/frontend-component-header": "4.6.0",
+    "@edx/frontend-platform": "5.5.2",
+    "@edx/openedx-atlas": "^0.5.0",
+    "@edx/paragon": "^20.44.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.1.2",
-    "@openedx/frontend-slot-footer": "^1.0.2",
-    "@openedx/paragon": "^22.0.0",
     "@tinymce/tinymce-react": "3.14.0",
     "axios": "0.27.2",
     "classnames": "2.3.2",
@@ -65,14 +64,14 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.2.0",
-    "@openedx/frontend-build": "14.0.3",
+    "@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",
     "husky": "7.0.4",
-    "jest": "29.7.0",
+    "jest": "27.5.1",
     "prettier": "2.8.1",
     "rosie": "2.1.0"
   }

renovate.json

@@ -24,7 +24,7 @@
       "automerge": true
     },
     {
-      "matchPackagePatterns": ["@edx", "@openedx"],
+      "matchPackagePatterns": ["@edx"],
       "matchUpdateTypes": ["minor", "patch"],
       "automerge": true
     }

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"

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

@@ -4,10 +4,10 @@ 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';
+} from '@edx/paragon/icons';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import classNames from 'classnames';
 import { getConfig } from '@edx/frontend-platform';

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) {

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';

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

@@ -1,14 +1,14 @@
 /* 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 { 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';
@@ -51,15 +51,17 @@ function BulkEmailContentHistory({ intl }) {
    * 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
@@ -100,7 +102,7 @@ function BulkEmailContentHistory({ intl }) {
    * contents of a previously sent message.
    */
   const additionalColumns = () => {
-    const tableData = transformDataForTable;
+    const tableData = transformDataForTable();
 
     return [
       {
@@ -137,7 +139,7 @@ function BulkEmailContentHistory({ intl }) {
           {showHistoricalEmailContentTable ? (
             <BulkEmailTaskManagerTable
               errorRetrievingData={errorRetrievingData}
-              tableData={transformDataForTable}
+              tableData={transformDataForTable()}
               tableDescription={intl.formatMessage(messages.emailHistoryTableViewMessageInstructions)}
               alertWarningMessage={intl.formatMessage(messages.noEmailData)}
               alertErrorMessage={intl.formatMessage(messages.errorFetchingEmailHistoryData)}

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';
 

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) {

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 { 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';
 
@@ -41,14 +41,6 @@ function BulkEmailTaskHistory({ intl }) {
     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)}`,
@@ -103,7 +95,7 @@ function BulkEmailTaskHistory({ intl }) {
           {showHistoricalTaskContentTable ? (
             <BulkEmailTaskManagerTable
               errorRetrievingData={errorRetrievingData}
-              tableData={transformDataForTable}
+              tableData={emailTaskHistoryData}
               alertWarningMessage={intl.formatMessage(messages.noTaskHistoryData)}
               alertErrorMessage={intl.formatMessage(messages.errorFetchingTaskHistoryData)}
               columns={tableColumns}

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

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { ActionRow, Button, ModalDialog } from '@openedx/paragon';
+import { ActionRow, Button, ModalDialog } from '@edx/paragon';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import messages from './messages';
 import { BulkEmailContext } from '../bulk-email-context';

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

@@ -7,10 +7,10 @@ import React, {
 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';

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

@@ -66,8 +66,7 @@ describe('BulkEmailContentHistory component', () => {
       // 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.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();
@@ -104,8 +103,7 @@ describe('BulkEmailContentHistory component', () => {
       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.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();

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;

src/components/bulk-email-tool/bulk-email-task-manager/test/BulkEmailTaskHistory.test.jsx

@@ -51,12 +51,11 @@ describe('BulkEmailTaskHistory 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 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.created)).toBeTruthy();
       expect(await screen.findByText(task.duration_sec)).toBeTruthy();
       expect(await screen.findByText(task.requester)).toBeTruthy();
       expect(await screen.findByText(task.status)).toBeTruthy();

src/components/bulk-email-tool/task-alert-modal/TaskAlertModal.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ActionRow, AlertModal, Button } from '@openedx/paragon';
+import { ActionRow, AlertModal, Button } from '@edx/paragon';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 function TaskAlertModal(props) {

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;

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;

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 '@openedx/frontend-slot-footer';
-import { Spinner } from '@openedx/paragon';
+import Footer from '@edx/frontend-component-footer';
+import { Spinner } from '@edx/paragon';
 
 import { getCohorts, getCourseHomeCourseMetadata } from './data/api';
 
@@ -68,11 +68,11 @@ export default function PageContainer(props) {
             courseTitle={courseMetadata.title}
           />
           <div className="pb-3 container">
-            <main id="main-content">
+            <main>
               {children}
             </main>
           </div>
-          <FooterSlot />
+          <Footer />
         </>
       </CourseMetadataContext.Provider>
     );

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,
+];

src/i18n/messages/ar.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/ca.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/es_419.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/fr.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/he.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/id.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/ko_kr.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/pl.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/pt_br.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/ru.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/th.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/uk.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/zh_CN.json

@@ -0,0 +1 @@
+{}

src/index.scss

@@ -1,6 +1,6 @@
 @import "~@edx/brand/paragon/fonts";
 @import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
+@import "~@edx/paragon/scss/core/core";
 @import "~@edx/brand/paragon/overrides";
 
 @import "~@edx/frontend-component-header/dist/index";

src/plugin-slots/FooterSlot/README.md

@@ -1,50 +0,0 @@
-# Footer Slot
-
-### Slot ID: `footer_slot`
-
-## Description
-
-This slot is used to replace/modify/hide the footer.
-
-The implementation of the `FooterSlot` component lives in [the `frontend-slot-footer` repository](https://github.com/openedx/frontend-slot-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: {
-    footer_slot: {
-      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;
-```

src/plugin-slots/README.md

@@ -1,3 +0,0 @@
-# `frontend-app-communications` Plugin Slots
-
-* [`footer_slot`](./FooterSlot/)

src/setupTest.js

@@ -29,8 +29,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

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');
 

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');