+
{
selectedKey={selectedKey}
scrollTopProp={scrollTopPosition}
setScrollTopPosition={setScrollTopPosition}
+ hideFooter={hideFooter}
/>
diff --git a/redisinsight/ui/src/pages/browser/components/key-list/styles.module.scss b/redisinsight/ui/src/pages/browser/components/key-list/styles.module.scss
index 63c18840eb..15fc8becf0 100644
--- a/redisinsight/ui/src/pages/browser/components/key-list/styles.module.scss
+++ b/redisinsight/ui/src/pages/browser/components/key-list/styles.module.scss
@@ -1,6 +1,7 @@
.page {
height: 100%;
overflow: hidden;
+ padding-right: 1px;
}
.tooltip {
@@ -11,29 +12,20 @@
width: 100%;
height: 100%;
background-color: var(--euiColorEmptyShade);
- border-top: 1px solid var(--euiColorLightShade);
}
.table {
height: calc(100% - 48px);
- border: 1px solid var(--euiColorLightShade);
- border-bottom: none;
+
+ &__withoutFooter {
+ height: calc(100% - 50px) !important;
+ }
}
:global(.show-cli) .table {
border-bottom: 1px solid var(--euiColorLightShade);
}
-.header {
- height: 48px;
- padding-left: 8px;
- border-left: 1px solid var(--euiColorLightShade);
- border-right: 1px solid var(--euiColorLightShade);
- display: flex;
- align-items: center;
- position: relative;
-}
-
.filter {
display: inline-block;
width: 100px;
@@ -42,18 +34,6 @@
background-color: var(--tableLightestBorderColor);
}
-.refresh {
- right: 18px;
- position: absolute;
-}
-
-.btnRefresh {
- svg {
- width: 20px;
- height: 20px;
- }
-}
-
.action {
opacity: 0;
transition: opacity 250ms ease-in-out;
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
new file mode 100644
index 0000000000..aff47e317e
--- /dev/null
+++ b/redisinsight/ui/src/pages/browser/components/key-tree/KeyTree.spec.tsx
@@ -0,0 +1,136 @@
+import { cloneDeep } from 'lodash'
+import React from 'react'
+import {
+ cleanup,
+ clearStoreActions,
+ fireEvent,
+ mockedStore,
+ render,
+ screen,
+} from 'uiSrc/utils/test-utils'
+import { setSearchMatch } from 'uiSrc/slices/keys'
+import { IKeyListPropTypes } from 'uiSrc/constants/prop-types/keys'
+import { mockVirtualTreeResult } from 'uiSrc/components/virtual-tree/VirtualTree.spec'
+import { setBrowserTreeNodesOpen, setBrowserTreeSelectedLeaf } from 'uiSrc/slices/app/context'
+import KeyTree from './KeyTree'
+
+let store: typeof mockedStore
+beforeEach(() => {
+ cleanup()
+ store = cloneDeep(mockedStore)
+ store.clearActions()
+})
+
+const propsMock = {
+ keysState: {
+ keys: [
+ {
+ name: 'key1',
+ type: 'hash',
+ ttl: -1,
+ size: 100,
+ length: 100,
+ },
+ {
+ name: 'key2',
+ type: 'hash',
+ ttl: -1,
+ size: 150,
+ length: 100,
+ },
+ {
+ name: 'key3',
+ type: 'hash',
+ ttl: -1,
+ size: 110,
+ length: 100,
+ },
+ ],
+ nextCursor: '0',
+ total: 3,
+ } as IKeyListPropTypes,
+ loading: false,
+ selectKey: jest.fn(),
+}
+
+const mockLeafKeys = {
+ test: { name: 'test', type: 'hash', ttl: -1, size: 9849176 }
+}
+
+const mockWebWorkerResult = [{
+ children: [{
+ children: [],
+ fullName: 'car:110:',
+ id: '0.snc1rc3zwgo',
+ keyApproximate: 0.01,
+ keyCount: 1,
+ name: '110',
+ }],
+ fullName: 'car:',
+ id: '0.sz1ie1koqi8',
+ keyApproximate: 47.18,
+ keyCount: 4718,
+ name: 'car',
+},
+{
+ children: [],
+ fullName: 'test',
+ id: '0.snc1rc3zwg1o',
+ keyApproximate: 0.01,
+ keyCount: 1,
+ name: 'test',
+ keys: mockLeafKeys
+}]
+
+jest.mock('uiSrc/services', () => ({
+ ...jest.requireActual('uiSrc/services'),
+ useDisposableWebworker: () => ({ result: mockWebWorkerResult, run: jest.fn() }),
+}))
+
+describe('KeyTree', () => {
+ it('Key tree separator should be in the document', () => {
+ render(
)
+
+ expect(screen.getByTestId('select-tree-view-separator')).toBeInTheDocument()
+ })
+
+ it('Tree view panel should be in the document', () => {
+ const { container } = render(
)
+
+ expect(container.querySelector('[data-test-subj="tree-view-panel"]')).toBeInTheDocument()
+ })
+
+ it('Key list panel should be in the document', () => {
+ const { container } = render(
)
+
+ expect(container.querySelector('[data-test-subj="key-list-panel"]')).toBeInTheDocument()
+ })
+
+ it.only('"setBrowserTreeNodesOpen" should be called for Open a node', () => {
+ render(
)
+
+ fireEvent.click(screen.getByTestId(mockVirtualTreeResult?.[0]?.fullName))
+
+ const expectedActions = [setBrowserTreeSelectedLeaf({}), setBrowserTreeNodesOpen({})]
+
+ expect(clearStoreActions(store.getActions())).toEqual(
+ clearStoreActions(expectedActions)
+ )
+ })
+
+ it.skip('"setSearchMatch" should be called after "onChange"', () => {
+ const searchTerm = 'a'
+
+ render(
)
+
+ fireEvent.change(screen.getByTestId('search-key'), {
+ target: { value: searchTerm },
+ })
+
+ const expectedActions = [setSearchMatch(searchTerm)]
+
+ expect(clearStoreActions(store.getActions())).toEqual(
+ clearStoreActions(expectedActions)
+ )
+ })
+})
diff --git a/redisinsight/ui/src/pages/browser/components/key-tree/KeyTree.tsx b/redisinsight/ui/src/pages/browser/components/key-tree/KeyTree.tsx
new file mode 100644
index 0000000000..9cc5a1a7aa
--- /dev/null
+++ b/redisinsight/ui/src/pages/browser/components/key-tree/KeyTree.tsx
@@ -0,0 +1,187 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import cx from 'classnames'
+import { EuiResizableContainer, EuiSuperSelect, EuiSuperSelectOption } from '@elastic/eui'
+import { useDispatch, useSelector } from 'react-redux'
+
+import {
+ appContextBrowserTree,
+ setBrowserTreeNodesOpen,
+ setBrowserTreeSelectedLeaf
+} from 'uiSrc/slices/app/context'
+import { constructKeysToTree } from 'uiSrc/helpers'
+import VirtualTree from 'uiSrc/components/virtual-tree'
+import { DEFAULT_SEPARATOR } from 'uiSrc/constants'
+import { IKeyListPropTypes, } from 'uiSrc/constants/prop-types/keys'
+import TreeViewSVG from 'uiSrc/assets/img/icons/treeview.svg'
+
+import KeyList from '../key-list/KeyList'
+import styles from './styles.module.scss'
+
+export interface Props {
+ keysState: IKeyListPropTypes
+ loading: boolean
+ selectKey: ({ rowData }: { rowData: any }) => void
+}
+
+export const firstPanelId = 'tree'
+export const secondPanelId = 'keys'
+
+const KeyTree = (props: Props) => {
+ const { selectKey, loading, keysState } = props
+
+ const firstPanelId = 'tree'
+ const secondPanelId = 'keys'
+
+ const { panelSizes, openNodes, selectedLeaf } = useSelector(appContextBrowserTree)
+
+ const [statusSelected, setStatusSelected] = useState(selectedLeaf)
+ const [statusOpen, setStatusOpen] = useState(openNodes)
+ const [sizes, setSizes] = useState(panelSizes)
+ const [separator, setSeparator] = useState
(DEFAULT_SEPARATOR)
+ const [keyListState, setKeyListState] = useState(keysState)
+ const [constructingTree, setConstructingTree] = useState(false)
+
+ const dispatch = useDispatch()
+
+ useEffect(() => {
+ updateKeysList()
+ }, [])
+
+ useEffect(() => {
+ setStatusOpen(openNodes)
+ }, [openNodes])
+
+ useEffect(() => {
+ if (selectedLeaf) {
+ setStatusSelected(selectedLeaf)
+ updateKeysList(Object.values(selectedLeaf)[0])
+ }
+ }, [selectedLeaf])
+
+ const options: EuiSuperSelectOption[] = [{
+ value: DEFAULT_SEPARATOR,
+ inputDisplay: DEFAULT_SEPARATOR,
+ 'data-test-subj': 'separator-colon',
+ }]
+
+ const updateKeysList = (items:any = {}) => {
+ const newState:IKeyListPropTypes = {
+ ...keyListState,
+ keys: Object.values(items)
+ }
+
+ setKeyListState(newState)
+ }
+
+ const onPanelWidthChange = useCallback((newSizes: any) => {
+ setSizes((prevSizes: any) => ({
+ ...prevSizes,
+ ...newSizes,
+ }))
+ }, [])
+
+ const onChangeSeparator = (initValue: string) => {
+ setSeparator(initValue)
+ }
+
+ const handleStatusOpen = (name: string, value:boolean) => {
+ setStatusOpen((prevState) => {
+ const newState = { ...prevState }
+
+ // add or remove opened node
+ if (newState[name]) {
+ delete newState[name]
+ } else {
+ newState[name] = value
+ }
+
+ dispatch(setBrowserTreeNodesOpen(newState))
+ return newState
+ })
+ }
+
+ const handleStatusSelected = (fullName: string, keys: any) => {
+ dispatch(setBrowserTreeSelectedLeaf({ [fullName]: keys }))
+ }
+
+ return (
+
+
+
+
+ {(EuiResizablePanel, EuiResizableButton) => (
+ <>
+
+
+ onChangeSeparator(value)}
+ data-testid="select-tree-view-separator"
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+ {viewTypes.map((view) => (
+
+ handleSwitchView(view.type)}
+ data-testid={view.dataTestId}
+ />
+
+ ))}
+
+
+ )
+
+ const RefreshBtn = (
+
+ {showRefreshLabel && (
+
+ Last refresh:
+
+ {` ${lastRefreshMessage}`}
+
+
+ )}
+
+
+
+
+
+ )
+
+ return (
+
+
+
+
+ {ViewSwitch}
+ {AddKeyBtn}
+
+
+
+
+ {RefreshBtn}
+
+