Merge pull request #3537 from RedisInsight/fe/bugfix/RI-5856_incorrect_yaml

#RI-5856 - handle yaml error

Author: mariasergeenko

redisinsight/ui/src/pages/rdi/instance/InstancePage.tsx

@@ -2,6 +2,8 @@ import React, { useEffect, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory, useLocation, useParams } from 'react-router-dom'
 import { Formik, FormikProps } from 'formik'
+import { EuiText } from '@elastic/eui'
+import { upperFirst } from 'lodash'
 
 import {
   appContextSelector,
@@ -22,7 +24,8 @@ import {
   setPipelineInitialState,
 } from 'uiSrc/slices/rdi/pipeline'
 import { IPipeline } from 'uiSrc/slices/interfaces'
-import { Nullable, pipelineToJson } from 'uiSrc/utils'
+import { createAxiosError, Nullable, pipelineToJson } from 'uiSrc/utils'
+import { addErrorNotification } from 'uiSrc/slices/app/notifications'
 
 import InstancePageRouter from './InstancePageRouter'
 import { ConfirmLeavePagePopup } from './components'
@@ -88,7 +91,19 @@ const RdiInstancePage = ({ routes = [] }: Props) => {
   }, [])
 
   const onSubmit = (values: IPipeline) => {
-    const JSONValues = pipelineToJson(values)
+    const JSONValues = pipelineToJson(values, (errors) => {
+      dispatch(addErrorNotification(createAxiosError({
+        message: (
+          <>
+            <EuiText>{`${upperFirst(errors[0].filename)} has an invalid structure.`}</EuiText>
+            <EuiText>{errors[0].msg}</EuiText>
+          </>
+        )
+      })))
+    })
+    if (!JSONValues) {
+      return
+    }
     dispatch(deployPipelineAction(rdiInstanceId, JSONValues))
   }
 

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

@@ -14,7 +14,6 @@ import {
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
 import { isArray } from 'lodash'
-import yaml from 'js-yaml'
 
 import { PipelineJobsTabs } from 'uiSrc/slices/interfaces/rdi'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
@@ -27,7 +26,7 @@ import { formatLongName } from 'uiSrc/utils'
 import styles from './styles.module.scss'
 
 export interface Props {
-  job: string
+  job?: object
   onClose: () => void
 }
 
@@ -111,7 +110,7 @@ const DryRunJobPanel = (props: Props) => {
         id: rdiInstanceId,
       },
     })
-    dispatch(rdiDryRunJob(rdiInstanceId, JSON.parse(input), yaml.load(job)))
+    dispatch(rdiDryRunJob(rdiInstanceId, JSON.parse(input), job))
   }
 
   const isSelectAvailable = selectedTab === PipelineJobsTabs.Output

redisinsight/ui/src/pages/rdi/pipeline-management/pages/config/Config.spec.tsx

@@ -1,13 +1,16 @@
 import React from 'react'
 import { useFormikContext } from 'formik'
 import { cloneDeep } from 'lodash'
+import { EuiText } from '@elastic/eui'
+import { AxiosError } from 'axios'
 import { rdiPipelineSelector, setChangedFile, deleteChangedFile } from 'uiSrc/slices/rdi/pipeline'
 import { rdiTestConnectionsSelector } from 'uiSrc/slices/rdi/testConnections'
 import { act, cleanup, fireEvent, mockedStore, render, screen } from 'uiSrc/utils/test-utils'
 
 import { sendPageViewTelemetry, TelemetryPageView } from 'uiSrc/telemetry'
 import { MOCK_RDI_PIPELINE_DATA } from 'uiSrc/mocks/data/rdi'
 import { FileChangeType } from 'uiSrc/slices/interfaces'
