Made a space for common parameters

x-pack/plugins/ingest_pipelines/public/application/pipeline_editor/components/form_flyout.tsx

@@ -3,13 +3,15 @@
  * 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 { EuiFlyout, EuiFlyoutHeader, EuiTitle, EuiFlyoutBody } from '@elastic/eui';
 
 import React, { FunctionComponent } from 'react';
 
 import { PipelineEditorProcessor } from '../types';
-import { getProcessorFormFromType } from '../processor_forms';
+
+import { ProcessorForm } from './processor_form';
 
 export interface Props {
   processor: PipelineEditorProcessor;
@@ -18,7 +20,6 @@ export interface Props {
 
 export const FormFlyout: FunctionComponent<Props> = ({ onClose, processor }) => {
   const type = processor.type;
-  const FormComponent = getProcessorFormFromType(type as any);
   return (
     <EuiFlyout onClose={onClose} aria-labelledby="flyoutComplicatedTitle">
       <EuiFlyoutHeader hasBorder>
@@ -32,7 +33,7 @@ export const FormFlyout: FunctionComponent<Props> = ({ onClose, processor }) =>
         </EuiTitle>
       </EuiFlyoutHeader>
       <EuiFlyoutBody>
-        <FormComponent processor={processor as any} onSubmit={() => {}} />
+        <ProcessorForm processor={processor as any} onSubmit={() => {}} />
       </EuiFlyoutBody>
     </EuiFlyout>
   );

x-pack/plugins/ingest_pipelines/public/application/pipeline_editor/components/index.ts

@@ -5,3 +5,4 @@
  */
 
 export { FormFlyout } from './form_flyout';
+export { ProcessorForm } from './processor_form';

x-pack/plugins/ingest_pipelines/public/application/pipeline_editor/components/processor_form/common_processor_fields.tsx

@@ -0,0 +1,49 @@
+/*
+ * 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 React, { FunctionComponent } from 'react';
+import {
+  FormRow,
+  FormSchema,
+  UseField,
+  FIELD_TYPES,
+  Field,
+  ToggleField,
+} from '../../../../shared_imports';
+
+export const formSchema: FormSchema = {
+  ignore_failure: {
+    defaultValue: false,
+    label: 'Ignore Failure',
+    type: FIELD_TYPES.TOGGLE,
+  },
+  if: {
+    defaultValue: undefined,
+    label: 'If',
+    type: FIELD_TYPES.TEXT,
+  },
+  tag: {
+    defaultValue: undefined,
+    label: 'Tag',
+    type: FIELD_TYPES.TEXT,
+  },
+};
+
+export const CommonProcessorFields: FunctionComponent = () => {
+  return (
+    <>
+      <FormRow title="Ignore Failure">
+        <UseField component={ToggleField} path={'ignore_failure'} />
+      </FormRow>
+      <FormRow title="If">
+        <UseField component={Field} path={'if'} />
+      </FormRow>
+      <FormRow title="Tag">
+        <UseField component={Field} path={'tag'} />
+      </FormRow>
+    </>
+  );
+};

x-pack/plugins/ingest_pipelines/public/application/pipeline_editor/processor_forms/index.ts → x-pack/plugins/ingest_pipelines/public/application/pipeline_editor/components/processor_form/index.ts

@@ -4,12 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { SetProcessor } from './set';
-
-const typeNameToComponentMap = {
-  set: SetProcessor,
-};
-
-export const getProcessorFormFromType = (type: keyof typeof typeNameToComponentMap) => {
-  return typeNameToComponentMap[type];
-};
+export { ProcessorForm } from './processor_form';

x-pack/plugins/ingest_pipelines/public/application/pipeline_editor/components/processor_form/map_processor_type_to_form.tsx

@@ -0,0 +1,19 @@
+/*
+ * 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 { ProcessorFormDescriptor } from './types';
+
+import * as setForm from './processors/set';
+
+const mapProcessorTypeToForm = {
+  set: setForm,
+};
+
+type ProcessorType = keyof typeof mapProcessorTypeToForm;
+
+export const getProcessorFormDescriptor = (type: string): ProcessorFormDescriptor => {
+  return mapProcessorTypeToForm[type as ProcessorType];
+};

x-pack/plugins/ingest_pipelines/public/application/pipeline_editor/components/processor_form/processor_form.tsx

@@ -0,0 +1,40 @@
+/*
+ * 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 React, { FunctionComponent } from 'react';
+import { PipelineEditorProcessor } from '../../types';
+import { Form, useForm } from '../../../../shared_imports';
+import { getProcessorFormDescriptor } from './map_processor_type_to_form';
+import { CommonProcessorFields, formSchema as commonFormSchema } from './common_processor_fields';
+
+export interface Props {
+  processor: PipelineEditorProcessor;
+  onSubmit: (processor: PipelineEditorProcessor) => void;
+}
+
+export const ProcessorForm: FunctionComponent<Props> = ({ processor }) => {
+  const formDescriptor = getProcessorFormDescriptor(processor.type);
+
+  // TODO: Handle this error in a different way
+  if (!formDescriptor) {
+    throw new Error(`Could not find form for type ${processor.type}`);
+  }
+
+  const { form } = useForm({
+    defaultValue: { ...processor.options },
+    schema: {
+      ...commonFormSchema,
+      ...formDescriptor.formSchema,
+    },
+  });
+
+  return (
+    <Form form={form}>
+      <formDescriptor.Component processor={processor} />
+      <CommonProcessorFields />
+    </Form>
+  );
+};

x-pack/plugins/ingest_pipelines/public/application/pipeline_editor/processor_forms/set.tsx → x-pack/plugins/ingest_pipelines/public/application/pipeline_editor/components/processor_form/processors/set.tsx

@@ -6,28 +6,21 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiButton } from '@elastic/eui';
 
 import {
-  useForm,
-  Form,
   FormSchema,
-  getFormRow,
   FIELD_TYPES,
   fieldValidators,
-  getUseField,
+  FormRow,
+  UseField,
   Field,
-} from '../../../shared_imports';
+} from '../../../../../shared_imports';
 
-import { ProcessorFormComponent } from './types';
+import { ProcessorFormComponent } from '../types';
 
-// Generic setup -- should be moved out
-const UseField = getUseField({ component: Field });
-const FormRow = getFormRow({ titleTag: 'h3' });
 const { emptyField } = fieldValidators;
 
-// Schema declaration
-const formSchema: FormSchema = {
+export const formSchema: FormSchema = {
   field: {
     type: FIELD_TYPES.TEXT,
     label: i18n.translate('xpack.ingestPipelines.pipelineEditor.setForm.fieldFieldLabel', {
@@ -60,45 +53,31 @@ const formSchema: FormSchema = {
   },
 };
 
-// Form component
 interface SetOptions {
   field: string;
   value: string;
   override?: string;
 }
 
-export const SetProcessor: ProcessorFormComponent<SetOptions> = ({ processor, onSubmit }) => {
-  const { form } = useForm({
-    defaultValue: {
-      ...processor.options,
-    },
-    schema: formSchema,
-    onSubmit: (data, isValid) => {
-      // TODO do something here
-    },
-  });
-
+const SetProcessor: ProcessorFormComponent<SetOptions> = () => {
   return (
-    <Form form={form}>
+    <>
       <FormRow
         title={i18n.translate('xpack.ingestPipelines.pipelineEditor.setForm.fieldFieldTitle', {
           defaultMessage: 'Field',
         })}
       >
-        <UseField path="field" />
+        <UseField component={Field} path="field" />
       </FormRow>
       <FormRow
         title={i18n.translate('xpack.ingestPipelines.pipelineEditor.setForm.valueFieldTitle', {
           defaultMessage: 'Value',
         })}
       >
-        <UseField path="value" />
+        <UseField component={Field} path="value" />
       </FormRow>
-      <EuiButton fill onClick={form.submit}>
-        {i18n.translate('xpack.ingestPipelines.pipelineEditor.form.submitButtonLabel', {
-          defaultMessage: 'Submit',
-        })}
-      </EuiButton>
-    </Form>
+    </>
   );
 };
+
+export { SetProcessor as Component };

x-pack/plugins/ingest_pipelines/public/application/pipeline_editor/components/processor_form/types.ts

@@ -0,0 +1,18 @@
+/*
+ * 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 { FunctionComponent } from 'react';
+import { PipelineEditorProcessor } from '../../types';
+import { FormSchema } from '../../../../shared_imports';
+
+export type ProcessorFormComponent<Props = {}> = FunctionComponent<{
+  processor: PipelineEditorProcessor<Props>;
+}>;
+
+export interface ProcessorFormDescriptor {
+  Component: ProcessorFormComponent<any>;
+  formSchema: FormSchema;
+}

x-pack/plugins/ingest_pipelines/public/application/pipeline_editor/types.ts

@@ -6,9 +6,9 @@
 
 import { ESCommonProcessorOptions } from '../../../common/types';
 
-export interface PipelineEditorProcessor<E = {}> {
+export interface PipelineEditorProcessor<CustomProcessorOptions = {}> {
   readonly id: string;
   type: string;
-  options: ESCommonProcessorOptions & E;
+  options: ESCommonProcessorOptions & CustomProcessorOptions;
   onFailure?: PipelineEditorProcessor[];
 }

x-pack/plugins/ingest_pipelines/public/shared_imports.ts

@@ -25,6 +25,7 @@ export {
   getUseField,
   ValidationFuncArg,
   FormData,
+  UseField,
 } from '../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib';
 
 export {
@@ -37,6 +38,8 @@ export {
   getFormRow,
   Field,
   JsonEditorField,
+  FormRow,
+  ToggleField,
 } from '../../../../src/plugins/es_ui_shared/static/forms/components';
 
 export {