feat: allow runtime configuration (#603)

.env

@@ -27,3 +27,5 @@ SUPPORT_URL=''
 USER_INFO_COOKIE_NAME=''
 ENABLE_COPPA_COMPLIANCE=''
 MARKETING_EMAILS_OPT_IN=''
+APP_ID=
+MFE_CONFIG_API_URL=

.env.development

@@ -28,3 +28,6 @@ SUPPORT_URL='http://localhost:18000/support'
 USER_INFO_COOKIE_NAME='edx-user-info'
 ENABLE_COPPA_COMPLIANCE=''
 MARKETING_EMAILS_OPT_IN=''
+APP_ID=
+MFE_CONFIG_API_URL=
+

.env.test

@@ -27,3 +27,5 @@ SUPPORT_URL='http://localhost:18000/support'
 USER_INFO_COOKIE_NAME='edx-user-info'
 ENABLE_COPPA_COMPLIANCE=''
 MARKETING_EMAILS_OPT_IN=''
+APP_ID=
+MFE_CONFIG_API_URL=

package.json

@@ -28,9 +28,9 @@
   ],
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-component-footer": "10.2.0",
-    "@edx/frontend-component-header": "2.4.5",
-    "@edx/frontend-platform": "1.15.6",
+    "@edx/frontend-component-footer": "11.1.0",
+    "@edx/frontend-component-header": "3.1.0",
+    "@edx/frontend-platform": "2.5.0",
     "@edx/paragon": "19.20.0",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
@@ -63,6 +63,7 @@
     "qs": "6.10.3",
     "react": "16.14.0",
     "react-dom": "16.14.0",
+    "react-helmet": "^6.1.0",
     "react-redux": "7.2.6",
     "react-router": "5.2.1",
     "react-router-dom": "5.3.0",
@@ -90,4 +91,4 @@
     "reactifex": "1.1.1",
     "redux-mock-store": "1.5.4"
   }
-}
+}

src/account-settings/coaching/test/__snapshots__/CoachingConsent.test.jsx.snap

@@ -34,13 +34,11 @@ exports[`CoachingConsent disables name field on enterprise user 1`] = `
           >
             <div />
             <div>
-              <span>
-                Your name is managed by 
-                <b>
-                  test person
-                </b>
-                . Contact your administrator for help.
-              </span>
+              Your name is managed by 
+              <b>
+                test person
+              </b>
+              . Contact your administrator for help.
             </div>
           </div>
           <div

src/account-settings/delete-account/DeleteAccount.test.jsx

@@ -3,8 +3,8 @@ import renderer from 'react-test-renderer';
 import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
 
 // Testing the modals separately, they just clutter up the snapshots if included here.
-jest.mock('./ConfirmationModal');
-jest.mock('./SuccessModal');
+jest.mock('./ConfirmationModal', () => () => (<></>));
+jest.mock('./SuccessModal', () => () => (<></>));
 
 import { DeleteAccount } from './DeleteAccount'; // eslint-disable-line import/first
 
@@ -37,6 +37,7 @@ describe('DeleteAccount', () => {
         </IntlProvider>
       ))
       .toJSON();
+
     expect(tree).toMatchSnapshot();
   });
 

src/account-settings/delete-account/__snapshots__/ConfirmationModal.test.jsx.snap

@@ -86,9 +86,7 @@ Array [
                     If you proceed, you will be unable to use this account to take courses on localhost.
                   </p>
                   <p>
-                    <span>
-                      You may also lose access to verified certificates and other program credentials. You can make a copy of these for your records before proceeding with deletion.
-                    </span>
+                    You may also lose access to verified certificates and other program credentials. You can make a copy of these for your records before proceeding with deletion.
                   </p>
                 </div>
               </div>
@@ -282,9 +280,7 @@ Array [
                     If you proceed, you will be unable to use this account to take courses on localhost.
                   </p>
                   <p>
-                    <span>
-                      You may also lose access to verified certificates and other program credentials. You can make a copy of these for your records before proceeding with deletion.
-                    </span>
+                    You may also lose access to verified certificates and other program credentials. You can make a copy of these for your records before proceeding with deletion.
                   </p>
                 </div>
               </div>
@@ -443,9 +439,7 @@ Array [
                     If you proceed, you will be unable to use this account to take courses on localhost.
                   </p>
                   <p>
-                    <span>
-                      You may also lose access to verified certificates and other program credentials. You can make a copy of these for your records before proceeding with deletion.
-                    </span>
+                    You may also lose access to verified certificates and other program credentials. You can make a copy of these for your records before proceeding with deletion.
                   </p>
                 </div>
               </div>

src/account-settings/delete-account/__snapshots__/DeleteAccount.test.jsx.snap

@@ -17,9 +17,7 @@ exports[`DeleteAccount should match default section snapshot 1`] = `
     Once your account is deleted, you cannot use it to take courses on localhost.
   </p>
   <p>
