feat: add ability to dynamically load theme overrides

Author: viktorrusakov

.env.development

@@ -27,4 +27,5 @@ FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 IGNORED_ERROR_REGEX=
 MFE_CONFIG_API_URL=
 APP_ID=
-SUPPORT_URL=https://support.edx.org
+SUPPORT_URL=https://support.edx.org
+THEME_OVERRIDE_URL=

.env.test

@@ -28,3 +28,4 @@ IGNORED_ERROR_REGEX=
 MFE_CONFIG_API_URL=
 APP_ID=
 SUPPORT_URL=https://support.edx.org
+THEME_OVERRIDE_URL=

src/config.js

@@ -72,6 +72,7 @@ let config = {
   MFE_CONFIG_API_URL: process.env.MFE_CONFIG_API_URL,
   APP_ID: process.env.APP_ID,
   SUPPORT_URL: process.env.SUPPORT_URL,
+  THEME_OVERRIDE_URL: process.env.THEME_OVERRIDE_URL,
 };
 
 /**
@@ -203,4 +204,5 @@ export function ensureConfig(keys, requester = 'unspecified application code') {
  * @property {string} MFE_CONFIG_API_URL
  * @property {string} APP_ID
  * @property {string} SUPPORT_URL
+ * @property {string} THEME_OVERRIDE_URL
  */

src/react/AppProvider.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Router } from 'react-router-dom';
 
@@ -48,6 +48,7 @@ export default function AppProvider({ store, children }) {
   const [config, setConfig] = useState(getConfig());
   const [authenticatedUser, setAuthenticatedUser] = useState(getAuthenticatedUser());
   const [locale, setLocale] = useState(getLocale());
+  const [themeLoaded, setThemeLoaded] = useState(false);
 
   useAppEvent(AUTHENTICATED_USER_CHANGED, () => {
     setAuthenticatedUser(getAuthenticatedUser());
@@ -61,8 +62,28 @@ export default function AppProvider({ store, children }) {
     setLocale(getLocale());
   });
 
+  useEffect(() => {
+    if (config.THEME_OVERRIDE_URL) {
+      const themeLink = document.createElement('link');
+      themeLink.href = config.THEME_OVERRIDE_URL;
+      themeLink.rel = 'stylesheet';
+      themeLink.type = 'text/css';
+      themeLink.onload = () => setThemeLoaded(true);
+      themeLink.onerror = () => setThemeLoaded(true);
+
+      document.head.appendChild(themeLink);
+
+      return () => document.head.removeChild(themeLink);
+    }
+    setThemeLoaded(true);
+  }, [config.THEME_OVERRIDE_URL]);
+
   const appContextValue = useMemo(() => ({ authenticatedUser, config, locale }), [authenticatedUser, config, locale]);
 
+  if (!themeLoaded) {
+    return null;
+  }
+
   return (
     <IntlProvider locale={locale} messages={getMessages()}>
       <ErrorBoundary>
@@ -81,8 +102,7 @@ export default function AppProvider({ store, children }) {
 }
 
 AppProvider.propTypes = {
-  // eslint-disable-next-line react/forbid-prop-types
-  store: PropTypes.object,
+  store: PropTypes.shape({}),
   children: PropTypes.node.isRequired,
 };