feat: allow runtime configuration (#253)

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

Hide file tree

Showing 11 changed files with 116 additions and 11 deletions.
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
@@ -37,3 +37,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
@@ -33,7 +33,7 @@
     "@edx/brand": "npm:@edx/brand-edx.org@^1.3.2",
     "@edx/frontend-component-footer": "^11.1.1",
     "@edx/frontend-component-header": "^3.1.1",
-    "@edx/frontend-platform": "2.3.0",
+    "@edx/frontend-platform": "2.5.0",
     "@edx/paragon": "19.6.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-brands-svg-icons": "^5.11.2",
@@ -52,6 +52,7 @@
     "query-string": "6.13.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
+    "react-helmet": "^6.1.0",
     "react-intl": "^2.9.0",
     "react-redux": "^7.1.1",
     "react-router": "5.2.0",

diff --git a/src/App.jsx b/src/App.jsx
@@ -10,9 +10,11 @@ import { routePath } from 'data/constants/app';
 import store from 'data/store';
 import GradebookPage from 'containers/GradebookPage';
 import './App.scss';
+import Head from './head/Head';
 
 const App = () => (
   <AppProvider store={store}>
+    <Head />
     <Router>
       <div>
         <Header />

diff --git a/src/App.test.jsx b/src/App.test.jsx
@@ -12,6 +12,7 @@ import store from 'data/store';
 import GradebookPage from 'containers/GradebookPage';
 
 import App from './App';
+import Head from './head/Head';
 
 jest.mock('react-router-dom', () => ({
   BrowserRouter: () => 'BrowserRouter',
@@ -41,16 +42,21 @@ describe('App router component', () => {
     beforeEach(() => {
       process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG = logo;
       el = shallow(<App />);
-      router = el.childAt(0);
+      router = el.childAt(1);
     });
     describe('AppProvider', () => {
       test('AppProvider is the parent component, passed the redux store props', () => {
         expect(el.type()).toBe(AppProvider);
         expect(el.props().store).toEqual(store);
       });
     });
-    describe('Router', () => {
+    describe('Head', () => {
       test('first child of AppProvider', () => {
+        expect(el.childAt(0).type()).toBe(Head);
+      });
+    });
+    describe('Router', () => {
+      test('second child of AppProvider', () => {
         expect(router.type()).toBe(Router);
       });
       test('Header is above/outside-of the routing', () => {

diff --git a/src/__snapshots__/App.test.jsx.snap b/src/__snapshots__/App.test.jsx.snap
@@ -4,6 +4,7 @@ exports[`App router component snapshot 1`] = `
 <AppProvider
   store="testStore"
 >
+  <injectIntl(ShimmedIntlComponent) />
   <BrowserRouter>
     <div>
       <Header />

diff --git a/src/head/Head.jsx b/src/head/Head.jsx
@@ -0,0 +1,21 @@
+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';
+
+const Head = ({ intl }) => (
+  <Helmet>
+    <title>
+      {intl.formatMessage(messages['gradebook.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(`Gradebook | ${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({
+  'gradebook.page.title': {
+    id: 'gradebook.page.title',
+    defaultMessage: 'Gradebook | {siteName}',
+    description: 'Title tag',
+  },
+});
+
+export default messages;
diff --git a/src/setupTest.js b/src/setupTest.js
@@ -8,6 +8,8 @@ Enzyme.configure({ adapter: new Adapter() });
 // These configuration values are usually set in webpack's EnvironmentPlugin however
 // Jest does not use webpack so we need to set these so for testing
 process.env.LMS_BASE_URL = 'http://localhost:18000';
+process.env.SITE_NAME = 'localhost';
+process.env.FAVICON_URL = 'http://localhost:18000/favicon.ico';
 
 jest.mock('@edx/frontend-platform/i18n', () => {
   const i18n = jest.requireActual('@edx/frontend-platform/i18n');