-    <span>
-      You may also lose access to verified certificates and other program credentials. You can make a copy of these for your records before proceeding with deletion.
-    </span>
+    You may also lose access to verified certificates and other program credentials. You can make a copy of these for your records before proceeding with deletion.
   </p>
   <p
     className="text-danger h6"
@@ -66,9 +64,7 @@ exports[`DeleteAccount should match unverified account section snapshot 1`] = `
     Once your account is deleted, you cannot use it to take courses on localhost.
   </p>
   <p>
-    <span>
-      You may also lose access to verified certificates and other program credentials. You can make a copy of these for your records before proceeding with deletion.
-    </span>
+    You may also lose access to verified certificates and other program credentials. You can make a copy of these for your records before proceeding with deletion.
   </p>
   <p
     className="text-danger h6"
@@ -118,18 +114,16 @@ exports[`DeleteAccount should match unverified account section snapshot 1`] = `
       </svg>
     </div>
     <div>
-      <span>
-        Before proceeding, please 
-        <a
-          className="pgn__hyperlink default-link standalone-link"
-          href="https://support.edx.org/hc/en-us/articles/115000940568-How-do-I-confirm-my-email-"
-          onClick={[Function]}
-          target="_self"
-        >
-          activate your account
-        </a>
-        .
-      </span>
+      Before proceeding, please 
+      <a
+        className="pgn__hyperlink default-link standalone-link"
+        href="https://support.edx.org/hc/en-us/articles/115000940568-How-do-I-confirm-my-email-"
+        onClick={[Function]}
+        target="_self"
+      >
+        activate your account
+      </a>
+      .
     </div>
   </div>
 </div>
@@ -152,9 +146,7 @@ exports[`DeleteAccount should match unverified account section snapshot 2`] = `
     Once your account is deleted, you cannot use it to take courses on localhost.
   </p>
   <p>
-    <span>
-      You may also lose access to verified certificates and other program credentials. You can make a copy of these for your records before proceeding with deletion.
-    </span>
+    You may also lose access to verified certificates and other program credentials. You can make a copy of these for your records before proceeding with deletion.
   </p>
   <p
     className="text-danger h6"
@@ -204,18 +196,16 @@ exports[`DeleteAccount should match unverified account section snapshot 2`] = `
       </svg>
     </div>
     <div>
-      <span>
-        Before proceeding, please 
-        <a
-          className="pgn__hyperlink default-link standalone-link"
-          href="https://support.edx.org/hc/en-us/articles/207206067"
-          onClick={[Function]}
-          target="_self"
-        >
-          unlink all social media accounts
-        </a>
-        .
-      </span>
+      Before proceeding, please 
+      <a
+        className="pgn__hyperlink default-link standalone-link"
+        href="https://support.edx.org/hc/en-us/articles/207206067"
+        onClick={[Function]}
+        target="_self"
+      >
+        unlink all social media accounts
+      </a>
+      .
     </div>
   </div>
 </div>

