diff --git a/redisinsight/ui/src/pages/databaseAnalysis/components/top-namespace/TopNamespace.spec.tsx b/redisinsight/ui/src/pages/databaseAnalysis/components/top-namespace/TopNamespace.spec.tsx index a6398b7fb5..9a8a0c1c14 100644 --- a/redisinsight/ui/src/pages/databaseAnalysis/components/top-namespace/TopNamespace.spec.tsx +++ b/redisinsight/ui/src/pages/databaseAnalysis/components/top-namespace/TopNamespace.spec.tsx @@ -1,11 +1,23 @@ +import { cloneDeep } from 'lodash' import React from 'react' +import reactRouterDom from 'react-router-dom' import { instance, mock } from 'ts-mockito' -import { fireEvent, render, screen } from 'uiSrc/utils/test-utils' +import { resetBrowserTree } from 'uiSrc/slices/app/context' +import { changeKeyViewType } from 'uiSrc/slices/browser/keys' +import { KeyViewType } from 'uiSrc/slices/interfaces/keys' +import { act, cleanup, fireEvent, mockedStore, render, screen } from 'uiSrc/utils/test-utils' import TopNamespace, { Props } from './TopNamespace' const mockedProps = mock() +let store: typeof mockedStore +beforeEach(() => { + cleanup() + store = cloneDeep(mockedStore) + store.clearActions() +}) + describe('TopNamespace', () => { it('should render', () => { expect(render()).toBeTruthy() @@ -125,4 +137,35 @@ describe('TopNamespace', () => { expect(queryByTestId('nsp-table-keys')).not.toBeInTheDocument() expect(queryByTestId('table-loader')).toBeInTheDocument() }) + + it('should render message when no namespaces', () => { + const mockedData = { + topKeysNsp: [], + topMemoryNsp: [] + } + render() + + expect(screen.queryByTestId('top-namespaces-empty')).toBeInTheDocument() + }) + + it('should call proper actions and push history after click tree view link', async () => { + const mockedData = { + topKeysNsp: [], + topMemoryNsp: [] + } + const pushMock = jest.fn() + reactRouterDom.useHistory = jest.fn().mockReturnValue({ push: pushMock }) + + render() + + await act(() => { + fireEvent.click(screen.getByTestId('tree-view-page-link')) + }) + + const expectedActions = [resetBrowserTree(), changeKeyViewType(KeyViewType.Tree)] + + expect(store.getActions()).toEqual(expectedActions) + expect(pushMock).toHaveBeenCalledTimes(1) + expect(pushMock).toHaveBeenCalledWith('/instanceId/browser') + }) }) diff --git a/redisinsight/ui/src/pages/databaseAnalysis/components/top-namespace/TopNamespace.tsx b/redisinsight/ui/src/pages/databaseAnalysis/components/top-namespace/TopNamespace.tsx index 8cc7a770a9..6a81b97985 100644 --- a/redisinsight/ui/src/pages/databaseAnalysis/components/top-namespace/TopNamespace.tsx +++ b/redisinsight/ui/src/pages/databaseAnalysis/components/top-namespace/TopNamespace.tsx @@ -1,8 +1,14 @@ -import { EuiButton, EuiSwitch, EuiTitle } from '@elastic/eui' +import { EuiButton, EuiLink, EuiSwitch, EuiTitle } from '@elastic/eui' import cx from 'classnames' import React, { useEffect, useState } from 'react' +import { useDispatch } from 'react-redux' +import { useHistory, useParams } from 'react-router-dom' +import { Pages } from 'uiSrc/constants' import { DEFAULT_EXTRAPOLATION, SectionName, TableView } from 'uiSrc/pages/databaseAnalysis' import { TableLoader } from 'uiSrc/pages/databaseAnalysis/components' +import { resetBrowserTree } from 'uiSrc/slices/app/context' +import { changeKeyViewType } from 'uiSrc/slices/browser/keys' +import { KeyViewType } from 'uiSrc/slices/interfaces/keys' import { Nullable } from 'uiSrc/utils' import { DatabaseAnalysis } from 'apiSrc/modules/database-analysis/models' import Table from './Table' @@ -20,6 +26,10 @@ const TopNamespace = (props: Props) => { const [tableView, setTableView] = useState(TableView.MEMORY) const [isExtrapolated, setIsExtrapolated] = useState(true) + const { instanceId } = useParams<{ instanceId: string }>() + const history = useHistory() + const dispatch = useDispatch() + useEffect(() => { setIsExtrapolated(extrapolation !== DEFAULT_EXTRAPOLATION) }, [data, extrapolation]) @@ -28,8 +38,42 @@ const TopNamespace = (props: Props) => { return } + const handleTreeViewClick = (e: React.MouseEvent) => { + e.preventDefault() + + dispatch(resetBrowserTree()) + dispatch(changeKeyViewType(KeyViewType.Tree)) + history.push(Pages.browser(instanceId)) + } + if (!data?.topMemoryNsp?.length && !data?.topKeysNsp?.length) { - return null + return ( +
+
+ +

TOP NAMESPACES

+
+
+
+
+ + No namespaces to display + +

+ {'Configure the delimiter in '} + + Tree View + + {' to customize the namespaces displayed.'} +

+
+
+
+ ) } return ( diff --git a/redisinsight/ui/src/pages/databaseAnalysis/components/top-namespace/styles.module.scss b/redisinsight/ui/src/pages/databaseAnalysis/components/top-namespace/styles.module.scss index 651510eb1c..9775dd7699 100644 --- a/redisinsight/ui/src/pages/databaseAnalysis/components/top-namespace/styles.module.scss +++ b/redisinsight/ui/src/pages/databaseAnalysis/components/top-namespace/styles.module.scss @@ -35,6 +35,19 @@ opacity: 1; } } + + .noNamespaceMsg { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + margin: 80px auto 100px; + + :global(.euiTitle) { + font-size: 18px; + margin-bottom: 10px; + } + } } .wrapper {