feat: allow runtime configuration (openedx#786)

.env

@@ -14,3 +14,5 @@ SITE_NAME=null
 NEW_RELIC_ADMIN_KEY=null
 NEW_RELIC_APP_ID=null
 NEW_RELIC_LICENSE_KEY=null
+APP_ID=''
+MFE_CONFIG_API_URL=''

.env.development

@@ -15,3 +15,5 @@ REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
 USER_INFO_COOKIE_NAME='edx-user-info'
 SITE_NAME='edX'
+APP_ID=''
+MFE_CONFIG_API_URL=''

.env.test

@@ -4,3 +4,4 @@ LOGO_URL='https://edx-cdn.org/v3/default/logo.svg'
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
+SITE_NAME='edX'

package.json

@@ -22,7 +22,7 @@
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
     "@edx/frontend-component-footer-edx": "3.5.0",
-    "@edx/frontend-platform": "1.15.6",
+    "@edx/frontend-platform": "2.5.1",
     "@edx/paragon": "19.14.0",
     "@edx/tinymce-language-selector": "1.1.0",
     "@fortawesome/free-regular-svg-icons": "6.1.1",

src/components/CourseTable/__snapshots__/CourseTable.test.jsx.snap

@@ -10,8 +10,13 @@ exports[`CourseTable displays table and button when not blacklisted 1`] = `
     encodeSpecialCharacters={true}
   >
     <title>
-      Publisher | undefined
+      Publisher | edX
     </title>
+    <link
+      href="https://edx-cdn.org/v3/default/favicon.ico"
+      rel="shortcut icon"
+      type="image/x-icon"
+    />
   </HelmetWrapper>
   <div
     className="row"
@@ -168,8 +173,13 @@ exports[`CourseTable displays table and button when user has no orgs 1`] = `
     encodeSpecialCharacters={true}
   >
     <title>
-      Publisher | undefined
+      Publisher | edX
     </title>
+    <link
+      href="https://edx-cdn.org/v3/default/favicon.ico"
+      rel="shortcut icon"
+      type="image/x-icon"
+    />
   </HelmetWrapper>
   <div
     className="row"
@@ -326,8 +336,13 @@ exports[`CourseTable hides table and button when blacklisted 1`] = `
     encodeSpecialCharacters={true}
   >
     <title>
-      Publisher | undefined
+      Publisher | edX
     </title>
+    <link
+      href="https://edx-cdn.org/v3/default/favicon.ico"
+      rel="shortcut icon"
+      type="image/x-icon"
+    />
   </HelmetWrapper>
   <div
     className="row"
@@ -484,8 +499,13 @@ exports[`CourseTable shows a table 1`] = `
     encodeSpecialCharacters={true}
   >
     <title>
-      Publisher | undefined
+      Publisher | edX
     </title>
+    <link
+      href="https://edx-cdn.org/v3/default/favicon.ico"
+      rel="shortcut icon"
+      type="image/x-icon"
+    />
   </HelmetWrapper>
   <div
     className="row"

src/components/CourseTable/index.jsx

@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom';
 import Select from 'react-select';
 import qs from 'query-string';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import { getConfig } from '@edx/frontend-platform';
 import { SearchField } from '@edx/paragon';
 
 import TableContainer from '../../containers/TableContainer';
@@ -228,7 +229,8 @@ class CourseTable extends React.Component {
     return (
       <PageContainer wide>
         <Helmet>
-          <title>{`Publisher | ${process.env.SITE_NAME}`}</title>
+          <title>{`Publisher | ${getConfig().SITE_NAME}`}</title>
+          <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
         </Helmet>
         {!loading && !error && this.renderTableHeader()}
         <TableContainer

src/components/EditCoursePage/CollapsibleCourseRun.jsx

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 
 import { Field, FieldArray } from 'redux-form';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import { getConfig } from '@edx/frontend-platform';
 import { faCopy } from '@fortawesome/free-regular-svg-icons';
 import { faCopy as solidCopy } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -76,7 +77,7 @@ const formatCourseRunTitle = (courseRun, copied, setCopied) => {
           <>
             Studio URL -&nbsp;
             <Hyperlink
-              destination={`${process.env.STUDIO_BASE_URL}/course/${courseRun.key}`}
+              destination={`${getConfig().STUDIO_BASE_URL}/course/${courseRun.key}`}
               target="_blank"
             >
               {courseRun.key}

src/components/Header/__snapshots__/Header.test.jsx.snap

@@ -32,7 +32,6 @@ exports[`Header renders the correct header 1`] = `
                 alt="edX logo"
                 height="30"
                 src="https://edx-cdn.org/v3/default/logo.svg"
-                width="60"
               />
             </a>
           </ForwardRef>
@@ -267,7 +266,6 @@ exports[`Header renders the header correctly when toggling is allowed, and dark
                 alt="edX logo"
                 height="30"
                 src="https://edx-cdn.org/v3/default/logo.svg"
-                width="60"
               />
             </a>
           </ForwardRef>
@@ -514,7 +512,6 @@ exports[`Header renders the header correctly when users pass a querystring param
                 alt="edX logo"
                 height="30"
                 src="https://edx-cdn.org/v3/default/logo.svg"
-                width="60"
               />
             </a>
           </ForwardRef>

src/components/Header/index.jsx

@@ -7,6 +7,7 @@ import { AppContext } from '@edx/frontend-platform/react';
 import {
   Dropdown, Hyperlink, AvatarButton,
 } from '@edx/paragon';
+import { getConfig } from '@edx/frontend-platform';
 
 const Header = ({ darkModeOn, location, toggleDarkMode }) => {
   const { authenticatedUser } = useContext(AppContext);
@@ -32,8 +33,8 @@ const Header = ({ darkModeOn, location, toggleDarkMode }) => {
       <div className="container">
         <div className="row align-items-center">
           <div className="col-auto justify-content-start">
-            <Hyperlink destination={process.env.BASE_URL}>
-              <img src={process.env.LOGO_URL} alt="edX logo" height="30" width="60" />
+            <Hyperlink destination={getConfig().BASE_URL}>
+              <img src={getConfig().LOGO_URL} alt="edX logo" height="30" />
             </Hyperlink>
           </div>
           <div className="col-auto justify-content-start">
@@ -63,7 +64,7 @@ const Header = ({ darkModeOn, location, toggleDarkMode }) => {
 
                 <Dropdown.Menu>
                   <Dropdown.Item
-                    onClick={() => redirectToLogout(process.env.LMS_BASE_URL)}
+                    onClick={() => redirectToLogout(getConfig().LMS_BASE_URL)}
                     key="dropdown-logout"
                   >
                     Sign Out

src/helpText.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { getConfig } from '@edx/frontend-platform';
 import { isSafari } from './utils';
 
 /**
@@ -30,7 +31,7 @@ function dateEditHelp(courseRun) {
       </p>
       <p>
         <a
-          href={`${process.env.STUDIO_BASE_URL}/settings/details/${courseRun.key}#schedule`}
+          href={`${getConfig().STUDIO_BASE_URL}/settings/details/${courseRun.key}#schedule`}
           target="_blank"
           rel="noopener noreferrer"
         >
@@ -80,7 +81,7 @@ function pacingEditHelp(courseRun) {
       </p>
       <p>
         <a
-          href={`${process.env.STUDIO_BASE_URL}/settings/details/${courseRun.key}`}
+          href={`${getConfig().STUDIO_BASE_URL}/settings/details/${courseRun.key}`}
           target="_blank"
           rel="noopener noreferrer"
         >