#RI-4825 - fix closing selected key after deleting from list

Author: rsergeenko

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

@@ -163,6 +163,10 @@ const BrowserPage = () => {
     setIsBulkActionsPanelOpen(value)
   }, [])
 
+  const handleRemoveSelectedKey = useCallback(() => {
+    handlePanel(true)
+  }, [])
+
   const handleCreateIndexPanel = useCallback((value: boolean) => {
     handlePanel(value)
     setIsCreateIndexPanelOpen(value)
@@ -231,8 +235,9 @@ const BrowserPage = () => {
                   }}
                 >
                   <BrowserLeftPanel
+                    selectedKey={selectedKey}
                     selectKey={selectKey}
-                    setSelectedKey={setSelectedKey}
+                    removeSelectedKey={handleRemoveSelectedKey}
                   />
                 </EuiResizablePanel>
 
@@ -268,7 +273,6 @@ const BrowserPage = () => {
                     isBulkActionsPanelOpen={isBulkActionsPanelOpen}
                     handleAddKeyPanel={handleAddKeyPanel}
                     handleBulkActionsPanel={handleBulkActionsPanel}
-                    handleCreateIndexPanel={handleCreateIndexPanel}
                     closeRightPanels={closeRightPanels}
                   />
                 </EuiResizablePanel>

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

@@ -18,7 +18,7 @@ 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'
 import { redisearchDataSelector, redisearchListSelector, redisearchSelector } from 'uiSrc/slices/browser/redisearch'
-import { Nullable } from 'uiSrc/utils'
+import { isEqualBuffers, Nullable } from 'uiSrc/utils'
 import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
 import { KeyTypes } from 'uiSrc/constants'
 
@@ -29,14 +29,16 @@ import KeysHeader from '../keys-header'
 import styles from './styles.module.scss'
 
 export interface Props {
+  selectedKey: Nullable<RedisResponseBuffer>
   selectKey: ({ rowData }: { rowData: any }) => void
-  setSelectedKey: (keyName: Nullable<RedisResponseBuffer>) => void
+  removeSelectedKey: () => void
 }
 
 const BrowserLeftPanel = (props: Props) => {
   const {
+    selectedKey,
     selectKey,
-    setSelectedKey,
+    removeSelectedKey,
   } = props
 
   const { instanceId } = useParams<{ instanceId: string }>()
@@ -106,8 +108,12 @@ const BrowserLeftPanel = (props: Props) => {
   }
 
   const onDeleteKey = useCallback(
-    () => setSelectedKey(null),
-    [],
+    (key: RedisResponseBuffer) => {
+      if (isEqualBuffers(key, selectedKey)) {
+        removeSelectedKey()
+      }
+    },
+    [selectedKey],
   )
 
   return (

redisinsight/ui/src/pages/browser/components/browser-right-panel/BrowserRightPanel.tsx

@@ -28,7 +28,6 @@ export interface Props {
   isBulkActionsPanelOpen: boolean
   handleBulkActionsPanel: (value: boolean) => void
   isCreateIndexPanelOpen: boolean
-  handleCreateIndexPanel?: (value: boolean) => void
   closeRightPanels: () => void
 }
 

redisinsight/ui/src/pages/browser/components/key-list/KeyList.tsx

@@ -73,7 +73,7 @@ export interface Props {
     oldKeys: IKeyPropTypes[],
     { startIndex, stopIndex }: { startIndex: number, stopIndex: number },
   ) => void
-  onDelete: () => void
+  onDelete: (key: RedisResponseBuffer) => void
   commonFilterType: Nullable<KeyTypes>
 }
 
@@ -251,7 +251,7 @@ const KeyList = forwardRef((props: Props, ref) => {
   const handleRemoveKey = (key: RedisResponseBuffer) => {
     dispatch(deleteKeyAction(key, () => {
       setDeletePopoverIndex(undefined)
-      onDelete()
+      onDelete(key)
     }))
   }
 

redisinsight/ui/src/pages/browser/components/key-tree/KeyTree.tsx

@@ -18,6 +18,7 @@ import { KeysStoreData } from 'uiSrc/slices/interfaces/keys'
 import { Nullable, bufferToString } from 'uiSrc/utils'
 import { IKeyPropTypes } from 'uiSrc/constants/prop-types/keys'
 import { KeyTypes } from 'uiSrc/constants'
+import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
 import { GetKeyInfoResponse } from 'apiSrc/modules/browser/dto'
 import KeyTreeDelimiter from './KeyTreeDelimiter'
 
@@ -33,7 +34,7 @@ export interface Props {
     oldKeys: IKeyPropTypes[],
     { startIndex, stopIndex }: { startIndex: number, stopIndex: number },
   ) => void
-  onDelete: () => void
+  onDelete: (key: RedisResponseBuffer) => void
 }
 
 export const firstPanelId = 'tree'
@@ -224,7 +225,6 @@ const KeyTree = forwardRef((props: Props, ref) => {
               </>
             )}
           </EuiResizableContainer>
-
         </div>
       </div>
     </div>