RI-7761 Fix connection indicator not updating when Redis reconnects

redisinsight/ui/src/components/database-overview/DatabaseOverview.spec.tsx

@@ -35,7 +35,6 @@ const defaultMockHook = () => ({
   usedMemoryPercent: undefined,
   handleEnableAutoRefresh: jest.fn(),
   handleRefresh: jest.fn(),
-  handleRefreshClick: jest.fn(),
 })
 
 describe('DatabaseOverview', () => {

redisinsight/ui/src/components/database-overview/DatabaseOverview.tsx

@@ -30,7 +30,6 @@ const DatabaseOverview = () => {
     isBdbPackages,
     lastRefreshTime,
     handleEnableAutoRefresh,
-    handleRefreshClick,
     handleRefresh,
   } = useDatabaseOverview()
 
@@ -102,7 +101,6 @@ const DatabaseOverview = () => {
                       DATABASE_OVERVIEW_MINIMUM_REFRESH_INTERVAL,
                     )}
                     onRefresh={handleRefresh}
-                    onRefreshClicked={handleRefreshClick}
                     onEnableAutoRefresh={handleEnableAutoRefresh}
                   />
                 </FlexItem>

redisinsight/ui/src/components/database-overview/hooks/useDatabaseOverview.spec.ts

@@ -6,7 +6,6 @@ import {
   renderHook,
 } from 'uiSrc/utils/test-utils'
 import { getDatabaseConfigInfo } from 'uiSrc/slices/instances/instances'
-import { setConnectivityError } from 'uiSrc/slices/app/connectivity'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { useDatabaseOverview } from './useDatabaseOverview'
 
@@ -97,7 +96,6 @@ describe('useDatabaseOverview', () => {
     expect(data.isBdbPackages).toBeUndefined()
     expect(data.usedMemoryPercent).toBeUndefined()
     expect(typeof data.handleRefresh).toBe('function')
-    expect(typeof data.handleRefreshClick).toBe('function')
     expect(typeof data.handleEnableAutoRefresh).toBe('function')
   })
 
@@ -158,19 +156,6 @@ describe('useDatabaseOverview', () => {
     expect(actions).toContainEqual(getDatabaseConfigInfo())
   })
 
-  it('should handle refresh click correctly', () => {
-    // Clear previous actions
-    mockedStore.clearActions()
-
-    const data = renderHelper(mockedStore)
-    act(() => {
-      data.handleRefreshClick()
-    })
-
-    const actions = mockedStore.getActions()
-    expect(actions).toContainEqual(setConnectivityError(null))
-  })
-
   it('should send telemetry event when auto-refresh is enabled', () => {
     const data = renderHelper(mockedStore)
     act(() => {

redisinsight/ui/src/components/database-overview/hooks/useDatabaseOverview.ts

@@ -48,9 +48,16 @@ export const useDatabaseOverview = () => {
     } = {},
   } = overview
 
-  const loadData = (forceDataReload = false) => {
-    if (connectedInstanceId && (!connectivityError || forceDataReload)) {
-      dispatch(getDatabaseConfigInfoAction(connectedInstanceId))
+  const loadData = () => {
+    if (connectedInstanceId) {
+      dispatch(
+        getDatabaseConfigInfoAction(connectedInstanceId, () => {
+          // Clear connectivity error on successful API call.
+          // Always dispatch to avoid stale closure issues - dispatching null
+          // when there's no error is a safe no-op.
+          dispatch(setConnectivityError(null))
+        }),
+      )
       setLastRefreshTime(Date.now())
     }
   }
@@ -75,12 +82,8 @@ export const useDatabaseOverview = () => {
       },
     })
 
-  const handleRefresh = (forceRefresh?: boolean) => {
-    loadData(forceRefresh)
-  }
-  const handleRefreshClick = () => {
-    // clear error, if connectivity is broken, the interceptor will set it again
-    dispatch(setConnectivityError(null))
+  const handleRefresh = () => {
+    loadData()
   }
   const usedMemoryPercent = getUsedMemoryPercent(
     planMemoryLimit,
@@ -109,6 +112,5 @@ export const useDatabaseOverview = () => {
     usedMemoryPercent,
     handleEnableAutoRefresh,
     handleRefresh,
-    handleRefreshClick,
   }
 }

redisinsight/ui/src/pages/instance/InstancePage.spec.tsx

@@ -49,6 +49,7 @@ import * as rdiInstanceSlice from 'uiSrc/slices/rdi/instances'
 import { loadInstances as loadRdiInstances } from 'uiSrc/slices/rdi/instances'
 
 import { clearExpertChatHistory } from 'uiSrc/slices/panels/aiAssistant'
+import { setConnectivityError } from 'uiSrc/slices/app/connectivity'
 import { getAllPlugins } from 'uiSrc/slices/app/plugins'
 import { DEFAULT_RDI_SHOWN_COLUMNS, FeatureFlags } from 'uiSrc/constants'
 import { getDatabasesApiSpy } from 'uiSrc/mocks/handlers/instances/instancesHandlers'
@@ -158,6 +159,7 @@ describe('InstancePage', () => {
       getRecommendations(),
       ...resetContextActions,
       clearExpertChatHistory(),
+      setConnectivityError(null),
       setAppContextConnectedInstanceId(INSTANCE_ID_MOCK),
       setDbConfig(undefined),
     ]

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

@@ -46,6 +46,7 @@ import {
   setPipelineJobs,
 } from 'uiSrc/slices/rdi/pipeline'
 import { resetOutput } from 'uiSrc/slices/cli/cli-output'
+import { setConnectivityError } from 'uiSrc/slices/app/connectivity'
 import { SearchMode } from '../interfaces/keys'
 import {
   AppWorkspace,
@@ -448,6 +449,7 @@ export function resetDatabaseContext() {
     dispatch(setRedisearchInitialState())
     dispatch(setInitialRecommendationsState())
     dispatch(clearExpertChatHistory())
+    dispatch(setConnectivityError(null))
     setTimeout(() => {
       dispatch(resetOutput())
     }, 0)