fix(admin-ui): resolve navigation hang when redirecting to SSA page (#2672)

admin-ui/.gitignore

@@ -22,6 +22,10 @@ plugins_repo
 .env.*
 *.local
 
+# Cursor
+.cursor/
+.cursorrules
+
 # ESLint cache
 .eslintcache
 .vscode/*

admin-ui/app/redux/sagas/LicenseSaga.ts

@@ -12,6 +12,7 @@ import {
   setValidatingFlow,
   setApiDefaultToken,
   setLicenseError,
+  setBackendStatus,
   checkLicensePresent,
   checkUserLicenceKey,
   checkLicenseConfigValid,
@@ -32,17 +33,25 @@ import MauApi from 'Redux/api/MauApi'
 import { getYearMonth } from '../../utils/Util'
 import { devLogger } from '@/utils/devLogger'
 import * as JansConfigApi from 'jans_config_api'
-import type { SagaError } from './types/audit'
+import type { ApiErrorLike, SagaError } from './types/audit'
 
 let defaultToken: ApiTokenResponse | undefined
 
+const getBackendStatusFromError = (error: unknown) => {
+  const err = error as ApiErrorLike
+  const statusCode = typeof err?.response?.status === 'number' ? err.response.status : null
+  const errorMessage = err?.response?.data?.responseMessage ?? err?.response?.data?.message ?? null
+  return { active: false as const, errorMessage: errorMessage ?? null, statusCode }
+}
+
 export function* getAccessToken() {
   if (!defaultToken) {
     try {
       defaultToken = (yield call(fetchApiTokenWithDefaultScopes)) as ApiTokenResponse
       yield put(setApiDefaultToken(defaultToken))
     } catch (error) {
       devLogger.error('Failed to fetch API token with default scopes', error)
+      yield put(setBackendStatus(getBackendStatusFromError(error)))
       throw error
     }
   }
@@ -120,6 +129,10 @@ function* retrieveLicenseKey(_action?: { type: string }) {
         yield put(checkLicensePresentResponse({ isLicenseValid: false }))
         yield put(generateTrialLicenseResponse(null))
       }
+    } else {
+      yield put(retrieveLicenseKeyResponse({ isNoValidLicenseKeyFound: true }))
+      yield put(checkLicensePresentResponse({ isLicenseValid: false }))
+      yield put(generateTrialLicenseResponse(null))
     }
   } catch (err) {
     yield put(setLicenseError(getLicenseErrorMessage(err as Error | SagaError)))

admin-ui/app/utils/ApiKeyRedirect.tsx

@@ -45,13 +45,10 @@ const ApiKeyRedirect = ({
     isNoValidLicenseKeyFound
 
   const showRedirectingLoader =
-    !islicenseCheckResultLoaded ||
-    isConfigValid === null ||
-    (isConfigValid !== false &&
-      !isTimeout &&
-      isUnderThresholdLimit &&
-      backendStatus.active &&
-      !shouldShowApiKey)
+    isConfigValid !== false &&
+    (!islicenseCheckResultLoaded ||
+      isConfigValid === null ||
+      (!isTimeout && isUnderThresholdLimit && backendStatus.active && !shouldShowApiKey))
 
   if (showRedirectingLoader) {
     return (

admin-ui/app/utils/styles/UploadSSA.style.ts

@@ -19,6 +19,12 @@ const useStyles = makeStyles<{ themeColors: ThemeConfig }>()((theme, { themeColo
   },
   dropzone: {
     'marginTop': theme.spacing(1),
+    'minHeight': '80px',
+    'display': 'flex',
+    'alignItems': 'center',
+    'justifyContent': 'center',
+    'padding': theme.spacing(2),
+    'boxSizing': 'border-box',
     'borderRadius': `${MAPPING_SPACING.INFO_ALERT_BORDER_RADIUS}px`,
     'border': `1px solid ${themeColors.infoAlert.border}`,
     'background': themeColors.infoAlert.background,
@@ -30,7 +36,7 @@ const useStyles = makeStyles<{ themeColors: ThemeConfig }>()((theme, { themeColo
   },
   error: {
     color: themeColors.errorColor,
-    fontSize: fontSizes.xl,
+    fontSize: fontSizes.content,
     fontWeight: fontWeights.semiBold,
     marginTop: theme.spacing(2),
     display: 'block',
@@ -42,6 +48,8 @@ const useStyles = makeStyles<{ themeColors: ThemeConfig }>()((theme, { themeColo
     fontStyle: 'normal',
     fontWeight: fontWeights.medium,
     lineHeight: lineHeights.tight,
+    margin: 0,
+    textAlign: 'center',
   },
   button: {
     display: 'inline-flex',