+import { addErrorNotification } from 'uiSrc/slices/app/notifications'
 import Config from './Config'
 
 jest.mock('uiSrc/telemetry', () => ({
@@ -149,7 +152,7 @@ describe('Config', () => {
     expect(queryByTestId('test-connection-panel')).toBeInTheDocument()
   })
 
-  it('should open right panel', async () => {
+  it('should close right panel', async () => {
     const { queryByTestId } = render(<Config />)
 
     expect(queryByTestId('test-connection-panel')).not.toBeInTheDocument()
@@ -167,6 +170,40 @@ describe('Config', () => {
     expect(queryByTestId('test-connection-panel')).not.toBeInTheDocument()
   })
 
+  it('should render error notification', async () => {
+    const mockUseFormikContext = {
+      setFieldValue: mockSetFieldValue,
+      values: { config: 'sources:incorrect\n target:' },
+    };
+    (useFormikContext as jest.Mock).mockReturnValue(mockUseFormikContext)
+
+    const { queryByTestId } = render(<Config />)
+
+    expect(queryByTestId('test-connection-panel')).not.toBeInTheDocument()
+
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('rdi-test-connection-btn'))
+    })
+
+    const expectedActions = [
+      addErrorNotification({
+        response: {
+          data: {
+            message: (
+              <>
+                <EuiText>Config 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)
+    expect(queryByTestId('test-connection-panel')).not.toBeInTheDocument()
+  })
+
   it('should render loading spinner', () => {
     const rdiPipelineSelectorMock = jest.fn().mockReturnValue({
       loading: true,

redisinsight/ui/src/pages/rdi/pipeline-management/pages/config/Config.tsx

@@ -6,7 +6,6 @@ import cx from 'classnames'
 import { useParams } from 'react-router-dom'
 import { get, throttle } from 'lodash'
 
-import yaml from 'js-yaml'
 import { sendPageViewTelemetry, sendEventTelemetry, TelemetryPageView, TelemetryEvent } from 'uiSrc/telemetry'
 import { EXTERNAL_LINKS, UTM_MEDIUMS } from 'uiSrc/constants/links'
 import { getUtmExternalLink } from 'uiSrc/utils/links'
@@ -17,8 +16,9 @@ import TestConnectionsPanel from 'uiSrc/pages/rdi/pipeline-management/components
 import TemplatePopover from 'uiSrc/pages/rdi/pipeline-management/components/template-popover'
 import { testConnectionsAction, rdiTestConnectionsSelector, testConnectionsController } from 'uiSrc/slices/rdi/testConnections'
 import { appContextPipelineManagement } from 'uiSrc/slices/app/context'
-import { isEqualPipelineFile } from 'uiSrc/utils'
+import { createAxiosError, isEqualPipelineFile, yamlToJson } from 'uiSrc/utils'
 
+import { addErrorNotification } from 'uiSrc/slices/app/notifications'
 import styles from './styles.module.scss'
 
 const Config = () => {
@@ -57,8 +57,21 @@ const Config = () => {
   }, [isOpenDialog, config, pipelineLoading])
 
   const testConnections = () => {
+    const JSONValue = yamlToJson(config, (msg) => {
+      dispatch(addErrorNotification(createAxiosError({
+        message: (
+          <>
+            <EuiText>Config has an invalid structure.</EuiText>
+            <EuiText>{msg}</EuiText>
+          </>
+        )
+      })))
+    })
+    if (!JSONValue) {
+      return
+    }
     setIsPanelOpen(true)
-    dispatch(testConnectionsAction(rdiInstanceId, yaml.load(config)))
+    dispatch(testConnectionsAction(rdiInstanceId, JSONValue))
     sendEventTelemetry({
       event: TelemetryEvent.RDI_TEST_TARGET_CONNECTIONS_CLICKED,
       eventData: {

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, useCallback } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { EuiText, EuiLink, EuiButton, EuiLoadingSpinner, EuiToolTip } from '@elastic/eui'
 import { useFormikContext } from 'formik'
-import { get, throttle } from 'lodash'
+import { upperFirst, get, throttle } from 'lodash'
 import cx from 'classnames'
 import { monaco as monacoEditor } from 'react-monaco-editor'
 
@@ -14,10 +14,11 @@ import MonacoYaml from 'uiSrc/components/monaco-editor/components/monaco-yaml'
 import DryRunJobPanel from 'uiSrc/pages/rdi/pipeline-management/components/jobs-panel'
 import { DSL, KEYBOARD_SHORTCUTS } from 'uiSrc/constants'
 import TemplatePopover from 'uiSrc/pages/rdi/pipeline-management/components/template-popover'
-import { isEqualPipelineFile, Maybe } from 'uiSrc/utils'
+import { createAxiosError, isEqualPipelineFile, Maybe, yamlToJson } from 'uiSrc/utils'
 import { getUtmExternalLink } from 'uiSrc/utils/links'
 import { KeyboardShortcut } from 'uiSrc/components'
 
+import { addErrorNotification } from 'uiSrc/slices/app/notifications'
 import styles from './styles.module.scss'
 
 export interface Props {
@@ -33,6 +34,7 @@ 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()
@@ -66,7 +68,21 @@ const Job = (props: Props) => {
   }, [name])
 
   const handleDryRunJob = () => {
+    const JSONValue = yamlToJson(value, (msg) => {
+      dispatch(addErrorNotification(createAxiosError({
+        message: (
+          <>
+            <EuiText>{`${upperFirst(name)} has an invalid structure.`}</EuiText>
+            <EuiText>{msg}</EuiText>
+          </>
+        )
+      })))
+    })
+    if (!JSONValue) {
+      return
+    }
     setIsPanelOpen(true)
+    setJSONJob(JSONValue)
     sendEventTelemetry({
       event: TelemetryEvent.RDI_TEST_JOB_OPENED,
       eventData: {
@@ -234,7 +250,7 @@ const Job = (props: Props) => {
       {isPanelOpen && (
         <DryRunJobPanel
           onClose={() => setIsPanelOpen(false)}
-          job={value}
+          job={JSONJob}
         />
       )}
     </>

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

@@ -9,6 +9,9 @@ import { sendPageViewTelemetry, TelemetryPageView, sendEventTelemetry, Telemetry
 import { MOCK_RDI_PIPELINE_CONFIG, MOCK_RDI_PIPELINE_DATA, MOCK_RDI_PIPELINE_JOB2 } from 'uiSrc/mocks/data/rdi'
 import { FileChangeType } from 'uiSrc/slices/interfaces'
 import JobWrapper from './JobWrapper'
+import {addErrorNotification} from "uiSrc/slices/app/notifications";
+import {EuiText} from "@elastic/eui";
+import {AxiosError} from "axios";
 
 jest.mock('uiSrc/telemetry', () => ({
   ...jest.requireActual('uiSrc/telemetry'),
@@ -179,4 +182,42 @@ describe('JobWrapper', () => {
 
     expect(store.getActions()).toEqual(expectedActions)
   })
+
+  it('should render error notification', () => {
+    const rdiPipelineSelectorMock = jest.fn().mockReturnValue({
+      loading: false,
+      schema: { jobs: { test: {} } },
+      data: { jobs: [{ name: 'jobName', value: 'sources:incorrect\n target:' }] }
+    });
+    (rdiPipelineSelector as jest.Mock).mockImplementation(rdiPipelineSelectorMock)
+
+    const mockUseFormikContext = {
+      setFieldValue: jest.fn,
+      values: { config: MOCK_RDI_PIPELINE_CONFIG, jobs: [{ name: 'jobName', value: 'sources:incorrect\n target:' }] },
+    };
+    (useFormikContext as jest.Mock).mockReturnValue(mockUseFormikContext)
+
+    const { queryByTestId } = render(<JobWrapper />)
+
+    fireEvent.click(screen.getByTestId('rdi-job-dry-run'))
+
+    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)
+
+    expect(queryByTestId('dry-run-panel')).not.toBeInTheDocument()
+  })
 })

redisinsight/ui/src/slices/interfaces/app.ts

@@ -14,6 +14,14 @@ export interface CustomError {
   resourceId?: string
 }
 
+export interface ErrorOptions {
+  message: string | JSX.Element
+  code?: string
+  config?: object
+  request?: object
+  response?: object
+}
+
 export interface EnhancedAxiosError extends AxiosError<CustomError> {
 }
 

redisinsight/ui/src/slices/interfaces/rdi.ts

@@ -233,3 +233,8 @@ export interface IStateRdiTestConnections {
 export type TJMESPathFunctions = {
   [key: string]: Pick<ICommand, 'summary'> & Required<Pick<ICommand, 'arguments'>>
 }
+
+export interface IYamlFormatError {
+  filename: string
+  msg: string
+}

redisinsight/ui/src/utils/apiResponse.ts

@@ -1,6 +1,6 @@
 import { AxiosError } from 'axios'
 import { first, isArray, get } from 'lodash'
-import { AddRedisDatabaseStatus, EnhancedAxiosError, IBulkOperationResult } from 'uiSrc/slices/interfaces'
+import { AddRedisDatabaseStatus, EnhancedAxiosError, ErrorOptions, IBulkOperationResult } from 'uiSrc/slices/interfaces'
 import { parseCustomError } from 'uiSrc/utils'
 
 export const DEFAULT_ERROR_MESSAGE = 'Something was wrong!'
@@ -12,9 +12,16 @@ export const getAxiosError = (error: EnhancedAxiosError): AxiosError => {
   return error
 }
 
+export const createAxiosError = (options: ErrorOptions): AxiosError => ({
+  response: {
+    data: options,
+  },
+}) as AxiosError
+
 export const getApiErrorCode = (error: AxiosError) => error?.response?.status
 
 export function getApiErrorMessage(error: AxiosError): string {
+  // @ts-ignore
   const errorMessage = error?.response?.data?.message
   if (!error || !error.response) {
     return DEFAULT_ERROR_MESSAGE