fix: removed codecov package

.env

@@ -19,5 +19,3 @@ SEGMENT_KEY=''
 SITE_NAME=''
 USER_INFO_COOKIE_NAME=''
 SCHEDULE_EMAIL_SECTION=''
-APP_ID=''
-MFE_CONFIG_API_URL=''

.env.development

@@ -20,5 +20,3 @@ SEGMENT_KEY=''
 SITE_NAME=localhost
 USER_INFO_COOKIE_NAME='edx-user-info'
 SCHEDULE_EMAIL_SECTION='true'
-APP_ID=''
-MFE_CONFIG_API_URL=''

.env.test

@@ -18,5 +18,3 @@ SEGMENT_KEY=''
 SITE_NAME=localhost
 USER_INFO_COOKIE_NAME='edx-user-info'
 SCHEDULE_EMAIL_SECTION='true'
-APP_ID=''
-MFE_CONFIG_API_URL=''

.eslintrc.js

@@ -1,9 +1,3 @@
-/* eslint-disable import/no-extraneous-dependencies */
-
 const { createConfig } = require('@edx/frontend-build');
 
-module.exports = createConfig('eslint', {
-  rules: {
-    'react/function-component-definition': 'off',
-  },
-});
+module.exports = createConfig('eslint');

.github/workflows/ci.yml

@@ -9,18 +9,18 @@ on:
 jobs:
   tests:
     runs-on: ubuntu-latest
-
+    strategy:
+      matrix:
+        node: [16]
     steps:
     - name: Checkout
       uses: actions/checkout@v3
       with:
         fetch-depth: 0
-    - name: Setup Nodejs Env
-      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
     - name: Setup Nodejs
       uses: actions/setup-node@v3
       with:
-        node-version: ${{ env.NODE_VER }}
+        node-version: ${{ matrix.node }}
     - name: Install dependencies
       run: npm ci
     - name: Validate package-lock.json changes

.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/lockfileversion-check.yml@master

.nvmrc

@@ -1,2 +1,2 @@
-18
+16
 

Makefile

@@ -1,7 +1,11 @@
-intl_imports = ./node_modules/.bin/intl-imports.js
+transifex_resource = frontend-app-communications
+transifex_langs = "ar,fr,es_419,zh_CN"
+
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
+tx_url1 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/translation/en/strings/
+tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/source/
 
 # This directory must match .babelrc .
 transifex_temp = ./temp/babel-plugin-react-intl
@@ -29,17 +33,20 @@ detect_changed_source_translations:
 	# Checking for changed translations...
 	git diff --exit-code $(i18n)
 
-pull_translations:
-	rm -rf src/i18n/messages
-	mkdir src/i18n/messages
-	cd src/i18n/messages \
-	   && 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-app-communications/src/i18n/messages:frontend-app-communications
+# Pushes translations to Transifex.  You must run make extract_translations first.
+push_translations:
+	# Pushing strings to Transifex...
+	tx push -s
+	# Fetching hashes from Transifex...
+	./node_modules/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1)
+	# Writing out comments to file...
+	$(transifex_utils) $(transifex_temp) --comments
+	# Pushing comments to Transifex...
+	./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2)
 
-	$(intl_imports) frontend-component-header frontend-component-footer paragon frontend-app-communications
+# Pulls translations from Transifex.
+pull_translations:
+	tx pull -t -f --mode reviewed --languages=$(transifex_langs)
 
 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:

package.json

