Merge pull request #3795 from RedisInsight/fe/bugfix/RI-6081

#RI-6081 - fix reset context when switch database happens on the same…

Author: vlad-dargel

redisinsight/ui/src/pages/browser/BrowserPage.test.tsx

@@ -51,6 +51,7 @@ const selectKey = (state: any, selectedKey: any, data?: any = {}) => {
       ...state.app,
       context: {
         ...state.app.context,
+        contextInstanceId: 'instanceId',
         browser: {
           ...state.app.context.browser,
           bulkActions: {

redisinsight/ui/src/pages/browser/BrowserPage.tsx

@@ -33,6 +33,7 @@ import {
   setBrowserPanelSizes,
   setLastPageContext,
   setBrowserBulkActionOpen,
+  appContextSelector,
 } from 'uiSrc/slices/app/context'
 import { resetErrors } from 'uiSrc/slices/app/notifications'
 import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
@@ -42,6 +43,7 @@ import { KeyViewType } from 'uiSrc/slices/interfaces/keys'
 import { SCAN_COUNT_DEFAULT, SCAN_TREE_COUNT_DEFAULT } from 'uiSrc/constants/api'
 import OnboardingStartPopover from 'uiSrc/pages/browser/components/onboarding-start-popover'
 import { sidePanelsSelector } from 'uiSrc/slices/panels/sidePanels'
+import { useStateWithContext } from 'uiSrc/services/hooks'
 import BrowserSearchPanel from './components/browser-search-panel'
 import BrowserLeftPanel from './components/browser-left-panel'
 import BrowserRightPanel from './components/browser-right-panel'
@@ -66,18 +68,21 @@ const BrowserPage = () => {
     keyList: { selectedKey: selectedKeyContext },
     bulkActions: { opened: bulkActionOpenContext },
   } = useSelector(appContextBrowser)
+  const { contextInstanceId } = useSelector(appContextSelector)
+
   const { isBrowserFullScreen } = useSelector(keysSelector)
   const { type } = useSelector(selectedKeyDataSelector) ?? { type: '', length: 0 }
   const { viewType, searchMode } = useSelector(keysSelector)
   const { openedPanel: openedSidePanel } = useSelector(sidePanelsSelector)
 
   const [isPageViewSent, setIsPageViewSent] = useState(false)
   const [arePanelsCollapsed, setArePanelsCollapsed] = useState(isOneSideMode(!!openedSidePanel))
-  const [selectedKey, setSelectedKey] = useState<Nullable<RedisResponseBuffer>>(selectedKeyContext)
   const [isAddKeyPanelOpen, setIsAddKeyPanelOpen] = useState(false)
   const [isCreateIndexPanelOpen, setIsCreateIndexPanelOpen] = useState(false)
   const [isBulkActionsPanelOpen, setIsBulkActionsPanelOpen] = useState(bulkActionOpenContext)
 
+  const [selectedKey, setSelectedKey] = useStateWithContext<Nullable<RedisResponseBuffer>>(selectedKeyContext, null)
+
   const [sizes, setSizes] = useState(panelSizes)
 
   const prevSelectedType = useRef<string>(type)
@@ -118,8 +123,8 @@ const BrowserPage = () => {
   }, [isBulkActionsPanelOpen])
 
   useEffect(() => {
-    setSelectedKey(selectedKeyContext)
-  }, [selectedKeyContext])
+    if (contextInstanceId === instanceId) setSelectedKey(selectedKeyContext)
+  }, [selectedKeyContext, contextInstanceId])
 
   useEffect(() => {
     selectedKeyRef.current = selectedKey

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

@@ -70,7 +70,10 @@ const InstancePage = ({ routes = [] }: Props) => {
   }, [pathname])
 
   useEffect(() => {
-    if (isShouldChildrenRerender) setIsShouldChildrenRerender(false)
+    if (isShouldChildrenRerender) {
+      dispatch(resetDatabaseContext())
+      setIsShouldChildrenRerender(false)
+    }
   }, [isShouldChildrenRerender])
 
   if (isShouldChildrenRerender) {

redisinsight/ui/src/services/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from './hooks'
 export * from './useWebworkers'
 export * from './useCabability'
+export * from './useStateWithContext'

redisinsight/ui/src/services/hooks/useStateWithContext.ts

@@ -0,0 +1,11 @@
+import { useSelector } from 'react-redux'
+import { useState } from 'react'
+import { useParams } from 'react-router-dom'
+import { appContextSelector } from 'uiSrc/slices/app/context'
+
+export const useStateWithContext = <T>(value: T, initialValue: T) => {
+  const { instanceId } = useParams<{ instanceId: string }>()
+  const { contextInstanceId } = useSelector(appContextSelector)
+
+  return useState<T>(instanceId === contextInstanceId ? value : initialValue)
+}