#RI-5084 - fix loading key details from context

Author: rsergeenko

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

@@ -3,10 +3,28 @@ import React from 'react'
 import { BrowserRouter } from 'react-router-dom'
 import { instance, mock } from 'ts-mockito'
 
-import { cleanup, mockedStore, render } from 'uiSrc/utils/test-utils'
+import { cleanup, mockedStore, render, act } from 'uiSrc/utils/test-utils'
 import { BrowserStorageItem } from 'uiSrc/constants'
 import { localStorageService } from 'uiSrc/services'
 import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
+import { resetKeys, resetPatternKeysData } from 'uiSrc/slices/browser/keys'
+import { setMonitorInitialState } from 'uiSrc/slices/cli/monitor'
+import { setInitialPubSubState } from 'uiSrc/slices/pubsub/pubsub'
+import { setBulkActionsInitialState } from 'uiSrc/slices/browser/bulkActions'
+import { setAppContextConnectedInstanceId, setAppContextInitialState, setDbConfig } from 'uiSrc/slices/app/context'
+import { clearSearchingCommand, resetCliHelperSettings, setCliEnteringCommand } from 'uiSrc/slices/cli/cli-settings'
+import { resetRedisearchKeysData, setRedisearchInitialState } from 'uiSrc/slices/browser/redisearch'
+import { setClusterDetailsInitialState } from 'uiSrc/slices/analytics/clusterDetails'
+import { setDatabaseAnalysisInitialState } from 'uiSrc/slices/analytics/dbAnalysis'
+import { setInitialAnalyticsSettings } from 'uiSrc/slices/analytics/settings'
+import { resetRecommendationsHighlighting } from 'uiSrc/slices/recommendations/recommendations'
+import { setTriggeredFunctionsInitialState } from 'uiSrc/slices/triggeredFunctions/triggeredFunctions'
+import {
+  getDatabaseConfigInfo,
+  setConnectedInfoInstance,
+  setConnectedInstance,
+  setDefaultInstance
+} from 'uiSrc/slices/instances/instances'
 import InstancePage, { getDefaultSizes, Props } from './InstancePage'
 
 const mockedProps = mock<Props>()
@@ -27,6 +45,15 @@ jest.mock('uiSrc/slices/app/features', () => ({
   }),
 }))
 
+jest.mock('uiSrc/slices/app/context', () => ({
+  ...jest.requireActual('uiSrc/slices/app/context'),
+  appContextSelector: jest.fn().mockReturnValue({
+    contextInstanceId: 'prevId'
+  }),
+}))
+
+const INSTANCE_ID_MOCK = 'instanceId'
+
 let store: typeof mockedStore
 beforeEach(() => {
   cleanup()
@@ -102,4 +129,43 @@ describe('InstancePage', () => {
       defaultSizes
     )
   })
+
+  it('should call proper actions with resetting context', async () => {
+    await act(() => {
+      render(
+        <BrowserRouter>
+          <InstancePage {...instance(mockedProps)} />
+        </BrowserRouter>
+      )
+    })
+
+    const resetContextActions = [
+      resetKeys(),
+      setMonitorInitialState(),
+      setInitialPubSubState(),
+      setBulkActionsInitialState(),
+      setAppContextInitialState(),
+      resetPatternKeysData(),
+      resetCliHelperSettings(),
+      resetRedisearchKeysData(),
+      setClusterDetailsInitialState(),
+      setDatabaseAnalysisInitialState(),
+      setInitialAnalyticsSettings(),
+      setRedisearchInitialState(),
+      resetRecommendationsHighlighting(),
+      setTriggeredFunctionsInitialState(),
+    ]
+
+    const expectedActions = [
+      setDefaultInstance(),
+      setConnectedInstance(),
+      getDatabaseConfigInfo(),
+      setConnectedInfoInstance(),
+      ...resetContextActions,
+      setAppContextConnectedInstanceId(INSTANCE_ID_MOCK),
+      setDbConfig(undefined),
+    ]
+
+    expect(store.getActions().slice(0, expectedActions.length)).toEqual(expectedActions)
+  })
 })

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

@@ -19,12 +19,12 @@ import {
   setAppContextInitialState,
   setDbConfig,
 } from 'uiSrc/slices/app/context'
-import { resetPatternKeysData } from 'uiSrc/slices/browser/keys'
+import { resetKeys, resetPatternKeysData } from 'uiSrc/slices/browser/keys'
 import { BrowserStorageItem, FeatureFlags } from 'uiSrc/constants'
 import { localStorageService } from 'uiSrc/services'
 import { FeatureFlagComponent } from 'uiSrc/components'
 import { resetOutput } from 'uiSrc/slices/cli/cli-output'
-import { cliSettingsSelector } from 'uiSrc/slices/cli/cli-settings'
+import { cliSettingsSelector, resetCliHelperSettings } from 'uiSrc/slices/cli/cli-settings'
 import BottomGroupComponents from 'uiSrc/components/bottom-group-components/BottomGroupComponents'
 import LiveTimeRecommendations from 'uiSrc/components/live-time-recommendations'
 import { monitorSelector, setMonitorInitialState } from 'uiSrc/slices/cli/monitor'
