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

.env

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

.env.development

@@ -20,3 +20,5 @@ 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,3 +18,5 @@ 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,3 +1,9 @@
+/* eslint-disable import/no-extraneous-dependencies */
+
 const { createConfig } = require('@edx/frontend-build');
 
-module.exports = createConfig('eslint');
+module.exports = createConfig('eslint', {
+  rules: {
+    'react/function-component-definition': 'off',
+  },
+});

.github/CODEOWNERS

@@ -1 +0,0 @@
-* @edx/community-engineering

.github/workflows/add-depr-ticket-to-depr-board.yml

@@ -0,0 +1,19 @@
+# Run the workflow that adds new tickets that are either:
+# - labelled "DEPR"
+# - title starts with "[DEPR]"
+# - body starts with "Proposal Date" (this is the first template field)
+# to the org-wide DEPR project board
+
+name: Add newly created DEPR issues to the DEPR project board
+
+on:
+  issues:
+    types: [opened]
+
+jobs:
+  routeissue:
+    uses: openedx/.github/.github/workflows/add-depr-ticket-to-depr-board.yml@master
+    secrets:
+      GITHUB_APP_ID: ${{ secrets.GRAPHQL_AUTH_APP_ID }}
+      GITHUB_APP_PRIVATE_KEY: ${{ secrets.GRAPHQL_AUTH_APP_PEM }}
+      SLACK_BOT_TOKEN: ${{ secrets.SLACK_ISSUE_BOT_TOKEN }}

.github/workflows/add-remove-label-on-comment.yml

@@ -0,0 +1,20 @@
+# This workflow runs when a comment is made on the ticket
+# If the comment starts with "label: " it tries to apply
+# the label indicated in rest of comment.
+# If the comment starts with "remove label: ", it tries
+# to remove the indicated label.
+# Note: Labels are allowed to have spaces and this script does
+# not parse spaces (as often a space is legitimate), so the command
+# "label: really long lots of words label" will apply the
+# label "really long lots of words label"
+
+name: Allows for the adding and removing of labels via comment
+
+on:
+  issue_comment:
+    types: [created]
+
+jobs:
+  add_remove_labels:
+    uses: openedx/.github/.github/workflows/add-remove-label-on-comment.yml@master
+

.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@v2
+      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@v2
+      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
@@ -33,7 +33,5 @@ jobs:
       run: npm run build
     - name: i18n_extract
       run: npm run i18n_extract
-    - name: is-es5
-      run: npm run is-es5
     - name: Coverage
-      uses: codecov/codecov-action@v2
+      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.yml@master
+    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master

.github/workflows/self-assign-issue.yml

@@ -0,0 +1,12 @@
+# This workflow runs when a comment is made on the ticket
+# If the comment starts with "assign me" it assigns the author to the
+# ticket (case insensitive)
+
+name: Assign comment author to ticket if they say "assign me"
+on:
+  issue_comment:
+    types: [created]
+
+jobs:
+  self_assign_by_comment:
+    uses: openedx/.github/.github/workflows/self-assign-issue.yml@master

.nvmrc

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

.tx/config

@@ -0,0 +1,8 @@
+[main]
+host = https://www.transifex.com
+
+[o:open-edx:p:edx-platform:r:frontend-app-communications]
+file_filter = src/i18n/messages/<lang>.json
+source_file = src/i18n/transifex_input.json
+source_lang = en
+type = KEYVALUEJSON

Makefile

@@ -1,11 +1,9 @@
-transifex_resource = frontend-app-communications
+export 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
@@ -38,15 +36,15 @@ push_translations:
 	# Pushing strings to Transifex...
 	tx push -s
 	# Fetching hashes from Transifex...
-	./node_modules/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1)
+	./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
 	# Writing out comments to file...
-	$(transifex_utils) $(transifex_temp) --comments
+	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
 	# Pushing comments to Transifex...
-	./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2)
+	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
 
 # Pulls translations from Transifex.
 pull_translations:
-	tx pull -f --mode reviewed --languages=$(transifex_langs)
+	tx pull -t -f --mode reviewed --languages=$(transifex_langs)
 
 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:

