[Ingest Pipelines] Processor forms for processors E-J

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processor_settings_fields.tsx

@@ -5,7 +5,7 @@
  */
 
 import React, { FunctionComponent } from 'react';
-import { EuiHorizontalRule, EuiSpacer } from '@elastic/eui';
+import { EuiHorizontalRule } from '@elastic/eui';
 
 import { FormDataProvider } from '../../../../../shared_imports';
 import { ProcessorInternal } from '../../types';
@@ -36,7 +36,7 @@ export const ProcessorSettingsFields: FunctionComponent<Props> = ({ processor })
               return (
                 <>
                   <formDescriptor.FieldsComponent />
-                  <EuiSpacer size="m" />
+                  <EuiHorizontalRule />
                   <CommonProcessorFields />
                 </>
               );

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/append.tsx

@@ -14,15 +14,15 @@ import {
   ComboBoxField,
 } from '../../../../../../shared_imports';
 
-import { FieldsConfig } from './shared';
+import { FieldsConfig, to } from './shared';
 import { FieldNameField } from './common_fields/field_name_field';
 
 const { emptyField } = fieldValidators;
 
 const fieldsConfig: FieldsConfig = {
   value: {
     type: FIELD_TYPES.COMBO_BOX,
-    deserializer: (v) => (Array.isArray(v) ? v : [String(v)]),
+    deserializer: to.arrayOfStrings,
     label: i18n.translate('xpack.ingestPipelines.pipelineEditor.appendForm.valueFieldLabel', {
       defaultMessage: 'Value',
     }),

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/bytes.tsx

@@ -7,23 +7,9 @@
 import React, { FunctionComponent } from 'react';
 import { i18n } from '@kbn/i18n';
 
-import { FIELD_TYPES, UseField, Field } from '../../../../../../shared_imports';
-
-import { FieldsConfig } from './shared';
 import { IgnoreMissingField } from './common_fields/ignore_missing_field';
 import { FieldNameField } from './common_fields/field_name_field';
-
-const fieldsConfig: FieldsConfig = {
-  target_field: {
-    type: FIELD_TYPES.TEXT,
-    label: i18n.translate('xpack.ingestPipelines.pipelineEditor.bytesForm.targetFieldLabel', {
-      defaultMessage: 'Target field (optional)',
-    }),
-    helpText: i18n.translate('xpack.ingestPipelines.pipelineEditor.bytesForm.targetFieldHelpText', {
-      defaultMessage: 'The field to assign the converted value to',
-    }),
-  },
-};
+import { TargetField } from './common_fields/target_field';
 
 export const Bytes: FunctionComponent = () => {
   return (
@@ -35,7 +21,7 @@ export const Bytes: FunctionComponent = () => {
         )}
       />
 
-      <UseField config={fieldsConfig.target_field} component={Field} path="fields.target_field" />
+      <TargetField />
 
       <IgnoreMissingField />
     </>

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/circle.tsx

@@ -11,30 +11,19 @@ import {
   FIELD_TYPES,
   fieldValidators,
   UseField,
-  Field,
   SelectField,
   NumericField,
 } from '../../../../../../shared_imports';
 
 import { FieldsConfig } from './shared';
 import { IgnoreMissingField } from './common_fields/ignore_missing_field';
 import { FieldNameField } from './common_fields/field_name_field';
+import { TargetField } from './common_fields/target_field';
 
 const { emptyField } = fieldValidators;
 
 const fieldsConfig: FieldsConfig = {
-  target_field: {
-    type: FIELD_TYPES.TEXT,
-    label: i18n.translate('xpack.ingestPipelines.pipelineEditor.circleForm.targetFieldLabel', {
-      defaultMessage: 'Target field (optional)',
-    }),
-    helpText: i18n.translate(
-      'xpack.ingestPipelines.pipelineEditor.circleForm.targetFieldHelpText',
-      {
-        defaultMessage: 'By default field is updated in-place.',
-      }
-    ),
-  },
+  /* Required fields config */
   error_distance: {
     type: FIELD_TYPES.NUMBER,
     deserializer: (v) => (typeof v === 'number' && !isNaN(v) ? v : 1.0),
@@ -71,6 +60,7 @@ const fieldsConfig: FieldsConfig = {
   },
   shape_type: {
     type: FIELD_TYPES.SELECT,
+    serializer: String,
     label: i18n.translate('xpack.ingestPipelines.pipelineEditor.circleForm.shapeTypeFieldLabel', {
       defaultMessage: 'Shape type',
     }),
@@ -132,7 +122,7 @@ export const Circle: FunctionComponent = () => {
         path="fields.shape_type"
       />
 
-      <UseField config={fieldsConfig.target_field} component={Field} path="fields.target_field" />
+      <TargetField />
 
       <IgnoreMissingField />
     </>

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/common_fields/common_processor_fields.tsx

@@ -16,11 +16,12 @@ import {
 } from '../../../../../../../shared_imports';
 
 import { TextEditor } from '../../field_components';
+import { to, from } from '../shared';
 
 const ignoreFailureConfig: FieldConfig = {
   defaultValue: false,
-  serializer: (v) => (v === false ? undefined : v),
-  deserializer: (v) => (typeof v === 'boolean' ? v : undefined),
+  deserializer: to.booleanOrUndef,
+  serializer: from.defaultBoolToUndef(false),
   label: i18n.translate(
     'xpack.ingestPipelines.pipelineEditor.commonFields.ignoreFailureFieldLabel',
     {
@@ -62,7 +63,7 @@ export const CommonProcessorFields: FunctionComponent = () => {
         component={TextEditor}
         componentProps={{
           editorProps: {
-            language: 'painless',
+            languageId: 'painless',
             height: 75,
             options: { minimap: { enabled: false } },
           },

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/common_fields/ignore_missing_field.tsx

@@ -5,32 +5,47 @@
  */
 import React, { FunctionComponent } from 'react';
 import { i18n } from '@kbn/i18n';
-import { FIELD_TYPES, UseField, ToggleField } from '../../../../../../../shared_imports';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiCode } from '@elastic/eui';
 
-import { FieldsConfig } from '../shared';
+import {
+  FIELD_TYPES,
+  UseField,
+  ToggleField,
+  FieldConfig,
+} from '../../../../../../../shared_imports';
+
+import { FieldsConfig, to, from } from '../shared';
 
 export const fieldsConfig: FieldsConfig = {
   ignore_missing: {
     type: FIELD_TYPES.TOGGLE,
     defaultValue: false,
-    serializer: (v) => (v === false ? undefined : v),
-    deserializer: (v) => (typeof v === 'boolean' ? v : undefined),
+    deserializer: to.booleanOrUndef,
+    serializer: from.defaultBoolToUndef(false),
     label: i18n.translate(
       'xpack.ingestPipelines.pipelineEditor.commonFields.ignoreMissingFieldLabel',
       {
         defaultMessage: 'Ignore missing',
       }
     ),
+    helpText: (
+      <FormattedMessage
+        id="xpack.ingestPipelines.pipelineEditor.commonFields.ignoreMissingFieldHelpText"
+        defaultMessage="Ignore documents with a missing {field}"
+        values={{
+          field: <EuiCode>{'field'}</EuiCode>,
+        }}
+      />
+    ),
   },
 };
 
-interface Props {
-  helpText?: string;
-}
+type Props = Partial<FieldConfig>;
 
-export const IgnoreMissingField: FunctionComponent<Props> = ({ helpText }) => (
+export const IgnoreMissingField: FunctionComponent<Props> = (props) => (
   <UseField
-    config={{ ...fieldsConfig.ignore_missing, helpText }}
+    config={{ ...fieldsConfig.ignore_missing, ...props }}
     component={ToggleField}
     path="fields.ignore_missing"
   />

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/common_fields/target_field.tsx

@@ -0,0 +1,46 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+import { Field, FIELD_TYPES, UseField, FieldConfig } from '../../../../../../../shared_imports';
+
+import { FieldsConfig } from '../shared';
+
+const fieldsConfig: FieldsConfig = {
+  target_field: {
+    type: FIELD_TYPES.TEXT,
+    deserializer: String,
+    label: i18n.translate('xpack.ingestPipelines.pipelineEditor.commonFields.targetFieldLabel', {
+      defaultMessage: 'Target field (optional)',
+    }),
+    helpText: i18n.translate(
+      'xpack.ingestPipelines.pipelineEditor.commonFields.targetFieldHelpText',
+      {
+        defaultMessage:
+          'The field to assign the joined value to. If empty, the field is updated in-place.',
+      }
+    ),
+  },
+};
+
+type Props = Partial<FieldConfig>;
+
+export const TARGET_FIELD_PATH = 'fields.target_field';
+
+export const TargetField: FunctionComponent<Props> = (props) => {
+  return (
+    <UseField
+      config={{
+        ...fieldsConfig.target_field,
+        ...props,
+      }}
+      component={Field}
+      path={TARGET_FIELD_PATH}
+    />
+  );
+};

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/convert.tsx

@@ -11,13 +11,13 @@ import {
   FIELD_TYPES,
   fieldValidators,
   UseField,
-  Field,
   SelectField,
 } from '../../../../../../shared_imports';
 
 import { FieldsConfig } from './shared';
 import { FieldNameField } from './common_fields/field_name_field';
 import { IgnoreMissingField } from './common_fields/ignore_missing_field';
+import { TargetField } from './common_fields/target_field';
 
 const { emptyField } = fieldValidators;
 
@@ -42,19 +42,6 @@ const fieldsConfig: FieldsConfig = {
       },
     ],
   },
-  /* Optional fields config */
-  target_field: {
-    type: FIELD_TYPES.TEXT,
-    label: i18n.translate('xpack.ingestPipelines.pipelineEditor.convertForm.targetFieldLabel', {
-      defaultMessage: 'Target field (optional)',
-    }),
-    helpText: i18n.translate(
-      'xpack.ingestPipelines.pipelineEditor.convertForm.targetFieldHelpText',
-      {
-        defaultMessage: 'The field to assign the converted value to.',
-      }
-    ),
-  },
 };
 
 export const Convert: FunctionComponent = () => {
@@ -128,7 +115,14 @@ export const Convert: FunctionComponent = () => {
         path="fields.type"
       />
 
-      <UseField config={fieldsConfig.target_field} component={Field} path="fields.target_field" />
+      <TargetField
+        helpText={i18n.translate(
+          'xpack.ingestPipelines.pipelineEditor.convertForm.targetFieldHelpText',
+          {
+            defaultMessage: 'The field to assign the converted value to.',
+          }
+        )}
+      />
 
       <IgnoreMissingField />
     </>

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/csv.tsx

@@ -23,7 +23,7 @@ import { FieldsConfig } from './shared';
 import { IgnoreMissingField } from './common_fields/ignore_missing_field';
 import { FieldNameField } from './common_fields/field_name_field';
 
-import { isArrayOfStrings } from './shared';
+import { to } from './shared';
 
 const { minLengthField } = fieldValidators;
 
@@ -47,9 +47,7 @@ const fieldsConfig: FieldsConfig = {
   /* Required fields config */
   target_fields: {
     type: FIELD_TYPES.COMBO_BOX,
-    deserializer: (v) => {
-      return isArrayOfStrings(v) ? v : [];
-    },
+    deserializer: to.arrayOfStrings,
     label: i18n.translate('xpack.ingestPipelines.pipelineEditor.csvForm.targetFieldsFieldLabel', {
       defaultMessage: 'Target fields',
     }),
@@ -112,7 +110,7 @@ const fieldsConfig: FieldsConfig = {
   trim: {
     type: FIELD_TYPES.TOGGLE,
     defaultValue: false,
-    deserializer: (v) => (typeof v === 'boolean' ? v : undefined),
+    deserializer: to.booleanOrUndef,
     label: i18n.translate('xpack.ingestPipelines.pipelineEditor.csvForm.trimFieldLabel', {
       defaultMessage: 'Trim',
     }),

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/date.tsx

@@ -17,18 +17,17 @@ import {
   ComboBoxField,
 } from '../../../../../../shared_imports';
 
-import { FieldsConfig, isArrayOfStrings } from './shared';
+import { FieldsConfig, to } from './shared';
 import { FieldNameField } from './common_fields/field_name_field';
+import { TargetField } from './common_fields/target_field';
 
 const { minLengthField } = fieldValidators;
 
 const fieldsConfig: FieldsConfig = {
   /* Required fields config */
   formats: {
     type: FIELD_TYPES.COMBO_BOX,
-    deserializer: (v) => {
-      return isArrayOfStrings(v) ? v : [];
-    },
+    deserializer: to.arrayOfStrings,
     label: i18n.translate('xpack.ingestPipelines.pipelineEditor.dateForm.formatsFieldLabel', {
       defaultMessage: 'Formats',
     }),
@@ -51,22 +50,6 @@ const fieldsConfig: FieldsConfig = {
     ],
   },
   /* Optional fields config */
-  target_field: {
-    type: FIELD_TYPES.TEXT,
-    serializer: (v) => (v ? undefined : v),
-    label: i18n.translate('xpack.ingestPipelines.pipelineEditor.dateForm.targetFieldFieldLabel', {
-      defaultMessage: 'Target field (optional)',
-    }),
-    helpText: (
-      <FormattedMessage
-        id="xpack.ingestPipelines.pipelineEditor.dateForm.targetFieldHelpText"
-        defaultMessage="The field that will hold the parsed date. Default field is {defaultField}."
-        values={{
-          defaultField: <EuiCode inline>{'@timestamp'}</EuiCode>,
-        }}
-      />
-    ),
-  },
   timezone: {
     type: FIELD_TYPES.TEXT,
     serializer: (v) => (v ? v : undefined),
@@ -112,7 +95,17 @@ export const DateProcessor: FunctionComponent = () => {
 
       <UseField config={fieldsConfig.formats} component={ComboBoxField} path="fields.formats" />
 
-      <UseField config={fieldsConfig.target_field} component={Field} path="fields.target_field" />
+      <TargetField
+        helpText={
+          <FormattedMessage
+            id="xpack.ingestPipelines.pipelineEditor.dateForm.targetFieldHelpText"
+            defaultMessage="The field that will hold the parsed date. Default field is {defaultField}."
+            values={{
+              defaultField: <EuiCode inline>{'@timestamp'}</EuiCode>,
+            }}
+          />
+        }
+      />
 
       <UseField config={fieldsConfig.timezone} component={Field} path="fields.timezone" />