Feat: Submit clean data operations form data to the backend. #10427 (#11030)

### What problem does this PR solve?

Feat: Submit clean data operations form data to the backend. #10427

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/agent/hooks/use-watch-form-change.ts

@@ -2,9 +2,13 @@ import { useEffect } from 'react';
 import { UseFormReturn, useWatch } from 'react-hook-form';
 import useGraphStore from '../store';
 
-export function useWatchFormChange(id?: string, form?: UseFormReturn<any>) {
+export function useWatchFormChange(
+  id?: string,
+  form?: UseFormReturn<any>,
+  enableReplacement = false,
+) {
   let values = useWatch({ control: form?.control });
-  const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
+  const { updateNodeForm, replaceNodeForm } = useGraphStore((state) => state);
 
   useEffect(() => {
     // Manually triggered form updates are synchronized to the canvas
@@ -12,7 +16,7 @@ export function useWatchFormChange(id?: string, form?: UseFormReturn<any>) {
       values = form?.getValues() || {};
       let nextValues: any = values;
 
-      updateNodeForm(id, nextValues);
+      (enableReplacement ? replaceNodeForm : updateNodeForm)(id, nextValues);
     }
   }, [form?.formState.isDirty, id, updateNodeForm, values]);
 }