Add fields to Append Ingest Pipeline processor form (#149520)

Closes https://github.com/elastic/kibana/issues/145018

## Summary

This PR adds the `allow_duplicates` and `media_type` fields to the
Append Ingest Pipelines processor which allows these two settings to be
set through the UI.

Recording:

https://user-images.githubusercontent.com/59341489/214585327-1e151931-61c2-4d0a-9f3d-1e4b920272cd.mov

Screenshot:
<img width="500" alt="Screenshot 2023-01-25 at 14 18 19"
src="https://user-images.githubusercontent.com/59341489/214587407-f1e34d22-730b-4927-b84f-f4f64e4613d8.png">
<img width="500" alt="Screenshot 2023-01-25 at 14 21 32"
src="https://user-images.githubusercontent.com/59341489/214588123-0fadc7d7-7b82-44fa-8912-a2550457b2b0.png">


### Checklist

- [X] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [X] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [X] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [X] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [X] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/append.test.tsx

@@ -105,6 +105,7 @@ describe('Processor: Append', () => {
       find('appendValueField.input').simulate('change', [{ label: 'Some_Value' }]);
       component.update();
     });
+    form.toggleEuiSwitch('allowDuplicatesSwitch.input');
 
     form.toggleEuiSwitch('ignoreFailureSwitch.input');
     // Save the field with new changes
@@ -115,6 +116,44 @@ describe('Processor: Append', () => {
       field: 'field_1',
       ignore_failure: true,
       value: ['Some_Value'],
+      allow_duplicates: false,
+    });
+  });
+
+  test('should allow to set media_type when value is a template snippet', async () => {
+    const {
+      actions: { saveNewProcessor },
+      form,
+      find,
+      component,
+      exists,
+    } = testBed;
+
+    // Add "field" value (required)
+    form.setInputValue('fieldNameField.input', 'sample_field');
+
+    // Shouldn't be able to set media_type if value is not a template string
+    await act(async () => {
+      find('appendValueField.input').simulate('change', [{ label: 'value_1' }]);
+    });
+    component.update();
+    expect(exists('mediaTypeSelectorField')).toBe(false);
+
+    // Set value to a template snippet and media_type to a non-default value
+    await act(async () => {
+      find('appendValueField.input').simulate('change', [{ label: '{{{value_2}}}' }]);
+    });
+    component.update();
+    form.setSelectValue('mediaTypeSelectorField', 'text/plain');
+
+    // Save the field with new changes
+    await saveNewProcessor();
+
+    const processors = getProcessorValue(onUpdate, APPEND_TYPE);
+    expect(processors[0][APPEND_TYPE]).toEqual({
+      field: 'sample_field',
+      value: ['{{{value_2}}}'],
+      media_type: 'text/plain',
     });
   });
 });

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/processor.helpers.tsx

@@ -130,6 +130,7 @@ type TestSubject =
   | 'addProcessorButton'
   | 'addProcessorForm.submitButton'
   | 'appendValueField.input'
+  | 'allowDuplicatesSwitch.input'
   | 'formatsValueField.input'
   | 'timezoneField.input'
   | 'outputFormatField.input'

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

@@ -8,14 +8,19 @@
 import React, { FunctionComponent } from 'react';
 import { i18n } from '@kbn/i18n';
 
+import { FormattedMessage } from '@kbn/i18n-react';
+import { hasTemplateSnippet } from '../../../utils';
 import {
   FIELD_TYPES,
   fieldValidators,
   UseField,
   ComboBoxField,
+  ToggleField,
+  SelectField,
+  useFormData,
 } from '../../../../../../shared_imports';
 
-import { FieldsConfig, to } from './shared';
+import { FieldsConfig, from, to } from './shared';
 import { FieldNameField } from './common_fields/field_name_field';
 
 const { emptyField } = fieldValidators;
@@ -41,9 +46,42 @@ const fieldsConfig: FieldsConfig = {
       },
     ],
   },
+  allow_duplicates: {
+    type: FIELD_TYPES.TOGGLE,
+    defaultValue: true,
+    deserializer: to.booleanOrUndef,
+    serializer: from.undefinedIfValue(true),
+    label: i18n.translate(
+      'xpack.ingestPipelines.pipelineEditor.appendForm.allowDuplicatesFieldLabel',
+      {
+        defaultMessage: 'Allow duplicates',
+      }
+    ),
+    helpText: i18n.translate(
+      'xpack.ingestPipelines.pipelineEditor.appendForm.allowDuplicatesFieldHelpText',
+      {
+        defaultMessage: 'Allow appending values already present in the field.',
+      }
+    ),
+  },
+  media_type: {
+    type: FIELD_TYPES.SELECT,
+    defaultValue: 'application/json',
+    serializer: from.undefinedIfValue('application/json'),
+    label: i18n.translate('xpack.ingestPipelines.pipelineEditor.appendForm.mediaTypeFieldLabel', {
+      defaultMessage: 'Media type',
+    }),
+    helpText: (
+      <FormattedMessage
+        id="xpack.ingestPipelines.pipelineEditor.appendForm.mediaTypeFieldHelpText"
+        defaultMessage="Media type for encoding value."
+      />
+    ),
+  },
 };
 
 export const Append: FunctionComponent = () => {
+  const [{ fields }] = useFormData({ watch: ['fields.value'] });
   return (
     <>
       <FieldNameField
@@ -58,6 +96,40 @@ export const Append: FunctionComponent = () => {
         component={ComboBoxField}
         path="fields.value"
       />
+
+      <UseField
+        data-test-subj="allowDuplicatesSwitch"
+        config={fieldsConfig.allow_duplicates}
+        component={ToggleField}
+        path="fields.allow_duplicates"
+      />
+
+      {hasTemplateSnippet(fields?.value) && (
+        <UseField
+          componentProps={{
+            euiFieldProps: {
+              'data-test-subj': 'mediaTypeSelectorField',
+              options: [
+                {
+                  value: 'application/json',
+                  text: 'application/json',
+                },
+                {
+                  value: 'text/plain',
+                  text: 'text/plain',
+                },
+                {
+                  value: 'application/x-www-form-urlencoded',
+                  text: 'application/x-www-form-urlencoded',
+                },
+              ],
+            },
+          }}
+          config={fieldsConfig.media_type}
+          component={SelectField}
+          path="fields.media_type"
+        />
+      )}
     </>
   );
 };