@@ -39,7 +39,7 @@ import InstancePageRouter from './InstancePageRouter'
 import styles from './styles.module.scss'
 
 export interface Props {
-  routes: any[];
+  routes: any[]
 }
 
 export const firstPanelId = 'main-component'
@@ -105,11 +105,13 @@ const InstancePage = ({ routes = [] }: Props) => {
   }, [])
 
   const resetContext = () => {
+    dispatch(resetKeys())
     dispatch(setMonitorInitialState())
     dispatch(setInitialPubSubState())
     dispatch(setBulkActionsInitialState())
     dispatch(setAppContextInitialState())
     dispatch(resetPatternKeysData())
+    dispatch(resetCliHelperSettings())
     dispatch(resetRedisearchKeysData())
     dispatch(setClusterDetailsInitialState())
     dispatch(setDatabaseAnalysisInitialState())

redisinsight/ui/src/slices/instances/instances.ts

@@ -9,6 +9,7 @@ import { setAppContextInitialState } from 'uiSrc/slices/app/context'
 import successMessages from 'uiSrc/components/notifications/success-messages'
 import { checkRediStack, getApiErrorMessage, isStatusSuccessful, Nullable } from 'uiSrc/utils'
 import { INFINITE_MESSAGES, InfiniteMessagesIds } from 'uiSrc/components/notifications/components'
+import { resetKeys } from 'uiSrc/slices/browser/keys'
 import { Database as DatabaseInstanceResponse } from 'apiSrc/modules/database/models/database'
 import { RedisNodeInfoResponse } from 'apiSrc/modules/database/dto/redis-info.dto'
 import { ExportDatabase } from 'apiSrc/modules/database/models/export-database'
@@ -442,6 +443,7 @@ function autoCreateAndConnectToInstanceActionSuccess(
       const state = stateInit()
       const isConnectedId = state.app?.context?.contextInstanceId === id
       if (!isConnectedId) {
+        dispatch(resetKeys())
         dispatch(setAppContextInitialState())
         dispatch(setConnectedInstanceId(id ?? ''))
       }
@@ -532,6 +534,7 @@ export function deleteInstancesAction(instances: Instance[], onSuccess?: () => v
 
         if (databasesIds.includes(state.app.context.contextInstanceId)) {
           dispatch(resetConnectedInstance())
+          dispatch(resetKeys())
           dispatch(setAppContextInitialState())
         }
         onSuccess?.()

redisinsight/ui/src/slices/oauth/cloud.ts

@@ -12,6 +12,7 @@ import {
 } from 'uiSrc/components/notifications/components'
 import successMessages from 'uiSrc/components/notifications/success-messages'
 import { getCloudSsoUtmParams } from 'uiSrc/utils/oauth/cloudSsoUtm'
+import { resetKeys } from 'uiSrc/slices/browser/keys'
 import { CloudUser } from 'apiSrc/modules/cloud/user/models'
 import { CloudJobInfo } from 'apiSrc/modules/cloud/job/models'
 import { CloudSubscriptionPlanResponse } from 'apiSrc/modules/cloud/subscription/dto'
@@ -238,6 +239,7 @@ export function createFreeDbSuccess(id: string, history: any) {
   return async (dispatch: AppDispatch) => {
     try {
       const onConnect = () => {
+        dispatch(resetKeys())
         dispatch(setAppContextInitialState())
         dispatch(setConnectedInstanceId(id ?? ''))
         dispatch(removeInfiniteNotification(InfiniteMessagesIds.oAuthSuccess))

redisinsight/ui/src/slices/tests/instances/instances.spec.ts

@@ -12,6 +12,7 @@ import successMessages from 'uiSrc/components/notifications/success-messages'
 import { checkRediStack } from 'uiSrc/utils'
 import { INFINITE_MESSAGES } from 'uiSrc/components/notifications/components'
 import { setAppContextInitialState } from 'uiSrc/slices/app/context'
+import { resetKeys } from 'uiSrc/slices/browser/keys'
 import reducer, {
   initialState,
   instancesSelector,
@@ -1032,6 +1033,7 @@ describe('instances slice', () => {
         // Assert
         const expectedActions = [
           defaultInstanceChanging(),
+          resetKeys(),
           setAppContextInitialState(),
           setConnectedInstanceId(mockId),
           setDefaultInstance(),
@@ -1701,6 +1703,7 @@ describe('instances slice', () => {
         // Assert
         const expectedActions = [
           addInfiniteNotification(INFINITE_MESSAGES.AUTO_CREATING_DATABASE()),
+          resetKeys(),
           setAppContextInitialState(),
           setConnectedInstanceId(mockId),
           setDefaultInstance(),
@@ -1742,6 +1745,7 @@ describe('instances slice', () => {
         // Assert
         const expectedActions = [
           addInfiniteNotification(INFINITE_MESSAGES.AUTO_CREATING_DATABASE()),
+          resetKeys(),
           setAppContextInitialState(),
           setConnectedInstanceId(mockId),
           setDefaultInstance(),