#RI-3678 - display message when no namespaces

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<Props>()
 
+let store: typeof mockedStore
+beforeEach(() => {
+  cleanup()
+  store = cloneDeep(mockedStore)
+  store.clearActions()
+})
+
 describe('TopNamespace', () => {
   it('should render', () => {
     expect(render(<TopNamespace {...instance(mockedProps)} />)).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(<TopNamespace {...instance(mockedProps)} data={mockedData} />)
+
+    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(<TopNamespace {...instance(mockedProps)} data={mockedData} />)
+
+    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')
+  })
 })

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>(TableView.MEMORY)
   const [isExtrapolated, setIsExtrapolated] = useState<boolean>(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 <TableLoader />
   }
 
+  const handleTreeViewClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault()
+
+    dispatch(resetBrowserTree())
+    dispatch(changeKeyViewType(KeyViewType.Tree))
+    history.push(Pages.browser(instanceId))
+  }
+
   if (!data?.topMemoryNsp?.length && !data?.topKeysNsp?.length) {
-    return null
+    return (
+      <div className={cx('section', styles.wrapper)} data-testid="top-namespaces-empty">
+        <div className="section-title-wrapper">
+          <EuiTitle className="section-title">
+            <h4>TOP NAMESPACES</h4>
+          </EuiTitle>
+        </div>
+        <div className="section-content">
+          <div className={styles.noNamespaceMsg}>
+            <EuiTitle size="xs">
+              <span>No namespaces to display</span>
+            </EuiTitle>
+            <p>
+              {'Configure the delimiter in '}
+              <EuiLink
+                color="text"
+                onClick={handleTreeViewClick}
+                data-testid="tree-view-page-link"
+              >
+                Tree View
+              </EuiLink>
+              {' to customize the namespaces displayed.'}
+            </p>
+          </div>
+        </div>
+      </div>
+    )
   }
 
   return (

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 {