fix(admin-ui): react component lift up to parent

admin-ui/app/routes/Apps/Gluu/GluuTimeoutModal.js

@@ -0,0 +1,46 @@
+import React from 'react'
+
+const GluuTimeoutModal = ({ message = '', description = '' }) => {
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        top: 0,
+        bottom: 0,
+        right: 0,
+        left: 0,
+        backgroundColor: 'rgba(0,0,0,0.8)',
+        color: 'white',
+        justifyContent: 'center',
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'column',
+        zIndex: 9999
+      }}
+    >
+      <img
+        src={require('Images/logos/logo192.png')}
+        style={{
+          width: '260px',
+          height: 'auto',
+          marginBottom: 50,
+        }}
+      />
+      <h2 style={{ color: 'white' }}>{message}</h2>
+      <p dangerouslySetInnerHTML={{ __html: description }}></p>
+      <button
+        style={{
+          border: 0,
+          backgroundColor: 'transparent',
+          color: 'white',
+          textDecoration: 'underline',
+        }}
+        onClick={() => window.location.reload()}
+      >
+        Try Again
+      </button>
+    </div>
+  )
+}
+
+export default GluuTimeoutModal

admin-ui/app/utils/ApiKeyRedirect.js

@@ -61,15 +61,6 @@ function ApiKeyRedirect({
           />
         )}
 
-        {isTimeout && (
-          <GluuErrorModal
-            message={'The UI backend service is down'}
-            description={
-              'The request has been terminated as there is not response from server for more than 60 seconds.'
-            }
-          />
-        )}
-
         {roleNotFound && (
           <GluuErrorModal
             message={t('Unauthorized User')}

admin-ui/app/utils/AppAuthProvider.js

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react'
 import ApiKeyRedirect from './ApiKeyRedirect'
-import UploadSSA from './UploadSSA'
 import { useLocation } from 'react-router'
 import { saveState } from './TokenController'
 import queryString from 'query-string'
@@ -14,30 +13,31 @@ import {
 } from 'Redux/actions'
 import SessionTimeout from 'Routes/Apps/Gluu/GluuSessionTimeout'
 import { checkLicenseConfigValid } from '../redux/actions'
+import GluuTimeoutModal from 'Routes/Apps/Gluu/GluuTimeoutModal'
 
 export default function AppAuthProvider(props) {
   const dispatch = useDispatch()
   const location = useLocation()
   const [showContent, setShowContent] = useState(false)
   const [roleNotFound, setRoleNotFound] = useState(false)
-
+  const { isTimeout } = useSelector((state) => state.licenseReducer)
   const { config, userinfo, userinfo_jwt, token, backendIsUp } = useSelector(
-    (state) => state.authReducer,
+    (state) => state.authReducer
   )
   const {
     islicenseCheckResultLoaded,
     isLicenseActivationResultLoaded,
     isLicenseValid,
-    isConfigValid
+    isConfigValid,
   } = useSelector((state) => state.licenseReducer)
 
   useEffect(() => {
     dispatch(checkLicenseConfigValid())
     dispatch(getOAuth2Config())
   }, [])
-  
+
   useEffect(() => {
-    if(isConfigValid) {
+    if (isConfigValid) {
       dispatch(checkLicensePresent())
     }
   }, [isConfigValid])
@@ -126,8 +126,16 @@ export default function AppAuthProvider(props) {
   return (
     <React.Fragment>
       <SessionTimeout isAuthenticated={showContent} />
+      {isTimeout && (
+        <GluuTimeoutModal
+          message={'The UI backend service is down'}
+          description={
+            'The request has been terminated as there is not response from server for more than 60 seconds.'
+          }
+        />
+      )}
       {showContent && props.children}
-      {!showContent &&(
+      {!showContent && (
         <ApiKeyRedirect
           backendIsUp={backendIsUp}
           isLicenseValid={isLicenseValid}