#RI-6379 - refactor cli output (#4176)

* #RI-6379 - refactor cli output

* #RI-6379 - fix tests

Author: rsergeenko

redisinsight/ui/src/components/cli/CliWrapper.spec.tsx

@@ -1,6 +1,6 @@
 import { cloneDeep } from 'lodash'
 import React from 'react'
-import { InitOutputText } from 'uiSrc/constants/cliOutput'
+import { InitOutputText } from 'uiSrc/components/messages/cli-output/cliOutput'
 import { concatToOutput } from 'uiSrc/slices/cli/cli-output'
 import { setCliEnteringCommand } from 'uiSrc/slices/cli/cli-settings'
 import { cleanup, clearStoreActions, mockedStore, render } from 'uiSrc/utils/test-utils'

redisinsight/ui/src/components/cli/components/cli-body/CliBodyWrapper.spec.tsx

@@ -10,12 +10,10 @@ import {
   clearStoreActions,
 } from 'uiSrc/utils/test-utils'
 
-import {
-  processUnsupportedCommand,
-  sendCliClusterCommandAction,
-} from 'uiSrc/slices/cli/cli-output'
+import { sendCliClusterCommandAction } from 'uiSrc/slices/cli/cli-output'
 import { processCliClient } from 'uiSrc/slices/cli/cli-settings'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
+import { processUnsupportedCommand } from 'uiSrc/utils/cliOutputActions'
 
 import CliBodyWrapper from './CliBodyWrapper'
 

redisinsight/ui/src/components/cli/components/cli-body/CliBodyWrapper.tsx

@@ -16,19 +16,16 @@ import {
   outputSelector,
   sendCliCommandAction,
   sendCliClusterCommandAction,
-  processUnsupportedCommand,
-  processUnrepeatableNumber,
 } from 'uiSrc/slices/cli/cli-output'
 import { CommandMonitor, CommandPSubscribe, CommandSubscribe, CommandHello3, Pages } from 'uiSrc/constants'
 import { getCommandRepeat, isRepeatCountCorrect } from 'uiSrc/utils'
 import { ConnectionType } from 'uiSrc/slices/interfaces'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { checkUnsupportedCommand, clearOutput, cliCommandOutput } from 'uiSrc/utils/cliHelper'
-import { cliTexts } from 'uiSrc/constants/cliOutput'
+import { cliTexts, ConnectionSuccessOutputText, InitOutputText } from 'uiSrc/components/messages/cli-output/cliOutput'
 import { showMonitor } from 'uiSrc/slices/cli/monitor'
-import UseProfilerLink from 'uiSrc/components/monitor/UseProfilerLink'
-
+import { cliCommandError, processUnrepeatableNumber, processUnsupportedCommand } from 'uiSrc/utils/cliOutputActions'
 import CliBody from './CliBody'
 
 import styles from './CliBody/styles.module.scss'
@@ -48,11 +45,22 @@ const CliBodyWrapper = () => {
     matchedCommand,
     cliClientUuid,
   } = useSelector(cliSettingsSelector)
