feat: add system-wide status alert to all headers (#701)

Adds a sitewide warning banner to Header,
StudioHeader, and LearningHeader.

Controlled by three settings:
- STATUS_ALERT_ENABLED: runtime on/off from MFE
  config endpoint
- STATUS_ALERT_MESSAGE: runtime message text from
  MFE config endpoint

https://2u-internal.atlassian.net/browse/BOMS-562

Author: robrap

docs/using_custom_header.rst

@@ -109,3 +109,23 @@ Some Important Notes
 - Intl formatted strings should be passed in content attribute.
 - Only menu items in the main menu can be disabled.
 - Menu items in the main menu and user menu can have ``isActive`` prop.
+
+Status Alert
+------------
+
+A site-wide status banner can be displayed above the header to surface maintenance notices or other operational messages.
+
+- The banner cannot be dismissed.
+- The same behavior is available in the ``Header``, ``StudioHeader``, and ``LearningHeader`` components.
+
+The following settings are supplied at runtime via the MFE config api, which allows it to be set globally (using LMS setting ``MFE_CONFIG``) or as a per-MFE override (using LMS setting ``MFE_CONFIG_OVERRIDES``).
+
+``STATUS_ALERT_ENABLED``
+************************
+
+Runtime setting supplied via the MFE config api. Set to ``true`` to activate the banner. Defaults to off when absent.
+
+``STATUS_ALERT_MESSAGE``
+************************
+
+Runtime setting supplied via the MFE config api. The text shown in the banner. The banner is suppressed when this is empty or absent.

src/Header.jsx

@@ -16,6 +16,7 @@ import { useEnterpriseConfig } from '@2uinc/frontend-enterprise-utils';
 import PropTypes from 'prop-types';
 import DesktopHeader from './DesktopHeader';
 import MobileHeader from './MobileHeader';
+import { StatusAlert } from './status-alert';
 
 import messages from './Header.messages';
 
@@ -199,8 +200,13 @@ const Header = ({
     };
   }
 
+  const showStatusAlert = getConfig().STATUS_ALERT_ENABLED
+    && getConfig().STATUS_ALERT_MESSAGE;
+  const statusAlertMessage = getConfig().STATUS_ALERT_MESSAGE;
+
   return (
     <>
+      {showStatusAlert && <StatusAlert message={statusAlertMessage} />}
       <Responsive maxWidth={769}>
         <MobileHeader {...props} />
       </Responsive>

src/Header.test.jsx

@@ -229,4 +229,42 @@ describe('<Header />', () => {
       expect(wrapper.toJSON()).toMatchSnapshot();
     });
   });
+
+  describe('status alert', () => {
+    afterEach(() => {
+      getConfig.mockReturnValue({});
+    });
+
+    const STATUS_ALERT_MESSAGE = 'System maintenance in progress';
+    const contextValue = {
+      authenticatedUser: null,
+      config: APP_CONTEXT_CONFIG,
+    };
+
+    it('shows the banner when runtime settings are enabled', () => {
+      getConfig.mockReturnValue({
+        STATUS_ALERT_ENABLED: true,
+        STATUS_ALERT_MESSAGE,
+      });
+      render(<HeaderContext width={{ width: 1280 }} contextValue={contextValue} />);
+      expect(screen.getByText(STATUS_ALERT_MESSAGE)).toBeVisible();
+    });
+
+    it('hides the banner when runtime config disables it', () => {
+      getConfig.mockReturnValue({
+        STATUS_ALERT_ENABLED: false,
+        STATUS_ALERT_MESSAGE,
+      });
+      render(<HeaderContext width={{ width: 1280 }} contextValue={contextValue} />);
+      expect(screen.queryByText(STATUS_ALERT_MESSAGE)).not.toBeInTheDocument();
+    });
+
+    it('hides the banner when the message is absent', () => {
+      getConfig.mockReturnValue({
+        STATUS_ALERT_ENABLED: true,
+      });
+      render(<HeaderContext width={{ width: 1280 }} contextValue={contextValue} />);
+      expect(screen.queryByText(STATUS_ALERT_MESSAGE)).not.toBeInTheDocument();
+    });
+  });
 });

src/learning-header/LearningHeader.jsx

@@ -14,6 +14,7 @@ import messages from './messages';
 import lightning from '../lightning';
 import AuthenticatedUser from './AuthenticatedUser';
 import { fetchUnifiedTranslationToggleEnabled } from './site-language/data';
