[Ingest Pipelines] Fix serialization and deserialization of user input for "patterns" fields

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/field_components/drag_and_drop_text_list.tsx

@@ -45,6 +45,14 @@ interface Props {
    * Validation to be applied to every text item
    */
   textValidation?: ValidationFunc<any, string, string>;
+  /**
+   * Serializer to be applied to every text item
+   */
+  textSerializer?: <O = string>(v: string) => O;
+  /**
+   * Deserializer to be applied to every text item
+   */
+  textDeserializer?: (v: unknown) => string;
 }
 
 const i18nTexts = {
@@ -64,6 +72,8 @@ function DragAndDropTextListComponent({
   onRemove,
   addLabel,
   textValidation,
+  textDeserializer,
+  textSerializer,
 }: Props): JSX.Element {
   const [droppableId] = useState(() => uuid.v4());
   const [firstItemId] = useState(() => uuid.v4());
@@ -136,6 +146,8 @@ function DragAndDropTextListComponent({
                                 validations: textValidation
                                   ? [{ validator: textValidation }]
                                   : undefined,
+                                deserializer: textDeserializer,
+                                serializer: textSerializer,
                               }}
                               readDefaultValueOnForm={!item.isNew}
                             >

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

@@ -22,7 +22,7 @@ import {
 
 import { FieldNameField } from './common_fields/field_name_field';
 import { IgnoreMissingField } from './common_fields/ignore_missing_field';
-import { EDITOR_PX_HEIGHT, from } from './shared';
+import { EDITOR_PX_HEIGHT, from, to } from './shared';
 
 const { emptyField } = fieldValidators;
 
@@ -34,6 +34,8 @@ const getFieldsConfig = (esDocUrl: string): Record<string, FieldConfig> => {
       label: i18n.translate('xpack.ingestPipelines.pipelineEditor.dissectForm.patternFieldLabel', {
         defaultMessage: 'Pattern',
       }),
+      deserializer: to.escapeBackslashes,
+      serializer: from.unescapeBackslashes,
       helpText: (
         <FormattedMessage
           id="xpack.ingestPipelines.pipelineEditor.dissectForm.patternFieldHelpText"

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

@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { flow } from 'lodash';
 import React, { FunctionComponent } from 'react';
 import { i18n } from '@kbn/i18n';
 
@@ -54,6 +55,8 @@ const fieldsConfig: FieldsConfig = {
     label: i18n.translate('xpack.ingestPipelines.pipelineEditor.grokForm.patternsFieldLabel', {
       defaultMessage: 'Patterns',
     }),
+    deserializer: flow(String, to.escapeBackslashes),
+    serializer: from.unescapeBackslashes,
     helpText: i18n.translate('xpack.ingestPipelines.pipelineEditor.grokForm.patternsHelpText', {
       defaultMessage:
         'Grok expressions used to match and extract named capture groups. Uses the first matching expression.',
@@ -134,6 +137,8 @@ export const Grok: FunctionComponent = () => {
               onRemove={removeItem}
               addLabel={i18nTexts.addPatternLabel}
               textValidation={patternValidation}
+              textDeserializer={fieldsConfig.patterns?.deserializer}
+              textSerializer={fieldsConfig.patterns?.serializer}
             />
           );
         }}

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

@@ -5,14 +5,15 @@
  * 2.0.
  */
 
+import { flow } from 'lodash';
 import React, { FunctionComponent } from 'react';
 import { i18n } from '@kbn/i18n';
 
 import { FIELD_TYPES, fieldValidators, UseField, Field } from '../../../../../../shared_imports';
 
 import { TextEditor } from '../field_components';
 
-import { EDITOR_PX_HEIGHT, FieldsConfig } from './shared';
+import { EDITOR_PX_HEIGHT, FieldsConfig, from, to } 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';
@@ -26,7 +27,8 @@ const fieldsConfig: FieldsConfig = {
     label: i18n.translate('xpack.ingestPipelines.pipelineEditor.gsubForm.patternFieldLabel', {
       defaultMessage: 'Pattern',
     }),
-    deserializer: String,
+    deserializer: flow(String, to.escapeBackslashes),
+    serializer: from.unescapeBackslashes,
     helpText: i18n.translate('xpack.ingestPipelines.pipelineEditor.gsubForm.patternFieldHelpText', {
       defaultMessage: 'Regular expression used to match substrings in the field.',
     }),

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/shared.test.ts

@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { from, to } from './shared';
+
+describe('shared', () => {
+  describe('deserialization helpers #to', () => {
+    test('to.escapeBackslashes', () => {
+      // this input loaded from the server
+      const input1 = 'my\ttab';
+      expect(to.escapeBackslashes(input1)).toBe('my\\ttab');
+
+      // this input loaded from the server
+      const input2 = 'my\\ttab';
+      expect(to.escapeBackslashes(input2)).toBe('my\\\\ttab');
+
+      // this input loaded from the server
+      const input3 = '\t\n\rOK';
+      expect(to.escapeBackslashes(input3)).toBe('\\t\\n\\rOK');
+    });
+  });
+
+  describe('serialization helpers #from', () => {
+    test('from.unescapeBackslashes', () => {
+      // user typed in "my\ttab"
+      const input1 = 'my\\ttab';
+      expect(from.unescapeBackslashes(input1)).toBe('my\ttab');
+
+      // user typed in "my\\tab"
+      const input2 = 'my\\\\ttab';
+      expect(from.unescapeBackslashes(input2)).toBe('my\\ttab');
+
+      // user typed in "\t\n\rOK"
+      const input3 = '\\t\\n\\rOK';
+      expect(from.unescapeBackslashes(input3)).toBe('\t\n\rOK');
+    });
+  });
+});

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/shared.ts

@@ -36,6 +36,12 @@ export const to = {
   arrayOfStrings: (v: unknown): string[] =>
     isArrayOfStrings(v) ? v : typeof v === 'string' && v.length ? [v] : [],
   jsonString: (v: unknown) => (v ? JSON.stringify(v, null, 2) : '{}'),
+  /**
+   * Useful when deserializing strings that will be rendered inside of text areas or text inputs. We want
+   * a string like: "my\ttab" to render the same, not to render as "my<tab>tab".
+   */
+  escapeBackslashes: (v: unknown) =>
+    typeof v === 'string' ? JSON.parse(JSON.stringify(v).replace(/\\/g, '\\\\')) : v,
 };
 
 /**
@@ -69,6 +75,13 @@ export const from = {
   optionalArrayOfStrings: (v: string[]) => (v.length ? v : undefined),
   undefinedIfValue: (value: unknown) => (v: boolean) => (v === value ? undefined : v),
   emptyStringToUndefined: (v: unknown) => (v === '' ? undefined : v),
+  /**
+   * Useful when serializing user input from a <textarea /> that we want to later JSON.stringify but keep the same as what
+   * the user input. For instance, given "my\ttab", encoded as "my%5Ctab" will JSON.stringify to "my\\ttab", instead we want
+   * to keep the input exactly as the user entered it.
+   */
+  unescapeBackslashes: (v: unknown) =>
+    typeof v === 'string' ? JSON.parse(JSON.stringify(v).replace(/\\\\/g, '\\')) : v,
 };
 
 export const EDITOR_PX_HEIGHT = {