Merge pull request #1316 from RedisInsight/feature/RI-3699_memory_analisis_tooltip

#RI-3699-memory analisis tooltip

Author: AlenaSY

redisinsight/ui/src/pages/databaseAnalysis/components/header/Header.spec.tsx

@@ -1,16 +1,20 @@
 import React from 'react'
 import { cloneDeep } from 'lodash'
+import { useSelector } from 'react-redux'
 import { instance, mock } from 'ts-mockito'
 import { getDBAnalysis } from 'uiSrc/slices/analytics/dbAnalysis'
+import { RootState } from 'uiSrc/slices/store'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { INSTANCE_ID_MOCK } from 'uiSrc/mocks/handlers/analytics/clusterDetailsHandlers'
 
 import {
+  act,
   cleanup,
   mockedStore,
   fireEvent,
   render,
   screen,
+  waitForEuiToolTipVisible,
 } from 'uiSrc/utils/test-utils'
 
 import Header, { Props } from './Header'
@@ -41,7 +45,33 @@ jest.mock('uiSrc/telemetry', () => ({
   sendEventTelemetry: jest.fn(),
 }))
 
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}))
+
+const connectType = (state: any, connectionType: any) => {
+  (useSelector as jest.Mock).mockImplementation((callback: (arg0: RootState) => RootState) => callback({
+    ...state,
+    connections: {
+      ...state.connections,
+      instances: {
+        ...state.connections.instances,
+        connectedInstance: {
+          ...state.connections.instances.connectedInstance,
+          connectionType,
+        }
+      }
+    },
+  }))
+}
+
 describe('DatabaseAnalysisHeader', () => {
+  beforeEach(() => {
+    const state: any = store.getState()
+    connectType(state, 'STANDALONE')
+  })
+
   it('should render', () => {
     expect(render(<Header {...instance(mockedProps)} />)).toBeTruthy()
   })
@@ -101,3 +131,57 @@ describe('DatabaseAnalysisHeader', () => {
     expect(onChangeSelectedAnalysis).toBeCalled()
   })
 })
+
+describe('CLUSTER db', () => {
+  beforeEach(() => {
+    const state: any = store.getState()
+    connectType(state, 'CLUSTER')
+  })
+
+  it('should render cluster tooltip message', async () => {
+    render(<Header {...instance(mockedProps)} />)
+
+    await act(async () => {
+      fireEvent.mouseOver(screen.getByTestId('db-new-reports-icon'))
+    })
+    await waitForEuiToolTipVisible()
+
+    expect(screen.getByTestId('db-new-reports-tooltip')).toHaveTextContent('Analyze up to 10 000 keys per shard to get an overview of your data.')
+  })
+})
+
+describe('STANDALONE db', () => {
+  beforeEach(() => {
+    const state: any = store.getState()
+    connectType(state, 'STANDALONE')
+  })
+
+  it('should render default tooltip message', async () => {
+    render(<Header {...instance(mockedProps)} />)
+
+    await act(async () => {
+      fireEvent.mouseOver(screen.getByTestId('db-new-reports-icon'))
+    })
+    await waitForEuiToolTipVisible()
+
+    expect(screen.getByTestId('db-new-reports-tooltip')).toHaveTextContent('Redis Database AnalysisAnalyze up to 10 000 keys per Redis database to get an overview of your data.')
+  })
+})
+
+describe('SENTINEL db', () => {
+  beforeEach(() => {
+    const state: any = store.getState()
+    connectType(state, 'SENTINEL')
+  })
+
+  it('should render default tooltip message', async () => {
+    render(<Header {...instance(mockedProps)} />)
+
+    await act(async () => {
+      fireEvent.mouseOver(screen.getByTestId('db-new-reports-icon'))
+    })
+    await waitForEuiToolTipVisible()
+
+    expect(screen.getByTestId('db-new-reports-tooltip')).toHaveTextContent('Redis Database AnalysisAnalyze up to 10 000 keys per Redis database to get an overview of your data.')
+  })
+})

redisinsight/ui/src/pages/databaseAnalysis/components/header/Header.tsx

@@ -20,6 +20,8 @@ import { numberWithSpaces } from 'uiSrc/utils/numbers'
 import { getApproximatePercentage } from 'uiSrc/utils/validations'
 import { BrowserStorageItem, DEFAULT_DELIMITER } from 'uiSrc/constants'
 import { appContextBrowserTree } from 'uiSrc/slices/app/context'
+import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
+import { ConnectionType } from 'uiSrc/slices/interfaces'
 import AnalyticsTabs from 'uiSrc/components/analytics-tabs'
 import { Nullable } from 'uiSrc/utils'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
@@ -30,6 +32,9 @@ import styles from './styles.module.scss'
 
 const dateFormat = 'd MMM yyyy HH:mm'
 
+const commonTooltipMessage = 'Analyze up to 10 000 keys per Redis database to get an overview of your data.'
+const clusterTooltipMessage = 'Analyze up to 10 000 keys per shard to get an overview of your data.'
+
 export interface Props {
   items: ShortDatabaseAnalysis[]
   selectedValue: Nullable<string>
@@ -47,6 +52,7 @@ const Header = (props: Props) => {
     analysisLoading
   } = props
 
+  const { connectionType } = useSelector(connectedInstanceSelector)
   const { instanceId } = useParams<{ instanceId: string }>()
   const dispatch = useDispatch()
 
@@ -149,8 +155,9 @@ const Header = (props: Props) => {
                 position="bottom"
                 anchorClassName={styles.tooltipAnchor}
                 className={styles.tooltip}
-                title="Memory Efficiency"
-                content="Analyze up to 10K keys in your Redis database to get an overview of your data and memory efficiency recommendations."
+                title="Redis Database Analysis"
+                content={connectionType === ConnectionType.Cluster ? clusterTooltipMessage : commonTooltipMessage}
+                data-testid="db-new-reports-tooltip"
               >
                 <EuiIcon
                   className={styles.infoIcon}