feat: allow runtieme configuration (#586)

Allows frontend-app-profile to be configured at runtime using the LMS's new MFE Configuration API. Part of openedx/wg-frontend#103
openedx · Oct 17, 2022 · 4f00bc4 · 4f00bc4
1 parent f732fa7
commit 4f00bc4
Show file tree

Hide file tree

Showing 11 changed files with 614 additions and 293 deletions.
diff --git a/.env b/.env
@@ -25,3 +25,5 @@ FAVICON_URL=''
 ENABLE_LEARNER_RECORD_MFE=''
 LEARNER_RECORD_MFE_BASE_URL=''
 COLLECT_YEAR_OF_BIRTH=true
+APP_ID=''
+MFE_CONFIG_API_URL=''
diff --git a/.env.development b/.env.development
@@ -26,3 +26,5 @@ FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 ENABLE_LEARNER_RECORD_MFE=''
 LEARNER_RECORD_MFE_BASE_URL='http://localhost:1990'
 COLLECT_YEAR_OF_BIRTH=true
+APP_ID=''
+MFE_CONFIG_API_URL=''
diff --git a/.env.test b/.env.test
@@ -20,3 +20,5 @@ FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 ENABLE_LEARNER_RECORD_MFE=''
 LEARNER_RECORD_MFE_BASE_URL='http://localhost:1990'
 COLLECT_YEAR_OF_BIRTH=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
@@ -30,9 +30,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.2.1",
+    "@edx/frontend-component-header": "3.2.1",
+    "@edx/frontend-platform": "2.6.2",
     "@edx/paragon": "19.25.3",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
@@ -51,6 +51,7 @@
     "react-redux": "7.2.9",
     "react-router": "5.3.4",
     "react-router-dom": "5.3.4",
+    "react-helmet": "^6.1.0",
     "redux": "4.2.0",
     "redux-devtools-extension": "2.13.9",
     "redux-logger": "3.0.6",

diff --git a/src/head/Head.jsx b/src/head/Head.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+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['profile.page.title'], { 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/head/Head.test.jsx b/src/head/Head.test.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { Helmet } from 'react-helmet';
+import { mount } from 'enzyme';
+import { getConfig } from '@edx/frontend-platform';
+import Head from './Head';
+
+describe('Head', () => {
+  const props = {};
+  it('should match render title tag and favicon with the site configuration values', () => {
+    mount(<IntlProvider locale="en"><Head {...props} /></IntlProvider>);
+    const helmet = Helmet.peek();
+    expect(helmet.title).toEqual(`Profile | ${getConfig().SITE_NAME}`);
+    expect(helmet.linkTags[0].rel).toEqual('shortcut icon');
+    expect(helmet.linkTags[0].href).toEqual(getConfig().FAVICON_URL);
+  });
+});
diff --git a/src/head/messages.js b/src/head/messages.js
@@ -0,0 +1,11 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'profile.page.title': {
+    id: 'profile.page.title',
+    defaultMessage: 'Profile | {siteName}',
+    description: 'Title tag',
+  },
+});
+
+export default messages;
diff --git a/src/index.jsx b/src/index.jsx
@@ -25,10 +25,12 @@ import { ProfilePage, NotFoundPage } from './profile';
 import configureStore from './data/configureStore';
 
 import './index.scss';
+import Head from './head/Head';
 
 subscribe(APP_READY, () => {
   ReactDOM.render(
     <AppProvider store={configureStore()}>
+      <Head />
       <Header />
       <main>
         <Switch>