[Ingest pipelines] Forms for processors T-U

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/common_fields/properties_field.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 { ComboBoxField, FIELD_TYPES, UseField } from '../../../../../../../shared_imports';
+
+import { FieldsConfig, to } from '../shared';
+
+const fieldsConfig: FieldsConfig = {
+  properties: {
+    type: FIELD_TYPES.COMBO_BOX,
+    deserializer: to.arrayOfStrings,
+    serializer: (v: string[]) => (v.length ? v : undefined),
+    label: i18n.translate(
+      'xpack.ingestPipelines.pipelineEditor.commonFields.propertiesFieldLabel',
+      {
+        defaultMessage: 'Properties (optional)',
+      }
+    ),
+  },
+};
+
+interface Props {
+  helpText?: React.ReactNode;
+}
+
+export const PropertiesField: FunctionComponent<Props> = ({ helpText }) => {
+  return (
+    <UseField
+      config={{
+        ...fieldsConfig.properties,
+        helpText,
+      }}
+      component={ComboBoxField}
+      path="fields.properties"
+    />
+  );
+};

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

@@ -9,18 +9,13 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiCode } from '@elastic/eui';
 
-import {
-  FIELD_TYPES,
-  UseField,
-  Field,
-  ComboBoxField,
-  ToggleField,
-} from '../../../../../../shared_imports';
+import { FIELD_TYPES, UseField, Field, ToggleField } from '../../../../../../shared_imports';
 
 import { FieldNameField } from './common_fields/field_name_field';
 import { IgnoreMissingField } from './common_fields/ignore_missing_field';
 import { FieldsConfig, from, to } from './shared';
 import { TargetField } from './common_fields/target_field';
+import { PropertiesField } from './common_fields/properties_field';
 
 const fieldsConfig: FieldsConfig = {
   /* Optional field config */
@@ -42,21 +37,6 @@ const fieldsConfig: FieldsConfig = {
     ),
   },
 