package.json

@@ -7,13 +7,11 @@
     "url": "git+https://github.com/edx/frontend-app-communications.git"
   },
   "browserslist": [
-    "last 2 versions",
-    "ie 11"
+    "extends @edx/browserslist-config"
   ],
   "scripts": {
     "build": "fedx-scripts webpack",
     "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
-    "is-es5": "es-check es5 ./dist/*.js",
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
     "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
@@ -36,10 +34,10 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-component-footer": "11.2.1",
-    "@edx/frontend-component-header": "3.2.1",
-    "@edx/frontend-platform": "2.6.2",
-    "@edx/paragon": "19.25.3",
+    "@edx/frontend-component-footer": "^12.0.0",
+    "@edx/frontend-component-header": "^4.0.0",
+    "@edx/frontend-platform": "^4.0.1",
+    "@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",
@@ -49,31 +47,31 @@
     "@tinymce/tinymce-react": "3.14.0",
     "axios": "0.27.2",
     "classnames": "2.3.2",
-    "core-js": "3.25.5",
+    "core-js": "3.26.1",
     "jquery": "3.6.1",
     "popper.js": "1.16.1",
     "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.2.1",
-    "react-router-dom": "5.3.0",
-    "redux": "4.1.2",
-    "regenerator-runtime": "0.13.9",
-    "tinymce": "5.10.5"
+    "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/frontend-build": "9.2.2",
+    "@edx/browserslist-config": "^1.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",
-    "codecov": "3.8.3",
-    "es-check": "6.2.1",
     "glob": "7.2.3",
     "husky": "7.0.4",
     "jest": "27.5.1",
-    "prettier": "2.7.1",
-    "reactifex": "1.1.1",
+    "prettier": "2.8.1",
     "rosie": "2.1.0"
   }
 }

public/index.html

@@ -4,7 +4,6 @@
       <title>Communications | <%= process.env.SITE_NAME %></title>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon" />
   </head>
   <body>
     <div id="root"></div>

renovate.json

@@ -22,6 +22,11 @@
         "pin"
       ],
       "automerge": true
+    },
+    {
+      "matchPackagePatterns": ["@edx"],
+      "matchUpdateTypes": ["minor", "patch"],
+      "automerge": true
     }
   ],
   "timezone": "America/New_York"

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 />
+              <BackToInstructor courseId={courseId} />
               <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,3 +1,5 @@
+/* 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,3 +1,4 @@
+/* eslint-disable react/no-unstable-nested-components */
 import React, { useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import {
@@ -205,6 +206,7 @@ function BulkEmailForm(props) {
     } else {
       setEmailFormStatus(FORM_SUBMIT_STATES.DEFAULT);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isScheduled, editor.editMode, editor.isLoading, editor.errorRetrievingData, editor.formComplete]);
 
   const AlertMessage = () => (

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

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

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

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

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

@@ -1,3 +1,5 @@
+/* eslint-disable react/no-unstable-nested-components */
+
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useParams } from 'react-router-dom';
@@ -131,6 +133,7 @@ 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.object),
+  tableData: PropTypes.arrayOf(PropTypes.shape({})),
   tableDescription: PropTypes.string,
   alertWarningMessage: PropTypes.string.isRequired,
   alertErrorMessage: PropTypes.string.isRequired,
