#RI-3986, #RI-3985

redisinsight/ui/src/components/instance-header/InstanceHeader.tsx

@@ -25,14 +25,19 @@ import { appInfoSelector } from 'uiSrc/slices/app/info'
 import ShortInstanceInfo from 'uiSrc/components/instance-header/components/ShortInstanceInfo'
 import DatabaseOverviewWrapper from 'uiSrc/components/database-overview/DatabaseOverviewWrapper'
 
-import { appContextDbIndex, clearBrowserKeyListData } from 'uiSrc/slices/app/context'
+import { appContextDbIndex, clearBrowserKeyListData, setBrowserSelectedKey } from 'uiSrc/slices/app/context'
 import InlineItemEditor from 'uiSrc/components/inline-item-editor'
 import { selectOnFocus, validateNumber } from 'uiSrc/utils'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 
+import { resetKeyInfo } from 'uiSrc/slices/browser/keys'
 import styles from './styles.module.scss'
 
-const InstanceHeader = () => {
+export interface Props {
+  onChangeDbIndex?: (index: number) => void
+}
+
+const InstanceHeader = ({ onChangeDbIndex }: Props) => {
   const {
     name = '',
     host = '',
@@ -72,7 +77,7 @@ const InstanceHeader = () => {
     history.push(Pages.home)
   }
 
-  const onChangeDbIndex = () => {
+  const handleChangeDbIndex = () => {
     setIsDbIndexEditing(false)
 
     if (db === +dbIndex) return
@@ -82,6 +87,10 @@ const InstanceHeader = () => {
       +dbIndex,
       () => {
         dispatch(clearBrowserKeyListData())
+        onChangeDbIndex?.(+dbIndex)
+        dispatch(resetKeyInfo())
+        dispatch(setBrowserSelectedKey(null))
+
         sendEventTelemetry({
           event: TelemetryEvent.BROWSER_DATABASE_INDEX_CHANGED,
           eventData: {
@@ -129,7 +138,7 @@ const InstanceHeader = () => {
                           <div style={{ marginRight: 48 }}>
                             <InlineItemEditor
                               controlsPosition="right"
-                              onApply={onChangeDbIndex}
+                              onApply={handleChangeDbIndex}
                               onDecline={() => setIsDbIndexEditing(false)}
                               viewChildrenMode={false}
                               controlsClassName={styles.controls}

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

@@ -16,6 +16,7 @@ import {
   TelemetryPageView,
 } from 'uiSrc/telemetry'
 import {
+  fetchKeys,
   keysSelector,
   resetKeyInfo,
   selectedKeyDataSelector,
@@ -35,6 +36,8 @@ import InstanceHeader from 'uiSrc/components/instance-header'
 import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 
+import { KeyViewType } from 'uiSrc/slices/interfaces/keys'
+import { SCAN_COUNT_DEFAULT, SCAN_TREE_COUNT_DEFAULT } from 'uiSrc/constants/api'
 import BrowserLeftPanel from './components/browser-left-panel'
 import BrowserRightPanel from './components/browser-right-panel'
 
@@ -56,6 +59,7 @@ const BrowserPage = () => {
   } = useSelector(appContextBrowser)
   const { isBrowserFullScreen } = useSelector(keysSelector)
   const { type } = useSelector(selectedKeyDataSelector) ?? { type: '', length: 0 }
+  const { viewType, searchMode } = useSelector(keysSelector)
 
   const [isPageViewSent, setIsPageViewSent] = useState(false)
   const [arePanelsCollapsed, setArePanelsCollapsed] = useState(false)
@@ -158,6 +162,19 @@ const BrowserPage = () => {
     setIsCreateIndexPanelOpen(false)
   }, [])
 
+  const onChangeDbIndex = () => {
+    if (selectedKey) {
+      dispatch(toggleBrowserFullScreen(true))
+      setSelectedKey(null)
+    }
+
+    dispatch(fetchKeys(
+      searchMode,
+      '0',
+      viewType === KeyViewType.Browser ? SCAN_COUNT_DEFAULT : SCAN_TREE_COUNT_DEFAULT
+    ))
+  }
+
   const selectKey = ({ rowData }: { rowData: any }) => {
     if (!isEqualBuffers(rowData.name, selectedKey)) {
       dispatch(toggleBrowserFullScreen(false))
@@ -173,7 +190,7 @@ const BrowserPage = () => {
 
   return (
     <div className={`browserPage ${styles.container}`}>
-      <InstanceHeader />
+      <InstanceHeader onChangeDbIndex={onChangeDbIndex} />
       <div className={styles.main}>
         <div className={styles.resizableContainer}>
           <EuiResizableContainer onPanelWidthChange={onPanelWidthChange} style={{ height: '100%' }}>

redisinsight/ui/src/pages/browser/components/browser-left-panel/BrowserLeftPanel.tsx

@@ -13,7 +13,7 @@ import {
   keysDataSelector,
   keysSelector,
 } from 'uiSrc/slices/browser/keys'
-import { KeysStoreData, KeyViewType, SearchMode } from 'uiSrc/slices/interfaces/keys'
+import { KeyViewType, SearchMode } from 'uiSrc/slices/interfaces/keys'
 import { IKeyPropTypes } from 'uiSrc/constants/prop-types/keys'
 import { setConnectedInstanceId } from 'uiSrc/slices/instances/instances'
 import { SCAN_COUNT_DEFAULT, SCAN_TREE_COUNT_DEFAULT } from 'uiSrc/constants/api'
@@ -32,16 +32,6 @@ export interface Props {
   handleCreateIndexPanel: (value: boolean) => void
 }
 
-const initialKeyStateData: KeysStoreData = {
-  total: 0,
-  scanned: 0,
-  nextCursor: '0',
-  keys: [],
-  shardsMeta: {},
-  previousResultCount: 0,
-  lastRefreshTime: null,
-}
-
 const BrowserLeftPanel = (props: Props) => {
   const {
     selectKey,
@@ -66,9 +56,7 @@ const BrowserLeftPanel = (props: Props) => {
   const dispatch = useDispatch()
 
   const isDataLoaded = searchMode === SearchMode.Pattern ? isDataPatternLoaded : isDataRedisearchLoaded
-  const keysState = searchMode === SearchMode.Pattern
-    ? (isDataLoaded ? patternKeysState : initialKeyStateData)
-    : redisearchKeysState
+  const keysState = searchMode === SearchMode.Pattern ? patternKeysState : redisearchKeysState
   const loading = searchMode === SearchMode.Pattern ? patternLoading : redisearchLoading || redisearchListLoading
   const isSearched = searchMode === SearchMode.Pattern ? patternIsSearched : redisearchIsSearched
   const scrollTopPosition = searchMode === SearchMode.Pattern ? scrollPatternTopPosition : scrollRedisearchTopPosition
@@ -77,7 +65,7 @@ const BrowserLeftPanel = (props: Props) => {
     if ((!isDataLoaded || contextInstanceId !== instanceId) && searchMode === SearchMode.Pattern) {
       loadKeys(viewType)
     }
-  }, [searchMode, isDataLoaded])
+  }, [searchMode])
 
   const loadKeys = useCallback((keyViewType: KeyViewType = KeyViewType.Browser) => {
     dispatch(setConnectedInstanceId(instanceId))