#RI-3689 - Key list refreshed when refreshing only key details

Author: egor-zalenski

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

@@ -1,4 +1,5 @@
 import React from 'react'
+import { cloneDeep } from 'lodash'
 import { render, waitFor } from 'uiSrc/utils/test-utils'
 import { KeysStoreData, KeyViewType } from 'uiSrc/slices/interfaces/keys'
 import { keysSelector, setLastBatchKeys } from 'uiSrc/slices/browser/keys'
@@ -101,7 +102,7 @@ describe('KeyList', () => {
   })
 
   it('should call apiService.post to get key info', async () => {
-    const apiServiceMock = jest.fn().mockResolvedValue([...propsMock.keysState.keys])
+    const apiServiceMock = jest.fn().mockResolvedValue(cloneDeep(propsMock.keysState.keys))
     apiService.post = apiServiceMock
 
     const { rerender } = render(<KeyList {...propsMock} keysState={{ ...propsMock.keysState, keys: [] }} />)
@@ -120,7 +121,7 @@ describe('KeyList', () => {
 
   it('apiService.post should be called with only keys without info', async () => {
     const params = { params: { encoding: 'buffer' } }
-    const apiServiceMock = jest.fn().mockResolvedValue([...propsMock.keysState.keys])
+    const apiServiceMock = jest.fn().mockResolvedValue(cloneDeep(propsMock.keysState.keys))
     apiService.post = apiServiceMock
 
     const { rerender } = render(<KeyList {...propsMock} keysState={{ ...propsMock.keysState, keys: [] }} />)
@@ -130,7 +131,7 @@ describe('KeyList', () => {
       keysState={{
         ...propsMock.keysState,
         keys: [
-          ...propsMock.keysState.keys.map(({ name }) => ({ name })),
+          ...cloneDeep(propsMock.keysState.keys).map(({ name }) => ({ name })),
           { name: 'key5', size: 100, length: 100 }, // key with info
         ] }}
     />)
@@ -162,7 +163,7 @@ describe('KeyList', () => {
       keysState={{
         ...propsMock.keysState,
         keys: [
-          ...propsMock.keysState.keys.map(({ name }) => ({ name })),
+          ...cloneDeep(propsMock).keysState.keys.map(({ name }) => ({ name })),
         ] }}
     />)
 

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

@@ -19,6 +19,7 @@ import {
   formatLongName,
   bufferToString,
   bufferFormatRangeItems,
+  isEqualBuffers,
 } from 'uiSrc/utils'
 import {
   NoKeysToDisplayText,
@@ -68,7 +69,7 @@ const KeyList = forwardRef((props: Props, ref) => {
 
   const { instanceId = '' } = useParams<{ instanceId: string }>()
 
-  const { data: selectedKey } = useSelector(selectedKeySelector)
+  const selectedKey = useSelector(selectedKeySelector)
   const { total, nextCursor, previousResultCount } = useSelector(keysDataSelector)
   const { isSearched, isFiltered, viewType } = useSelector(keysSelector)
   const { keyList: { scrollTopPosition } } = useSelector(appContextBrowser)
@@ -108,6 +109,18 @@ const KeyList = forwardRef((props: Props, ref) => {
     rerender({})
   }, [keysState.keys])
 
+  useEffect(() => {
+    if (!selectedKey || !selectedKey?.data) return
+
+    const indexKeyForUpdate = itemsRef.current.findIndex(({ name }) =>
+      isEqualBuffers(name, selectedKey?.data?.name))
+
+    if (indexKeyForUpdate === -1) return
+
+    itemsRef.current[indexKeyForUpdate] = selectedKey.data
+    rerender({})
+  }, [selectedKey])
+
   const onNoKeysLinkClick = () => {
     sendEventTelemetry({
       event: getBasedOnViewTypeEvent(
@@ -168,7 +181,7 @@ const KeyList = forwardRef((props: Props, ref) => {
 
     const newItems = bufferFormatRows(startIndex, lastIndex)
 
-    getMetadata(startIndex, lastIndex, newItems)
+    getMetadata(startIndex, newItems)
     rerender({})
   }
 
@@ -185,7 +198,6 @@ const KeyList = forwardRef((props: Props, ref) => {
 
   const getMetadata = (
     startIndex: number,
-    lastIndex: number,
     itemsInit: GetKeyInfoResponse[] = []
   ): void => {
     const isSomeNotUndefined = ({ type, size, length }: GetKeyInfoResponse) =>
@@ -364,7 +376,7 @@ const KeyList = forwardRef((props: Props, ref) => {
               totalItemsCount={keysState.total ? keysState.total : Infinity}
               scanned={isSearched || isFiltered ? keysState.scanned : 0}
               noItemsMessage={getNoItemsMessage()}
-              selectedKey={selectedKey}
+              selectedKey={selectedKey.data}
               scrollTopProp={scrollTopPosition}
               setScrollTopPosition={setScrollTopPosition}
               hideFooter={hideFooter}

redisinsight/ui/src/slices/browser/keys.ts

@@ -41,7 +41,7 @@ import { addErrorNotification, addMessageNotification } from '../app/notificatio
 import { KeysStore, KeyViewType } from '../interfaces/keys'
 import { AppDispatch, RootState } from '../store'
 import { StreamViewType } from '../interfaces/stream'
-import { RedisResponseBuffer } from '../interfaces'
+import { RedisResponseBuffer, RedisString } from '../interfaces'
 
 const defaultViewFormat = KeyValueFormat.Unicode
 
@@ -227,19 +227,6 @@ const keysSlice = createSlice({
         error: payload,
       }
     },
-    editKeyTTLFromList: (state, { payload }) => {
-      const keys = state.data.keys.map((key) => {
-        if (isEqualBuffers(key.name, payload?.key)) {
-          key.ttl = payload?.ttl
-        }
-        return key
-      })
-
-      state.data = {
-        ...state.data,
-        keys,
-      }
-    },
     editKeyFromList: (state, { payload }) => {
       const keys = state.data.keys.map((key) => {
         if (isEqualBuffers(key.name, payload?.key)) {
@@ -253,19 +240,6 @@ const keysSlice = createSlice({
         keys,
       }
     },
-    updateKeySizeFromList: (state, { payload }) => {
-      const keys = state.data.keys.map((key) => {
-        if (isEqualBuffers(key.name, payload?.key)) {
-          key.size = payload?.size
-        }
-        return key
-      })
-
-      state.data = {
-        ...state.data,
-        keys,
-      }
-    },
 
     // update length for Selected Key
     updateSelectedKeyLength: (state, { payload }) => {
@@ -373,9 +347,7 @@ export const {
   deleteKeySuccess,
   deleteKeyFailure,
   deleteKeyFromList,
-  editKeyTTLFromList,
   editKeyFromList,
-  updateKeySizeFromList,
   updateSelectedKeyLength,
   setSearchMatch,
   setFilter,
@@ -582,9 +554,6 @@ export function fetchKeyInfo(key: RedisResponseBuffer, resetData?: boolean) {
       if (isStatusSuccessful(status)) {
         dispatch(loadKeyInfoSuccess(data))
         dispatch(updateSelectedKeyRefreshTime(Date.now()))
-        if (isEqualBuffers(state.browser.keys.selectedKey?.data?.name, key)) {
-          // dispatch(updateKeySizeFromList({ key, size: data?.size }))
-        }
       }
 
       if (data.type === KeyTypes.Hash) {
@@ -646,9 +615,6 @@ export function refreshKeyInfoAction(key: RedisResponseBuffer) {
       if (isStatusSuccessful(status)) {
         dispatch(refreshKeyInfoSuccess(data))
         dispatch(updateSelectedKeyRefreshTime(Date.now()))
-        if (isEqualBuffers(state.browser.keys.selectedKey?.data?.name, key)) {
-          // dispatch(updateKeySizeFromList({ key, size: data?.size }))
-        }
       }
     } catch (error) {
       dispatch(refreshKeyInfoFail())
@@ -888,7 +854,6 @@ export function editKeyTTL(key: string, ttl: number) {
           }
         })
         if (ttl !== 0) {
-          dispatch(editKeyTTLFromList({ key, ttl }))
           dispatch<any>(fetchKeyInfo(key))
         } else {
           dispatch(deleteKeySuccess())
@@ -906,7 +871,7 @@ export function editKeyTTL(key: string, ttl: number) {
 
 // Asynchronous thunk action
 export function fetchKeysMetadata(
-  keys: GetKeyInfoResponse[],
+  keys: RedisString[],
   onSuccessAction?: (data: GetKeyInfoResponse[]) => void,
   onFailAction?: () => void
 ) {

redisinsight/ui/src/slices/tests/browser/keys.spec.ts

@@ -47,7 +47,6 @@ import reducer, {
   editKey,
   defaultSelectedKeyActionFailure,
   editKeyTTL,
-  editKeyTTLFromList,
   addHashKey,
   addSetKey,
   addReJSONKey,
@@ -717,39 +716,6 @@ describe('keys slice', () => {
     })
   })
 
-  describe('editKeyTTLFromList', () => {
-    it('should properly set the state before the edit TTL', () => {
-      // Arrange
-
-      const data = {
-        key: 'test',
-        ttl: 1000,
-      }
-
-      const initialStateMock = {
-        ...initialState,
-        data: {
-          keys: [{ name: data.key, ttl: -1 }],
-        },
-      }
-      const state = {
-        ...initialState,
-        data: {
-          keys: [{ name: data.key, ttl: data.ttl }],
-        },
-      }
-
-      // Act
-      const nextState = reducer(initialStateMock, editKeyTTLFromList(data))
-
-      // Assert
-      const rootState = Object.assign(initialStateDefault, {
-        browser: { keys: nextState },
-      })
-      expect(keysSelector(rootState)).toEqual(state)
-    })
-  })
-
   describe('editKeyFromList', () => {
     it('should properly set the state before the edit key', () => {
       // Arrange
@@ -1288,8 +1254,6 @@ describe('keys slice', () => {
         // Assert
         const expectedActions = [
           defaultSelectedKeyAction(),
-          editKeyTTLFromList({ key, ttl }),
-
           // fetch keyInfo
           defaultSelectedKeyAction(),
           defaultSelectedKeyActionSuccess(),