From 0c6b549ec169069be6611343cdbed5a5e9c9e20b Mon Sep 17 00:00:00 2001
From: Tyler Ohlsen <ohltyler@amazon.com>
Date: Tue, 11 Jun 2024 10:48:20 -0700
Subject: [PATCH] Get full integration with form working for input and output
 maps

Signed-off-by: Tyler Ohlsen <ohltyler@amazon.com>
---
 .../utils/workflow_to_template_utils.ts       |   1 +
 .../ingest_inputs/processors_list.tsx         |   2 +
 .../input_fields/map_field.tsx                | 110 ++++++++++--------
 3 files changed, 66 insertions(+), 47 deletions(-)

diff --git a/public/pages/workflow_detail/utils/workflow_to_template_utils.ts b/public/pages/workflow_detail/utils/workflow_to_template_utils.ts
index 0ac16a44..43558732 100644
--- a/public/pages/workflow_detail/utils/workflow_to_template_utils.ts
+++ b/public/pages/workflow_detail/utils/workflow_to_template_utils.ts
@@ -73,6 +73,7 @@ function mlProcessorConfigToTemplateNodes(
   switch (mlProcessorConfig.type) {
     case PROCESSOR_TYPE.ML:
     default: {
+      // TODO: extract mappings here too
       const { model } = processorConfigToFormik(mlProcessorConfig) as {
         model: ModelFormValue;
       };
diff --git a/public/pages/workflow_detail/workflow_inputs/ingest_inputs/processors_list.tsx b/public/pages/workflow_detail/workflow_inputs/ingest_inputs/processors_list.tsx
index b89939d4..0c89d45b 100644
--- a/public/pages/workflow_detail/workflow_inputs/ingest_inputs/processors_list.tsx
+++ b/public/pages/workflow_detail/workflow_inputs/ingest_inputs/processors_list.tsx
@@ -54,6 +54,7 @@ export function ProcessorsList(props: ProcessorsListProps) {
       } as IProcessorConfig,
     ];
     props.setUiConfig(newConfig);
+    props.onFormChange();
   }
 
   // Deleting a processor from the config. Fetch the existing one
@@ -66,6 +67,7 @@ export function ProcessorsList(props: ProcessorsListProps) {
       (processorConfig) => processorConfig.id !== processorIdToDelete
     );
     props.setUiConfig(newConfig);
+    props.onFormChange();
   }
 
   return (
diff --git a/public/pages/workflow_detail/workflow_inputs/input_fields/map_field.tsx b/public/pages/workflow_detail/workflow_inputs/input_fields/map_field.tsx
index c57103b4..83747bc1 100644
--- a/public/pages/workflow_detail/workflow_inputs/input_fields/map_field.tsx
+++ b/public/pages/workflow_detail/workflow_inputs/input_fields/map_field.tsx
@@ -10,42 +10,43 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiFormControlLayoutDelimited,
-  EuiPanel,
   EuiText,
 } from '@elastic/eui';
 import { Field, FieldProps, useFormikContext } from 'formik';
 import {
   IConfigField,
   MapEntry,
+  MapFormValue,
   WorkflowFormValues,
 } from '../../../../../common';
-import { ConfigFieldList } from '../config_field_list';
-import { formikToUiConfig, generateId } from '../../../../utils';
 
 interface MapFieldProps {
   field: IConfigField;
   fieldPath: string; // the full path in string-form to the field (e.g., 'ingest.enrich.processors.text_embedding_processor.inputField')
   onFormChange: () => void;
-  //uiConfig: WorkflowConfig;
-  //setUiConfig: (uiConfig: WorkflowConfig) => void;
 }
 
 /**
  * Input component for configuring field mappings
  */
 export function MapField(props: MapFieldProps) {
-  const { values } = useFormikContext<WorkflowFormValues>();
+  const { setFieldValue } = useFormikContext<WorkflowFormValues>();
 
-  const mappingField = [] as string[];
-
-  // Adding a field mapping
-  function addMapping(mappingIdToAdd: string): void {
-    // TODO
+  // Adding a map entry to the end of the existing arr
+  function addMapEntry(curEntries: MapFormValue): void {
+    const updatedEntries = [...curEntries, { key: '', value: '' } as MapEntry];
+    setFieldValue(props.fieldPath, updatedEntries);
+    props.onFormChange();
   }
 
-  // Deleting a field mapping
-  function deleteMapping(mappingIdToDelete: string): void {
-    // TODO
+  // Deleting a map entry
+  function deleteMapEntry(
+    curEntries: MapFormValue,
+    entryIndexToDelete: number
+  ): void {
+    curEntries.splice(entryIndexToDelete, 1);
+    setFieldValue(props.fieldPath, curEntries);
+    props.onFormChange();
   }
 
   return (
@@ -59,38 +60,53 @@ export function MapField(props: MapFieldProps) {
             {field.value?.map((mapping: MapEntry, idx: number) => {
               return (
                 <EuiFlexItem key={idx}>
-                  <EuiPanel>
-                    <EuiFlexGroup direction="row" justifyContent="spaceBetween">
-                      <EuiFlexItem grow={false}>
-                        <EuiFormControlLayoutDelimited
-                          startControl={
-                            <input
-                              type="string"
-                              placeholder="Key"
-                              className="euiFieldText"
-                            />
-                          }
-                          endControl={
-                            <input
-                              type="string"
-                              placeholder="Value"
-                              className="euiFieldText"
-                            />
-                          }
-                        />
-                      </EuiFlexItem>
-                      <EuiFlexItem grow={false}>
-                        <EuiButtonIcon
-                          iconType={'trash'}
-                          color="danger"
-                          aria-label="Delete"
-                          onClick={() => {
-                            deleteMapping('test');
-                          }}
-                        />
-                      </EuiFlexItem>
-                    </EuiFlexGroup>
-                  </EuiPanel>
+                  <EuiFlexGroup direction="row" justifyContent="spaceBetween">
+                    <EuiFlexItem grow={false}>
+                      <EuiFormControlLayoutDelimited
+                        startControl={
+                          <input
+                            type="string"
+                            placeholder="Key"
+                            className="euiFieldText"
+                            value={mapping.key}
+                            onChange={(e) => {
+                              form.setFieldValue(
+                                `${props.fieldPath}.${idx}.key`,
+                                e.target.value
+                              );
+                              props.onFormChange();
+                            }}
+                          />
+                        }
+                        endControl={
+                          <input
+                            type="string"
+                            placeholder="Value"
+                            className="euiFieldText"
+                            value={mapping.value}
+                            onChange={(e) => {
+                              form.setFieldValue(
+                                `${props.fieldPath}.${idx}.value`,
+                                e.target.value
+                              );
+                              props.onFormChange();
+                            }}
+                          />
+                        }
+                      />
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                      <EuiButtonIcon
+                        style={{ marginTop: '8px' }}
+                        iconType={'trash'}
+                        color="danger"
+                        aria-label="Delete"
+                        onClick={() => {
+                          deleteMapEntry(field.value, idx);
+                        }}
+                      />
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
                 </EuiFlexItem>
               );
             })}
@@ -98,7 +114,7 @@ export function MapField(props: MapFieldProps) {
               <div>
                 <EuiButton
                   onClick={() => {
-                    addMapping('test');
+                    addMapEntry(field.value);
                   }}
                 >
                   {field.value?.length > 0