Merge pull request #1179 from RedisInsight/fe/feature/RI-3493_Change_wording_no_keys

#RI-3493 - Change wording when there are no keys

Author: egor-zalenski

redisinsight/ui/src/constants/texts.tsx

@@ -1,8 +1,24 @@
 import React from 'react'
-import { EuiText, EuiSpacer } from '@elastic/eui'
+import { EuiText, EuiSpacer, EuiLink } from '@elastic/eui'
+
+import { getRouterLinkProps } from 'uiSrc/services'
 
 export const NoResultsFoundText = (<EuiText size="m">No results found.</EuiText>)
-export const NoKeysToDisplayText = (<EuiText size="m">No keys to display.</EuiText>)
+export const NoKeysToDisplayText = (path: string, onClick: ()=> void) => (
+  <EuiText size="m">
+    No keys to display.
+    <br />
+    <EuiLink
+      {...getRouterLinkProps(path, onClick)}
+      color="text"
+      data-test-subj="pubsub-page-btn"
+    >
+      Use Workbench Guides and Tutorials
+    </EuiLink>
+    {' to quickly load the data.'}
+  </EuiText>
+)
+
 export const FullScanNoResultsFoundText = (
   <>
     <EuiText size="m" data-test-subj="no-result-found">No results found.</EuiText>

redisinsight/ui/src/pages/browser/components/key-list/KeyList.tsx

@@ -1,6 +1,7 @@
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react'
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import cx from 'classnames'
+import { useParams } from 'react-router-dom'
 
 import {
   EuiText,
@@ -39,8 +40,9 @@ import { SCAN_COUNT_DEFAULT } from 'uiSrc/constants/api'
 import { KeysStoreData, KeyViewType } from 'uiSrc/slices/interfaces/keys'
 import VirtualTable from 'uiSrc/components/virtual-table/VirtualTable'
 import { ITableColumn } from 'uiSrc/components/virtual-table/interfaces'
-import { OVER_RENDER_BUFFER_COUNT, TableCellAlignment, TableCellTextAlignment } from 'uiSrc/constants'
+import { OVER_RENDER_BUFFER_COUNT, Pages, TableCellAlignment, TableCellTextAlignment } from 'uiSrc/constants'
 import { IKeyPropTypes } from 'uiSrc/constants/prop-types/keys'
+import { getBasedOnViewTypeEvent, sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 
 import { GetKeyInfoResponse } from 'apiSrc/modules/browser/dto'
 import styles from './styles.module.scss'
@@ -61,6 +63,8 @@ const KeyList = forwardRef((props: Props, ref) => {
   let wheelTimer = 0
   const { selectKey, loadMoreItems, loading, keysState, hideFooter } = props
 
+  const { instanceId = '' } = useParams<{ instanceId: string }>()
+
   const { data: selectedKey } = useSelector(selectedKeySelector)
   const { total, nextCursor, previousResultCount } = useSelector(keysDataSelector)
   const { isSearched, isFiltered, viewType } = useSelector(keysSelector)
@@ -99,14 +103,30 @@ const KeyList = forwardRef((props: Props, ref) => {
     setItems(newKeys)
   }, [keysState.keys])
 
+  const onNoKeysLinkClick = () => {
+    sendEventTelemetry({
+      event: getBasedOnViewTypeEvent(
+        viewType,
+        TelemetryEvent.BROWSER_WORKBENCH_LINK_CLICKED,
+        TelemetryEvent.TREE_VIEW_WORKBENCH_LINK_CLICKED
+      ),
+      eventData: {
+        databaseId: instanceId,
+      }
+    })
+  }
+
   const getNoItemsMessage = () => {
+    if (total === 0) {
+      return NoKeysToDisplayText(Pages.workbench(instanceId), onNoKeysLinkClick)
+    }
     if (isSearched) {
       return keysState.scanned < total ? ScanNoResultsFoundText : FullScanNoResultsFoundText
     }
     if (isFiltered && keysState.scanned < total) {
       return ScanNoResultsFoundText
     }
-    return total ? NoResultsFoundText : NoKeysToDisplayText
+    return NoResultsFoundText
   }
 
   const onLoadMoreItems = (props: { startIndex: number, stopIndex: number }) => {

redisinsight/ui/src/services/routing.ts

@@ -10,14 +10,16 @@ export const registerRouter = (reactRouter: any): any => {
   router = reactRouter
 }
 
-export const getRouterLinkProps = (to: any) => {
+export const getRouterLinkProps = (to: any, customOnClick?: () => void) => {
   const location = typeof to === 'string'
     ? createLocation(to, null, '', router?.history?.location)
     : to
 
   const href = router?.history?.createHref(location)
 
   const onClick = (event: any) => {
+    customOnClick?.()
+
     if (event.defaultPrevented) {
       return
     }

redisinsight/ui/src/telemetry/events.ts

@@ -67,6 +67,7 @@ export enum TelemetryEvent {
   BROWSER_KEY_FIELD_VALUE_EXPANDED = 'BROWSER_KEY_FIELD_VALUE_EXPANDED',
   BROWSER_KEY_FIELD_VALUE_COLLAPSED = 'BROWSER_KEY_FIELD_VALUE_COLLAPSED',
   BROWSER_KEY_DETAILS_FORMATTER_CHANGED = 'BROWSER_KEY_DETAILS_FORMATTER_CHANGED',
+  BROWSER_WORKBENCH_LINK_CLICKED = 'BROWSER_WORKBENCH_LINK_CLICKED',
 
   CLI_OPENED = 'CLI_OPENED',
   CLI_CLOSED = 'CLI_CLOSED',
@@ -148,6 +149,7 @@ export enum TelemetryEvent {
   TREE_VIEW_KEY_FIELD_VALUE_EXPANDED = 'TREE_VIEW_KEY_FIELD_VALUE_EXPANDED',
   TREE_VIEW_KEY_FIELD_VALUE_COLLAPSED = 'TREE_VIEW_KEY_FIELD_VALUE_COLLAPSED',
   TREE_VIEW_KEY_DETAILS_FORMATTER_CHANGED = 'TREE_VIEW_KEY_DETAILS_FORMATTER_CHANGED',
+  TREE_VIEW_WORKBENCH_LINK_CLICKED = 'TREE_VIEW_WORKBENCH_LINK_CLICKED',
 
   SLOWLOG_LOADED = 'SLOWLOG_LOADED',
   SLOWLOG_CLEARED = 'SLOWLOG_CLEARED',