Allow Runtime Configuration (#104)

feat: add Head component. Update frontend-platform to version 2.5.0. Update the footer and header to avoid peer dependency errors. Create a component Head, that uses Helmet library and integrates internationalization to change the MFE name in the title tag according to the language, and change the favicon in runtime. Add react-helmet-async, enzyme and enzyme-adapter-react-16. Co-authored-by: anfbermudezme <[email protected]> Co-authored-by: Diana Catalina Olarte <[email protected]>
openedx · Dec 5, 2022 · 44f1527 · 44f1527
1 parent 61eb2e9
commit 44f1527
Show file tree

Hide file tree

Showing 10 changed files with 708 additions and 156 deletions.
diff --git a/.env b/.env
@@ -19,3 +19,5 @@ SEGMENT_KEY=''
 SITE_NAME=''
 USER_INFO_COOKIE_NAME=''
 SUPPORT_URL_LEARNER_RECORDS=''
+APP_ID=''
+MFE_CONFIG_API_URL=''
diff --git a/.env.development b/.env.development
@@ -21,3 +21,5 @@ SITE_NAME=localhost
 USER_INFO_COOKIE_NAME='edx-user-info'
 SUPPORT_URL_LEARNER_RECORDS='https://support.edx.org/hc/en-us/sections/360001216693-Learner-records'
 USE_LR_MFE='true'
+APP_ID=''
+MFE_CONFIG_API_URL=''
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,9 +34,9 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@edx/[email protected]",
-    "@edx/frontend-component-footer": "10.3.0",
-    "@edx/frontend-component-header": "2.6.1",
-    "@edx/frontend-platform": "1.15.6",
+    "@edx/frontend-component-footer": "11.1.1",
+    "@edx/frontend-component-header": "3.1.1",
+    "@edx/frontend-platform": "2.5.0",
     "@edx/paragon": "19.25.3",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
@@ -51,6 +51,7 @@
     "prop-types": "15.8.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
+    "react-helmet-async": "^1.3.0",
     "react-redux": "7.2.9",
     "react-router": "5.3.3",
     "react-router-dom": "5.3.3",

diff --git a/src/components/Head/Head.jsx b/src/components/Head/Head.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Helmet } from 'react-helmet-async';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+
+import messages from './messages';
+
+function Head({ intl }) {
+  return (
+    <Helmet>
+      <title>
+        {intl.formatMessage(messages.PageTitle, { siteName: getConfig().SITE_NAME })}
+      </title>
+      <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
+    </Helmet>
+  );
+}
+
+Head.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(Head);
diff --git a/src/components/Head/index.js b/src/components/Head/index.js
@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export { default } from './Head';
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: 'My Learner Records | {siteName}',
+    description: 'Title tag',
+  },
+});
+
+export default messages;
diff --git a/src/components/Head/test/Head.test.jsx b/src/components/Head/test/Head.test.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { getConfig } from '@edx/frontend-platform';
+import { waitFor } from '@testing-library/react';
+import { render, initializeMockApp } from '../../../setupTest';
+import Head from '../Head';
+
+describe('Head', () => {
+  beforeAll(async () => {
+    await initializeMockApp();
+  });
+
+  const props = {};
+  it('should match render title tag and favicon with the site configuration values', async () => {
+    render(<Head {...props} />);
+
+    await waitFor(() => {
+      expect(document.title).toEqual(`My Learner Records | ${getConfig().SITE_NAME}`);
+      expect(document.querySelector('link').rel).toEqual('shortcut icon');
+      expect(document.querySelector('link').href).toEqual(getConfig().FAVICON_URL);
+    });
+  });
+});
diff --git a/src/index.jsx b/src/index.jsx
@@ -7,47 +7,52 @@ import {
   APP_INIT_ERROR, APP_READY, subscribe, initialize, mergeConfig, getConfig,
 } from '@edx/frontend-platform';
 import { AppProvider, ErrorPage } from '@edx/frontend-platform/react';
+import { HelmetProvider } from 'react-helmet-async';
 import Header, { messages as headerMessages } from '@edx/frontend-component-header';
 import Footer, { messages as footerMessages } from '@edx/frontend-component-footer';
 
 import appMessages from './i18n';
 import './index.scss';
 import ProgramRecordsList from './components/ProgramRecordsList';
 import ProgramRecord from './components/ProgramRecord';
+import Head from './components/Head';
 
 subscribe(APP_READY, () => {
   ReactDOM.render(
     <AppProvider>
-      <Header />
-      {getConfig().USE_LR_MFE ? (
-        <Router>
-          <Switch>
-            <Route
-              exact
-              path="/"
-            >
-              <ProgramRecordsList />
-            </Route>
-            <Route
-              path="/shared/:programUUID"
-            >
-              <ProgramRecord
-                isPublic
-              />
-            </Route>
-            <Route
-              path="/:programUUID"
-            >
-              <ProgramRecord
-                isPublic={false}
-              />
-            </Route>
-          </Switch>
-        </Router>
-      ) : (
-        <ProgramRecordsList />
-      )}
-      <Footer />
+      <HelmetProvider>
+        <Head />
+        <Header />
+        {getConfig().USE_LR_MFE ? (
+          <Router>
+            <Switch>
+              <Route
+                exact
+                path="/"
+              >
+                <ProgramRecordsList />
+              </Route>
+              <Route
+                path="/shared/:programUUID"
+              >
+                <ProgramRecord
+                  isPublic
+                />
+              </Route>
+              <Route
+                path="/:programUUID"
+              >
+                <ProgramRecord
+                  isPublic={false}
+                />
+              </Route>
+            </Switch>
+          </Router>
+        ) : (
+          <ProgramRecordsList />
+        )}
+        <Footer />
+      </HelmetProvider>
     </AppProvider>,
     document.getElementById('root'),
   );

diff --git a/src/setupTest.js b/src/setupTest.js
@@ -4,6 +4,7 @@ import '@testing-library/jest-dom';
 import React from 'react';
 import { render as rtlRender } from '@testing-library/react';
 import AppProvider from '@edx/frontend-platform/react/AppProvider';
+import { HelmetProvider } from 'react-helmet-async';
 import { configure as configureI18n, IntlProvider } from '@edx/frontend-platform/i18n';
 import { configure as configureLogging, MockLoggingService } from '@edx/frontend-platform/logging';
 import { getConfig, mergeConfig } from '@edx/frontend-platform';
@@ -54,7 +55,7 @@ function render(ui, options) {
     return (
       // eslint-disable-next-line react/jsx-filename-extension
       <IntlProvider locale="en">
-        <AppProvider>{children}</AppProvider>
+        <AppProvider><HelmetProvider>{children}</HelmetProvider></AppProvider>
       </IntlProvider>
     );
   }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// eslint-disable-next-line no-restricted-exports
		export { default } from './Head';