-  properties: {
-    type: FIELD_TYPES.COMBO_BOX,
-    deserializer: to.arrayOfStrings,
-    label: i18n.translate('xpack.ingestPipelines.pipelineEditor.geoIPForm.propertiesFieldLabel', {
-      defaultMessage: 'Properties (optional)',
-    }),
-    helpText: i18n.translate(
-      'xpack.ingestPipelines.pipelineEditor.geoIPForm.propertiesFieldHelpText',
-      {
-        defaultMessage:
-          'Properties added to the target field. Valid properties depend on the database file used.',
-      }
-    ),
-  },
-
   first_only: {
     type: FIELD_TYPES.TOGGLE,
     defaultValue: true,
@@ -95,10 +75,14 @@ export const GeoIP: FunctionComponent = () => {
 
       <UseField component={Field} config={fieldsConfig.database_file} path="fields.database_file" />
 
-      <UseField
-        component={ComboBoxField}
-        config={fieldsConfig.properties}
-        path="fields.properties"
+      <PropertiesField
+        helpText={i18n.translate(
+          'xpack.ingestPipelines.pipelineEditor.geoIPForm.propertiesFieldHelpText',
+          {
+            defaultMessage:
+              'Properties added to the target field. Valid properties depend on the database file used.',
+          }
+        )}
       />
 
       <UseField component={ToggleField} config={fieldsConfig.first_only} path="fields.first_only" />

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

@@ -34,5 +34,9 @@ export { SetProcessor } from './set';
 export { SetSecurityUser } from './set_security_user';
 export { Split } from './split';
 export { Sort } from './sort';
+export { Trim } from './trim';
+export { Uppercase } from './uppercase';
+export { UrlDecode } from './url_decode';
+export { UserAgent } from './user_agent';
 
 export { FormFieldsComponent } from './shared';

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

@@ -0,0 +1,29 @@
+/*
+ * 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 { IgnoreMissingField } from './common_fields/ignore_missing_field';
+import { FieldNameField } from './common_fields/field_name_field';
+import { TargetField } from './common_fields/target_field';
+
+export const Trim: FunctionComponent = () => {
+  return (
+    <>
+      <FieldNameField
+        helpText={i18n.translate(
+          'xpack.ingestPipelines.pipelineEditor.trimForm.fieldNameHelpText',
+          { defaultMessage: 'The field to trim whitespace from.' }
+        )}
+      />
+
+      <TargetField />
+
+      <IgnoreMissingField />
+    </>
+  );
+};

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

@@ -0,0 +1,29 @@
+/*
+ * 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 { IgnoreMissingField } from './common_fields/ignore_missing_field';
+import { FieldNameField } from './common_fields/field_name_field';
+import { TargetField } from './common_fields/target_field';
+
+export const Uppercase: FunctionComponent = () => {
+  return (
+    <>
+      <FieldNameField
+        helpText={i18n.translate(
+          'xpack.ingestPipelines.pipelineEditor.uppercaseForm.fieldNameHelpText',
+          { defaultMessage: 'The field to make uppercase.' }
+        )}
+      />
+
+      <TargetField />
+
+      <IgnoreMissingField />
+    </>
+  );
+};

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

@@ -0,0 +1,29 @@
+/*
+ * 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 { IgnoreMissingField } from './common_fields/ignore_missing_field';
+import { FieldNameField } from './common_fields/field_name_field';
+import { TargetField } from './common_fields/target_field';
+
+export const UrlDecode: FunctionComponent = () => {
+  return (
+    <>
+      <FieldNameField
+        helpText={i18n.translate(
+          'xpack.ingestPipelines.pipelineEditor.urlDecodeForm.fieldNameHelpText',
+          { defaultMessage: 'The field to decode.' }
+        )}
+      />
+
+      <TargetField />
+
+      <IgnoreMissingField />
+    </>
+  );
+};

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

@@ -0,0 +1,62 @@
+/*
+ * 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';
+import { TargetField } from './common_fields/target_field';
+import { PropertiesField } from './common_fields/properties_field';
+
+const fieldsConfig: FieldsConfig = {
+  regex_file: {
+    type: FIELD_TYPES.TEXT,
+    deserializer: String,
+    label: i18n.translate(
+      'xpack.ingestPipelines.pipelineEditor.userAgentForm.regexFileFieldLabel',
+      {
+        defaultMessage: 'Regex file (optional)',
+      }
+    ),
+    helpText: i18n.translate(
+      'xpack.ingestPipelines.pipelineEditor.userAgentForm.regexFileFieldHelpText',
+      {
+        defaultMessage:
+          'A filename containing the regular expressions for parsing the user agent string.',
+      }
+    ),
+  },
+};
+
+export const UserAgent: FunctionComponent = () => {
+  return (
+    <>
+      <FieldNameField
+        helpText={i18n.translate(
+          'xpack.ingestPipelines.pipelineEditor.userAgentForm.fieldNameHelpText',
+          { defaultMessage: 'The field containing the user agent string.' }
+        )}
+      />
+
+      <UseField config={fieldsConfig.regex_file} component={Field} path="fields.regex_file" />
+
+      <TargetField />
+
+      <PropertiesField
+        helpText={i18n.translate(
+          'xpack.ingestPipelines.pipelineEditor.userAgentForm.propertiesFieldHelpText',
+          { defaultMessage: 'Properties added to the target field.' }
+        )}
+      />
+
+      <IgnoreMissingField />
+    </>
+  );
+};

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

@@ -37,6 +37,10 @@ import {
   SetSecurityUser,
   Split,
   Sort,
+  Trim,
+  Uppercase,
+  UrlDecode,
+  UserAgent,
   FormFieldsComponent,
 } from '../manage_processor_form/processors';
 
@@ -263,28 +267,28 @@ export const mapProcessorTypeToDescriptor: MapProcessorTypeToDescriptor = {
     }),
   },
   trim: {
-    FieldsComponent: undefined, // TODO: Implement
+    FieldsComponent: Trim,
     docLinkPath: '/trim-processor.html',
     label: i18n.translate('xpack.ingestPipelines.processors.label.trim', {
       defaultMessage: 'Trim',
     }),
   },
   uppercase: {
-    FieldsComponent: undefined, // TODO: Implement
+    FieldsComponent: Uppercase,
     docLinkPath: '/uppercase-processor.html',
     label: i18n.translate('xpack.ingestPipelines.processors.label.uppercase', {
       defaultMessage: 'Uppercase',
     }),
   },
   urldecode: {
-    FieldsComponent: undefined, // TODO: Implement
+    FieldsComponent: UrlDecode,
     docLinkPath: '/urldecode-processor.html',
     label: i18n.translate('xpack.ingestPipelines.processors.label.urldecode', {
       defaultMessage: 'URL decode',
     }),
   },
   user_agent: {
-    FieldsComponent: undefined, // TODO: Implement
+    FieldsComponent: UserAgent,
     docLinkPath: '/user-agent-processor.html',
     label: i18n.translate('xpack.ingestPipelines.processors.label.userAgent', {
       defaultMessage: 'User agent',