fix refresh for Tree view

Author: egor-zalenski

redisinsight/ui/src/constants/prop-types/keys.ts

@@ -7,10 +7,3 @@ export interface IKeyPropTypes {
   size: number
   length: number
 }
-
-export interface IKeyListPropTypes {
-  nextCursor: string
-  total: number
-  scanned: number
-  keys: IKeyPropTypes[]
-}

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

@@ -1,6 +1,6 @@
 import React from 'react'
-import { render, screen } from 'uiSrc/utils/test-utils'
-import { IKeyListPropTypes } from 'uiSrc/constants/prop-types/keys'
+import { render } from 'uiSrc/utils/test-utils'
+import { KeysStoreData } from 'uiSrc/slices/interfaces/keys'
 import KeyList from './KeyList'
 
 const propsMock = {
@@ -30,7 +30,11 @@ const propsMock = {
     ],
     nextCursor: '0',
     total: 3,
-  } as IKeyListPropTypes,
+    scanned: 5,
+    shardsMeta: {},
+    previousResultCount: 1,
+    lastRefreshTime: 3
+  } as KeysStoreData,
   loading: false,
   selectKey: jest.fn(),
   loadMoreItems: jest.fn(),

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

@@ -33,7 +33,7 @@ import {
 } from 'uiSrc/slices/app/context'
 import { GroupBadge } from 'uiSrc/components'
 import { SCAN_COUNT_DEFAULT } from 'uiSrc/constants/api'
-import { IKeyListPropTypes } from 'uiSrc/constants/prop-types/keys'
+import { KeysStoreData } from 'uiSrc/slices/interfaces/keys'
 import VirtualTable from 'uiSrc/components/virtual-table/VirtualTable'
 import { ITableColumn } from 'uiSrc/components/virtual-table/interfaces'
 import { TableCellAlignment, TableCellTextAlignment } from 'uiSrc/constants'
@@ -42,7 +42,7 @@ import styles from './styles.module.scss'
 
 export interface Props {
   hideHeader?: boolean
-  keysState: IKeyListPropTypes
+  keysState: KeysStoreData
   loading: boolean
   hideFooter?: boolean
   selectKey: ({ rowData }: { rowData: any }) => void

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

@@ -10,7 +10,7 @@ import {
   waitFor,
 } from 'uiSrc/utils/test-utils'
 import { setSearchMatch } from 'uiSrc/slices/keys'
-import { IKeyListPropTypes } from 'uiSrc/constants/prop-types/keys'
+import { KeysStoreData } from 'uiSrc/slices/interfaces/keys'
 import { mockVirtualTreeResult } from 'uiSrc/components/virtual-tree/VirtualTree.spec'
 import { setBrowserTreeNodesOpen, setBrowserTreeSelectedLeaf } from 'uiSrc/slices/app/context'
 import KeyTree from './KeyTree'
@@ -49,7 +49,11 @@ const propsMock = {
     ],
     nextCursor: '0',
     total: 3,
-  } as IKeyListPropTypes,
+    scanned: 5,
+    shardsMeta: {},
+    previousResultCount: 1,
+    lastRefreshTime: 3
+  } as KeysStoreData,
   loading: false,
   selectKey: jest.fn(),
 }

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

