[Ingest Pipelines] Processor forms for processors A-D (#72849)

* First few processors of the first batch

- Also refactored options to live in scoped objects to avoid
  overriding type (important fix!)
- Have not polished copy or form layout.

* add type to shared imports

* Refactors for repeated fields and added forms

- date_index_name
- dissect
- dot_expander
- drop

Fields refactored:

- Field
- Ignore missing

* Fix broken imports and some other small refactors

* added text editor field and updated pattern and if fields

* Large copy improvements and updates and other small refactors

- Added help text for all fields
- Updated layout so that required fields are always on first
- Replaced circle radio group with a select drop down

* update circle shape type field to select

* Added "long" option for convert type

* fix path import

* fix types and i18n

* add validation for dot expander fix append value to be a combobox

* fix i18n

Co-authored-by: Elastic Machine <[email protected]>

Author: jloleysens

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/field_components/index.ts

@@ -4,4 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { OnXJsonEditorUpdateHandler, XJsonEditor } from './xjson_editor';
+export { XJsonEditor } from './xjson_editor';
+export { TextEditor } from './text_editor';

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

@@ -0,0 +1,38 @@
+/*
+ * 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 { EuiPanel } from '@elastic/eui';
+import React, { FunctionComponent } from 'react';
+import { EuiFormRow } from '@elastic/eui';
+import {
+  CodeEditor,
+  FieldHook,
+  getFieldValidityAndErrorMessage,
+} from '../../../../../../shared_imports';
+
+interface Props {
+  field: FieldHook<string>;
+  editorProps: { [key: string]: any };
+}
+
+export const TextEditor: FunctionComponent<Props> = ({ field, editorProps }) => {
+  const { value, helpText, setValue, label } = field;
+  const { errorMessage } = getFieldValidityAndErrorMessage(field);
+
+  return (
+    <EuiFormRow
+      label={label}
+      helpText={helpText}
+      isInvalid={typeof errorMessage === 'string'}
+      error={errorMessage}
+      fullWidth
+    >
+      <EuiPanel paddingSize="s" hasShadow={false}>
+        <CodeEditor value={value} onChange={setValue} {...(editorProps as any)} />
+      </EuiPanel>
+    </EuiFormRow>
+  );
+};

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

@@ -4,35 +4,20 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiPanel } from '@elastic/eui';
 import { XJsonLang } from '@kbn/monaco';
 import React, { FunctionComponent, useCallback } from 'react';
-import { EuiFormRow } from '@elastic/eui';
-import {
-  CodeEditor,
-  FieldHook,
-  getFieldValidityAndErrorMessage,
-  Monaco,
-} from '../../../../../../shared_imports';
+import { FieldHook, Monaco } from '../../../../../../shared_imports';
 
-export type OnXJsonEditorUpdateHandler<T = { [key: string]: any }> = (arg: {
-  data: {
-    raw: string;
-    format(): T;
-  };
-  validate(): boolean;
-  isValid: boolean | undefined;
-}) => void;
+import { TextEditor } from './text_editor';
 
 interface Props {
   field: FieldHook<string>;
   editorProps: { [key: string]: any };
 }
 
 export const XJsonEditor: FunctionComponent<Props> = ({ field, editorProps }) => {
-  const { value, helpText, setValue, label } = field;
+  const { value, setValue } = field;
   const { xJson, setXJson, convertToJson } = Monaco.useXJsonMode(value);
-  const { errorMessage } = getFieldValidityAndErrorMessage(field);
 
   const onChange = useCallback(
     (s) => {
@@ -42,25 +27,18 @@ export const XJsonEditor: FunctionComponent<Props> = ({ field, editorProps }) =>
     [setValue, setXJson, convertToJson]
   );
   return (
-    <EuiFormRow
-      label={label}
-      helpText={helpText}
-      isInvalid={typeof errorMessage === 'string'}
-      error={errorMessage}
-      fullWidth
-    >
-      <EuiPanel paddingSize="s" hasShadow={false}>
-        <CodeEditor
-          value={xJson}
-          languageId={XJsonLang.ID}
-          editorDidMount={(m) => {
-            XJsonLang.registerGrammarChecker(m);
-          }}
-          options={{ minimap: { enabled: false } }}
-          onChange={onChange}
-          {...(editorProps as any)}
-        />
-      </EuiPanel>
-    </EuiFormRow>
+    <TextEditor
+      field={field}
+      editorProps={{
+        value: xJson,
+        languageId: XJsonLang.ID,
+        options: { minimap: { enabled: false } },
+        editorDidMount: (m: any) => {
+          XJsonLang.registerGrammarChecker(m);
+        },
+        onChange,
+        ...editorProps,
+      }}
+    />
   );
 };

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

@@ -40,18 +40,19 @@ export const ManageProcessorForm: FunctionComponent<Props> = ({
   const handleSubmit = useCallback(
     async (data: FormData, isValid: boolean) => {
       if (isValid) {
-        const { type, customOptions, ...options } = data;
+        const { type, customOptions, fields } = data;
         onSubmit({
           type,
-          options: customOptions ? customOptions : options,
+          options: customOptions ? customOptions : fields,
         });
       }
     },
     [onSubmit]
   );
 
+  const maybeProcessorOptions = processor?.options;
   const { form } = useForm({
-    defaultValue: processor?.options,
+    defaultValue: { fields: maybeProcessorOptions ?? {} },
     onSubmit: handleSubmit,
   });
 

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

@@ -14,12 +14,12 @@ import {
   EuiFlyoutHeader,
   EuiFlyoutBody,
   EuiFlyoutFooter,
-  EuiSpacer,
   EuiTabs,
   EuiTab,
   EuiTitle,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiSpacer,
 } from '@elastic/eui';
 
 import { Form, FormDataProvider, FormHook } from '../../../../../shared_imports';

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

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

@@ -0,0 +1,56 @@
+/*
+ * 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_TYPES,
+  fieldValidators,
+  UseField,
+  ComboBoxField,
+} from '../../../../../../shared_imports';
+
+import { FieldsConfig } 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)]),
+    label: i18n.translate('xpack.ingestPipelines.pipelineEditor.appendForm.valueFieldLabel', {
+      defaultMessage: 'Value',
+    }),
+    helpText: i18n.translate('xpack.ingestPipelines.pipelineEditor.appendForm.valueFieldHelpText', {
+      defaultMessage: 'The value to be appended by this processor.',
+    }),
+    validations: [
+      {
+        validator: emptyField(
+          i18n.translate('xpack.ingestPipelines.pipelineEditor.appendForm.valueRequiredError', {
+            defaultMessage: 'A value to set is required.',
+          })
+        ),
+      },
+    ],
+  },
+};
+
+export const Append: FunctionComponent = () => {
+  return (
+    <>
+      <FieldNameField
+        helpText={i18n.translate('xpack.ingestPipelines.pipelineEditor.appendForm.fieldHelpText', {
+          defaultMessage: 'The field to be appended to.',
+        })}
+      />
+
+      <UseField config={fieldsConfig.value} component={ComboBoxField} path="fields.value" />
+    </>
+  );
+};

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

@@ -0,0 +1,43 @@
+/*
+ * 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_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',
+    }),
+  },
+};
+
+export const Bytes: FunctionComponent = () => {
+  return (
+    <>
+      <FieldNameField
+        helpText={i18n.translate(
+          'xpack.ingestPipelines.pipelineEditor.bytesForm.fieldNameHelpText',
+          { defaultMessage: 'The field to convert.' }
+        )}
+      />
+
+      <UseField config={fieldsConfig.target_field} component={Field} path="fields.target_field" />
+
+      <IgnoreMissingField />
+    </>
+  );
+};