fix: configurable system wide banner (#657)

* fix: configurable system wide banner

* fix: add config values with mergeConfig

* fix: use PageBanner from Paragon instead

.env

@@ -1,23 +1 @@
 NODE_ENV='production'
-BASE_URL=''
-LMS_BASE_URL=''
-LOGIN_URL=''
-LOGOUT_URL=''
-ENTERPRISE_SUPPORT_URL=''
-SURVEY_MONKEY_URL=''
-CSRF_TOKEN_API_PATH=''
-REFRESH_ACCESS_TOKEN_ENDPOINT=''
-DATA_API_BASE_URL=''
-ECOMMERCE_BASE_URL=''
-LICENSE_MANAGER_BASE_URL=''
-ACCESS_TOKEN_COOKIE_NAME=''
-USER_INFO_COOKIE_NAME=''
-SEGMENT_KEY=''
-NEW_RELIC_APP_ID=''
-NEW_RELIC_LICENSE_KEY=''
-ENTERPRISE_LEARNER_PORTAL_URL=''
-TABLEAU_URL=''
-LOGO_URL=''
-LOGO_WHITE_URL=''
-LOGO_TRADEMARK_URL=''
-FAVICON_URL=''

.env.development

@@ -34,3 +34,6 @@ HOTJAR_APP_ID=''
 HOTJAR_VERSION=6
 HOTJAR_DEBUG=''
 FEATURE_FILE_ATTACHMENT=true
+IS_MAINTENANCE_ALERT_ENABLED=''
+MAINTENANCE_ALERT_MESSAGE=''
+MAINTENANCE_ALERT_START_TIMESTAMP=''

docs/decisions/0001-record-architecture-decisions.rst

@@ -0,0 +1,37 @@
+================================
+1. Record Architecture Decisions
+================================
+
+******
+Status
+******
+
+Accepted
+
+*******
+Context
+*******
+
+We would like to keep a historical record on the architectural decisions we make with this app as it evolves over time.
+
+********
+Decision
+********
+
+We will use Architecture Decision Records, as described by 
+Michael Nygard in `Documenting Architecture Decisions`_
+
+.. _Documenting Architecture Decisions: http://thinkrelevance.com/blog/2011/11/15/documenting-architecture-decisions
+
+************
+Consequences
+************
+
+See Michael Nygard's article, linked above.
+
+**********
+References
+**********
+
+* https://resources.sei.cmu.edu/asset_files/Presentation/2017_017_001_497746.pdf
+* https://github.com/npryce/adr-tools/tree/master/doc/adr

docs/decisions/0002-system-wide-banner-configuration.rst

@@ -0,0 +1,33 @@
+============================================================
+2. Configurable system-wide notices banner
+============================================================
+
+******
+Status
+******
+
+Accepted
+
+*******
+Context
+*******
+
+This application relies on several backend services for their API endpoints. Occassionally, scheduled planned maintenance must be performed such that certain service dependencies will fail. This may impact the user experience by limiting the functionality of certain features or producing erronous errors.
+
+To account for this, we want to provide a way to notify users that planned maintenance is underway or about to begin.
+
+********
+Decision
+********
+
+To account for this, the Paragon component `SystemWideBanner` will be used to convey a message to the user that maintenance is underway, thereby informing them that things may not work properly or as they expect. This component is a largely warning alert placed at the top of the page (above the header). Whether or not it is shown will be driven by some configuration variables: ``IS_MAINTENANCE_ALERT_ENABLED``, ``MAINTENANCE_ALERT_MESSAGE``, ``MAINTENANCE_ALERT_START_TIMESTAMP``.  
+
+In order to enable the alert, ``IS_MAINTENANCE_ALERT_ENABLED`` and ``MAINTENANCE_ALERT_MESSAGE`` must be set. Optionally, to configure when the alert will appear, you may set a timestamp for ``MAINTENANCE_ALERT_START_TIMESTAMP``. The alert will not appear before this timestamp, but it will stay up indefinitely until ``IS_MAINTENANCE_ALERT_ENABLED`` is removed and the application is re-deployed. We are intentionally not supporting an explicit end date; the assumption is that to turn off an alert is to remove the ``IS_MAINTENANCE_ALERT_ENABLED`` setting.
+
+The format of the ``MAINTENANCE_ALERT_START_TIMESTAMP`` setting is as follows: "2021-12-10T21:20:00Z"
+
+************
+Consequences
+************
+
+We do not have a particular need for an explicit end date with the alert at this time, mainly due to that we don't know how long the maintenance will last for at the time of this writing. Instead, we will simply monitor the system and turn ``IS_MAINTENANCE_ALERT_ENABLED`` off at the appropriate time and re-deploy the application.

src/components/App/index.jsx

@@ -1,11 +1,11 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { Switch } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
-
 import useHotjar from 'react-use-hotjar';
 
 import { AuthenticatedPageRoute, PageRoute, AppProvider } from '@edx/frontend-platform/react';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { getConfig } from '@edx/frontend-platform/config';
 
 import Header from '../../containers/Header';
 import Footer from '../../containers/Footer';
@@ -15,11 +15,13 @@ import AdminRegisterPage from '../AdminRegisterPage';
 import UserActivationPage from '../UserActivationPage';
 import NotFoundPage from '../NotFoundPage';
 import { ToastsProvider, Toasts } from '../Toasts';
+import { SystemWideWarningBanner } from '../system-wide-banner';
 
 import store from '../../data/store';
 
 const AppWrapper = () => {
   const apiClient = getAuthenticatedHttpClient();
+  const config = getConfig();
 
   if (process.env.HOTJAR_APP_ID) {
     const { initHotjar } = useHotjar();
@@ -28,6 +30,27 @@ const AppWrapper = () => {
     }, [initHotjar]);
   }
 
+  const isMaintenanceAlertOpen = useMemo(() => {
+    if (!config) {
+      return false;
+    }
+    const isEnabledWithMessage = (
+      config.IS_MAINTENANCE_ALERT_ENABLED && config.MAINTENANCE_ALERT_MESSAGE
+    );
+    if (!isEnabledWithMessage) {
+      return false;
+    }
+    const startTimestamp = config.MAINTENANCE_ALERT_START_TIMESTAMP;
+    if (startTimestamp) {
+      return new Date() > new Date(startTimestamp);
+    }
+    return true;
+  }, [
+    config?.IS_MAINTENANCE_ALERT_ENABLED,
+    config?.MAINTENANCE_ALERT_MESSAGE,
+    config?.MAINTENANCE_ALERT_START_TIMESTAMP,
+  ]);
+
   return (
     <AppProvider store={store}>
       <ToastsProvider>
@@ -36,6 +59,11 @@ const AppWrapper = () => {
           defaultTitle="edX Admin Portal"
         />
         <Toasts />
+        {isMaintenanceAlertOpen && (
+          <SystemWideWarningBanner>
+            {config.MAINTENANCE_ALERT_MESSAGE}
+          </SystemWideWarningBanner>
+        )}
         <Header />
         <Switch>
           <AuthenticatedPageRoute

src/components/system-wide-banner/SystemWideWarningBanner.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { PageBanner, Icon } from '@edx/paragon';
+import { WarningFilled } from '@edx/paragon/icons';
+
+const SystemWideWarningBanner = ({ children }) => (
+  <PageBanner variant="warning">
+    <Icon src={WarningFilled} className="mr-2" />
+    {children}
+  </PageBanner>
+);
+
+SystemWideWarningBanner.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default SystemWideWarningBanner;

src/components/system-wide-banner/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as SystemWideWarningBanner } from './SystemWideWarningBanner';

src/index.jsx

@@ -27,6 +27,9 @@ initialize({
         // Logs JS errors matching the following regex as NewRelic page actions instead of
         // errors,reducing JS error noise.
         IGNORED_ERROR_REGEX: '(Axios Error|\'removeChild\'|Script error|getReadModeExtract)',
+        IS_MAINTENANCE_ALERT_ENABLED: process.env.IS_MAINTENANCE_ALERT_ENABLED || null,
+        MAINTENANCE_ALERT_MESSAGE: process.env.MAINTENANCE_ALERT_MESSAGE || null,
+        MAINTENANCE_ALERT_START_TIMESTAMP: process.env.MAINTENANCE_ALERT_START_TIMESTAMP || null,
       });
     },
   },