-  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  additionalColumns: PropTypes.arrayOf(PropTypes.object),
+  columns: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  additionalColumns: PropTypes.arrayOf(PropTypes.shape({})),
 };
 
 BulkEmailTaskManagerTable.defaultProps = {

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

@@ -1,34 +1,40 @@
 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() {
+export default function BulkEmailPendingTasksAlert(props) {
+  const { courseId } = props;
+
   return (
-    <>
-      <Alert variant="warning" icon={WarningFilled}>
+    <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}
+      >
         <FormattedMessage
-          id="bulk.email.pending.tasks.description.one"
-          defaultMessage="To view all pending tasks, including email, visit&nbsp;"
+          id="bulk.email.pending.tasks.link"
+          defaultMessage="Course Info"
         />
-        <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>
-    </>
+      </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,6 +89,7 @@ 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,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
@@ -8,7 +9,7 @@ import messages from './messages';
 import BulkEmailScheduledEmailsTable from './bulk-email-scheduled-emails-table';
 import BulkEmailPendingTasksAlert from './BulkEmailPendingTasksAlert';
 
-function BulkEmailTaskManager({ intl }) {
+function BulkEmailTaskManager({ intl, courseId }) {
   return (
     <div className="w-100">
       {getConfig().SCHEDULE_EMAIL_SECTION && (
@@ -26,7 +27,7 @@ function BulkEmailTaskManager({ intl }) {
       </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 />
+        <BulkEmailPendingTasksAlert courseId={courseId} />
       </div>
     </div>
   );
@@ -34,6 +35,7 @@ function BulkEmailTaskManager({ intl }) {
 
 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,4 +1,6 @@
 /* eslint-disable react/prop-types */
+/* eslint-disable react/no-unstable-nested-components */
+
 import React, {
   useCallback, useContext, useState, useEffect,
 } from 'react';
@@ -46,6 +48,7 @@ function BulkEmailScheduledEmailsTable({ intl }) {
 
   const fetchTableData = useCallback((args) => {
     dispatch(getScheduledBulkEmailThunk(courseId, args.pageIndex + 1));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const handleViewEmail = (row) => {

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

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

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

@@ -0,0 +1,33 @@
+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 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
 export { default } from './BulkEmailTool';

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

@@ -40,6 +40,7 @@ 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 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
 export { default } from './TaskAlertModal';

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

@@ -43,6 +43,8 @@ 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 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
 export { default } from './TextEditor';

src/components/navigation-tabs/BackToInstructor.jsx

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

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

@@ -0,0 +1,33 @@
+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

@@ -53,6 +53,7 @@ export default function PageContainer(props) {
       });
     }
     fetchCourseMetadata();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   if (courseMetadata) {

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';
 
-const courseHomeBaseUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/course_metadata`;
+export const getCourseHomeBaseUrl = () => `${getConfig().LMS_BASE_URL}/api/course_home/v1/course_metadata`;
 
 export async function getCourseHomeCourseMetadata(courseId) {
-  const courseHomeMetadataUrl = `${courseHomeBaseUrl}/${courseId}`;
+  const courseHomeMetadataUrl = `${getCourseHomeBaseUrl()}/${courseId}`;
   const { data } = await getAuthenticatedHttpClient().get(courseHomeMetadataUrl);
   return camelCaseObject(data);
 }

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

@@ -0,0 +1,24 @@
+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/index.jsx

@@ -2,14 +2,15 @@ import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 
 import {
-  APP_INIT_ERROR, APP_READY, subscribe, initialize, mergeConfig,
+  APP_INIT_ERROR, APP_READY, subscribe, initialize, mergeConfig, getConfig,
 } from '@edx/frontend-platform';
 import { AppProvider, AuthenticatedPageRoute, ErrorPage } from '@edx/frontend-platform/react';
 import ReactDOM from 'react-dom';
 
 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 { Helmet } from 'react-helmet';
 import { Switch } from 'react-router-dom';
 import appMessages from './i18n';
 
@@ -20,6 +21,9 @@ 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>
       <div className="pb-3 container">
         <Switch>
           <AuthenticatedPageRoute path="/courses/:courseId/bulk_email">
@@ -50,5 +54,5 @@ initialize({
       );
     },
   },
-  messages: [appMessages, headerMessages, footerMessages],
+  messages: [appMessages, headerMessages, footerMessages, paragonMessages],
 });

src/setupTest.js

@@ -10,6 +10,10 @@ import { getConfig, mergeConfig } from '@edx/frontend-platform';
 import { configure as configureAuth, MockAuthService } from '@edx/frontend-platform/auth';
 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) => ({

src/utils/useMobileResponsive.js

@@ -37,6 +37,7 @@ export default function useMobileResponsive(breakpoint) {
     window.addEventListener('resize', checkForMobile);
     // return this function here to clean up the event listener
     return () => window.removeEventListener('resize', checkForMobile);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return isMobileWindow;
 }