feat: allow runtime configuration (#144)

* feat: allow runtime configuration

* test: organize Head test

.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=''

.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=''

Makefile

@@ -57,7 +57,7 @@ push_translations:
 
 # 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 CI.
 validate-no-uncommitted-package-lock-changes:

package-lock.json

@@ -12,7 +12,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",
@@ -40,6 +40,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",
@@ -3447,13 +3448,13 @@
       }
     },
     "node_modules/@edx/frontend-platform": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-2.4.0.tgz",
-      "integrity": "sha512-i5z6cg+A+OLHgpvqPzU2jd7VM2soHsOAb8Jk6t4ddAtN1gLDad/pFhty3+aBEPIsnTuGDmrtUl5Yl/hP8Muc+w==",
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-2.6.2.tgz",
+      "integrity": "sha512-h+gYLkPYw41krGiSGs59o2jaq/g3Yk6ay/3rBq0y1/KM6eeaq/F7o14YOhfTRLTpld9Hg+MPKzfOuHyqQN2TEw==",
       "dependencies": {
         "@cospired/i18n-iso-languages": "2.2.0",
-        "@formatjs/intl-pluralrules": "^4.3.3",
-        "@formatjs/intl-relativetimeformat": "^10.0.1",
+        "@formatjs/intl-pluralrules": "4.3.3",
+        "@formatjs/intl-relativetimeformat": "10.0.1",
         "axios": "0.26.1",
         "axios-cache-adapter": "2.7.3",
         "form-urlencoded": "4.1.4",
@@ -27485,6 +27486,20 @@
         }
       }
     },
+    "node_modules/react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
     "node_modules/react-intl": {
       "version": "5.25.1",
       "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-5.25.1.tgz",
@@ -27825,6 +27840,14 @@
         "isarray": "0.0.1"
       }
     },
+    "node_modules/react-side-effect": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-style-singleton": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
@@ -36031,13 +36054,13 @@
       }
     },
     "@edx/frontend-platform": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-2.4.0.tgz",
-      "integrity": "sha512-i5z6cg+A+OLHgpvqPzU2jd7VM2soHsOAb8Jk6t4ddAtN1gLDad/pFhty3+aBEPIsnTuGDmrtUl5Yl/hP8Muc+w==",
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-2.6.2.tgz",
+      "integrity": "sha512-h+gYLkPYw41krGiSGs59o2jaq/g3Yk6ay/3rBq0y1/KM6eeaq/F7o14YOhfTRLTpld9Hg+MPKzfOuHyqQN2TEw==",
       "requires": {
         "@cospired/i18n-iso-languages": "2.2.0",
-        "@formatjs/intl-pluralrules": "^4.3.3",
-        "@formatjs/intl-relativetimeformat": "^10.0.1",
+        "@formatjs/intl-pluralrules": "4.3.3",
+        "@formatjs/intl-relativetimeformat": "10.0.1",
         "axios": "0.26.1",
         "axios-cache-adapter": "2.7.3",
         "form-urlencoded": "4.1.4",
@@ -54222,6 +54245,17 @@
         "use-sidecar": "^1.1.2"
       }
     },
+    "react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      }
+    },
     "react-intl": {
       "version": "5.25.1",
       "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-5.25.1.tgz",
@@ -54490,6 +54524,12 @@
         }
       }
     },
+    "react-side-effect": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
+      "requires": {}
+    },
     "react-style-singleton": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",

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",

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}

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;

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"

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>
+`;

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;

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);
+  });
+});

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;

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