feat(admin): add KeyCloak status check for SAML visibility in Admin UI (#2490)

* feat(admin): add KeyCloak status check for SAML visibility in Admin UI sidebar (#2489)

* Minor improvements

Author: faisalsiddique4400

admin-ui/app/components/Sidebar/types.ts

@@ -1,3 +1,5 @@
+import type { HealthServiceKey, HealthStatusResponse } from 'Redux/features/healthSlice'
+
 // Sidebar-specific type definitions
 export interface MenuItem {
   icon?: string
@@ -26,9 +28,10 @@ export interface ThemeContextState {
   }
 }
 
-// Visibility and styling types for sidebar
-export interface VisibilityConditions {
-  readonly [key: string]: string
+type HealthVisibilityPath = '/jans-lock' | '/fido/fidomanagement' | '/scim' | '/saml'
+
+export type VisibilityConditions = {
+  readonly [P in HealthVisibilityPath]: HealthServiceKey
 }
 
 export interface IconStyles {
@@ -39,13 +42,6 @@ export interface MenuIconMap {
   readonly [key: string]: React.ReactNode
 }
 
-// Sidebar state interface
-export interface SidebarState {
-  health: Record<string, string>
-  logoutAuditInFlight: boolean
-  logoutAuditSucceeded: boolean | null
-}
-
 // Root state interface for sidebar selectors
 export interface SidebarRootState {
   authReducer: {
@@ -55,7 +51,7 @@ export interface SidebarRootState {
     permissions?: string[]
   }
   healthReducer: {
-    health: Record<string, string>
+    health: HealthStatusResponse
   }
   logoutAuditReducer: {
     logoutAuditInFlight: boolean

admin-ui/app/redux/features/healthSlice.ts

@@ -1,7 +1,32 @@
 import { createSlice } from '@reduxjs/toolkit'
 import reducerRegistry from 'Redux/reducers/ReducerRegistry'
 
-const initialState = {
+type HealthStatus = 'Running' | 'Not present'
+
+export type HealthServiceKey =
+  | 'jans-lock'
+  | 'jans-auth'
+  | 'jans-config-api'
+  | 'jans-casa'
+  | 'jans-fido2'
+  | 'jans-scim'
+  | 'jans-link'
+  | 'keycloak'
+
+type KnownHealthServices = Partial<Record<HealthServiceKey, HealthStatus>>
+
+export type HealthStatusResponse = KnownHealthServices & {
+  [serviceName: string]: HealthStatus
+}
+
+export interface HealthState {
+  serverStatus: HealthStatus | null
+  dbStatus: HealthStatus | null
+  health: HealthStatusResponse
+  loading: boolean
+}
+
+const initialState: HealthState = {
   serverStatus: null,
   dbStatus: null,
   health: {},

admin-ui/app/routes/Apps/Gluu/GluuAppSidebar.tsx

@@ -46,6 +46,7 @@ const VISIBILITY_CONDITIONS: VisibilityConditions = {
   '/jans-lock': 'jans-lock',
   '/fido/fidomanagement': 'jans-fido2',
   '/scim': 'jans-scim',
+  '/saml': 'keycloak',
 } as const
 
 const ICON_STYLES: IconStyles = {
@@ -74,7 +75,7 @@ const MENU_ICON_MAP: MenuIconMap = {
 // Type definitions for local state
 interface RootState extends SidebarRootState {}
 
-const selectHealth = (state: RootState): Record<string, string> => state.healthReducer.health
+const selectHealth = (state: RootState) => state.healthReducer.health
 const selectLogoutAuditSucceeded = (state: RootState): boolean | null =>
   state.logoutAuditReducer.logoutAuditSucceeded
 
@@ -156,7 +157,9 @@ function GluuAppSidebar(): JSX.Element {
     }
 
     return menus.filter((menu: PluginMenu): boolean => {
-      const healthKey = VISIBILITY_CONDITIONS[menu.path || '']
+      const healthKey = menu.path
+        ? VISIBILITY_CONDITIONS[menu.path as keyof VisibilityConditions]
+        : undefined
       return healthKey ? health?.[healthKey] === 'Running' : true
     })
   }, [health, fetchedServersLength])

admin-ui/app/routes/Dashboards/DashboardPage.tsx

@@ -17,6 +17,8 @@ import CheckIcon from 'Images/svg/check.svg'
 import CrossIcon from 'Images/svg/cross.svg'
 import SetTitle from 'Utils/SetTitle'
 import styles from './styles'
+import type { HealthState } from 'Redux/features/healthSlice'
+
 import { formatDate } from 'Utils/Util'
 import UsersIcon from '@/components/SVG/menu/Users'
 import Administrator from '@/components/SVG/menu/Administrator'
@@ -29,6 +31,9 @@ import customColors from '@/customColors'
 import { useCedarling } from '@/cedarling'
 import { useAppNavigation, ROUTES } from '@/helpers/navigation'
 
+interface DashboardHealthRootState {
+  healthReducer: HealthState
+}
 // Constants moved outside component for better performance
 const FETCHING_LICENSE_DETAILS = 'Fetch license details'
 
@@ -54,9 +59,11 @@ function DashboardPage() {
   const { isUserInfoFetched } = useSelector((state: any) => state.authReducer)
   const totalClientsEntries = useSelector((state: any) => state.initReducer.totalClientsEntries)
   const license = useSelector((state: any) => state.licenseDetailsReducer.item)
-  const serverStatus = useSelector((state: any) => state.healthReducer.serverStatus)
-  const serverHealth = useSelector((state: any) => state.healthReducer.health)
-  const dbStatus = useSelector((state: any) => state.healthReducer.dbStatus)
+  const serverStatus = useSelector(
+    (state: DashboardHealthRootState) => state.healthReducer.serverStatus,
+  )
+  const serverHealth = useSelector((state: DashboardHealthRootState) => state.healthReducer.health)
+  const dbStatus = useSelector((state: DashboardHealthRootState) => state.healthReducer.dbStatus)
   const access_token = useSelector((state: any) => state.authReducer.token?.access_token)
   const permissions = useSelector((state: any) => state.authReducer.permissions)