Merge pull request #3545 from RedisInsight/fe/bugfix/RI-5872_dry_run_job

#RI-5872 - add tooltip, remove array check

Author: mariasergeenko

redisinsight/ui/src/pages/rdi/pipeline-management/components/dry-run-job-commands/DryRunJobCommands.spec.tsx

@@ -29,6 +29,21 @@ describe('DryRunJobCommands', () => {
     expect(screen.getByTestId('commands-output')).toHaveTextContent('No Redis commands provided.')
   })
 
+  it('should render no commands message if there is no commands', async () => {
+    const rdiDryRunJobSelectorMock = jest.fn().mockReturnValue({
+      results: {
+        output: [{ name: 1 }],
+      }
+    });
+    (rdiDryRunJobSelector as jest.Mock).mockImplementationOnce(rdiDryRunJobSelectorMock)
+
+    await act(async () => {
+      render(<DryRunJobCommands />)
+    })
+
+    expect(screen.getByTestId('commands-output')).toHaveTextContent('No Redis commands provided.')
+  })
+
   it('should render transformations', async () => {
     const rdiDryRunJobSelectorMock = jest.fn().mockReturnValue({
       results: {

redisinsight/ui/src/pages/rdi/pipeline-management/components/dry-run-job-commands/DryRunJobCommands.tsx

@@ -27,6 +27,10 @@ const DryRunJobCommands = ({ target }: Props) => {
         ?.find((el) => el.connection === target)
         ?.commands
 
+      if (!targetCommands) {
+        setCommands(NO_COMMANDS_MESSAGE)
+        return
+      }
       monaco.editor.colorize((targetCommands ?? []).join('\n').trim(), MonacoLanguage.Redis, {})
         .then((data) => {
           setCommands(data)

redisinsight/ui/src/pages/rdi/pipeline-management/components/jobs-panel/Panel.tsx

@@ -9,7 +9,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiSuperSelect,
-  keys, EuiSuperSelectOption,
+  keys, EuiSuperSelectOption, EuiToolTip,
 } from '@elastic/eui'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
@@ -65,8 +65,8 @@ const DryRunJobPanel = (props: Props) => {
 
   useEffect(() => {
     try {
-      const jsonValue = JSON.parse(input)
-      setIsFormValid(isArray(jsonValue))
+      JSON.parse(input)
+      setIsFormValid(true)
     } catch (e) {
       setIsFormValid(false)
     }
@@ -110,7 +110,9 @@ const DryRunJobPanel = (props: Props) => {
         id: rdiInstanceId,
       },
     })
-    dispatch(rdiDryRunJob(rdiInstanceId, JSON.parse(input), job))
+    const JSONInput = JSON.parse(input)
+    const formattedValue = isArray(JSONInput) ? JSONInput : [JSONInput]
+    dispatch(rdiDryRunJob(rdiInstanceId, formattedValue, job))
   }
 
   const isSelectAvailable = selectedTab === PipelineJobsTabs.Output
@@ -184,19 +186,24 @@ const DryRunJobPanel = (props: Props) => {
           />
           <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
             <EuiFlexItem grow={false}>
-              <EuiButton
-                onClick={handleDryRun}
-                iconType="play"
-                iconSide="right"
-                color="success"
-                size="s"
-                disabled={isDryRunning || !isFormValid}
-                isLoading={isDryRunning}
-                className={cx(styles.actionBtn, styles.runBtn)}
-                data-testid="dry-run-btn"
+              <EuiToolTip
+                content={isFormValid ? null : 'Input should have JSON format'}
+                position="top"
               >
-                Dry run
-              </EuiButton>
+                <EuiButton
+                  onClick={handleDryRun}
+                  iconType="play"
+                  iconSide="right"
+                  color="success"
+                  size="s"
+                  disabled={isDryRunning || !isFormValid}
+                  isLoading={isDryRunning}
+                  className={cx(styles.actionBtn, styles.runBtn)}
+                  data-testid="dry-run-btn"
+                >
+                  Dry run
+                </EuiButton>
+              </EuiToolTip>
             </EuiFlexItem>
           </EuiFlexGroup>
           <div className={cx(styles.tabsWrapper, styles.codeLabel)}>