fix(CanvasForm): Avoid serializing empty strings

Currently, when a string field is touched and later on clean, the resulting YAML looks like the following:
```
property: ''
```

And this represents an issue since many properties can't be left blank.

This commit avoids serializing empty `''` strings by replace them with
`undefined` instead.

fix: #1022

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

@@ -188,6 +188,34 @@ describe('CanvasForm', () => {
     expect(visualComponentSchema.definition.parameters).toEqual({});
   });
 
+  it("should serialize empty strings `''` as `undefined`", async () => {
+    const flowId = camelRouteVisualEntity.id;
+    const dispatchSpy = jest.fn();
+    const visualFlowsApi = new VisualFlowsApi(dispatchSpy);
+    const { nodes } = CanvasService.getFlowDiagram(camelRouteVisualEntity.toVizNode());
+    selectedNode = nodes[nodes.length - 1];
+
+    render(
+      <EntitiesProvider>
+        <VisibleFlowsContext.Provider value={{ visibleFlows: { [flowId]: true }, visualFlowsApi }}>
+          <CanvasForm selectedNode={selectedNode} />
+        </VisibleFlowsContext.Provider>
+      </EntitiesProvider>,
+    );
+
+    const idField = screen.getAllByLabelText('Description', { selector: 'input' })[0];
+    act(() => {
+      fireEvent.change(idField, { target: { value: '' } });
+    });
+
+    const closeSideBarButton = screen.getByTestId('close-side-bar');
+    act(() => {
+      fireEvent.click(closeSideBarButton);
+    });
+
+    expect(camelRouteVisualEntity.route.description).toBeUndefined();
+  });
+
   it('should allow consumers to update the Camel Route ID', async () => {
     const flowId = camelRouteVisualEntity.id;
     const newName = 'MyNewId';

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

@@ -53,8 +53,13 @@ export const CanvasForm: FunctionComponent<CanvasFormProps> = (props) => {
         return;
       }
 
+      let updatedValue = value;
+      if (value === '') {
+        updatedValue = undefined;
+      }
+
       const newModel = props.selectedNode.data.vizNode.getComponentSchema()?.definition || {};
-      setValue(newModel, path, value);
+      setValue(newModel, path, updatedValue);
       props.selectedNode.data.vizNode.updateModel(newModel);
       entitiesContext?.updateSourceCodeFromEntities();
     },