#RI-4070 - Add FT.INFO index for onboarding

Author: rsergeenko

redisinsight/ui/src/components/code-block/CodeBlock.spec.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { render, screen, fireEvent } from 'uiSrc/utils/test-utils'
+
+import CodeBlock from './CodeBlock'
+
+const originalClipboard = { ...global.navigator.clipboard }
+describe('CodeBlock', () => {
+  beforeEach(() => {
+    // @ts-ignore
+    global.navigator.clipboard = {
+      writeText: jest.fn(),
+    }
+  })
+
+  afterEach(() => {
+    jest.resetAllMocks()
+    // @ts-ignore
+    global.navigator.clipboard = originalClipboard
+  })
+
+  it('should render', () => {
+    expect(render(<CodeBlock>text</CodeBlock>)).toBeTruthy()
+  })
+
+  it('should render proper content', () => {
+    render(<CodeBlock data-testid="code">text</CodeBlock>)
+    expect(screen.getByTestId('code')).toHaveTextContent('text')
+  })
+
+  it('should not render copy button by default', () => {
+    render(<CodeBlock data-testid="code">text</CodeBlock>)
+    expect(screen.queryByTestId('copy-code-btn')).not.toBeInTheDocument()
+  })
+
+  it('should copy proper text', () => {
+    render(<CodeBlock data-testid="code" isCopyable>text</CodeBlock>)
+    fireEvent.click(screen.getByTestId('copy-code-btn'))
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith('text')
+  })
+
+  it('should copy proper text when children is ReactNode', () => {
+    render(<CodeBlock data-testid="code" isCopyable><span>text2</span></CodeBlock>)
+    fireEvent.click(screen.getByTestId('copy-code-btn'))
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith('text2')
+  })
+})

redisinsight/ui/src/components/code-block/CodeBlock.tsx

@@ -0,0 +1,42 @@
+import React, { HTMLAttributes, useMemo } from 'react'
+import cx from 'classnames'
+import { EuiButtonIcon, useInnerText } from '@elastic/eui'
+
+import styles from './styles.module.scss'
+
+export interface Props extends HTMLAttributes<HTMLPreElement> {
+  children: React.ReactNode
+  className?: string
+  isCopyable?: boolean
+}
+
+const CodeBlock = (props: Props) => {
+  const { isCopyable, className, children, ...rest } = props
+  const [innerTextRef, innerTextString] = useInnerText('')
+
+  const innerText = useMemo(
+    () => innerTextString?.replace(/[\r\n?]{2}|\n\n/g, '\n') || '',
+    [innerTextString]
+  )
+
+  const handleCopyClick = () => {
+    navigator?.clipboard?.writeText(innerText)
+  }
+
+  return (
+    <div className={cx(styles.wrapper, { [styles.isCopyable]: isCopyable })}>
+      <pre className={cx(styles.pre, className)} ref={innerTextRef} {...rest}>{children}</pre>
+      {isCopyable && (
+        <EuiButtonIcon
+          onClick={handleCopyClick}
+          className={styles.copyBtn}
+          iconType="copy"
+          data-testid="copy-code-btn"
+          aria-label="copy code"
+        />
+      )}
+    </div>
+  )
+}
+
+export default CodeBlock

redisinsight/ui/src/components/code-block/index.ts

@@ -0,0 +1,3 @@
+import CodeBlock from './CodeBlock'
+
+export default CodeBlock

redisinsight/ui/src/components/code-block/styles.module.scss

@@ -0,0 +1,19 @@
+.wrapper {
+  position: relative;
+
+  &.isCopyable {
+    .pre {
+      padding: 8px 30px 8px 16px !important;
+    }
+  }
+
+  .pre {
+    padding: 8px 16px !important;
+  }
+
+  .copyBtn {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+  }
+}

redisinsight/ui/src/components/index.ts

@@ -21,6 +21,7 @@ import PagePlaceholder from './page-placeholder'
 import BulkActionsConfig from './bulk-actions-config'
 import ImportDatabasesDialog from './import-databases-dialog'
 import OnboardingTour from './onboarding-tour'
