feat(ui): add runtime config loading from API (Phase 3)

Enable the UI to fetch configuration from the API at startup,
allowing environment-specific values to be loaded at runtime
instead of being baked in at build time.

Changes:
- Add ui-config slice to fetch config from /api/info/ui-config
- Update getConfig() to merge runtime config with build-time defaults
- Add setRuntimeConfig() and getRuntimeConfig() exports
- Fetch UI config during app initialization

The runtime config is fetched early in the init flow and merged
with the build-time defaults. If the fetch fails, the app continues
with build-time defaults (graceful degradation).

Author: dantovska

redisinsight/ui/src/config/index.ts

@@ -1,9 +1,29 @@
 import { merge, cloneDeep } from 'lodash'
-import { Config } from 'uiSrc/config/default'
+import { Config, PartialConfig } from 'uiSrc/config/default'
 import { domainConfig } from './domain'
 
 let config: Config
+let runtimeConfig: PartialConfig | null = null
 
+/**
+ * Set runtime configuration from API
+ * Call this after fetching UI config from /api/info/ui-config
+ */
+export const setRuntimeConfig = (apiConfig: PartialConfig): void => {
+  runtimeConfig = apiConfig
+  // Reset cached config to force re-merge with runtime config
+  config = null as unknown as Config
+}
+
+/**
+ * Get runtime configuration (if available)
+ */
+export const getRuntimeConfig = (): PartialConfig | null => runtimeConfig
+
+/**
+ * Get merged configuration
+ * Priority: riConfig (build-time) -> domainConfig -> runtimeConfig (API)
+ */
 export const getConfig = (): Config => {
   if (config) {
     return config
@@ -12,5 +32,10 @@ export const getConfig = (): Config => {
   config = cloneDeep(riConfig)
   merge(config, domainConfig)
 
+  // Merge runtime config if available (highest priority)
+  if (runtimeConfig) {
+    merge(config, runtimeConfig)
+  }
+
   return config
 }

redisinsight/ui/src/slices/app/init.ts

@@ -1,6 +1,7 @@
 import { createSlice } from '@reduxjs/toolkit'
 import { fetchCsrfTokenAction } from 'uiSrc/slices/app/csrf'
 import { fetchFeatureFlags } from 'uiSrc/slices/app/features'
+import { fetchUiConfigAction } from 'uiSrc/slices/app/ui-config'
 import { FeatureFlags } from 'uiSrc/constants'
 import { fetchCloudUserProfile } from 'uiSrc/slices/user/cloud-user-profile'
 import { AppDispatch, RootState } from '../store'
@@ -78,6 +79,11 @@ export function initializeAppAction(
   return async (dispatch: AppDispatch) => {
     try {
       dispatch(initializeAppState())
+
+      // Fetch UI runtime config first (non-blocking on failure)
+      // This enables environment switching without rebuilding
+      await dispatch(fetchUiConfigAction())
+
       await dispatch(
         fetchCsrfTokenAction(undefined, () => {
           throw new Error(FAILED_TO_FETCH_CSRF_TOKEN_ERROR)

redisinsight/ui/src/slices/app/ui-config.ts

@@ -0,0 +1,120 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { apiService } from 'uiSrc/services'
+import { ApiEndpoints } from 'uiSrc/constants'
+import { setRuntimeConfig } from 'uiSrc/config'
+import { PartialConfig } from 'uiSrc/config/default'
+import { AppDispatch, RootState } from '../store'
+
+/**
+ * UI Runtime Configuration
+ *
+ * This slice manages runtime configuration fetched from the API,
+ * enabling environment switching without rebuilding the UI.
+ */
+
+export interface UiConfig {
+  env?: string
+  segmentWriteKey?: string
+  cloudCapiUrl?: string
+  aiConvAiApiUrl?: string
+  aiQuerySocketUrl?: string
+  features?: {
+    cloudAds?: boolean
+    envDependent?: boolean
+  }
+  appFolderName?: string
+}
+
+export interface UiConfigState {
+  data: UiConfig | null
+  loading: boolean
+  error: string | null
+}
+
+export const initialState: UiConfigState = {
+  data: null,
+  loading: false,
+  error: null,
+}
+
+const uiConfigSlice = createSlice({
+  name: 'uiConfig',
+  initialState,
+  reducers: {
+    fetchUiConfigStart: (state) => {
+      state.loading = true
+      state.error = null
+    },
+    fetchUiConfigSuccess: (state, action: PayloadAction<UiConfig>) => {
+      state.loading = false
+      state.data = action.payload
+    },
+    fetchUiConfigFailure: (state, action: PayloadAction<string>) => {
+      state.loading = false
+      state.error = action.payload
+      // On failure, we continue with build-time defaults
+    },
+  },
+})
+
+export const {
+  fetchUiConfigStart,
+  fetchUiConfigSuccess,
+  fetchUiConfigFailure,
+} = uiConfigSlice.actions
+
+export const uiConfigSelector = (state: RootState) => state.app.uiConfig
+
+export default uiConfigSlice.reducer
+
+/**
+ * Convert API response to PartialConfig format for merging
+ */
+function mapApiConfigToPartialConfig(apiConfig: UiConfig): PartialConfig {
+  return {
+    app: {
+      env: apiConfig.env,
+    },
+    features: apiConfig.features
+      ? {
+          cloudAds: {
+            defaultFlag: apiConfig.features.cloudAds ?? true,
+          },
+          envDependent: {
+            defaultFlag: apiConfig.features.envDependent ?? true,
+          },
+        }
+      : undefined,
+  }
+}
+
+/**
+ * Fetch UI configuration from the API
+ * This is called during app initialization to get runtime config
+ */
+export function fetchUiConfigAction(
+  onSuccess?: (config: UiConfig) => void,
+  onFail?: (error: string) => void,
+) {
+  return async (dispatch: AppDispatch) => {
+    dispatch(fetchUiConfigStart())
+
+    try {
+      const { data } = await apiService.get<UiConfig>(
+        `${ApiEndpoints.INFO}/ui-config`,
+      )
+
+      // Apply runtime config to the config module
+      const partialConfig = mapApiConfigToPartialConfig(data)
+      setRuntimeConfig(partialConfig)
+
+      dispatch(fetchUiConfigSuccess(data))
+      onSuccess?.(data)
+    } catch (error: any) {
+      const errorMessage = error?.message || 'Failed to fetch UI config'
+      dispatch(fetchUiConfigFailure(errorMessage))
+      // Don't throw - we can continue with build-time defaults
+      onFail?.(errorMessage)
+    }
+  }
+}

redisinsight/ui/src/slices/store.ts

@@ -31,6 +31,7 @@ import appRedisCommandsReducer from './app/redis-commands'
 import appPluginsReducer from './app/plugins'
 import appsSocketConnectionReducer from './app/socket-connection'
 import appFeaturesReducer from './app/features'
+import appUiConfigReducer from './app/ui-config'
 import appUrlHandlingReducer from './app/url-handling'
 import appOauthReducer from './oauth/cloud'
 import workbenchResultsReducer from './workbench/wb-results'
@@ -67,6 +68,7 @@ export const rootReducer = combineReducers({
     plugins: appPluginsReducer,
     socketConnection: appsSocketConnectionReducer,
     features: appFeaturesReducer,
+    uiConfig: appUiConfigReducer,
     urlHandling: appUrlHandlingReducer,
     csrf: appCsrfReducer,
     init: appInitReducer,