[8.x] Handle both JSON and XJSON in processor editor (#200692) (#201910)

# Backport This will backport the following commits from `main` to `8.x`: - [Handle both JSON and XJSON in processor editor (#200692)](#200692)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Sonia Sanz Vivas <[email protected]>
elastic · Nov 27, 2024 · 9a76b27 · 9a76b27
1 parent 2a508ef
commit 9a76b27
Show file tree

Hide file tree

Showing 19 changed files with 675 additions and 63 deletions.
diff --git a/...elines/public/application/components/pipeline_editor/__jest__/processors/foreach.test.tsx b/...elines/public/application/components/pipeline_editor/__jest__/processors/foreach.test.tsx
@@ -0,0 +1,117 @@
+/*
+ * 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 { act } from 'react-dom/test-utils';
+import { setup, SetupResult, getProcessorValue, setupEnvironment } from './processor.helpers';
+
+const FOREACH_TYPE = 'foreach';
+
+describe('Processor: Foreach', () => {
+  let onUpdate: jest.Mock;
+  let testBed: SetupResult;
+  const { httpSetup } = setupEnvironment();
+
+  beforeAll(() => {
+    jest.useFakeTimers({ legacyFakeTimers: true });
+    // disable all react-beautiful-dnd development warnings
+    (window as any)['__@hello-pangea/dnd-disable-dev-warnings'] = true;
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+    // enable all react-beautiful-dnd development warnings
+    (window as any)['__@hello-pangea/dnd-disable-dev-warnings'] = false;
+  });
+
+  beforeEach(async () => {
+    onUpdate = jest.fn();
+
+    await act(async () => {
+      testBed = await setup(httpSetup, {
+        value: {
+          processors: [],
+        },
+        onFlyoutOpen: jest.fn(),
+        onUpdate,
+      });
+    });
+
+    const { component, actions } = testBed;
+
+    component.update();
+
+    // Open flyout to add new processor
+    actions.addProcessor();
+    // Add type (the other fields are not visible until a type is selected)
+    await actions.addProcessorType(FOREACH_TYPE);
+  });
+
+  test('prevents form submission if required fields are not provided', async () => {
+    const {
+      actions: { saveNewProcessor },
+      form,
+    } = testBed;
+
+    // Click submit button with only the type defined
+    await saveNewProcessor();
+
+    // Expect form error as "field" is a required parameter
+    expect(form.getErrorsMessages()).toEqual(['A field value is required.']);
+  });
+
+  test('saves with default parameter values', async () => {
+    const {
+      actions: { saveNewProcessor },
+      form,
+    } = testBed;
+
+    // Add "field" value
+    form.setInputValue('fieldNameField.input', 'test_foreach_processor');
+
+    // Save the field
+    await saveNewProcessor();
+
+    const processors = getProcessorValue(onUpdate, FOREACH_TYPE);
+
+    expect(processors[0][FOREACH_TYPE]).toEqual({
+      field: 'test_foreach_processor',
+    });
+  });
+
+  test('accepts processor definitions that contains escaped characters', async () => {
+    const {
+      actions: { saveNewProcessor },
+      form,
+      find,
+      component,
+    } = testBed;
+
+    // Add "field" value
+    form.setInputValue('fieldNameField.input', 'test_foreach_processor');
+
+    await act(async () => {
+      find('processorField').simulate('change', {
+        jsonContent: '{"def_1":"""aaa"bbb""", "def_2":"aaa(bbb"}',
+      });
+
+      // advance timers to allow the form to validate
+      jest.advanceTimersByTime(0);
+    });
+    component.update();
+
+    // Save the field
+    await saveNewProcessor();
+
+    const processors = getProcessorValue(onUpdate, FOREACH_TYPE);
+
+    expect(processors[0][FOREACH_TYPE]).toEqual({
+      field: 'test_foreach_processor',
+      // eslint-disable-next-line prettier/prettier
+      processor: { def_1: 'aaa\"bbb', def_2: 'aaa(bbb' },
+    });
+  });
+});
diff --git a/..._pipelines/public/application/components/pipeline_editor/__jest__/processors/grok.test.ts b/..._pipelines/public/application/components/pipeline_editor/__jest__/processors/grok.test.ts
@@ -126,4 +126,41 @@ describe('Processor: Grok', () => {
 
     expect(processors[0][GROK_TYPE].patterns).toEqual([escapedValue]);
   });
+
+  test('accepts pattern definitions that contains escaped characters', async () => {
+    const {
+      actions: { saveNewProcessor },
+      form,
+      find,
+      component,
+    } = testBed;
+
+    // Add "field" value
+    form.setInputValue('fieldNameField.input', 'test_grok_processor');
+
+    // Add pattern 1
+    form.setInputValue('droppableList.input-0', 'pattern1');
+
+    await act(async () => {
+      find('patternDefinitionsField').simulate('change', {
+        jsonContent: '{"pattern_1":"""aaa"bbb""", "pattern_2":"aaa(bbb"}',
+      });
+
+      // advance timers to allow the form to validate
+      jest.advanceTimersByTime(0);
+    });
+    component.update();
+
+    // Save the field
+    await saveNewProcessor();
+
+    const processors = getProcessorValue(onUpdate, GROK_TYPE);
+
+    expect(processors[0][GROK_TYPE]).toEqual({
+      field: 'test_grok_processor',
+      patterns: ['pattern1'],
+      // eslint-disable-next-line prettier/prettier
+      pattern_definitions: { pattern_1: 'aaa\"bbb', pattern_2: 'aaa(bbb' },
+    });
+  });
 });
diff --git a/...ines/public/application/components/pipeline_editor/__jest__/processors/inference.test.tsx b/...ines/public/application/components/pipeline_editor/__jest__/processors/inference.test.tsx
@@ -0,0 +1,111 @@
+/*
+ * 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 { act } from 'react-dom/test-utils';
+import { setup, SetupResult, getProcessorValue, setupEnvironment } from './processor.helpers';
+
+const INFERENCE_TYPE = 'inference';
+
+describe('Processor: Script', () => {
+  let onUpdate: jest.Mock;
+  let testBed: SetupResult;
+  const { httpSetup } = setupEnvironment();
+
+  beforeAll(() => {
+    jest.useFakeTimers({ legacyFakeTimers: true });
+    // disable all react-beautiful-dnd development warnings
+    (window as any)['__@hello-pangea/dnd-disable-dev-warnings'] = true;
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+    // enable all react-beautiful-dnd development warnings
+    (window as any)['__@hello-pangea/dnd-disable-dev-warnings'] = false;
+  });
+
+  beforeEach(async () => {
+    onUpdate = jest.fn();
+
+    await act(async () => {
+      testBed = await setup(httpSetup, {
+        value: {
+          processors: [],
+        },
+        onFlyoutOpen: jest.fn(),
+        onUpdate,
+      });
+    });
+
+    const { component, actions } = testBed;
+
+    component.update();
+
+    // Open flyout to add new processor
+    actions.addProcessor();
+    // Add type (the other fields are not visible until a type is selected)
+    await actions.addProcessorType(INFERENCE_TYPE);
+  });
+
+  test('prevents form submission if required fields are not provided', async () => {
+    const {
+      actions: { saveNewProcessor },
+      form,
+    } = testBed;
+
+    // Click submit button with only the type defined
+    await saveNewProcessor();
+
+    // Expect form error as "field" is a required parameter
+    expect(form.getErrorsMessages()).toEqual([
+      'A deployment, an inference, or a model ID value is required.',
+    ]);
+  });
+
+  test('accepts inference config and field maps that contains escaped characters', async () => {
+    const {
+      actions: { saveNewProcessor },
+      find,
+      form,
+      component,
+    } = testBed;
+
+    form.setInputValue('inferenceModelId.input', 'test_inference_processor');
+
+    await act(async () => {
+      find('inferenceConfig').simulate('change', {
+        jsonContent: '{"inf_conf_1":"""aaa"bbb""", "inf_conf_2": "aaa(bbb"}',
+      });
+
+      // advance timers to allow the form to validate
+      jest.advanceTimersByTime(0);
+    });
+    component.update();
+
+    await act(async () => {
+      find('fieldMap').simulate('change', {
+        jsonContent: '{"field_map_1":"""aaa"bbb""", "field_map_2": "aaa(bbb"}',
+      });
+
+      // advance timers to allow the form to validate
+      jest.advanceTimersByTime(0);
+    });
+    component.update();
+
+    // Save the field
+    await saveNewProcessor();
+
+    const processors = getProcessorValue(onUpdate, INFERENCE_TYPE);
+
+    expect(processors[0][INFERENCE_TYPE]).toEqual({
+      model_id: 'test_inference_processor',
+      // eslint-disable-next-line prettier/prettier
+      inference_config: { inf_conf_1: 'aaa\"bbb', inf_conf_2: 'aaa(bbb' },
+      // eslint-disable-next-line prettier/prettier
+      field_map: { field_map_1: 'aaa\"bbb', field_map_2: 'aaa(bbb' },
+    });
+  });
+});
diff --git a/...s/public/application/components/pipeline_editor/__jest__/processors/processor.helpers.tsx b/...s/public/application/components/pipeline_editor/__jest__/processors/processor.helpers.tsx
@@ -199,4 +199,10 @@ type TestSubject =
   | 'ignoreMissingPipelineSwitch.input'
   | 'destinationField.input'
   | 'datasetField.input'
-  | 'namespaceField.input';
+  | 'namespaceField.input'
+  | 'processorField'
+  | 'paramsField'
+  | 'scriptSource'
+  | 'inferenceModelId.input'
+  | 'inferenceConfig'
+  | 'fieldMap';
diff --git a/...pelines/public/application/components/pipeline_editor/__jest__/processors/redact.test.tsx b/...pelines/public/application/components/pipeline_editor/__jest__/processors/redact.test.tsx
@@ -138,4 +138,40 @@ describe('Processor: Redact', () => {
       pattern_definitions: { GITHUB_NAME: '@%{USERNAME}' },
     });
   });
+  test('accepts pattern definitions that contains escaped characters', async () => {
+    const {
+      actions: { saveNewProcessor },
+      component,
+      find,
+      form,
+    } = testBed;
+
+    // Add "field" value
+    form.setInputValue('fieldNameField.input', 'test_redact_processor');
+
+    // Add one pattern to the list
+    form.setInputValue('droppableList.input-0', 'pattern1');
+
+    await act(async () => {
+      find('patternDefinitionsField').simulate('change', {
+        jsonContent: '{"pattern_1":"""aaa"bbb""", "pattern_2":"aaa(bbb"}',
+      });
+
+      // advance timers to allow the form to validate
+      jest.advanceTimersByTime(0);
+    });
+    component.update();
+
+    // Save the field
+    await saveNewProcessor();
+
+    const processors = getProcessorValue(onUpdate, REDACT_TYPE);
+
+    expect(processors[0][REDACT_TYPE]).toEqual({
+      field: 'test_redact_processor',
+      patterns: ['pattern1'],
+
+      pattern_definitions: { pattern_1: 'aaa"bbb', pattern_2: 'aaa(bbb' },
+    });
+  });
 });