refactor fix to get value from form serializer

jloleysens · Oct 5, 2020 · 9049ccb · 9049ccb
1 parent 40b54e8
commit 9049ccb
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 21 deletions.
diff --git a/...peline_processors_editor/components/pipeline_processors_editor_item/inline_text_input.tsx b/...peline_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/...on/components/pipeline_processors_editor/components/processor_form/add_processor_form.tsx b/...on/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/...ponents/pipeline_processors_editor/components/processor_form/processor_form.container.tsx b/...ponents/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(() => {