@@ -11,15 +11,15 @@ import {
 import { constructKeysToTree } from 'uiSrc/helpers'
 import { keysSelector } from 'uiSrc/slices/keys'
 import VirtualTree from 'uiSrc/components/virtual-tree'
-import { IKeyListPropTypes, } from 'uiSrc/constants/prop-types/keys'
 import TreeViewSVG from 'uiSrc/assets/img/icons/treeview.svg'
+import { KeysStoreData } from 'uiSrc/slices/interfaces/keys'
 import KeyTreeDelimiter from './KeyTreeDelimiter'
 
 import KeyList from '../key-list/KeyList'
 import styles from './styles.module.scss'
 
 export interface Props {
-  keysState: IKeyListPropTypes
+  keysState: KeysStoreData
   loading: boolean
   selectKey: ({ rowData }: { rowData: any }) => void
 }
@@ -39,7 +39,7 @@ const KeyTree = (props: Props) => {
   const [statusSelected, setStatusSelected] = useState(selectedLeaf)
   const [statusOpen, setStatusOpen] = useState(openNodes)
   const [sizes, setSizes] = useState(panelSizes)
-  const [keyListState, setKeyListState] = useState<IKeyListPropTypes>(keysState)
+  const [keyListState, setKeyListState] = useState<KeysStoreData>(keysState)
   const [constructingTree, setConstructingTree] = useState(false)
   const [selectDefaultLeaf, setSelectDefaultLeaf] = useState(true)
   const [items, setItems] = useState(keysState.keys ?? [])
@@ -69,17 +69,21 @@ const KeyTree = (props: Props) => {
   }, [keysState.keys])
 
   useEffect(() => {
-    // select default leaf "Keys" after each change delimiter, filter or search
+    updateSelectedKeys()
+  }, [delimiter, filter, search, keysState.lastRefreshTime])
+
+  // select default leaf "Keys" after each change delimiter, filter or search
+  const updateSelectedKeys = () => {
     setItems([])
     setTimeout(() => {
       setStatusSelected({})
       setSelectDefaultLeaf(true)
       setItems(keysState.keys)
     }, 0)
-  }, [delimiter, filter, search])
+  }
 
   const updateKeysList = (items:any = {}) => {
-    const newState:IKeyListPropTypes = {
+    const newState:KeysStoreData = {
       ...keyListState,
       keys: Object.values(items)
     }

redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { render, screen } from 'uiSrc/utils/test-utils'
-import { IKeyListPropTypes } from 'uiSrc/constants/prop-types/keys'
+import { KeysStoreData } from 'uiSrc/slices/interfaces/keys'
 import KeysHeader from './KeysHeader'
 
 const propsMock = {
@@ -30,7 +30,11 @@ const propsMock = {
     ],
     nextCursor: '0',
     total: 3,
-  } as IKeyListPropTypes,
+    scanned: 5,
+    shardsMeta: {},
+    previousResultCount: 1,
+    lastRefreshTime: 3
+  } as KeysStoreData,
   loading: false,
   sizes: {},
   loadKeys: jest.fn(),

redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx

@@ -23,9 +23,8 @@ import {
 import { connectedInstanceSelector } from 'uiSrc/slices/instances'
 import { sendEventTelemetry, TelemetryEvent, getBasedOnViewTypeEvent } from 'uiSrc/telemetry'
 import { SCAN_COUNT_DEFAULT, SCAN_TREE_COUNT_DEFAULT } from 'uiSrc/constants/api'
-import { KeyViewType } from 'uiSrc/slices/interfaces/keys'
+import { KeysStoreData, KeyViewType } from 'uiSrc/slices/interfaces/keys'
 import KeysSummary from 'uiSrc/components/keys-summary'
-import { IKeyListPropTypes } from 'uiSrc/constants/prop-types/keys'
 import { localStorageService } from 'uiSrc/services'
 import { BrowserStorageItem } from 'uiSrc/constants'
 import { ReactComponent as TreeViewIcon } from 'uiSrc/assets/img/icons/treeview.svg'
@@ -50,7 +49,7 @@ interface IViewType {
 
 export interface Props {
   loading: boolean
-  keysState: IKeyListPropTypes
+  keysState: KeysStoreData
   sizes: any
   loadKeys: (type?: KeyViewType) => void
   loadMoreItems?: (config: any) => void

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

@@ -1,12 +1,13 @@
+import { GetKeyInfoResponse } from 'apiSrc/modules/browser/dto'
 import { KeyTypes, UnsupportedKeyTypes } from 'uiSrc/constants'
 import { IKeyPropTypes } from 'uiSrc/constants/prop-types/keys'
 import { Maybe, Nullable } from 'uiSrc/utils'
 
 export interface Key {
-  name: string;
-  type: KeyTypes;
-  ttl: number;
-  size: number;
+  name: string
+  type: KeyTypes
+  ttl: number
+  size: number
 }
 
 export enum KeyViewType {
@@ -15,38 +16,40 @@ export enum KeyViewType {
 }
 
 export interface KeysStore {
-  loading: boolean;
-  error: string;
-  search: string;
-  filter: Nullable<KeyTypes | UnsupportedKeyTypes>;
-  isFiltered: boolean;
-  isSearched: boolean;
+  loading: boolean
+  error: string
+  search: string
+  filter: Nullable<KeyTypes | UnsupportedKeyTypes>
+  isFiltered: boolean
+  isSearched: boolean
   viewType: KeyViewType,
-  data: {
-    total: number;
-    scanned: number;
-    nextCursor: string;
-    keys: Key[];
-    shardsMeta: Record<string, {
-      cursor: number;
-      scanned: number;
-      total: number;
-      host?: string;
-      port?: number;
-    }>;
-    previousResultCount: number;
-    lastRefreshTime: Nullable<number>;
-  };
+  data: KeysStoreData
   selectedKey: {
-    loading: boolean;
-    refreshing: boolean;
-    lastRefreshTime: Nullable<number>;
-    error: string;
-    data: Nullable<IKeyPropTypes>;
-    length: Maybe<number>;
-  };
+    loading: boolean
+    refreshing: boolean
+    lastRefreshTime: Nullable<number>
+    error: string
+    data: Nullable<IKeyPropTypes>
+    length: Maybe<number>
+  }
   addKey: {
-    loading: boolean;
-    error: string;
-  };
+    loading: boolean
+    error: string
+  }
+}
+
+export interface KeysStoreData {
+  total: number
+  scanned: number
+  nextCursor: string
+  keys: GetKeyInfoResponse[]
+  shardsMeta: Record<string, {
+    cursor: number
+    scanned: number
+    total: number
+    host?: string
+    port?: number
+  }>
+  previousResultCount: number
+  lastRefreshTime: Nullable<number>
 }