From 6c9964305c194b7c30e84135c80e0d8f1d1d08f7 Mon Sep 17 00:00:00 2001
From: Jeet Viramgama <jviramgama5@gmail.com>
Date: Wed, 5 Jul 2023 20:02:13 +0530
Subject: [PATCH] fix(admin-ui): react component lift up to parent

---
 .../app/routes/Apps/Gluu/GluuTimeoutModal.js  | 46 +++++++++++++++++++
 admin-ui/app/utils/ApiKeyRedirect.js          |  9 ----
 admin-ui/app/utils/AppAuthProvider.js         | 22 ++++++---
 3 files changed, 61 insertions(+), 16 deletions(-)
 create mode 100644 admin-ui/app/routes/Apps/Gluu/GluuTimeoutModal.js

diff --git a/admin-ui/app/routes/Apps/Gluu/GluuTimeoutModal.js b/admin-ui/app/routes/Apps/Gluu/GluuTimeoutModal.js
new file mode 100644
index 000000000..1ef0fc68a
--- /dev/null
+++ b/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
diff --git a/admin-ui/app/utils/ApiKeyRedirect.js b/admin-ui/app/utils/ApiKeyRedirect.js
index af05b6701..3ade363c4 100644
--- a/admin-ui/app/utils/ApiKeyRedirect.js
+++ b/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')}
diff --git a/admin-ui/app/utils/AppAuthProvider.js b/admin-ui/app/utils/AppAuthProvider.js
index 7be8be38d..097d5d24e 100755
--- a/admin-ui/app/utils/AppAuthProvider.js
+++ b/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}