#RI-5829 - resolve comments

Author: AmirAllayarovSofteq

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

@@ -2,7 +2,6 @@ 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 { upperFirst } from 'lodash'
 
 import {
   appContextSelector,
@@ -23,7 +22,7 @@ import {
   setPipelineInitialState,
 } from 'uiSrc/slices/rdi/pipeline'
 import { IPipeline } from 'uiSrc/slices/interfaces'
-import { createAxiosError, Nullable, pipelineToJson } from 'uiSrc/utils'
+import { createAxiosError, Nullable, pipelineToJson, rdiErrorMessages } from 'uiSrc/utils'
 import { addErrorNotification } from 'uiSrc/slices/app/notifications'
 
 import InstancePageRouter from './InstancePageRouter'
@@ -91,13 +90,7 @@ const RdiInstancePage = ({ routes = [] }: Props) => {
   const onSubmit = (values: IPipeline) => {
     const JSONValues = pipelineToJson(values, (errors) => {
       dispatch(addErrorNotification(createAxiosError({
-        message: (
-          <>
-            {`${upperFirst(errors[0].filename)} has an invalid structure.`}
-            <br />
-            {errors[0].msg}
-          </>
-        )
+        message: rdiErrorMessages.invalidStructure(errors[0].filename, errors[0].msg)
       })))
     })
     if (!JSONValues) {

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

@@ -16,7 +16,7 @@ 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 { createAxiosError, isEqualPipelineFile, yamlToJson } from 'uiSrc/utils'
+import { createAxiosError, isEqualPipelineFile, rdiErrorMessages, yamlToJson } from 'uiSrc/utils'
 
 import { addErrorNotification } from 'uiSrc/slices/app/notifications'
 import styles from './styles.module.scss'
@@ -59,13 +59,7 @@ const Config = () => {
   const testConnections = () => {
     const JSONValue = yamlToJson(config, (msg) => {
       dispatch(addErrorNotification(createAxiosError({
-        message: (
-          <>
-            Config has an invalid structure.
-            <br />
-            {msg}
-          </>
-        )
+        message: rdiErrorMessages.invalidStructure('config', msg)
       })))
     })
     if (!JSONValue) {

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 { upperFirst, get, throttle } from 'lodash'
+import { get, throttle } from 'lodash'
 import cx from 'classnames'
 import { monaco as monacoEditor } from 'react-monaco-editor'
 
@@ -14,7 +14,7 @@ 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 { createAxiosError, isEqualPipelineFile, Maybe, yamlToJson } from 'uiSrc/utils'
+import { createAxiosError, isEqualPipelineFile, Maybe, rdiErrorMessages, yamlToJson } from 'uiSrc/utils'
 import { getUtmExternalLink } from 'uiSrc/utils/links'
 import { KeyboardShortcut } from 'uiSrc/components'
 
@@ -69,13 +69,7 @@ const Job = (props: Props) => {
   const handleDryRunJob = () => {
     const JSONValue = yamlToJson(value, (msg) => {
       dispatch(addErrorNotification(createAxiosError({
-        message: (
-          <>
-            {`${upperFirst(name)} has an invalid structure.`}
-            <br />
-            {msg}
-          </>
-        )
+        message: rdiErrorMessages.invalidStructure(name, msg)
       })))
     })
     if (!JSONValue) {

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

@@ -2,16 +2,15 @@ import React from 'react'
 import reactRouterDom from 'react-router-dom'
 import { useFormikContext } from 'formik'
 import { cloneDeep } from 'lodash'
+import { AxiosError } from 'axios'
+
 import { deleteChangedFile, getPipelineStrategies, rdiPipelineSelector, setChangedFile } from 'uiSrc/slices/rdi/pipeline'
 import { cleanup, fireEvent, mockedStore, render, screen } from 'uiSrc/utils/test-utils'
-
 import { sendPageViewTelemetry, TelemetryPageView, sendEventTelemetry, TelemetryEvent } from 'uiSrc/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 { addErrorNotification } from 'uiSrc/slices/app/notifications'
 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'),

redisinsight/ui/src/utils/errors.tsx

@@ -1,5 +1,5 @@
 import { AxiosError } from 'axios'
-import { capitalize, isEmpty, isString, isArray, set, isNumber } from 'lodash'
+import { capitalize, isEmpty, isString, isArray, set, isNumber, upperFirst } from 'lodash'
 import React from 'react'
 import { EuiSpacer } from '@elastic/eui'
 import { CustomErrorCodes } from 'uiSrc/constants'
@@ -14,7 +14,7 @@ export const getRdiValidationMessage = (message: string = '', loc?: Array<string
   }
 
   const [, ...rest] = loc
-  const formattedLoc = rest.reduce<string[]>((acc, curr, idx) => {
+  const formattedLoc = rest.reduce<string[]>((acc, curr) => {
     if (isNumber(curr)) {
       acc[acc.length - 1] += `[${curr}]`
     } else {
@@ -202,3 +202,13 @@ export const parseCustomError = (err: CustomError | string = DEFAULT_ERROR_MESSA
 
   return set(error, 'response.data', parsedError) as AxiosError
 }
+
+export const rdiErrorMessages = {
+  invalidStructure: (name = 'Value', msg = 'Failed to convert YAML to JSON structure') => (
+    <>
+      {`${upperFirst(name)} has an invalid structure.`}
+      <br />
+      {msg}
+    </>
+  ),
+}