fix(setHeaders): Fix broken setHeaders processor

After changing the way how `AutoForm` updates the node's models, nested
schemas, like the one used by `setHeader` no longer work as the key of
the property being changed is expressed using the `.` (dot) notation.

As an example: `headers.0.expression`

This means that we can't use the `key` as it is to set the values, as it
won't achieve the expected result.

The fix is to use `lodash/set` to navigate through the path and assign
the value in the right place.

fix: KaotoIO#727

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

@@ -1,5 +1,6 @@
 import { AutoField, AutoFields, AutoForm, ErrorsField } from '@kaoto-next/uniforms-patternfly';
 import { CodeBlock, CodeBlockCode, Title } from '@patternfly/react-core';
+import set from 'lodash.set';
 import { FunctionComponent, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import { stringify } from 'yaml';
 import { EntitiesContext } from '../../../providers/entities.provider';
@@ -52,13 +53,13 @@ export const CanvasForm: FunctionComponent<CanvasFormProps> = (props) => {
   }, [props.selectedNode.data?.vizNode]);
 
   const handleOnChangeIndividualProp = useCallback(
-    (key: string, value: unknown) => {
+    (path: string, value: unknown) => {
       if (!props.selectedNode.data?.vizNode) {
         return;
       }
 
       const newModel = props.selectedNode.data?.vizNode?.getComponentSchema()?.definition || {};
-      newModel[key] = value;
+      set(newModel, path, value);
       props.selectedNode.data.vizNode.updateModel(newModel);
       entitiesContext?.updateSourceCodeFromEntities();
     },