@@ -34,10 +34,9 @@
   },
   "dependencies": {
     "@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/frontend-component-footer": "11.6.0",
+    "@edx/frontend-component-header": "3.5.0",
+    "@edx/frontend-platform": "2.6.2",
     "@edx/paragon": "^20.20.0",
     "@edx/tinymce-language-selector": "1.1.0",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
@@ -54,7 +53,6 @@
     "prop-types": "15.8.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "react-helmet": "^6.1.0",
     "react-redux": "7.2.9",
     "react-router": "5.3.4",
     "react-router-dom": "5.3.4",
@@ -63,9 +61,8 @@
     "tinymce": "5.10.7"
   },
   "devDependencies": {
-    "@edx/browserslist-config": "^1.2.0",
-    "@edx/frontend-build": "^12.7.0",
-    "@edx/reactifex": "^2.1.1",
+    "@edx/browserslist-config": "^1.1.0",
+    "@edx/frontend-build": "11.0.2",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "12.1.5",
     "axios-mock-adapter": "1.21.2",
@@ -73,6 +70,7 @@
     "husky": "7.0.4",
     "jest": "27.5.1",
     "prettier": "2.8.1",
+    "reactifex": "1.1.1",
     "rosie": "2.1.0"
   }
 }

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

@@ -22,7 +22,7 @@ export default function BulkEmailTool() {
           <NavigationTabs courseId={courseId} tabData={courseMetadata.tabs} />
           <BulkEmailProvider>
             <Container size="md">
-              <BackToInstructor courseId={courseId} />
+              <BackToInstructor />
               <div className="row pb-4.5">
                 <h1 className="text-primary-500" id="main-content">
                   <FormattedMessage

src/components/bulk-email-tool/bulk-email-context/BulkEmailProvider.jsx

@@ -1,5 +1,3 @@
-/* eslint-disable react/jsx-no-constructed-context-values */
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import useAsyncReducer, { combineReducers } from '../../../utils/useAsyncReducer';

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

@@ -1,4 +1,3 @@
-/* eslint-disable react/no-unstable-nested-components */
 import React, { useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import {

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

@@ -9,8 +9,6 @@ function ScheduleEmailForm(props) {
   const isMobile = useMobileResponsive();
   const { isValid, onDateTimeChange, dateTime } = props;
   const { date, time } = dateTime;
-  const descriptionDate = new Date();
-  descriptionDate.setDate(new Date().getDate() + 1);
   return (
     <Form.Group>
       <div className={classNames('d-flex', isMobile ? 'flex-column' : 'flex-row', 'my-3')}>
@@ -32,10 +30,7 @@ function ScheduleEmailForm(props) {
           <small className="text-gray-500 x-small">
             <FormattedMessage
               id="bulk.email.form.schedule.date.description"
-              defaultMessage="Enter a start date, e.g. {date}"
-              values={{
-                date: descriptionDate.toLocaleDateString(),
-              }}
+              defaultMessage="Enter a start date, e.g. 11/27/2023"
             />
           </small>
         </div>
@@ -57,10 +52,7 @@ function ScheduleEmailForm(props) {
           <small className="text-gray-500 x-small">
             <FormattedMessage
               id="bulk.email.form.schedule.time.description"
-              defaultMessage="Enter a start time, e.g. {time}"
-              values={{
-                time: descriptionDate.toLocaleTimeString([], { timeStyle: 'short' }),
-              }}
+              defaultMessage="Enter a start time, e.g. 09:00 AM"
             />
           </small>
         </div>

src/components/bulk-email-tool/bulk-email-form/bulk-email-recipient/index.js

@@ -1,2 +1 @@
-// eslint-disable-next-line no-restricted-exports
 export { default } from './BulkEmailRecipient';

src/components/bulk-email-tool/bulk-email-form/index.js

@@ -1,2 +1 @@
-// eslint-disable-next-line no-restricted-exports
 export { default } from './BulkEmailForm';

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

@@ -1,5 +1,3 @@
-/* eslint-disable react/no-unstable-nested-components */
-
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useParams } from 'react-router-dom';
@@ -133,7 +131,6 @@ function BulkEmailContentHistory({ intl }) {
           styling="card"
           title={intl.formatMessage(messages.emailHistoryTableSectionButton)}
           className="mb-3"
-          // eslint-disable-next-line react/jsx-no-bind
           onOpen={fetchSentEmailHistoryData}
         >
           {showHistoricalEmailContentTable ? (

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

@@ -71,12 +71,12 @@ export default function BulkEmailTaskManagerTable(props) {
 
 BulkEmailTaskManagerTable.propTypes = {
   errorRetrievingData: PropTypes.bool.isRequired,
-  tableData: PropTypes.arrayOf(PropTypes.shape({})),
+  tableData: PropTypes.arrayOf(PropTypes.object),
   tableDescription: PropTypes.string,
   alertWarningMessage: PropTypes.string.isRequired,
   alertErrorMessage: PropTypes.string.isRequired,
-  columns: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-  additionalColumns: PropTypes.arrayOf(PropTypes.shape({})),
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  additionalColumns: PropTypes.arrayOf(PropTypes.object),
 };
 
 BulkEmailTaskManagerTable.defaultProps = {

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

@@ -1,40 +1,34 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { getConfig } from '@edx/frontend-platform';
 import { Hyperlink, Alert } from '@edx/paragon';
 import { WarningFilled } from '@edx/paragon/icons';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
-export default function BulkEmailPendingTasksAlert(props) {
-  const { courseId } = props;
-
+export default function BulkEmailPendingTasksAlert() {
   return (
-    <Alert variant="warning" icon={WarningFilled}>
-      <FormattedMessage
-        id="bulk.email.pending.tasks.description.one"
-        defaultMessage="To view all pending tasks, including email, visit&nbsp;"
-      />
-      <Hyperlink
-        destination={`${getConfig().LMS_BASE_URL}/courses/${courseId}/instructor#view-course-info`}
-        target="_blank"
-        isInline
-        showLaunchIcon={false}
-      >
+    <>
+      <Alert variant="warning" icon={WarningFilled}>
         <FormattedMessage
-          id="bulk.email.pending.tasks.link"
-          defaultMessage="Course Info"
+          id="bulk.email.pending.tasks.description.one"
+          defaultMessage="To view all pending tasks, including email, visit&nbsp;"
         />
-      </Hyperlink>
-      <FormattedMessage
-        id="bulk.email.pending.tasks.description.two"
-        defaultMessage="&nbsp;in the Instructor Dashboard."
-      />
-    </Alert>
-
+        <Hyperlink
+          destination={`${getConfig().LMS_BASE_URL}/courses/${window.location.pathname.split('/')[2]}/instructor#view-course-info`}
+          target="_blank"
+          isInline
+          showLaunchIcon={false}
+        >
+          <FormattedMessage
+            id="bulk.email.pending.tasks.link"
+            defaultMessage="Course Info"
+          />
+        </Hyperlink>
+        <FormattedMessage
+          id="bulk.email.pending.tasks.description.two"
+          defaultMessage="&nbsp;in the Instructor Dashboard."
+        />
+      </Alert>
+    </>
   );
 }
-
-BulkEmailPendingTasksAlert.propTypes = {
-  courseId: PropTypes.string.isRequired,
-};

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

@@ -89,7 +89,6 @@ function BulkEmailTaskHistory({ intl }) {
         <Collapsible
           styling="card"
           title={intl.formatMessage(messages.emailTaskHistoryTableSectionButton)}
-          // eslint-disable-next-line react/jsx-no-bind
           onOpen={fetchEmailTaskHistoryData}
         >
           {showHistoricalTaskContentTable ? (

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
@@ -9,7 +8,7 @@ import messages from './messages';
 import BulkEmailScheduledEmailsTable from './bulk-email-scheduled-emails-table';
 import BulkEmailPendingTasksAlert from './BulkEmailPendingTasksAlert';
 
-function BulkEmailTaskManager({ intl, courseId }) {
+function BulkEmailTaskManager({ intl }) {
   return (
     <div className="w-100">
       {getConfig().SCHEDULE_EMAIL_SECTION && (
@@ -27,7 +26,7 @@ function BulkEmailTaskManager({ intl, courseId }) {
       </div>
       <div className="border-top border-primary-500 pt-4.5">
         <h2 className="h3 mb-4 text-primary-500">{intl.formatMessage(messages.pendingTasksHeader)}</h2>
-        <BulkEmailPendingTasksAlert courseId={courseId} />
+        <BulkEmailPendingTasksAlert />
       </div>
     </div>
   );
@@ -35,7 +34,6 @@ function BulkEmailTaskManager({ intl, courseId }) {
 
 BulkEmailTaskManager.propTypes = {
   intl: intlShape.isRequired,
-  courseId: PropTypes.string.isRequired,
 };
 
 export default injectIntl(BulkEmailTaskManager);

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

@@ -1,6 +1,4 @@
 /* eslint-disable react/prop-types */
-/* eslint-disable react/no-unstable-nested-components */
-
 import React, {
   useCallback, useContext, useState, useEffect,
 } from 'react';
@@ -26,7 +24,6 @@ function flattenScheduledEmailsArray(emails) {
     emailId: email.courseEmail.id,
     task: email.task,
     taskDue: new Date(email.taskDue).toLocaleString(),
-    taskDueUTC: email.taskDue,
     ...email.courseEmail,
     targets: email.courseEmail.targets.join(', '),
   }));
@@ -92,10 +89,10 @@ function BulkEmailScheduledEmailsTable({ intl }) {
   const handleEditEmail = (row) => {
     const {
       original: {
-        htmlMessage: emailBody, subject: emailSubject, taskDueUTC, targets, schedulingId, emailId,
+        htmlMessage: emailBody, subject: emailSubject, taskDue, targets, schedulingId, emailId,
       },
     } = row;
-    const dateTime = new Date(taskDueUTC);
+    const dateTime = new Date(taskDue);
     const emailRecipients = targets.replaceAll('-', ':').split(', ');
     const scheduleDate = formatDate(dateTime);
     const scheduleTime = formatTime(dateTime);

src/components/bulk-email-tool/bulk-email-task-manager/bulk-email-scheduled-emails-table/index.js

@@ -1,2 +1 @@
-// eslint-disable-next-line no-restricted-exports
 export { default } from './BulkEmailScheduledEmailsTable';

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

@@ -1,33 +0,0 @@
-import React from 'react';
-
-import BulkEmailPendingTasksAlert from '../BulkEmailPendingTasksAlert';
-import {
-  initializeMockApp, render, screen,
-} from '../../../../setupTest';
-
-describe('Testing BulkEmailPendingTasksAlert Component', () => {
-  beforeAll(async () => {
-    await initializeMockApp();
-  });
-
-  test('Render without Public path', async () => {
-    render(<BulkEmailPendingTasksAlert courseId="test-course-id" />);
-
-    const linkEl = await screen.findByText('Course Info');
-    expect(linkEl.href).toEqual('http://localhost:18000/courses/test-course-id/instructor#view-course-info');
-  });
-
-  test('Render with Public path', async () => {
-    Object.defineProperty(window, 'location', {
-      get() {
-        return { pathname: '/communications/courses/test-course-id/bulk-email' };
-      },
-    });
-
-    render(<BulkEmailPendingTasksAlert courseId="test-course-id" />);
-
-    const linkEl = await screen.findByText('Course Info');
-    expect(linkEl.href).toEqual('http://localhost:18000/courses/test-course-id/instructor#view-course-info');
-    expect(window.location.pathname).toEqual('/communications/courses/test-course-id/bulk-email');
-  });
-});

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

@@ -1,2 +1 @@
-// eslint-disable-next-line no-restricted-exports
 export { default } from './BulkEmailTool';

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

@@ -40,7 +40,6 @@ function TaskAlertModal(props) {
                 // causing strange click event target issues in safari. To solve this, we want to
                 // wrap the string in a fragment instead of a span, so that the whole button considered
                 // a "button" target, and not a "span inside a button"
-                // eslint-disable-next-line react/jsx-no-useless-fragment
                 msg => <>{msg}</>
               }
             </FormattedMessage>

src/components/bulk-email-tool/task-alert-modal/index.js

@@ -1,2 +1 @@
-// eslint-disable-next-line no-restricted-exports
 export { default } from './TaskAlertModal';

src/components/bulk-email-tool/text-editor/TextEditor.jsx

@@ -43,8 +43,6 @@ export default function TextEditor(props) {
         block_unsupported_drop: false,
         image_advtab: true,
         name: 'emailBody',
-        relative_urls: false,
-        remove_script_host: false,
       }}
       onEditorChange={onChange}
       value={value}

src/components/bulk-email-tool/text-editor/index.js

@@ -1,2 +1 @@
-// eslint-disable-next-line no-restricted-exports
 export { default } from './TextEditor';

src/components/navigation-tabs/BackToInstructor.jsx

@@ -1,19 +1,16 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { getConfig } from '@edx/frontend-platform';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Button, Icon } from '@edx/paragon';
 import { ArrowBack } from '@edx/paragon/icons';
 
-export default function BackToInstructor(props) {
-  const { courseId } = props;
-
+export default function BackToInstructor() {
   return (
     <Button
       variant="tertiary"
       className="mb-4.5 ml-n4.5 text-primary-500"
-      href={`${getConfig().LMS_BASE_URL}/courses/${courseId}/instructor#view-course-info`}
+      href={`${getConfig().LMS_BASE_URL}/courses/${window.location.pathname.split('/')[2]}/instructor#view-course-info`}
     >
       <Icon
         src={ArrowBack}
@@ -27,7 +24,3 @@ export default function BackToInstructor(props) {
     </Button>
   );
 }
-
-BackToInstructor.propTypes = {
-  courseId: PropTypes.string.isRequired,
-};

src/components/navigation-tabs/BackToInstructor.test.jsx

@@ -1,33 +0,0 @@
-import React from 'react';
-
-import BackToInstructor from './BackToInstructor';
-import {
-  initializeMockApp, render, screen,
-} from '../../setupTest';
-
-describe('Testing BackToInstructor Component', () => {
-  beforeAll(async () => {
-    await initializeMockApp();
-  });
-
-  test('Render without Public path', async () => {
-    render(<BackToInstructor courseId="test-course-id" />);
-
-    const linkEl = await screen.findByText('Back to Instructor Dashboard');
-    expect(linkEl.href).toEqual('http://localhost:18000/courses/test-course-id/instructor#view-course-info');
-  });
-
-  test('Render with Public path', async () => {
-    Object.defineProperty(window, 'location', {
-      get() {
-        return { pathname: '/communications/courses/test-course-id/bulk-email' };
-      },
-    });
-
-    render(<BackToInstructor courseId="test-course-id" />);
-
-    const linkEl = await screen.findByText('Back to Instructor Dashboard');
-    expect(linkEl.href).toEqual('http://localhost:18000/courses/test-course-id/instructor#view-course-info');
-    expect(window.location.pathname).toEqual('/communications/courses/test-course-id/bulk-email');
-  });
-});

src/components/page-container/PageContainer.jsx

@@ -59,18 +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">
+        <>
+          <Header
+            className="learning-header"
+            courseOrg={courseMetadata.org}
+            courseNumber={courseMetadata.number}
+            courseTitle={courseMetadata.title}
+          />
           <main>
             {children}
           </main>
-        </div>
-        <Footer />
+          <Footer />
+        </>
       </CourseMetadataContext.Provider>
     );
   }

src/components/page-container/data/api.js

@@ -1,10 +1,10 @@
 import { camelCaseObject, getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
-export const getCourseHomeBaseUrl = () => `${getConfig().LMS_BASE_URL}/api/course_home/v1/course_metadata`;
+const courseHomeBaseUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/course_metadata`;
 
 export async function getCourseHomeCourseMetadata(courseId) {
-  const courseHomeMetadataUrl = `${getCourseHomeBaseUrl()}/${courseId}`;
+  const courseHomeMetadataUrl = `${courseHomeBaseUrl}/${courseId}`;
   const { data } = await getAuthenticatedHttpClient().get(courseHomeMetadataUrl);
   return camelCaseObject(data);
 }

src/components/page-container/data/api.test.js

@@ -1,24 +0,0 @@
-import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies
-import { camelCaseObject } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import MockAdapter from 'axios-mock-adapter';
-import { initializeMockApp } from '../../../setupTest';
-import * as api from './api';
-import './__factories__/courseMetadata.factory';
-
-describe('api', () => {
-  beforeAll(async () => {
-    await initializeMockApp();
-  });
-
-  test('getCourseHomeCourseMetadata', async () => {
-    const axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-    const courseMetadata = Factory.build('courseMetadata');
-    const { id: courseId } = courseMetadata;
-    axiosMock
-      .onGet(`${api.getCourseHomeBaseUrl()}/${courseId}`)
-      .reply(200, courseMetadata);
-    const data = await api.getCourseHomeCourseMetadata(courseId);
-    expect(data).toEqual(camelCaseObject(courseMetadata));
-  });
-});

src/i18n/index.jsx

@@ -1,7 +1,3 @@
-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
@@ -17,7 +13,7 @@ import ruMessages from './messages/ru.json';
 import thMessages from './messages/th.json';
 import ukMessages from './messages/uk.json';
 
-const appMessages = {
+const messages = {
   ar: arMessages,
   'es-419': es419Messages,
   fr: frMessages,
@@ -33,9 +29,4 @@ const appMessages = {
   uk: ukMessages,
 };
 
-export default [
-  headerMessages,
-  footerMessages,
-  paragonMessages,
-  appMessages,
-];
+export default messages;

src/index.jsx

@@ -2,14 +2,16 @@ import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 
 import {
-  APP_INIT_ERROR, APP_READY, subscribe, initialize, mergeConfig, getConfig,
+  APP_INIT_ERROR, APP_READY, subscribe, initialize, mergeConfig,
 } from '@edx/frontend-platform';
 import { AppProvider, AuthenticatedPageRoute, ErrorPage } from '@edx/frontend-platform/react';
 import ReactDOM from 'react-dom';
 
-import { Helmet } from 'react-helmet';
+import { messages as headerMessages } from '@edx/frontend-component-header';
+import { messages as footerMessages } from '@edx/frontend-component-footer';
+import { messages as paragonMessages } from '@edx/paragon';
 import { Switch } from 'react-router-dom';
-import messages from './i18n';
+import appMessages from './i18n';
 
 import './index.scss';
 import BulkEmailTool from './components/bulk-email-tool';
@@ -18,16 +20,15 @@ import PageContainer from './components/page-container/PageContainer';
 subscribe(APP_READY, () => {
   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>
+      <div className="pb-3 container">
+        <Switch>
+          <AuthenticatedPageRoute path="/courses/:courseId/bulk_email">
+            <PageContainer>
+              <BulkEmailTool />
+            </PageContainer>
+          </AuthenticatedPageRoute>
+        </Switch>
+      </div>
     </AppProvider>,
     document.getElementById('root'),
   );
@@ -49,5 +50,5 @@ initialize({
       );
     },
   },
-  messages,
+  messages: [appMessages, headerMessages, footerMessages, paragonMessages],
 });

src/setupTest.js

@@ -8,12 +8,8 @@ import { configure as configureI18n, IntlProvider } from '@edx/frontend-platform
 import { configure as configureLogging, MockLoggingService } from '@edx/frontend-platform/logging';
 import { getConfig, mergeConfig } from '@edx/frontend-platform';
 import { configure as configureAuth, MockAuthService } from '@edx/frontend-platform/auth';
-import messages from './i18n';
+import appMessages from './i18n';
 
-jest.mock('@edx/frontend-platform/react/hooks', () => ({
-  ...jest.requireActual('@edx/frontend-platform/react/hooks'),
-  useTrackColorSchemeChoice: jest.fn(),
-}));
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
   value: jest.fn().mockImplementation((query) => ({
@@ -47,18 +43,13 @@ export function initializeMockApp() {
   const i18nService = configureI18n({
     config: getConfig(),
     loggingService,
-    messages,
+    messages: [appMessages],
   });
 
   const authService = configureAuth(MockAuthService, { config: getConfig(), loggingService });
   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 }) {