update job value in job panel

Author: AmirAllayarovSofteq

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

@@ -1,10 +1,13 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
 import { cloneDeep } from 'lodash'
+import { EuiText } from '@elastic/eui'
+import { AxiosError } from 'axios'
 import { act, cleanup, fireEvent, mockedStore, render, screen } from 'uiSrc/utils/test-utils'
 
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { dryRunJob, rdiDryRunJobSelector } from 'uiSrc/slices/rdi/dryRun'
+import { addErrorNotification } from 'uiSrc/slices/app/notifications'
 import JobsPanel, { Props } from './Panel'
 
 const mockedProps = mock<Props>()
@@ -154,4 +157,29 @@ describe('JobsPanel', () => {
 
     expect(queryByTestId('target-select')).toBeInTheDocument()
   })
+
+  it('should render error notification', () => {
+    render(<JobsPanel {...instance(mockedProps)} name="jobName" job={'hsources:incorrect\n target:'} />)
+
+    fireEvent.change(screen.getByTestId('input-value'), { target: { value: '[]' } })
+
+    fireEvent.click(screen.getByTestId('dry-run-btn'))
+
+    const expectedActions = [
+      addErrorNotification({
+        response: {
+          data: {
+            message: (
+              <>
+                <EuiText>JobName has an invalid structure.</EuiText>
+                <EuiText>end of the stream or a document separator is expected</EuiText>
+              </>
+            )
+          }
+        }
+      } as AxiosError)
+    ]
+
+    expect(store.getActions().slice(0 - expectedActions.length)).toEqual(expectedActions)
+  })
 })

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

@@ -13,20 +13,22 @@ import {
 } from '@elastic/eui'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
-import { isArray } from 'lodash'
+import { isArray, upperFirst } from 'lodash'
 
 import { PipelineJobsTabs } from 'uiSrc/slices/interfaces/rdi'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { rdiDryRunJobSelector, rdiDryRunJob, setInitialDryRunJob } from 'uiSrc/slices/rdi/dryRun'
 import MonacoJson from 'uiSrc/components/monaco-editor/components/monaco-json'
 import DryRunJobCommands from 'uiSrc/pages/rdi/pipeline-management/components/dry-run-job-commands'
 import DryRunJobTransformations from 'uiSrc/pages/rdi/pipeline-management/components/dry-run-job-transformations'
-import { formatLongName } from 'uiSrc/utils'
+import { createAxiosError, formatLongName, yamlToJson } from 'uiSrc/utils'
+import { addErrorNotification } from 'uiSrc/slices/app/notifications'
 
 import styles from './styles.module.scss'
 
 export interface Props {
-  job?: object
+  job: string
+  name: string
   onClose: () => void
 }
 
@@ -42,7 +44,7 @@ const getTargetOption = (value: string) => {
 }
 
 const DryRunJobPanel = (props: Props) => {
-  const { job, onClose } = props
+  const { job, name, onClose } = props
   const { loading: isDryRunning, results } = useSelector(rdiDryRunJobSelector)
 
   const [isFullScreen, setIsFullScreen] = useState<boolean>(false)
@@ -110,9 +112,23 @@ const DryRunJobPanel = (props: Props) => {
         id: rdiInstanceId,
       },
     })
+    const JSONJob = yamlToJson(job, (msg) => {
+      dispatch(addErrorNotification(createAxiosError({
+        message: (
+          <>
+            <EuiText>{`${upperFirst(name)} has an invalid structure.`}</EuiText>
+            <EuiText>{msg}</EuiText>
+          </>
+        )
+      })))
+    })
+    if (!JSONJob) {
+      return
+    }
     const JSONInput = JSON.parse(input)
     const formattedValue = isArray(JSONInput) ? JSONInput : [JSONInput]
-    dispatch(rdiDryRunJob(rdiInstanceId, formattedValue, job))
+
+    dispatch(rdiDryRunJob(rdiInstanceId, formattedValue, JSONJob))
   }
 
   const isSelectAvailable = selectedTab === PipelineJobsTabs.Output

redisinsight/ui/src/pages/rdi/pipeline-management/pages/job/Job.tsx

@@ -34,7 +34,6 @@ const Job = (props: Props) => {
 
   const [isPanelOpen, setIsPanelOpen] = useState<boolean>(false)
   const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false)
-  const [JSONJob, setJSONJob] = useState<object>()
   const [shouldOpenDedicatedEditor, setShouldOpenDedicatedEditor] = useState<boolean>(false)
 
   const dispatch = useDispatch()
@@ -82,7 +81,6 @@ const Job = (props: Props) => {
       return
     }
     setIsPanelOpen(true)
-    setJSONJob(JSONValue)
     sendEventTelemetry({
       event: TelemetryEvent.RDI_TEST_JOB_OPENED,
       eventData: {
@@ -250,7 +248,8 @@ const Job = (props: Props) => {
       {isPanelOpen && (
         <DryRunJobPanel
           onClose={() => setIsPanelOpen(false)}
-          job={JSONJob}
+          job={value}
+          name={name}
         />
       )}
     </>