From 9049ccb0a6eaad68c1655bac713e7dceba0fca48 Mon Sep 17 00:00:00 2001
From: Jean-Louis Leysens <jloleysens@gmail.com>
Date: Mon, 5 Oct 2020 15:32:22 +0200
Subject: [PATCH] refactor fix to get value from form serializer

---
 .../inline_text_input.tsx                     |  6 ++-
 .../processor_form/add_processor_form.tsx     |  4 +-
 .../processor_form.container.tsx              | 40 +++++++++++--------
 3 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/inline_text_input.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/inline_text_input.tsx
index cca2db3ec41a..74cb75e60f05 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/inline_text_input.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/inline_text_input.tsx
@@ -23,7 +23,7 @@ function _InlineTextInput({
   onChange,
 }: Props): React.ReactElement<any, any> | null {
   const [isShowingTextInput, setIsShowingTextInput] = useState<boolean>(false);
-  const [textValue, setTextValue] = useState<string>(text ?? '');
+  const [textValue, setTextValue] = useState<string>(() => text ?? '');
 
   const containerClasses = classNames('pipelineProcessorsEditor__item__textContainer', {
     // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -39,6 +39,10 @@ function _InlineTextInput({
     });
   }, [setIsShowingTextInput, onChange, textValue]);
 
+  useEffect(() => {
+    setTextValue(text ?? '');
+  }, [text]);
+
   useEffect(() => {
     const keyboardListener = (event: KeyboardEvent) => {
       if (event.key === keys.ESCAPE || event.code === 'Escape') {
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/add_processor_form.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/add_processor_form.tsx
index b663daedd9b9..f663832702b1 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/add_processor_form.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/add_processor_form.tsx
@@ -24,10 +24,8 @@ import { getProcessorDescriptor } from '../shared';
 
 import { DocumentationButton } from './documentation_button';
 import { ProcessorSettingsFields } from './processor_settings_fields';
+import { Fields } from './processor_form.container';
 
-interface Fields {
-  fields: { [key: string]: any };
-}
 export interface Props {
   isOnFailure: boolean;
   form: FormHook<Fields>;
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/processor_form.container.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/processor_form.container.tsx
index 8e9253875fe0..61a6f985340e 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/processor_form.container.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/processor_form.container.tsx
@@ -19,6 +19,7 @@ export type OnSubmitHandler = (processor: ProcessorFormOnSubmitArg) => void;
 export type OnFormUpdateHandler = (form: OnFormUpdateArg<any>) => void;
 
 export interface Fields {
+  type: string;
   fields: { [key: string]: any };
 }
 
@@ -57,8 +58,28 @@ export const ProcessorFormContainer: FunctionComponent<Props> = ({
     return { ...processor, options } as ProcessorInternal;
   }, [processor, unsavedFormState]);
 
+  const formSerializer = useCallback(
+    (formState) => {
+      return {
+        type: formState.type,
+        fields: formState.customOptions
+          ? {
+              ...formState.customOptions,
+            }
+          : {
+              ...formState.fields,
+              // The description field is not editable in processor forms currently. We re-add it here or it will be
+              // stripped.
+              description: processor ? processor.options.description : undefined,
+            },
+      };
+    },
+    [processor]
+  );
+
   const { form } = useForm({
     defaultValue: { fields: getProcessor().options },
+    serializer: formSerializer,
   });
   const { subscribe } = form;
 
@@ -67,22 +88,7 @@ export const ProcessorFormContainer: FunctionComponent<Props> = ({
       const { isValid, data } = await form.submit();
 
       if (isValid) {
-        const { type, customOptions, fields } = data as FormData;
-        const options = customOptions ? customOptions : fields;
-
-        /**
-         * We drive the state for the processor description outside of the form state so
-         * we add the description again here to avoid removing it because the form lib will
-         * not include it here.
-         *
-         * TODO: Add a ghost/invisible field to the form for the description field
-         *
-         * Also, not using processor?.options.description syntax because react eslint
-         * does not pick up processor dependency correctly.
-         */
-        if (processor && processor.options.description) {
-          options.description = processor.options.description;
-        }
+        const { type, fields: options } = data as FormData;
 
         unsavedFormState.current = options;
 
@@ -96,7 +102,7 @@ export const ProcessorFormContainer: FunctionComponent<Props> = ({
         }
       }
     },
-    [processor, form, onClose, onSubmit]
+    [form, onClose, onSubmit]
   );
 
   const resetProcessors = useCallback(() => {