openedx · leangseu-edx · Nov 21, 2022 · Nov 8, 2022 · Nov 20, 2022
diff --git a/.env b/.env
@@ -30,3 +30,5 @@ ENTERPRISE_MARKETING_URL=''
 ENTERPRISE_MARKETING_UTM_SOURCE=''
 ENTERPRISE_MARKETING_UTM_CAMPAIGN=''
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=''
+APP_ID=''
+MFE_CONFIG_API_URL=''
diff --git a/.env.development b/.env.development
@@ -36,3 +36,5 @@ ENTERPRISE_MARKETING_URL='http://example.com'
 ENTERPRISE_MARKETING_UTM_SOURCE='example.com'
 ENTERPRISE_MARKETING_UTM_CAMPAIGN='example.com Referral'
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
+APP_ID=''
+MFE_CONFIG_API_URL=''
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
     "@edx/brand": "npm:@edx/brand-edx.org@^2.0.3",
     "@edx/frontend-component-footer": "^11.1.1",
     "@edx/frontend-component-header": "^3.1.1",
-    "@edx/frontend-platform": "^2.4.0",
+    "@edx/frontend-platform": "^2.5.1",
     "@edx/paragon": "^19.9.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
@@ -57,6 +57,7 @@
     "query-string": "7.0.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
+    "react-helmet": "^6.1.0",
     "react-intl": "^5.20.9",
     "react-pdf": "^5.5.0",
     "react-redux": "^7.2.4",

diff --git a/src/App.jsx b/src/App.jsx
@@ -13,10 +13,12 @@ import CTA from 'containers/CTA';
 import ListView from 'containers/ListView';
 
 import './App.scss';
+import Head from './components/Head';
 
 export const App = ({ courseMetadata, isEnabled }) => (
   <Router>
     <div>
+      <Head />
       <Header
         courseTitle={courseMetadata.title}
         courseNumber={courseMetadata.number}

diff --git a/src/App.test.jsx b/src/App.test.jsx
@@ -25,6 +25,7 @@ jest.mock('@edx/frontend-component-footer', () => 'Footer');
 jest.mock('containers/DemoWarning', () => 'DemoWarning');
 jest.mock('containers/CTA', () => 'CTA');
 jest.mock('containers/ListView', () => 'ListView');
+jest.mock('components/Head', () => 'Head');
 
 const logo = 'fakeLogo.png';
 let el;

diff --git a/src/__snapshots__/App.test.jsx.snap b/src/__snapshots__/App.test.jsx.snap
@@ -3,6 +3,7 @@
 exports[`App router component snapshot: disabled (show demo warning) 1`] = `
 <BrowserRouter>
   <div>
+    <Head />
     <Header
       courseNumber="course-number"
       courseOrg="course-org"
@@ -23,6 +24,7 @@ exports[`App router component snapshot: disabled (show demo warning) 1`] = `
 exports[`App router component snapshot: enabled 1`] = `
 <BrowserRouter>
   <div>
+    <Head />
     <Header
       courseNumber="course-number"
       courseOrg="course-org"

diff --git a/src/components/Head/__snapshots__/index.test.jsx.snap b/src/components/Head/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Head snapshot 1`] = `
+<Helmet>
+  <title>
+    ORA staff grading | site-name
+  </title>
+  <link
+    href="favicon-url"
+    rel="shortcut icon"
+    type="image/x-icon"
+  />
+</Helmet>
+`;
diff --git a/src/components/Head/index.jsx b/src/components/Head/index.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+
+import messages from './messages';
+
+function Head() {
+  const { formatMessage } = useIntl();
+  return (
+    <Helmet>
+      <title>
+        {formatMessage(messages.PageTitle, { siteName: getConfig().SITE_NAME })}
+      </title>
+      <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
+    </Helmet>
+  );
+}
+
+export default Head;
diff --git a/src/components/Head/index.test.jsx b/src/components/Head/index.test.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { getConfig } from '@edx/frontend-platform';
+import { shallow } from 'enzyme';
+import Head from '.';
+
+jest.mock('react-helmet', () => ({
+  Helmet: 'Helmet',
+}));
+
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: () => ({
+    SITE_NAME: 'site-name',
+    FAVICON_URL: 'favicon-url',
+  }),
+}));
+
+describe('Head', () => {
+  it('snapshot', () => {
+    const el = shallow(<Head />);
+    expect(el).toMatchSnapshot();
+
+    expect(el.find('title').text()).toContain(getConfig().SITE_NAME);
+    expect(el.find('link').prop('href')).toEqual(getConfig().FAVICON_URL);
+  });
+});
diff --git a/src/components/Head/messages.js b/src/components/Head/messages.js
@@ -0,0 +1,11 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  PageTitle: {
+    id: 'PageTitle',
+    defaultMessage: 'ORA staff grading | {siteName}',
+    description: 'Title tag',
+  },
+});
+
+export default messages;
diff --git a/src/setupTest.js b/src/setupTest.js
@@ -18,11 +18,17 @@ jest.mock('react', () => ({
 jest.mock('@edx/frontend-platform/i18n', () => {
   const i18n = jest.requireActual('@edx/frontend-platform/i18n');
   const PropTypes = jest.requireActual('prop-types');
+  const { formatMessage } = jest.requireActual('./testUtils');
+  const formatDate = jest.fn(date => new Date(date).toLocaleDateString()).mockName('useIntl.formatDate');
   return {
     ...i18n,
     intlShape: PropTypes.shape({
       formatMessage: PropTypes.func,
     }),
+    useIntl: () => ({
+      formatMessage,
+      formatDate,
+    }),
     defineMessages: m => m,
     FormattedMessage: () => 'FormattedMessage',
   };