diff --git a/redisinsight/ui/src/constants/prop-types/keys.ts b/redisinsight/ui/src/constants/prop-types/keys.ts index 228e908a80..c7591972bc 100644 --- a/redisinsight/ui/src/constants/prop-types/keys.ts +++ b/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[] -} diff --git a/redisinsight/ui/src/pages/browser/components/key-list/KeyList.spec.tsx b/redisinsight/ui/src/pages/browser/components/key-list/KeyList.spec.tsx index 40e87dd6a3..64962e75e8 100644 --- a/redisinsight/ui/src/pages/browser/components/key-list/KeyList.spec.tsx +++ b/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(), diff --git a/redisinsight/ui/src/pages/browser/components/key-list/KeyList.tsx b/redisinsight/ui/src/pages/browser/components/key-list/KeyList.tsx index 75971a58ba..31c9ce259b 100644 --- a/redisinsight/ui/src/pages/browser/components/key-list/KeyList.tsx +++ b/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 diff --git a/redisinsight/ui/src/pages/browser/components/key-tree/KeyTree.spec.tsx b/redisinsight/ui/src/pages/browser/components/key-tree/KeyTree.spec.tsx index 9c3bbe1048..1890b732c4 100644 --- a/redisinsight/ui/src/pages/browser/components/key-tree/KeyTree.spec.tsx +++ b/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(), } diff --git a/redisinsight/ui/src/pages/browser/components/key-tree/KeyTree.tsx b/redisinsight/ui/src/pages/browser/components/key-tree/KeyTree.tsx index 3757624894..671d6bdc1b 100644 --- a/redisinsight/ui/src/pages/browser/components/key-tree/KeyTree.tsx +++ b/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(keysState) + const [keyListState, setKeyListState] = useState(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) } diff --git a/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.spec.tsx b/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.spec.tsx index 0f1bd8be47..210e91df75 100644 --- a/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.spec.tsx +++ b/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(), diff --git a/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx b/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx index 932e453cec..fd9c0a80d4 100644 --- a/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx +++ b/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 diff --git a/redisinsight/ui/src/slices/interfaces/keys.ts b/redisinsight/ui/src/slices/interfaces/keys.ts index f18ec0fc89..f3c4d808ab 100644 --- a/redisinsight/ui/src/slices/interfaces/keys.ts +++ b/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; - isFiltered: boolean; - isSearched: boolean; + loading: boolean + error: string + search: string + filter: Nullable + isFiltered: boolean + isSearched: boolean viewType: KeyViewType, - data: { - total: number; - scanned: number; - nextCursor: string; - keys: Key[]; - shardsMeta: Record; - previousResultCount: number; - lastRefreshTime: Nullable; - }; + data: KeysStoreData selectedKey: { - loading: boolean; - refreshing: boolean; - lastRefreshTime: Nullable; - error: string; - data: Nullable; - length: Maybe; - }; + loading: boolean + refreshing: boolean + lastRefreshTime: Nullable + error: string + data: Nullable + length: Maybe + } addKey: { - loading: boolean; - error: string; - }; + loading: boolean + error: string + } +} + +export interface KeysStoreData { + total: number + scanned: number + nextCursor: string + keys: GetKeyInfoResponse[] + shardsMeta: Record + previousResultCount: number + lastRefreshTime: Nullable }