[Ingest Pipelines] Load from json (#70297) (#70751)

* WiP load from json modal ready, need to refactor more stuff

* First iteration of load from JSON functionality

- refactored the pipeline processsors editor components for
  portability
- added CIT for load from json component

* added comment

* update deserialize with tests and make it more fault tolerant

* use flyout footer

* remove console.error and make the json editor a lot shorter

* address PR feedback

- Update form schema and form schema types
- simplify the save handler
- refactor processors_title to processors_header

* remove unused translations

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Author: jloleysens

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/on_failure_processors_title.tsx renamed to x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/on_failure_processors_title.tsx

@@ -8,7 +8,7 @@ import React, { FunctionComponent } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { usePipelineProcessorsContext } from '../context';
+import { usePipelineProcessorsContext } from '../pipeline_processors_editor/context';
 
 export const OnFailureProcessorsTitle: FunctionComponent = () => {
   const { links } = usePipelineProcessorsContext();

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.scss renamed to x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.scss

@@ -9,19 +9,18 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 
 import { useForm, Form, FormConfig } from '../../../shared_imports';
-import { Pipeline } from '../../../../common/types';
+import { Pipeline, Processor } from '../../../../common/types';
 
-import {
-  OnUpdateHandlerArg,
-  OnUpdateHandler,
-  SerializeResult,
-} from '../pipeline_processors_editor';
+import './pipeline_form.scss';
+
+import { OnUpdateHandlerArg, OnUpdateHandler } from '../pipeline_processors_editor';
 
 import { PipelineRequestFlyout } from './pipeline_request_flyout';
 import { PipelineTestFlyout } from './pipeline_test_flyout';
 import { PipelineFormFields } from './pipeline_form_fields';
 import { PipelineFormError } from './pipeline_form_error';
 import { pipelineFormSchema } from './schema';
+import { PipelineForm as IPipelineForm } from './types';
 
 export interface PipelineFormProps {
   onSave: (pipeline: Pipeline) => void;
@@ -32,14 +31,15 @@ export interface PipelineFormProps {
   isEditing?: boolean;
 }
 
+const defaultFormValue: Pipeline = Object.freeze({
+  name: '',
+  description: '',
+  processors: [],
+  on_failure: [],
+});
+
 export const PipelineForm: React.FunctionComponent<PipelineFormProps> = ({
-  defaultValue = {
-    name: '',
-    description: '',
-    processors: [],
-    on_failure: [],
-    version: '',
-  },
+  defaultValue = defaultFormValue,
   onSave,
   isSaving,
   saveError,
@@ -50,34 +50,42 @@ export const PipelineForm: React.FunctionComponent<PipelineFormProps> = ({
 
   const [isTestingPipeline, setIsTestingPipeline] = useState<boolean>(false);
 
-  const processorStateRef = useRef<OnUpdateHandlerArg>();
+  const {
+    processors: initialProcessors,
+    on_failure: initialOnFailureProcessors,
+    ...defaultFormValues
+  } = defaultValue;
+
+  const [processorsState, setProcessorsState] = useState<{
+    processors: Processor[];
+    onFailure?: Processor[];
+  }>({
+    processors: initialProcessors,
+    onFailure: initialOnFailureProcessors,
+  });
 
-  const handleSave: FormConfig['onSubmit'] = async (formData, isValid) => {
-    let override: SerializeResult | undefined;
+  const processorStateRef = useRef<OnUpdateHandlerArg>();
 
+  const handleSave: FormConfig<IPipelineForm>['onSubmit'] = async (formData, isValid) => {
     if (!isValid) {
       return;
     }
 
     if (processorStateRef.current) {
-      const processorsState = processorStateRef.current;
-      if (await processorsState.validate()) {
-        override = processorsState.getData();
-      } else {
-        return;
+      const state = processorStateRef.current;
+      if (await state.validate()) {
+        onSave({ ...formData, ...state.getData() });
       }
     }
-
-    onSave({ ...formData, ...(override || {}) } as Pipeline);
   };
 
   const handleTestPipelineClick = () => {
     setIsTestingPipeline(true);
   };
 
-  const { form } = useForm({
+  const { form } = useForm<IPipelineForm>({
     schema: pipelineFormSchema,
-    defaultValue,
+    defaultValue: defaultFormValues,
     onSubmit: handleSave,
   });
 
@@ -121,9 +129,12 @@ export const PipelineForm: React.FunctionComponent<PipelineFormProps> = ({
 
         {/* All form fields */}
         <PipelineFormFields
+          onLoadJson={({ processors, on_failure: onFailure }) => {
+            setProcessorsState({ processors, onFailure });
+          }}
           onEditorFlyoutOpen={onEditorFlyoutOpen}
-          initialProcessors={defaultValue.processors}
-          initialOnFailureProcessors={defaultValue.on_failure}
+          processors={processorsState.processors}
+          onFailure={processorsState.onFailure}
           onProcessorsUpdate={onProcessorsChangeHandler}
           hasVersion={Boolean(defaultValue.version)}
           isTestButtonDisabled={isTestingPipeline || form.isValid === false}

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.tsx

@@ -6,17 +6,27 @@
 
 import React, { useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiSpacer, EuiSwitch } from '@elastic/eui';
+import { EuiSpacer, EuiSwitch, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
 import { Processor } from '../../../../common/types';
-import { FormDataProvider } from '../../../shared_imports';
-import { PipelineProcessorsEditor, OnUpdateHandler } from '../pipeline_processors_editor';
 
 import { getUseField, getFormRow, Field, useKibana } from '../../../shared_imports';
 
+import {
+  PipelineProcessorsContextProvider,
+  GlobalOnFailureProcessorsEditor,
+  ProcessorsEditor,
+  OnUpdateHandler,
+  OnDoneLoadJsonHandler,
+} from '../pipeline_processors_editor';
+
+import { ProcessorsHeader } from './processors_header';
+import { OnFailureProcessorsTitle } from './on_failure_processors_title';
+
 interface Props {
-  initialProcessors: Processor[];
-  initialOnFailureProcessors?: Processor[];
+  processors: Processor[];
+  onFailure?: Processor[];
+  onLoadJson: OnDoneLoadJsonHandler;
   onProcessorsUpdate: OnUpdateHandler;
   hasVersion: boolean;
   isTestButtonDisabled: boolean;
@@ -29,8 +39,9 @@ const UseField = getUseField({ component: Field });
 const FormRow = getFormRow({ titleTag: 'h3' });
 
 export const PipelineFormFields: React.FunctionComponent<Props> = ({
-  initialProcessors,
-  initialOnFailureProcessors,
+  processors,
+  onFailure,
+  onLoadJson,
   onProcessorsUpdate,
   isEditing,
   hasVersion,
@@ -113,30 +124,37 @@ export const PipelineFormFields: React.FunctionComponent<Props> = ({
       </FormRow>
 
       {/* Pipeline Processors Editor */}
-      <FormDataProvider pathsToWatch={['processors', 'on_failure']}>
-        {({ processors, on_failure: onFailure }) => {
-          const processorProp =
-            typeof processors === 'string' && processors
-              ? JSON.parse(processors)
-              : initialProcessors ?? [];
-
-          const onFailureProp =
-            typeof onFailure === 'string' && onFailure
-              ? JSON.parse(onFailure)
-              : initialOnFailureProcessors ?? [];
 
-          return (
-            <PipelineProcessorsEditor
-              onFlyoutOpen={onEditorFlyoutOpen}
-              esDocsBasePath={services.documentation.getEsDocsBasePath()}
-              isTestButtonDisabled={isTestButtonDisabled}
-              onTestPipelineClick={onTestPipelineClick}
-              onUpdate={onProcessorsUpdate}
-              value={{ processors: processorProp, onFailure: onFailureProp }}
-            />
-          );
-        }}
-      </FormDataProvider>
+      <PipelineProcessorsContextProvider
+        onFlyoutOpen={onEditorFlyoutOpen}
+        links={{ esDocsBasePath: services.documentation.getEsDocsBasePath() }}
+        onUpdate={onProcessorsUpdate}
+        value={{ processors, onFailure }}
+      >
+        <div className="pipelineProcessorsEditor">
+          <EuiFlexGroup gutterSize="m" responsive={false} direction="column">
+            <EuiFlexItem grow={false}>
+              <ProcessorsHeader
+                onLoadJson={onLoadJson}
+                onTestPipelineClick={onTestPipelineClick}
+                isTestButtonDisabled={isTestButtonDisabled}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <ProcessorsEditor />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiSpacer size="s" />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <OnFailureProcessorsTitle />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <GlobalOnFailureProcessorsEditor />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </div>
+      </PipelineProcessorsContextProvider>
     </>
   );
 };

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_fields.tsx

@@ -9,22 +9,26 @@ import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiLink, EuiText, EuiTitle } from
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { usePipelineProcessorsContext } from '../context';
+import { usePipelineProcessorsContext } from '../pipeline_processors_editor/context';
+
+import { LoadFromJsonButton, OnDoneLoadJsonHandler } from '../pipeline_processors_editor';
 
 export interface Props {
   onTestPipelineClick: () => void;
   isTestButtonDisabled: boolean;
+  onLoadJson: OnDoneLoadJsonHandler;
 }
 
-export const ProcessorsTitleAndTestButton: FunctionComponent<Props> = ({
+export const ProcessorsHeader: FunctionComponent<Props> = ({
   onTestPipelineClick,
   isTestButtonDisabled,
+  onLoadJson,
 }) => {
   const { links } = usePipelineProcessorsContext();
   return (
     <EuiFlexGroup
       alignItems="center"
-      gutterSize="none"
+      gutterSize="s"
       justifyContent="spaceBetween"
       responsive={false}
     >
@@ -55,6 +59,9 @@ export const ProcessorsTitleAndTestButton: FunctionComponent<Props> = ({
           />
         </EuiText>
       </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <LoadFromJsonButton onDone={onLoadJson} />
+      </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <EuiButton
           data-test-subj="testPipelineButton"

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_title_and_test_button.tsx renamed to x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/processors_header.tsx

@@ -0,0 +1,44 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+import { FormSchema, FIELD_TYPES, fieldValidators, fieldFormatters } from '../../../shared_imports';
+
+import { PipelineForm } from './types';
+
+const { emptyField } = fieldValidators;
+const { toInt } = fieldFormatters;
+
+export const pipelineFormSchema: FormSchema<PipelineForm> = {
+  name: {
+    type: FIELD_TYPES.TEXT,
+    label: i18n.translate('xpack.ingestPipelines.form.nameFieldLabel', {
+      defaultMessage: 'Name',
+    }),
+    validations: [
+      {
+        validator: emptyField(
+          i18n.translate('xpack.ingestPipelines.form.pipelineNameRequiredError', {
+            defaultMessage: 'Name is required.',
+          })
+        ),
+      },
+    ],
+  },
+  description: {
+    type: FIELD_TYPES.TEXTAREA,
+    label: i18n.translate('xpack.ingestPipelines.form.descriptionFieldLabel', {
+      defaultMessage: 'Description (optional)',
+    }),
+  },
+  version: {
+    type: FIELD_TYPES.NUMBER,
+    label: i18n.translate('xpack.ingestPipelines.form.versionFieldLabel', {
+      defaultMessage: 'Version (optional)',
+    }),
+    formatters: [toInt],
+  },
+};