fix(Form): Expression field lose its values

Currently, using the following order works:
        1. Add a `setHeaders` step
        2. Configure the `name` property
        3. Configure the `expression` field

Now, it's not the case when going in the opposite direction.

This happens because when starting with an empty `setHeaders` step, both
the `Form` and the `ExpressionField` don't have any information and
they start with an empty object.

After configuring the `ExpressionField`, the `Form` still doesn't know
about the recently configured expression, and since the `Form` operates in an entire-object-update fashion, it removes the already configured `expression`.

The opposite doesn't happen because the `ExpressionField` checks the latest definition before updating it.

The workaround is to perform single-property operations in the `Form`, this way, the `Form` works in an additive way, preserving what was already set.

A more robust solution would be to perform the processor parsing before opening the `Form`, so we can incorporate the `ExpressionField` component into the `autoform` context.

fix: KaotoIO#722

packages/ui/src/components/Visualization/Canvas/CanvasForm.tsx

@@ -51,11 +51,15 @@ export const CanvasForm: FunctionComponent<CanvasFormProps> = (props) => {
     formRef.current?.reset();
   }, [props.selectedNode.data?.vizNode]);
 
-  const handleOnChange = useCallback(
-    (newModel: Record<string, unknown>) => {
-      if (props.selectedNode.data?.vizNode) {
-        props.selectedNode.data.vizNode.updateModel(newModel);
+  const handleOnChangeIndividualProp = useCallback(
+    (key: string, value: unknown) => {
+      if (!props.selectedNode.data?.vizNode) {
+        return;
       }
+
+      const newModel = props.selectedNode.data?.vizNode?.getComponentSchema()?.definition || {};
+      newModel[key] = value;
+      props.selectedNode.data.vizNode.updateModel(newModel);
       entitiesContext?.updateSourceCodeFromEntities();
     },
     [entitiesContext, props.selectedNode.data?.vizNode],
@@ -89,7 +93,13 @@ export const CanvasForm: FunctionComponent<CanvasFormProps> = (props) => {
           {isExpressionAwareStep && <StepExpressionEditor selectedNode={props.selectedNode} />}
           {isDataFormatAwareStep && <DataFormatEditor selectedNode={props.selectedNode} />}
           {isLoadBalanceAwareStep && <LoadBalancerEditor selectedNode={props.selectedNode} />}
-          <AutoForm ref={formRef} schema={schema} model={model} onChangeModel={handleOnChange} data-testid="autoform">
+          <AutoForm
+            ref={formRef}
+            schema={schema}
+            model={model}
+            onChange={handleOnChangeIndividualProp}
+            data-testid="autoform"
+          >
             <AutoFields omitFields={omitFields} />
             <ErrorsField />
           </AutoForm>