#RI-3438 - Some Keys are displayed with empty names when page was scrolled and then reopened

Author: egor-zalenski

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

@@ -1,6 +1,7 @@
 import React from 'react'
 import { render } from 'uiSrc/utils/test-utils'
-import { KeysStoreData } from 'uiSrc/slices/interfaces/keys'
+import { KeysStoreData, KeyViewType } from 'uiSrc/slices/interfaces/keys'
+import { keysSelector, setLastBatchKeys } from 'uiSrc/slices/browser/keys'
 import KeyList from './KeyList'
 
 const propsMock = {
@@ -41,6 +42,20 @@ const propsMock = {
   handleAddKeyPanel: jest.fn(),
 }
 
+jest.mock('uiSrc/slices/browser/keys', () => ({
+  ...jest.requireActual('uiSrc/slices/browser/keys'),
+  setLastBatchKeys: jest.fn(),
+  keysSelector: jest.fn().mockResolvedValue({
+    viewType: 'Browser',
+    isSearch: false,
+    isFiltered: false,
+  }),
+}))
+
+afterEach(() => {
+  setLastBatchKeys.mockRestore()
+})
+
 describe('KeyList', () => {
   it('should render', () => {
     expect(render(<KeyList {...propsMock} />)).toBeTruthy()
@@ -53,4 +68,34 @@ describe('KeyList', () => {
     )
     expect(rows).toHaveLength(3)
   })
+
+  it('should call "setLastBatchKeys" after unmount for Browser view', () => {
+    keysSelector.mockImplementation(() => ({
+      viewType: KeyViewType.Browser,
+      isSearch: false,
+      isFiltered: false,
+    }))
+
+    const { unmount } = render(<KeyList {...propsMock} />)
+    expect(setLastBatchKeys).not.toBeCalled()
+
+    unmount()
+
+    expect(setLastBatchKeys).toBeCalledTimes(1)
+  })
+
+  it('should not call "setLastBatchKeys" after unmount for Tree view', () => {
+    keysSelector.mockImplementation(() => ({
+      viewType: KeyViewType.Tree,
+      isSearch: false,
+      isFiltered: false,
+    }))
+
+    const { unmount } = render(<KeyList {...propsMock} />)
+    expect(setLastBatchKeys).not.toBeCalled()
+
+    unmount()
+
+    expect(setLastBatchKeys).not.toBeCalled()
+  })
 })

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react'
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import cx from 'classnames'
 
@@ -27,6 +27,7 @@ import {
   keysDataSelector,
   keysSelector,
   selectedKeySelector,
+  setLastBatchKeys,
   sourceKeysFetch,
 } from 'uiSrc/slices/browser/keys'
 import {
@@ -35,7 +36,7 @@ import {
 } from 'uiSrc/slices/app/context'
 import { GroupBadge } from 'uiSrc/components'
 import { SCAN_COUNT_DEFAULT } from 'uiSrc/constants/api'
-import { KeysStoreData } from 'uiSrc/slices/interfaces/keys'
+import { KeysStoreData, KeyViewType } from 'uiSrc/slices/interfaces/keys'
 import VirtualTable from 'uiSrc/components/virtual-table/VirtualTable'
 import { ITableColumn } from 'uiSrc/components/virtual-table/interfaces'
 import { OVER_RENDER_BUFFER_COUNT, TableCellAlignment, TableCellTextAlignment } from 'uiSrc/constants'
@@ -62,7 +63,7 @@ const KeyList = forwardRef((props: Props, ref) => {
 
   const { data: selectedKey } = useSelector(selectedKeySelector)
   const { total, nextCursor, previousResultCount } = useSelector(keysDataSelector)
-  const { isSearched, isFiltered } = useSelector(keysSelector)
+  const { isSearched, isFiltered, viewType } = useSelector(keysSelector)
   const { keyList: { scrollTopPosition } } = useSelector(appContextBrowser)
 
   const [items, setItems] = useState(keysState.keys)
@@ -77,6 +78,17 @@ const KeyList = forwardRef((props: Props, ref) => {
     }
   }))
 
+  useEffect(() =>
+    () => {
+      if (viewType === KeyViewType.Tree) {
+        return
+      }
+      setItems((prevItems) => {
+        dispatch(setLastBatchKeys(prevItems.slice(-SCAN_COUNT_DEFAULT)))
+        return []
+      })
+    }, [])
+
   useEffect(() => {
     const newKeys = bufferFormatRangeItems(keysState.keys, 0, OVER_RENDER_BUFFER_COUNT, formatItem)
 

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

@@ -131,6 +131,12 @@ const keysSlice = createSlice({
       state.error = payload
     },
 
+    setLastBatchKeys: (state, { payload }) => {
+      const newKeys = state.data.keys
+      newKeys.splice(-payload.length, payload.length, ...payload)
+      state.data.keys = newKeys
+    },
+
     loadKeyInfoSuccess: (state, { payload }) => {
       state.selectedKey = {
         ...state.selectedKey,
@@ -348,6 +354,7 @@ export const {
   defaultSelectedKeyAction,
   defaultSelectedKeyActionSuccess,
   defaultSelectedKeyActionFailure,
+  setLastBatchKeys,
   addKey,
   addKeySuccess,
   addKeyFailure,

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

@@ -54,6 +54,7 @@ import reducer, {
   addListKey,
   addStringKey,
   addZsetKey,
+  setLastBatchKeys,
   updateSelectedKeyRefreshTime,
 } from '../../browser/keys'
 import { getString } from '../../browser/string'
@@ -375,6 +376,39 @@ describe('keys slice', () => {
     })
   })
 
+  describe('setLastBatchKeys', () => {
+    it('should properly set the state', () => {
+      // Arrange
+      const strToKey = (name:string) => ({ name, nameString: name, ttl: 1, size: 1, type: 'hash' })
+      const data = ['44', '55', '66'].map(strToKey)
+
+      const state = {
+        ...initialState,
+        data: {
+          ...initialState.data,
+          keys: ['1', '2', '3', '44', '55', '66'].map(strToKey),
+        }
+      }
+
+      const prevState = {
+        ...initialState,
+        data: {
+          ...initialState.data,
+          keys: ['1', '2', '3', '4', '5', '6'].map(strToKey),
+        }
+      }
+
+      // Act
+      const nextState = reducer(prevState, setLastBatchKeys(data))
+
+      // Assert
+      const rootState = Object.assign(initialStateDefault, {
+        browser: { keys: nextState },
+      })
+      expect(keysSelector(rootState)).toEqual(state)
+    })
+  })
+
   describe('refreshKeyInfo', () => {
     it('should properly set the state', () => {
       // Arrange