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

elastic · Aug 13, 2020 · acc54d7 · acc54d7
1 parent 5ff03ea
commit acc54d7
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 15 deletions.
diff --git a/...ponents/pipeline_processors_editor/components/manage_processor_form/processors/append.tsx b/...ponents/pipeline_processors_editor/components/manage_processor_form/processors/append.tsx
@@ -7,7 +7,12 @@
 import React, { FunctionComponent } from 'react';
 import { i18n } from '@kbn/i18n';
 
-import { FIELD_TYPES, fieldValidators, UseField, Field } from '../../../../../../shared_imports';
+import {
+  FIELD_TYPES,
+  fieldValidators,
+  UseField,
+  ComboBoxField,
+} from '../../../../../../shared_imports';
 
 import { FieldsConfig } from './shared';
 import { FieldNameField } from './common_fields/field_name_field';
@@ -16,7 +21,8 @@ const { emptyField } = fieldValidators;
 
 const fieldsConfig: FieldsConfig = {
   value: {
-    type: FIELD_TYPES.TEXT,
+    type: FIELD_TYPES.COMBO_BOX,
+    deserializer: (v) => (Array.isArray(v) ? v : [String(v)]),
     label: i18n.translate('xpack.ingestPipelines.pipelineEditor.appendForm.valueFieldLabel', {
       defaultMessage: 'Value',
     }),
@@ -44,7 +50,7 @@ export const Append: FunctionComponent = () => {
         })}
       />
 
-      <UseField config={fieldsConfig.value} component={Field} path="fields.value" />
+      <UseField config={fieldsConfig.value} component={ComboBoxField} path="fields.value" />
     </>
   );
 };
diff --git a/...ors_editor/components/manage_processor_form/processors/common_fields/field_name_field.tsx b/...ors_editor/components/manage_processor_form/processors/common_fields/field_name_field.tsx
@@ -5,7 +5,13 @@
  */
 import React, { FunctionComponent } from 'react';
 import { i18n } from '@kbn/i18n';
-import { FIELD_TYPES, UseField, Field, fieldValidators } from '../../../../../../../shared_imports';
+import {
+  FIELD_TYPES,
+  UseField,
+  Field,
+  fieldValidators,
+  ValidationConfig,
+} from '../../../../../../../shared_imports';
 
 import { FieldsConfig } from '../shared';
 
@@ -32,8 +38,21 @@ export const fieldsConfig: FieldsConfig = {
 
 interface Props {
   helpText?: React.ReactNode;
+  /**
+   * The field name requires a value. Processor specific validation
+   * checks can be added here.
+   */
+  additionalValidations?: ValidationConfig[];
 }
 
-export const FieldNameField: FunctionComponent<Props> = ({ helpText }) => (
-  <UseField config={{ ...fieldsConfig.field, helpText }} component={Field} path="fields.field" />
+export const FieldNameField: FunctionComponent<Props> = ({ helpText, additionalValidations }) => (
+  <UseField
+    config={{
+      ...fieldsConfig.field,
+      helpText,
+      validations: fieldsConfig.field.validations!.concat(additionalValidations ?? []),
+    }}
+    component={Field}
+    path="fields.field"
+  />
 );
diff --git a/...s/pipeline_processors_editor/components/manage_processor_form/processors/dot_expander.tsx b/...s/pipeline_processors_editor/components/manage_processor_form/processors/dot_expander.tsx
@@ -5,9 +5,7 @@
  */
 
 import React, { FunctionComponent } from 'react';
-import { EuiCode } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n/react';
 
 import { FieldConfig, FIELD_TYPES, UseField, Field } from '../../../../../../shared_imports';
 
@@ -29,13 +27,26 @@ export const DotExpander: FunctionComponent = () => {
   return (
     <>
       <FieldNameField
-        helpText={
-          <FormattedMessage
-            id="xpack.ingestPipelines.pipelineEditor.dotExpanderForm.fieldNameHelpText"
-            defaultMessage="The field to expand into an object field. Requires at least one {dot} character."
-            values={{ dot: <EuiCode>{'.'}</EuiCode> }}
-          />
-        }
+        helpText={i18n.translate(
+          'xpack.ingestPipelines.pipelineEditor.dotExpanderForm.fieldNameHelpText',
+          { defaultMessage: 'The field to expand into an object field.' }
+        )}
+        additionalValidations={[
+          {
+            validator: ({ value }) => {
+              if (typeof value === 'string' && value.length) {
+                return !value.includes('.')
+                  ? {
+                      message: i18n.translate(
+                        'xpack.ingestPipelines.pipelineEditor.dotExpanderForm.fieldNameHelpText',
+                        { defaultMessage: 'A field value requires at least one dot character.' }
+                      ),
+                    }
+                  : undefined;
+              }
+            },
+          },
+        ]}
       />
 
       <UseField config={fieldsConfig.path} component={Field} path="fields.path" />

diff --git a/x-pack/plugins/ingest_pipelines/public/shared_imports.ts b/x-pack/plugins/ingest_pipelines/public/shared_imports.ts
@@ -44,6 +44,7 @@ export {
   FieldHook,
   getFieldValidityAndErrorMessage,
   ValidationFunc,
+  ValidationConfig,
 } from '../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib';
 
 export {