-  const { connectionType } = useSelector(connectedInstanceSelector)
+  const { connectionType, host, port, db } = useSelector(connectedInstanceSelector)
   const { db: currentDbIndex } = useSelector(outputSelector)
 
   useEffect(() => {
-    !cliClientUuid && dispatch(createCliClientAction(instanceId, handleWorkbenchClick))
+    if (!cliClientUuid) {
+      dispatch(createCliClientAction(
+        instanceId,
+        () => {
+          dispatch(concatToOutput(ConnectionSuccessOutputText))
+        },
+        (errorMessage: string) => {
+          dispatch(concatToOutput(cliTexts.CLI_ERROR_MESSAGE(errorMessage)))
+        }
+      ))
+      dispatch(concatToOutput(InitOutputText(host, port, db, !data.length, handleWorkbenchClick)))
+    }
   }, [])
 
   useEffect(() => {
@@ -88,16 +96,15 @@ const CliBodyWrapper = () => {
     dispatch(concatToOutput(cliCommandOutput(decode(command), currentDbIndex)))
 
     if (!isRepeatCountCorrect(countRepeat)) {
-      dispatch(processUnrepeatableNumber(commandLine, resetCommand))
+      processUnrepeatableNumber(commandLine, resetCommand)
       return
     }
 
     // Flow if MONITOR command was executed
     if (checkUnsupportedCommand([CommandMonitor.toLowerCase()], commandLine)) {
-      dispatch(concatToOutput([
-        <UseProfilerLink onClick={() => { dispatch(showMonitor()) }} />,
-        '\n'
-      ]))
+      dispatch(
+        concatToOutput([cliTexts.MONITOR_COMMAND(() => { dispatch(showMonitor()) }), '\n'])
+      )
       resetCommand()
       return
     }
@@ -111,7 +118,9 @@ const CliBodyWrapper = () => {
 
     // Flow if SUBSCRIBE command was executed
     if (checkUnsupportedCommand([CommandSubscribe.toLowerCase()], commandLine)) {
-      dispatch(concatToOutput(cliTexts.SUBSCRIBE_COMMAND_CLI(Pages.pubSub(instanceId))))
+      dispatch(
+        concatToOutput([cliTexts.SUBSCRIBE_COMMAND_CLI(Pages.pubSub(instanceId)), '\n'])
+      )
       resetCommand()
       return
     }
@@ -124,7 +133,7 @@ const CliBodyWrapper = () => {
     }
 
     if (unsupportedCommand) {
-      dispatch(processUnsupportedCommand(commandLine, unsupportedCommand, resetCommand))
+      processUnsupportedCommand(commandLine, unsupportedCommand, resetCommand)
       return
     }
 
@@ -141,11 +150,11 @@ const CliBodyWrapper = () => {
       }
     })
     if (connectionType !== ConnectionType.Cluster) {
-      dispatch(sendCliCommandAction(command, resetCommand))
+      dispatch(sendCliCommandAction(command, resetCommand, (error) => cliCommandError(error, command)))
       return
     }
 
-    dispatch(sendCliClusterCommandAction(command, resetCommand))
+    dispatch(sendCliClusterCommandAction(command, resetCommand, (error) => cliCommandError(error, command)))
   }
 
   const resetCommand = () => {

redisinsight/ui/src/components/feature-flag-component/FeatureFlagComponent.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { isArray } from 'lodash'
 import { useSelector } from 'react-redux'
-import { FeatureFlags } from 'uiSrc/constants'
+import { FeatureFlags } from 'uiSrc/constants/featureFlags'
 import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
 
 export interface Props {

redisinsight/ui/src/components/messages/cli-output/cliOutput.spec.tsx

@@ -0,0 +1,76 @@
+import { cloneDeep, set } from 'lodash'
+import { render, screen, fireEvent, initialStateDefault, mockStore } from 'uiSrc/utils/test-utils'
+
+import { FeatureFlags } from 'uiSrc/constants'
+import { cliTexts } from './cliOutput'
+
+describe('cliTexts', () => {
+  describe('Feature flag dependend', () => {
+    describe('MONITOR_COMMAND', () => {
+      it('should render proper content with flag disabled', async () => {
+        const initialStoreState = set(
+          cloneDeep(initialStateDefault),
+          `app.features.featureFlags.features.${FeatureFlags.envDependent}`,
+          { flag: false }
+        )
+
+        const onClick = jest.fn()
+
+        render(cliTexts.MONITOR_COMMAND(onClick), {
+          store: mockStore(initialStoreState)
+        })
+
+        expect(screen.getByTestId('user-profiler-link-disabled')).toBeInTheDocument()
+      })
+
+      it('should render proper content with flag enabled', () => {
+        const initialStoreState = set(
+          cloneDeep(initialStateDefault),
+          `app.features.featureFlags.features.${FeatureFlags.envDependent}`,
+          { flag: true }
+        )
+
+        const onClick = jest.fn()
+
+        render(cliTexts.MONITOR_COMMAND(onClick), {
+          store: mockStore(initialStoreState)
+        })
+
+        fireEvent.click(screen.getByTestId('monitor-btn'))
+        expect(onClick).toBeCalled()
+      })
+    })
+
+    describe('SUBSCRIBE_COMMAND_CLI', () => {
+      it('should render proper content with flag disabled', async () => {
+        const initialStoreState = set(
+          cloneDeep(initialStateDefault),
+          `app.features.featureFlags.features.${FeatureFlags.envDependent}`,
+          { flag: false }
+        )
+
+        render(cliTexts.SUBSCRIBE_COMMAND_CLI(), {
+          store: mockStore(initialStoreState)
+        })
+
+        expect(screen.getByTestId('user-pub-sub-link-disabled')).toBeInTheDocument()
+        expect(screen.queryByTestId('user-pub-sub-link')).not.toBeInTheDocument()
+      })
+
+      it('should render proper content with flag enabled', () => {
+        const initialStoreState = set(
+          cloneDeep(initialStateDefault),
+          `app.features.featureFlags.features.${FeatureFlags.envDependent}`,
+          { flag: true }
+        )
+
+        render(cliTexts.SUBSCRIBE_COMMAND_CLI(), {
+          store: mockStore(initialStoreState)
+        })
+
+        expect(screen.getByTestId('user-pub-sub-link')).toBeInTheDocument()
+        expect(screen.queryByTestId('user-pub-sub-link-disabled')).not.toBeInTheDocument()
+      })
+    })
+  })
+})

redisinsight/ui/src/constants/cliOutput.tsx renamed to redisinsight/ui/src/components/messages/cli-output/cliOutput.tsx

@@ -2,15 +2,8 @@ import { EuiLink, EuiTextColor } from '@elastic/eui'
 import React, { Fragment } from 'react'
 import { getRouterLinkProps } from 'uiSrc/services'
 import { getDbIndex } from 'uiSrc/utils'
-import UsePubSubLink from 'uiSrc/components/pub-sub/UsePubSubLink'
-
-export const ClearCommand = 'clear'
-export const SelectCommand = 'select'
-
-export enum CliOutputFormatterType {
-  Text = 'TEXT',
-  Raw = 'RAW',
-}
+import { FeatureFlagComponent } from 'uiSrc/components'
+import { FeatureFlags } from 'uiSrc/constants/featureFlags'
 
 export const InitOutputText = (
   host: string = '',
@@ -77,11 +70,46 @@ export const cliTexts = {
       '\n',
     ]
   ),
+  MONITOR_NOT_SUPPORTED_ENV: (
+    <div className="cli-output-response-fail" data-testid="user-profiler-link-disabled">
+      Monitor not supported in this environment.
+    </div>
+  ),
+  USE_PROFILER_TOOL: (onClick: () => void) => (
+    <EuiTextColor color="danger" key={Date.now()}>
+      {'Use '}
+      <EuiLink onClick={onClick} className="btnLikeLink" color="text" data-testid="monitor-btn">
+        Profiler
+      </EuiLink>
+      {' tool to see all the requests processed by the server.'}
+    </EuiTextColor>
+  ),
+  MONITOR_COMMAND: (onClick: () => void) => (
+    <FeatureFlagComponent
+      name={FeatureFlags.envDependent}
+      otherwise={cliTexts.MONITOR_NOT_SUPPORTED_ENV}
+    >
+      {cliTexts.USE_PROFILER_TOOL(onClick)}
+    </FeatureFlagComponent>
+  ),
+  PUB_SUB_NOT_SUPPORTED_ENV: (
+    <div className="cli-output-response-fail" data-testid="user-pub-sub-link-disabled">
+      PubSub not supported in this environment.
+    </div>
+  ),
+  USE_PUB_SUB_TOOL: (path: string = '') => (
+    <EuiTextColor color="danger" key={Date.now()} data-testid="user-pub-sub-link">
+      {'Use '}
+      <EuiLink {...getRouterLinkProps(path)} color="text" data-test-subj="pubsub-page-btn">
+        Pub/Sub
+      </EuiLink>
+      {' tool to subscribe to channels.'}
+    </EuiTextColor>
+  ),
   SUBSCRIBE_COMMAND_CLI: (path: string = '') => (
-    [
-      <UsePubSubLink path={path} />,
-      '\n',
-    ]
+    <FeatureFlagComponent name={FeatureFlags.envDependent} otherwise={cliTexts.PUB_SUB_NOT_SUPPORTED_ENV}>
+      {cliTexts.USE_PUB_SUB_TOOL(path)}
+    </FeatureFlagComponent>
   ),
   HELLO3_COMMAND: () => (
     <EuiTextColor color="danger" key={Date.now()}>

redisinsight/ui/src/components/monitor/MonitorWrapper.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
 
-import { EuiTextColor } from '@elastic/eui'
 import { monitorSelector, startMonitor, togglePauseMonitor } from 'uiSrc/slices/cli/monitor'
 import { cliSettingsSelector } from 'uiSrc/slices/cli/cli-settings'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'