+import CodeBlock from './code-block'
 
 export {
   NavigationMenu,
@@ -48,5 +49,6 @@ export {
   PagePlaceholder,
   BulkActionsConfig,
   ImportDatabasesDialog,
-  OnboardingTour
+  OnboardingTour,
+  CodeBlock,
 }

redisinsight/ui/src/components/onboarding-features/OnboardingFeatures.spec.tsx

@@ -15,6 +15,9 @@ import { Pages } from 'uiSrc/constants'
 import { setWorkbenchEAMinimized } from 'uiSrc/slices/app/context'
 import { dbAnalysisSelector, setDatabaseAnalysisViewTab } from 'uiSrc/slices/analytics/dbAnalysis'
 import { DatabaseAnalysisViewTab } from 'uiSrc/slices/interfaces/analytics'
+import { fetchRedisearchListAction, loadList } from 'uiSrc/slices/browser/redisearch'
+import { stringToBuffer } from 'uiSrc/utils'
+import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
 import { ONBOARDING_FEATURES } from './OnboardingFeatures'
 
 jest.mock('uiSrc/slices/app/features', () => ({
@@ -33,6 +36,12 @@ jest.mock('uiSrc/slices/browser/keys', () => ({
   })
 }))
 
+jest.mock('uiSrc/slices/browser/redisearch', () => ({
+  ...jest.requireActual('uiSrc/slices/browser/redisearch'),
+  fetchRedisearchListAction: jest.fn()
+    .mockImplementation(jest.requireActual('uiSrc/slices/browser/redisearch').fetchRedisearchListAction)
+}))
+
 jest.mock('uiSrc/slices/analytics/dbAnalysis', () => ({
   ...jest.requireActual('uiSrc/slices/analytics/dbAnalysis'),
   dbAnalysisSelector: jest.fn().mockReturnValue({
@@ -341,12 +350,40 @@ describe('ONBOARDING_FEATURES', () => {
       checkAllTelemetryButtons(OnboardingStepName.WorkbenchIntro, sendEventTelemetry as jest.Mock)
     })
 
+    it('should call proper actions on mount', () => {
+      render(<OnboardingTour options={ONBOARDING_FEATURES.WORKBENCH_PAGE}><span /></OnboardingTour>)
+
+      const expectedActions = [loadList()]
+      expect(clearStoreActions(store.getActions())).toEqual(clearStoreActions(expectedActions))
+    })
+
+    it('should render FT.INFO when there are indexes in database', () => {
+      const fetchRedisearchListActionMock = (onSuccess?: (indexes: RedisResponseBuffer[]) => void) =>
+        jest.fn().mockImplementation(() => onSuccess?.([stringToBuffer('someIndex')]));
+
+      (fetchRedisearchListAction as jest.Mock).mockImplementation(fetchRedisearchListActionMock)
+      render(<OnboardingTour options={ONBOARDING_FEATURES.WORKBENCH_PAGE}><span /></OnboardingTour>)
+
+      expect(screen.getByTestId('wb-onboarding-command')).toHaveTextContent('FT.INFO someIndex')
+    })
+
+    it('should render CLIENT LIST when there are no indexes in database', () => {
+      const fetchRedisearchListActionMock = (onSuccess?: (indexes: RedisResponseBuffer[]) => void) =>
+        jest.fn().mockImplementation(() => onSuccess?.([]));
+
+      (fetchRedisearchListAction as jest.Mock).mockImplementation(fetchRedisearchListActionMock)
+      render(<OnboardingTour options={ONBOARDING_FEATURES.WORKBENCH_PAGE}><span /></OnboardingTour>)
+
+      expect(screen.getByTestId('wb-onboarding-command')).toHaveTextContent('CLIENT LIST')
+    })
+
     it('should call proper actions on back', () => {
       render(<OnboardingTour options={ONBOARDING_FEATURES.WORKBENCH_PAGE}><span /></OnboardingTour>)
       fireEvent.click(screen.getByTestId('back-btn'))
 
       const expectedActions = [showMonitor(), setOnboardPrevStep()]
-      expect(clearStoreActions(store.getActions())).toEqual(clearStoreActions(expectedActions))
+      expect(clearStoreActions(store.getActions().slice(-2)))
+        .toEqual(clearStoreActions(expectedActions))
     })
 
     it('should properly push history on back', () => {

redisinsight/ui/src/components/onboarding-features/OnboardingFeatures.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 import { EuiIcon, EuiSpacer } from '@elastic/eui'
-import { partialRight } from 'lodash'
+import { isString, partialRight } from 'lodash'
 import { keysDataSelector } from 'uiSrc/slices/browser/keys'
 import { openCli, openCliHelper, resetCliHelperSettings, resetCliSettings } from 'uiSrc/slices/cli/cli-settings'
 import { setMonitorInitialState, showMonitor } from 'uiSrc/slices/cli/monitor'
@@ -17,6 +17,9 @@ import OnboardingEmoji from 'uiSrc/assets/img/onboarding-emoji.svg'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { OnboardingStepName, OnboardingSteps } from 'uiSrc/constants/onboarding'
 
+import { fetchRedisearchListAction } from 'uiSrc/slices/browser/redisearch'
+import { bufferToString, Nullable } from 'uiSrc/utils'
+import { CodeBlock } from 'uiSrc/components'
 import styles from './styles.module.scss'
 
 const sendTelemetry = (databaseId: string, step: string, action: string) => sendEventTelemetry({
@@ -185,11 +188,22 @@ const ONBOARDING_FEATURES = {
     title: 'Try Workbench!',
     Inner: () => {
       const { id: connectedInstanceId = '' } = useSelector(connectedInstanceSelector)
+      const [firstIndex, setFirstIndex] = useState<Nullable<string>>(null)
 
       const dispatch = useDispatch()
       const history = useHistory()
       const telemetryArgs: TelemetryArgs = [connectedInstanceId, OnboardingStepName.WorkbenchIntro]
 
+      useEffect(() => {
+        dispatch(fetchRedisearchListAction(
+          (indexes) => {
+            setFirstIndex(indexes?.length ? bufferToString(indexes[0]) : '')
+          },
+          undefined,
+          false
+        ))
+      }, [])
+
       return {
         content: (
           <>
@@ -201,10 +215,36 @@ const ONBOARDING_FEATURES = {
             models such as documents, graphs, and time series.
             Or you <a href="https://github.com/RedisInsight/Packages" target="_blank" rel="noreferrer">can build your own visualization</a>.
 
-            <EuiSpacer size="s" />
-            Run this command to see information and statistics about client connections:
-            <EuiSpacer size="xs" />
-            <pre className={styles.pre}>CLIENT LIST</pre>
+            {isString(firstIndex) && (
+              <>
+                <EuiSpacer size="s" />
+                {firstIndex ? (
+                  <>
+                    Run this command to see information and statistics on your index:
+                    <EuiSpacer size="xs" />
+                    <CodeBlock
+                      isCopyable
+                      className={styles.pre}
+                      data-testid="wb-onboarding-command"
+                    >
+                      FT.INFO {firstIndex}
+                    </CodeBlock>
+                  </>
+                ) : (
+                  <>
+                    Run this command to see information and statistics about client connections:
+                    <EuiSpacer size="xs" />
+                    <CodeBlock
+                      isCopyable
+                      className={styles.pre}
+                      data-testid="wb-onboarding-command"
+                    >
+                      CLIENT LIST
+                    </CodeBlock>
+                  </>
+                )}
+              </>
+            )}
           </>
         ),
         onSkip: () => sendClosedTelemetryEvent(...telemetryArgs),

redisinsight/ui/src/components/onboarding-features/styles.module.scss

@@ -1,4 +1,12 @@
+@import '@elastic/eui/src/global_styling/mixins/helpers';
+@import '@elastic/eui/src/components/table/mixins';
+@import '@elastic/eui/src/global_styling/index';
+
 .pre {
-  padding: 8px 16px !important;
   background-color: var(--commandGroupBadgeColor) !important;
+  word-wrap: break-word;
+
+  max-height: 240px;
+  overflow-y: auto;
+  @include euiScrollBar;
 }