feat: added warning for unreachable server (#43576)

* feat: added warning for unreachable server

* fix: update initial state in test file

* fix: make offline warning scroll with page

* adjust z-indexes for warning banners

* add hyperlink for offline warning

client/src/components/Flash/flash.css

@@ -7,7 +7,7 @@
   padding-bottom: 3px;
   position: fixed;
   width: 100%;
-  z-index: 100;
+  z-index: 150;
 }
 
 .flash-message div {

client/src/components/OfflineWarning/offline-warning.css

@@ -3,4 +3,11 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  position: fixed;
+  width: 100%;
+  z-index: 150;
+}
+
+.offline-warning a {
+  margin: 0 1ch;
 }

client/src/components/OfflineWarning/offline-warning.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 import './offline-warning.css';
 
@@ -8,20 +8,30 @@ let id: ReturnType<typeof setTimeout>;
 
 interface OfflineWarningProps {
   isOnline: boolean;
+  isServerOnline: boolean;
   isSignedIn: boolean;
 }
 
 function OfflineWarning({
   isOnline,
+  isServerOnline,
   isSignedIn
 }: OfflineWarningProps): JSX.Element | null {
   const { t } = useTranslation();
   const [showWarning, setShowWarning] = React.useState(false);
+  let message;
 
-  if (!isSignedIn || isOnline) {
+  if (!isSignedIn || (isOnline && isServerOnline)) {
     clearTimeout(id);
     if (showWarning) setShowWarning(false);
   } else {
+    message = !isOnline ? (
+      t('misc.offline')
+    ) : (
+      <Trans i18nKey='misc.server-offline'>
+        <a href={'mailto:support@freecodecamp.org'}>placeholder</a>
+      </Trans>
+    );
     timeout();
   }
 
@@ -32,7 +42,10 @@ function OfflineWarning({
   }
 
   return showWarning ? (
-    <div className='offline-warning alert-info'>{t('misc.offline')}</div>
+    <>
+      <div className='offline-warning alert-info'>{message}</div>
+      <div style={{ height: `38px` }} />
+    </>
   ) : null;
 }
 

client/src/components/layouts/Default.js

@@ -18,7 +18,9 @@ import {
   fetchUser,
   isSignedInSelector,
   onlineStatusChange,
+  serverStatusChange,
   isOnlineSelector,
+  isServerOnlineSelector,
   userFetchStateSelector,
   userSelector,
   usernameSelector,
@@ -55,10 +57,12 @@ const propTypes = {
   }),
   hasMessage: PropTypes.bool,
   isOnline: PropTypes.bool.isRequired,
+  isServerOnline: PropTypes.bool.isRequired,
   isSignedIn: PropTypes.bool,
   onlineStatusChange: PropTypes.func.isRequired,
   pathname: PropTypes.string.isRequired,
   removeFlashMessage: PropTypes.func.isRequired,
+  serverStatusChange: PropTypes.func.isRequired,
   showFooter: PropTypes.bool,
   signedInUserName: PropTypes.string,
   t: PropTypes.func.isRequired,
@@ -71,14 +75,16 @@ const mapStateToProps = createSelector(
   isSignedInSelector,
   flashMessageSelector,
   isOnlineSelector,
+  isServerOnlineSelector,
   userFetchStateSelector,
   userSelector,
   usernameSelector,
-  (isSignedIn, flashMessage, isOnline, fetchState, user) => ({
+  (isSignedIn, flashMessage, isOnline, isServerOnline, fetchState, user) => ({
     isSignedIn,
     flashMessage,
     hasMessage: !!flashMessage.message,
     isOnline,
+    isServerOnline,
     fetchState,
     theme: user.theme,
     user
@@ -87,7 +93,13 @@ const mapStateToProps = createSelector(
 
 const mapDispatchToProps = dispatch =>
   bindActionCreators(
-    { fetchUser, removeFlashMessage, onlineStatusChange, executeGA },
+    {
+      fetchUser,
+      removeFlashMessage,
+      onlineStatusChange,
+      serverStatusChange,
+      executeGA
+    },
     dispatch
   );
 
@@ -130,6 +142,7 @@ class DefaultLayout extends Component {
       fetchState,
       flashMessage,
       isOnline,
+      isServerOnline,
       isSignedIn,
       removeFlashMessage,
       showFooter = true,
@@ -201,7 +214,11 @@ class DefaultLayout extends Component {
         </Helmet>
         <div className={`default-layout`}>
           <Header fetchState={fetchState} user={user} />
-          <OfflineWarning isOnline={isOnline} isSignedIn={isSignedIn} />
+          <OfflineWarning
+            isOnline={isOnline}
+            isServerOnline={isServerOnline}
+            isSignedIn={isSignedIn}
+          />
           {hasMessage && flashMessage ? (
             <Flash flashMessage={flashMessage} onClose={removeFlashMessage} />
           ) : null}