Prevent undefined inputs; delete entry when deleting node

Signed-off-by: Tyler Ohlsen <[email protected]>
ohltyler · Oct 17, 2023 · 541a2f8 · 541a2f8
1 parent 54f65f1
commit 541a2f8
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 10 deletions.
diff --git a/public/pages/workflow_detail/component_details/input_fields/json_field.tsx b/public/pages/workflow_detail/component_details/input_fields/json_field.tsx
@@ -15,6 +15,7 @@ interface JsonFieldProps {
  * An input field for a component where users manually enter
  * in some custom JSON
  */
+// TODO: integrate with formik
 export function JsonField(props: JsonFieldProps) {
   return (
     <>

diff --git a/public/pages/workflow_detail/component_details/input_fields/select_field.tsx b/public/pages/workflow_detail/component_details/input_fields/select_field.tsx
@@ -11,7 +11,7 @@ import {
   EuiText,
 } from '@elastic/eui';
 import { Field, FieldProps } from 'formik';
-import { IComponentField } from '../../../../../common';
+import { IComponentField, getInitialValue } from '../../../../../common';
 
 // TODO: Should be fetched from global state.
 // Need to have a way to determine where to fetch this dynamic data.
@@ -50,7 +50,7 @@ export function SelectField(props: SelectFieldProps) {
           <EuiFormRow label={props.field.label}>
             <EuiSuperSelect
               options={options}
-              valueOfSelected={field.value}
+              valueOfSelected={field.value || getInitialValue(props.field.type)}
               onChange={(option) => {
                 field.onChange(option);
                 form.setFieldValue(formField, option);

diff --git a/public/pages/workflow_detail/component_details/input_fields/text_field.tsx b/public/pages/workflow_detail/component_details/input_fields/text_field.tsx
@@ -6,7 +6,7 @@
 import React from 'react';
 import { Field, FieldProps } from 'formik';
 import { EuiFieldText, EuiFormRow } from '@elastic/eui';
-import { IComponentField } from '../../../../../common';
+import { IComponentField, getInitialValue } from '../../../../../common';
 
 interface TextFieldProps {
   field: IComponentField;
@@ -23,9 +23,10 @@ export function TextField(props: TextFieldProps) {
         return (
           <EuiFormRow label={props.field.label}>
             <EuiFieldText
+              {...field}
               placeholder={props.field.placeholder || ''}
               compressed={false}
-              {...field}
+              value={field.value || getInitialValue(props.field.type)}
             />
           </EuiFormRow>
         );

diff --git a/public/pages/workflow_detail/workspace/workspace.tsx b/public/pages/workflow_detail/workspace/workspace.tsx
@@ -95,8 +95,8 @@ export function Workspace(props: WorkspaceProps) {
         },
       };
 
-      // TODO: on node addition, need to update the formik initial state to include this
-      // new component.
+      // TODO: on node addition, need to update the formik values to include
+      // a new property with this id.
       setNodes((nds) => nds.concat(newNode));
       dispatch(setDirty());
     },

diff --git a/public/pages/workflow_detail/workspace_component/workspace_component.tsx b/public/pages/workflow_detail/workspace_component/workspace_component.tsx
@@ -4,6 +4,7 @@
  */
 
 import React, { useContext } from 'react';
+import { useFormikContext } from 'formik';
 import {
   EuiFlexGroup,
   EuiFlexItem,
@@ -13,7 +14,7 @@ import {
   EuiButtonIcon,
 } from '@elastic/eui';
 import { rfContext } from '../../../store';
-import { IComponentData } from '../../../component_types';
+import { IComponentData, WorkspaceFormValues } from '../../../component_types';
 import { InputHandle } from './input_handle';
 import { OutputHandle } from './output_handle';
 
@@ -29,6 +30,7 @@ interface WorkspaceComponentProps {
 export function WorkspaceComponent(props: WorkspaceComponentProps) {
   const component = props.data;
   const { deleteNode } = useContext(rfContext);
+  const { values } = useFormikContext<WorkspaceFormValues>();
 
   return (
     <EuiCard
@@ -45,8 +47,7 @@ export function WorkspaceComponent(props: WorkspaceComponentProps) {
               iconType="trash"
               onClick={() => {
                 deleteNode(component.id);
-                // TODO: update the form to remove this node based on node ID.
-                // Can fetch & update the values using useFormikContext().
+                delete values[`${component.id}`];
               }}
               aria-label="Delete"
             />

diff --git a/public/utils/utils.ts b/public/utils/utils.ts
@@ -54,7 +54,7 @@ export function formikToComponentData(
 }
 
 // Helper fn to get an initial value based on the field type
-function getInitialValue(fieldType: FieldType): FieldValue {
+export function getInitialValue(fieldType: FieldType): FieldValue {
   switch (fieldType) {
     case 'string': {
       return '';