src/account-settings/demographics/test/__snapshots__/DemographicsSection.test.jsx.snap

@@ -710,9 +710,7 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
     >
       <div />
       <div>
-        <span>
-          An error occurred attempting to retrieve or save your account information. Please try again later.
-        </span>
+        An error occurred attempting to retrieve or save your account information. Please try again later.
       </div>
     </div>
   </div>
@@ -1370,9 +1368,7 @@ exports[`DemographicsSection should render an Alert when demographicsOptions pro
     >
       <div />
       <div>
-        <span>
-          An error occurred attempting to retrieve or save your account information. Please try again later.
-        </span>
+        An error occurred attempting to retrieve or save your account information. Please try again later.
       </div>
     </div>
   </div>

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['account.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);

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 fivicon with the site configuration values', () => {
+    mount(<IntlProvider locale="en"><Head {...props} /></IntlProvider>);
+    const helmet = Helmet.peek();
+    expect(helmet.title).toEqual(`Account | ${getConfig().SITE_NAME}`);
+    expect(helmet.linkTags[0].rel).toEqual('shortcut icon');
+    expect(helmet.linkTags[0].href).toEqual(getConfig().FAVICON_URL);
+  });
+});

src/head/messages.js

@@ -0,0 +1,11 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'account.page.title': {
+    id: 'account.page.title',
+    defaultMessage: 'Account | {siteName}',
+    description: 'Title tag',
+  },
+});
+
+export default messages;

src/id-verification/tests/IdVerificationPage.test.jsx

@@ -18,15 +18,15 @@ jest.mock('../VerifiedNameContext', () => {
     VerifiedNameContextProvider: jest.fn(({ children }) => children),
   };
 });
-jest.mock('../panels/ReviewRequirementsPanel');
-jest.mock('../panels/RequestCameraAccessPanel');
-jest.mock('../panels/PortraitPhotoContextPanel');
-jest.mock('../panels/TakePortraitPhotoPanel');
-jest.mock('../panels/IdContextPanel');
-jest.mock('../panels/GetNameIdPanel');
-jest.mock('../panels/TakeIdPhotoPanel');
-jest.mock('../panels/SummaryPanel');
-jest.mock('../panels/SubmittedPanel');
+jest.mock('../panels/ReviewRequirementsPanel', () => () => (<></>));
+jest.mock('../panels/RequestCameraAccessPanel', () => () => (<></>));
+jest.mock('../panels/PortraitPhotoContextPanel', () => () => (<></>));
+jest.mock('../panels/TakePortraitPhotoPanel', () => () => (<></>));
+jest.mock('../panels/IdContextPanel', () => () => (<></>));
+jest.mock('../panels/GetNameIdPanel', () => () => (<></>));
+jest.mock('../panels/TakeIdPhotoPanel', () => () => (<></>));
+jest.mock('../panels/SummaryPanel', () => () => (<></>));
+jest.mock('../panels/SubmittedPanel', () => () => (<></>));
 
 const IntlIdVerificationPage = injectIntl(IdVerificationPage);
 

src/id-verification/tests/panels/TakePortraitPhotoPanel.test.jsx

@@ -12,7 +12,7 @@ jest.mock('@edx/frontend-platform/analytics', () => ({
   sendTrackEvent: jest.fn(),
 }));
 
-jest.mock('../../Camera');
+jest.mock('../../Camera', () => () => (<></>));
 
 const history = createMemoryHistory();
 

src/index.jsx

@@ -20,10 +20,12 @@ import CoachingConsent from './account-settings/coaching/CoachingConsent';
 import appMessages from './i18n';
 
 import './index.scss';
+import Head from './head/Head';
 
 subscribe(APP_READY, () => {
   ReactDOM.render(
     <AppProvider store={configureStore()}>
+      <Head />
       <Switch>
         <Route path="/coaching_consent" component={CoachingConsent} />
         <div className="d-flex flex-column" style={{ minHeight: '100vh' }}>