[Backport 2.x] Simplify form management

common/interfaces.ts

@@ -71,7 +71,6 @@ export type SearchIndexConfig = {
 
 export type IngestConfig = {
   enabled: IConfigField;
-  source: {};
   pipelineName: IConfigField;
   enrich: ProcessorsConfig;
   index: IndexConfig;

common/utils.ts

@@ -35,3 +35,7 @@ export function getCharacterLimitedString(
       : input
     : '';
 }
+
+export function customStringify(jsonObj: {}): string {
+  return JSON.stringify(jsonObj, undefined, 2);
+}

public/pages/workflow_detail/components/export_modal.tsx

@@ -22,6 +22,7 @@ import {
 import {
   CREATE_WORKFLOW_LINK,
   Workflow,
+  customStringify,
   getCharacterLimitedString,
 } from '../../../../common';
 import { reduceToTemplate } from '../../../utils';
@@ -62,7 +63,7 @@ export function ExportModal(props: ExportModalProps) {
     if (props.workflow) {
       const workflowTemplate = reduceToTemplate(props.workflow);
       if (selectedOption === EXPORT_OPTION.JSON) {
-        setFormattedConfig(JSON.stringify(workflowTemplate, undefined, 2));
+        setFormattedConfig(customStringify(workflowTemplate));
       } else if (selectedOption === EXPORT_OPTION.YAML) {
         setFormattedConfig(yaml.dump(workflowTemplate));
       }

public/pages/workflow_detail/resizable_workspace.tsx

@@ -28,7 +28,6 @@ import {
   uiConfigToFormik,
   uiConfigToSchema,
 } from '../../utils';
-import { AppState, setDirty, useAppDispatch } from '../../store';
 import { WorkflowInputs } from './workflow_inputs';
 import { Workspace } from './workspace';
 import { Tools } from './tools';
@@ -49,11 +48,6 @@ const TOOLS_PANEL_ID = 'tools_panel_id';
  * panels - the ReactFlow workspace panel and the selected component details panel.
  */
 export function ResizableWorkspace(props: ResizableWorkspaceProps) {
-  const dispatch = useAppDispatch();
-
-  // Overall workspace state
-  const { isDirty } = useSelector((state: AppState) => state.form);
-
   // Workflow state
   const [workflow, setWorkflow] = useState<Workflow | undefined>(
     props.workflow
@@ -135,16 +129,6 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
     }
   }, [uiConfig]);
 
-  /**
-   * Function to pass down to the Formik <Form> components as a listener to propagate
-   * form changes to this parent component to re-enable save button, etc.
-   */
-  function onFormChange() {
-    if (!isDirty) {
-      dispatch(setDirty());
-    }
-  }
-
   return isValidWorkflow ? (
     <Formik
       enableReinitialize={true}
@@ -185,7 +169,6 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
                   >
                     <WorkflowInputs
                       workflow={props.workflow}
-                      onFormChange={onFormChange}
                       uiConfig={uiConfig}
                       setUiConfig={setUiConfig}
                       setIngestResponse={setIngestResponse}

public/pages/workflow_detail/workflow_inputs/config_field_list.tsx

@@ -24,7 +24,6 @@ interface ConfigFieldListProps {
   configId: string;
   configFields: IConfigField[];
   baseConfigPath: string; // the base path of the nested config, if applicable. e.g., 'ingest.enrich'
-  onFormChange: () => void;
 }
 
 const CONFIG_FIELD_SPACER_SIZE = 'm';
@@ -42,7 +41,6 @@ export function ConfigFieldList(props: ConfigFieldListProps) {
                   label={camelCaseToTitleString(field.id)}
                   fieldPath={`${props.baseConfigPath}.${props.configId}.${field.id}`}
                   showError={true}
-                  onFormChange={props.onFormChange}
                 />
                 <EuiSpacer size={CONFIG_FIELD_SPACER_SIZE} />
               </EuiFlexItem>
@@ -55,7 +53,6 @@ export function ConfigFieldList(props: ConfigFieldListProps) {
                 <SelectField
                   field={field}
                   fieldPath={`${props.baseConfigPath}.${props.configId}.${field.id}`}
-                  onFormChange={props.onFormChange}
                 />
                 <EuiSpacer size={CONFIG_FIELD_SPACER_SIZE} />
               </EuiFlexItem>
@@ -68,7 +65,6 @@ export function ConfigFieldList(props: ConfigFieldListProps) {
                 <BooleanField
                   label={camelCaseToTitleString(field.id)}
                   fieldPath={`${props.baseConfigPath}.${props.configId}.${field.id}`}
-                  onFormChange={props.onFormChange}
                   enabledOption={{
                     id: 'true',
                     label: 'True',
@@ -91,7 +87,6 @@ export function ConfigFieldList(props: ConfigFieldListProps) {
                   label={camelCaseToTitleString(field.id)}
                   fieldPath={`${props.baseConfigPath}.${props.configId}.${field.id}`}
                   showError={true}
-                  onFormChange={props.onFormChange}
                 />
                 <EuiSpacer size={CONFIG_FIELD_SPACER_SIZE} />
               </EuiFlexItem>
@@ -104,7 +99,6 @@ export function ConfigFieldList(props: ConfigFieldListProps) {
                 <JsonField
                   label={camelCaseToTitleString(field.id)}
                   fieldPath={`${props.baseConfigPath}.${props.configId}.${field.id}`}
-                  onFormChange={props.onFormChange}
                 />
                 <EuiSpacer size={CONFIG_FIELD_SPACER_SIZE} />
               </EuiFlexItem>
@@ -118,7 +112,6 @@ export function ConfigFieldList(props: ConfigFieldListProps) {
                   validate={false}
                   label={camelCaseToTitleString(field.id)}
                   fieldPath={`${props.baseConfigPath}.${props.configId}.${field.id}`}
-                  onFormChange={props.onFormChange}
                 />
                 <EuiSpacer size={CONFIG_FIELD_SPACER_SIZE} />
               </EuiFlexItem>

public/pages/workflow_detail/workflow_inputs/ingest_inputs/advanced_settings.tsx

@@ -12,9 +12,7 @@ import {
 } from '@elastic/eui';
 import { JsonField } from '../input_fields';
 
-interface AdvancedSettingsProps {
-  onFormChange: () => void;
-}
+interface AdvancedSettingsProps {}
 
 /**
  * Input component for configuring ingest-side advanced settings
@@ -30,14 +28,12 @@ export function AdvancedSettings(props: AdvancedSettingsProps) {
               <JsonField
                 label="Index mappings"
                 fieldPath={'ingest.index.mappings'}
-                onFormChange={props.onFormChange}
               />
             </EuiFlexItem>
             <EuiFlexItem>
               <JsonField
                 label="Index settings"
                 fieldPath={'ingest.index.settings'}
-                onFormChange={props.onFormChange}
               />
             </EuiFlexItem>
           </EuiFlexGroup>

public/pages/workflow_detail/workflow_inputs/ingest_inputs/enrich_data.tsx

@@ -10,7 +10,6 @@ import { PROCESSOR_CONTEXT, WorkflowConfig } from '../../../../../common';
 import { ProcessorsTitle } from '../../../../general_components';
 
 interface EnrichDataProps {
-  onFormChange: () => void;
   uiConfig: WorkflowConfig;
   setUiConfig: (uiConfig: WorkflowConfig) => void;
 }
@@ -27,7 +26,6 @@ export function EnrichData(props: EnrichDataProps) {
       />
       <EuiFlexItem>
         <ProcessorsList
-          onFormChange={props.onFormChange}
           uiConfig={props.uiConfig}
           setUiConfig={props.setUiConfig}
           context={PROCESSOR_CONTEXT.INGEST}

public/pages/workflow_detail/workflow_inputs/ingest_inputs/ingest_data.tsx

@@ -8,9 +8,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
 import { TextField } from '../input_fields';
 import { AdvancedSettings } from './advanced_settings';
 
-interface IngestDataProps {
-  onFormChange: () => void;
-}
+interface IngestDataProps {}
 
 /**
  * Input component for configuring the data ingest (the OpenSearch index)
@@ -24,14 +22,10 @@ export function IngestData(props: IngestDataProps) {
         </EuiTitle>
       </EuiFlexItem>
       <EuiFlexItem>
-        <TextField
-          label="Index name"
-          fieldPath={'ingest.index.name'}
-          onFormChange={props.onFormChange}
-        />
+        <TextField label="Index name" fieldPath={'ingest.index.name'} />
       </EuiFlexItem>
       <EuiFlexItem>
-        <AdvancedSettings onFormChange={props.onFormChange} />
+        <AdvancedSettings />
       </EuiFlexItem>
     </EuiFlexGroup>
   );

public/pages/workflow_detail/workflow_inputs/ingest_inputs/ingest_inputs.tsx

@@ -11,7 +11,6 @@ import { IngestData } from './ingest_data';
 import { WorkflowConfig } from '../../../../../common';
 
 interface IngestInputsProps {
-  onFormChange: () => void;
   setIngestDocs: (docs: string) => void;
   uiConfig: WorkflowConfig;
   setUiConfig: (uiConfig: WorkflowConfig) => void;
@@ -24,26 +23,19 @@ export function IngestInputs(props: IngestInputsProps) {
   return (
     <EuiFlexGroup direction="column">
       <EuiFlexItem grow={false}>
-        <SourceData
-          setIngestDocs={props.setIngestDocs}
-          onFormChange={props.onFormChange}
-        />
+        <SourceData setIngestDocs={props.setIngestDocs} />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <EuiHorizontalRule margin="none" />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EnrichData
-          onFormChange={props.onFormChange}
-          uiConfig={props.uiConfig}
-          setUiConfig={props.setUiConfig}
-        />
+        <EnrichData uiConfig={props.uiConfig} setUiConfig={props.setUiConfig} />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <EuiHorizontalRule margin="none" />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <IngestData onFormChange={props.onFormChange} />
+        <IngestData />
       </EuiFlexItem>
     </EuiFlexGroup>
   );

public/pages/workflow_detail/workflow_inputs/ingest_inputs/source_data.tsx

@@ -25,7 +25,6 @@ import { WorkspaceFormValues } from '../../../../../common';
 
 interface SourceDataProps {
   setIngestDocs: (docs: string) => void;
-  onFormChange: () => void;
 }
 
 /**
@@ -87,9 +86,6 @@ export function SourceData(props: SourceDataProps) {
                 label="Documents"
                 fieldPath={'ingest.docs'}
                 helpText="Documents should be formatted as a valid JSON array."
-                // when ingest doc values change, don't update the form
-                // since we initially only support running ingest once per configuration
-                onFormChange={() => {}}
                 editorHeight="25vh"
                 readOnly={false}
               />
@@ -127,9 +123,6 @@ export function SourceData(props: SourceDataProps) {
             label="Documents"
             fieldPath={'ingest.docs'}
             helpText="Documents should be formatted as a valid JSON array."
-            // when ingest doc values change, don't update the form
-            // since we initially only support running ingest once per configuration
-            onFormChange={() => {}}
             editorHeight="25vh"
             readOnly={true}
           />

public/pages/workflow_detail/workflow_inputs/input_fields/boolean_field.tsx

@@ -16,7 +16,6 @@ import { camelCaseToTitleString } from '../../../../utils';
 
 interface BooleanFieldProps {
   fieldPath: string; // the full path in string-form to the field (e.g., 'ingest.enrich.processors.text_embedding_processor.inputField')
-  onFormChange: () => void;
   enabledOption: EuiRadioGroupOption;
   disabledOption: EuiRadioGroupOption;
   label?: string;
@@ -60,7 +59,6 @@ export function BooleanField(props: BooleanFieldProps) {
               }
               onChange={(id) => {
                 form.setFieldValue(field.name, !field.value);
-                props.onFormChange();
               }}
             />
           </EuiCompressedFormRow>

public/pages/workflow_detail/workflow_inputs/input_fields/json_field.tsx

@@ -11,12 +11,11 @@ import {
   EuiLink,
   EuiText,
 } from '@elastic/eui';
-import { WorkspaceFormValues } from '../../../../../common';
+import { WorkspaceFormValues, customStringify } from '../../../../../common';
 import { camelCaseToTitleString } from '../../../../utils';
 
 interface JsonFieldProps {
   fieldPath: string; // the full path in string-form to the field (e.g., 'ingest.enrich.processors.text_embedding_processor.inputField')
-  onFormChange: () => void;
   validate?: boolean;
   label?: string;
   helpLink?: string;
@@ -85,13 +84,12 @@ export function JsonField(props: JsonFieldProps) {
                 try {
                   form.setFieldValue(
                     field.name,
-                    JSON.stringify(JSON.parse(jsonStr), undefined, 2)
+                    customStringify(JSON.parse(jsonStr))
                   );
                 } catch (error) {
                   form.setFieldValue(field.name, jsonStr);
                 } finally {
                   form.setFieldTouched(field.name);
-                  props.onFormChange();
                 }
               }}
               readOnly={props.readOnly || false}

public/pages/workflow_detail/workflow_inputs/input_fields/map_array_field.tsx

@@ -32,7 +32,6 @@ interface MapArrayFieldProps {
   helpText?: string;
   keyPlaceholder?: string;
   valuePlaceholder?: string;
-  onFormChange: () => void;
   onMapAdd?: (curArray: MapArrayFormValue) => void;
   onMapDelete?: (idxToDelete: number) => void;
   keyOptions?: any[];
@@ -51,7 +50,6 @@ export function MapArrayField(props: MapArrayFieldProps) {
   function addMap(curMapArray: MapArrayFormValue): void {
     setFieldValue(props.fieldPath, [...curMapArray, []]);
     setFieldTouched(props.fieldPath, true);
-    props.onFormChange();
     if (props.onMapAdd) {
       props.onMapAdd(curMapArray);
     }
@@ -66,7 +64,6 @@ export function MapArrayField(props: MapArrayFieldProps) {
     updatedMapArray.splice(entryIndexToDelete, 1);
     setFieldValue(props.fieldPath, updatedMapArray);
     setFieldTouched(props.fieldPath, true);
-    props.onFormChange();
     if (props.onMapDelete) {
       props.onMapDelete(entryIndexToDelete);
     }
@@ -123,7 +120,6 @@ export function MapArrayField(props: MapArrayFieldProps) {
                           fieldPath={`${props.fieldPath}.${idx}`}
                           keyPlaceholder={props.keyPlaceholder}
                           valuePlaceholder={props.valuePlaceholder}
-                          onFormChange={props.onFormChange}
                           keyOptions={props.keyOptions}
                           valueOptions={props.valueOptions}
                         />