+import { StatusAlert } from '../status-alert';
 
 ensureConfig([
   'ACCOUNT_SETTINGS_URL',
@@ -83,8 +84,13 @@ const LearningHeader = ({
     );
   }
 
+  const showStatusAlert = getConfig().STATUS_ALERT_ENABLED
+    && getConfig().STATUS_ALERT_MESSAGE;
+  const statusAlertMessage = getConfig().STATUS_ALERT_MESSAGE;
+
   return (
     <header className="learning-header">
+      {showStatusAlert && <StatusAlert message={statusAlertMessage} />}
       <a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a>
       <div className="px-4 py-2.5 d-flex align-items-center learning-header-container">
         {headerLogo}

src/learning-header/LearningHeader.test.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { AppContext } from '@edx/frontend-platform/react';
+import { mergeConfig } from '@edx/frontend-platform';
 import {
   fireEvent, initializeMockApp, render, screen, waitFor,
 } from '../setupTest';
@@ -103,4 +104,42 @@ describe('Header', () => {
       expect(screen.queryByTestId('site-language-button')).not.toBeInTheDocument();
     });
   });
+
+  describe('status alert', () => {
+    const STATUS_ALERT_MESSAGE = 'System maintenance in progress';
+
+    afterEach(() => {
+      mergeConfig({
+        STATUS_ALERT_ENABLED: false,
+        STATUS_ALERT_MESSAGE: null,
+      });
+    });
+
+    it('shows the banner when runtime settings are enabled', () => {
+      mergeConfig({
+        STATUS_ALERT_ENABLED: true,
+        STATUS_ALERT_MESSAGE,
+      });
+      render(<Header />);
+      expect(screen.getByText(STATUS_ALERT_MESSAGE)).toBeVisible();
+    });
+
+    it('hides the banner when runtime config disables it', () => {
+      mergeConfig({
+        STATUS_ALERT_ENABLED: false,
+        STATUS_ALERT_MESSAGE,
+      });
+      render(<Header />);
+      expect(screen.queryByText(STATUS_ALERT_MESSAGE)).not.toBeInTheDocument();
+    });
+
+    it('hides the banner when the message is absent', () => {
+      mergeConfig({
+        STATUS_ALERT_ENABLED: true,
+        STATUS_ALERT_MESSAGE: null,
+      });
+      render(<Header />);
+      expect(screen.queryByText(STATUS_ALERT_MESSAGE)).not.toBeInTheDocument();
+    });
+  });
 });

src/status-alert/StatusAlert.jsx

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

src/status-alert/StatusAlert.test.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import StatusAlert from './StatusAlert';
+
+describe('StatusAlert', () => {
+  it('renders the message text', () => {
+    render(<StatusAlert message="System maintenance in progress" />);
+    expect(screen.getByText('System maintenance in progress')).toBeVisible();
+  });
+
+  it('renders the warning icon', () => {
+    const { container } = render(<StatusAlert message="System maintenance in progress" />);
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+});

src/status-alert/index.js

@@ -0,0 +1 @@
+export { default as StatusAlert } from './StatusAlert';

src/studio-header/StudioHeader.jsx

@@ -6,6 +6,7 @@ import { ensureConfig } from '@edx/frontend-platform';
 
 import MobileHeader from './MobileHeader';
 import HeaderBody from './HeaderBody';
+import { StatusAlert } from '../status-alert';
 
 ensureConfig([
   'STUDIO_BASE_URL',
@@ -36,8 +37,13 @@ const StudioHeader = ({
     outlineLink,
   };
 
+  const showStatusAlert = config.STATUS_ALERT_ENABLED
+    && config.STATUS_ALERT_MESSAGE;
+  const statusAlertMessage = config.STATUS_ALERT_MESSAGE;
+
   return (
     <div className="studio-header">
+      {showStatusAlert && <StatusAlert message={statusAlertMessage} />}
       <a className="nav-skip sr-only sr-only-focusable" href="#main">Skip to content</a>
       <Responsive maxWidth={841}>
         <MobileHeader {...props} />

src/studio-header/StudioHeader.test.jsx

@@ -24,6 +24,7 @@ const authenticatedUser = {
 };
 let currentUser;
 let screenWidth = 1280;
+let extraConfig = {};
 
 const RootWrapper = ({
   ...props
@@ -36,6 +37,7 @@ const RootWrapper = ({
       SITE_NAME: process.env.SITE_NAME,
       STUDIO_BASE_URL: process.env.STUDIO_BASE_URL,
       LOGIN_URL: process.env.LOGIN_URL,
+      ...extraConfig,
     },
   }), []);
   const responsiveContextValue = useMemo(() => ({ width: screenWidth }), []);
@@ -77,6 +79,7 @@ describe('Header', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     currentUser = authenticatedUser;
+    extraConfig = {};
   });
   describe('desktop', () => {
     it('course lock up should be visible', () => {
@@ -210,4 +213,36 @@ describe('Header', () => {
       expect(desktopMenu).toBeNull();
     });
   });
+
+  describe('status alert', () => {
+    const STATUS_ALERT_MESSAGE = 'System maintenance in progress';
+
+    beforeEach(() => { screenWidth = 1280; });
+
+    it('shows the banner when runtime settings are enabled', () => {
+      extraConfig = {
+        STATUS_ALERT_ENABLED: true,
+        STATUS_ALERT_MESSAGE,
+      };
+      const { getByText } = render(<RootWrapper {...props} />);
+      expect(getByText(STATUS_ALERT_MESSAGE)).toBeVisible();
+    });
+
+    it('hides the banner when runtime config disables it', () => {
+      extraConfig = {
+        STATUS_ALERT_ENABLED: false,
+        STATUS_ALERT_MESSAGE,
+      };
+      const { queryByText } = render(<RootWrapper {...props} />);
+      expect(queryByText(STATUS_ALERT_MESSAGE)).toBeNull();
+    });
+
+    it('hides the banner when the message is absent', () => {
+      extraConfig = {
+        STATUS_ALERT_ENABLED: true,
+      };
+      const { queryByText } = render(<RootWrapper {...props} />);
+      expect(queryByText(STATUS_ALERT_MESSAGE)).toBeNull();
+    });
+  });
 });