Get full integration with form working for input and output maps

Signed-off-by: Tyler Ohlsen <[email protected]>
opensearch-project · Jun 11, 2024 · 0c6b549 · 0c6b549
1 parent 780cc15
commit 0c6b549
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 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
@@ -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
@@ -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
@@ -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,46 +60,61 @@ 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>
               );
             })}
             <EuiFlexItem grow={false}>
               <div>
                 <EuiButton
                   onClick={() => {
-                    addMapping('test');
+                    addMapEntry(field.value);
                   }}
                 >
                   {field.value?.length > 0