[Ingest Pipelines] Allow to update an existing processor and change its type (#105765)

* Patch bugs

* Add tests for allowing to edit the type of an existing processor

* Add more tests

* Add docs

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

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

@@ -99,6 +99,13 @@ const createActions = (testBed: TestBed<TestSubject>) => {
       component.update();
     },
 
+    async setProcessorType(type: string) {
+      await act(async () => {
+        find('processorTypeSelector.input').simulate('change', [{ value: type }]);
+      });
+      component.update();
+    },
+
     removeProcessor(processorSelector: string) {
       find(`${processorSelector}.moreMenu.button`).simulate('click');
       find(`${processorSelector}.moreMenu.deleteButton`).simulate('click');

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

@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { act } from 'react-dom/test-utils';
 import { setup, SetupResult } from './pipeline_processors_editor.helpers';
 import { Pipeline } from '../../../../../common/types';
 
@@ -120,6 +121,37 @@ describe('Pipeline Editor', () => {
       });
     });
 
+    it('allows to edit an existing processor and change its type', async () => {
+      const { actions, exists, component, find } = testBed;
+
+      // Open one of the existing processors
+      actions.openProcessorEditor('processors>2');
+      expect(exists('editProcessorForm')).toBeTruthy();
+
+      // Change its type to `append` and set the missing required fields
+      await actions.setProcessorType('append');
+      await act(async () => {
+        find('appendValueField.input').simulate('change', [{ label: 'some_value' }]);
+      });
+      component.update();
+
+      await actions.submitProcessorForm();
+
+      const [onUpdateResult] = onUpdate.mock.calls[onUpdate.mock.calls.length - 1];
+      const {
+        processors: { 2: editedProcessor },
+      } = onUpdateResult.getData();
+
+      expect(editedProcessor.append).toEqual({
+        if: undefined,
+        tag: undefined,
+        description: undefined,
+        ignore_failure: undefined,
+        field: 'test',
+        value: ['some_value'],
+      });
+    });
+
     it('removes a processor', () => {
       const { actions } = testBed;
       // processor>0 denotes the first processor in the top-level processors array.

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

@@ -102,6 +102,13 @@ const createActions = (testBed: TestBed<TestSubject>) => {
       component.update();
     },
 
+    async clickProcessorConfigurationTab() {
+      await act(async () => {
+        find('configurationTab').simulate('click');
+      });
+      component.update();
+    },
+
     async clickProcessorOutputTab() {
       await act(async () => {
         find('outputTab').simulate('click');

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

@@ -356,6 +356,21 @@ describe('Test pipeline', () => {
       expect(statusIconLabel).toEqual('Success');
     });
 
+    describe('Configuration tab', () => {
+      it('should not clear up form when clicking configuration tab', async () => {
+        const { actions, find, exists } = testBed;
+
+        // Click processor to open manage flyout
+        await actions.clickProcessor('processors>0');
+        // Verify flyout opened
+        expect(exists('editProcessorForm')).toBe(true);
+        // Click the "Configuration" tab
+        await actions.clickProcessorConfigurationTab();
+        // Verify type selector has not changed
+        expect(find('processorTypeSelector.input').text()).toBe('Set');
+      });
+    });
+
     describe('Output tab', () => {
       beforeEach(async () => {
         const { actions } = testBed;

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

@@ -196,6 +196,11 @@ export const EditProcessorForm: FunctionComponent<Props> = ({
             {tabs.map((tab) => (
               <EuiTab
                 onClick={async () => {
+                  // No need to do anything if user clicks the already active tab
+                  if (tab.id === activeTab) {
+                    return;
+                  }
+
                   if (tab.id === 'output') {
                     await handleSubmit(false);
                   } else {

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/context/processors_context.tsx

@@ -158,18 +158,26 @@ export const PipelineProcessorsContextProvider: FunctionComponent<Props> = ({
             'internal_networks_field',
           ];
 
+          // If the processor type is changed while editing, we need to ignore unkownOptions as they
+          // will contain the fields from the previous processor resulting in the wrong request.
+          const hasProcessorTypeChanged = mode.arg.processor.type !== processorTypeAndOptions.type;
           // The processor that we are updating may have options configured the UI does not know about
-          const unknownOptions = omit(mode.arg.processor.options, knownOptionNames);
+          const unknownOptions = hasProcessorTypeChanged
+            ? {}
+            : omit(mode.arg.processor.options, knownOptionNames);
           // In order to keep the options we don't get back from our UI, we merge the known and unknown options
           const updatedProcessorOptions = {
             ...processorTypeAndOptions.options,
             ...unknownOptions,
           };
+
           processorsDispatch({
             type: 'updateProcessor',
             payload: {
               processor: {
                 ...mode.arg.processor,
+                // Always prefer the newly selected processor type, as it might change during editing
+                type: processorTypeAndOptions.type,
                 options: updatedProcessorOptions,
               },
               selector: mode.arg.selector,