fix(code): Remove phantom array and define parameter property

Currently, there are 2 issues around configuring steps:

1. After configuring a node using the CanvasForm, there's a remaining `[]`
at the end of the Source Code.

2. Upon configuring a node using the CanvasForm, the configuration fall under the
wrong `properties` property.

3. After changes, the source code is not being stored in `LocalStorage`

Changes

1. Only parse the visualEntities or entities if they aren't empty

2. Place the node configuration under the `parameters` property.

3. Move the sync `useEffect` to the `Shell` component, as the `SourceCodePage`
gets deleted when switching routes.

Relates to: #137

packages/ui/src/hooks/entities.ts

@@ -60,9 +60,13 @@ export const useEntities = (): EntitiesContextResult => {
 
   /** Updates the Source Code whenever the entities are updated */
   const updateCodeFromEntities = useCallback(() => {
-    const visualEntitiesCode = stringify(visualEntities, null, { indent: 2 });
-    const entitiesCode = stringify(entities, null, { indent: 2 });
-    const code = visualEntitiesCode + '\n' + entitiesCode;
+    let code = '';
+    if (visualEntities.length > 0) {
+      code += stringify(visualEntities, null, { indent: 2 }) + '\n';
+    }
+    if (entities.length > 0) {
+      code += stringify(entities, null, { indent: 2 }) + '\n';
+    }
 
     /** Set the Source Code directly, without using `setCode` as updating the entities is already done */
     setSourceCode(code);

packages/ui/src/layout/Shell.tsx

@@ -13,7 +13,7 @@ export const Shell: FunctionComponent<PropsWithChildren> = (props) => {
   const entitiesContext = useContext(EntitiesContext);
 
   /** Load the source code from localStorage */
-  const [localSourceCode] = useLocalStorage(LocalStorageKeys.SourceCode, camelRouteYaml);
+  const [localSourceCode, setLocalSourceCode] = useLocalStorage(LocalStorageKeys.SourceCode, camelRouteYaml);
 
   const navToggle = useCallback(() => {
     setIsNavOpen(!isNavOpen);
@@ -26,6 +26,12 @@ export const Shell: FunctionComponent<PropsWithChildren> = (props) => {
     }
   }, []);
 
+  useEffect(() => {
+    return entitiesContext?.eventNotifier.subscribe('code:update', (code) => {
+      setLocalSourceCode(code);
+    });
+  }, [entitiesContext?.eventNotifier, setLocalSourceCode]);
+
   return (
     <Page header={<TopBar navToggle={navToggle} />} sidebar={<Navigation isNavOpen={isNavOpen} />}>
       <Panel className="shell__body" isScrollable>

packages/ui/src/models/visualization/flows/camel-component-schema.service.ts

@@ -108,10 +108,10 @@ export class CamelComponentSchemaService {
 
       if (componentDefinition !== undefined) {
         const componentSchema = this.getSchemaFromCamelCommonProperties(componentDefinition.properties);
-        schema.properties.properties = {
+        schema.properties.parameters = {
           type: 'object',
-          title: 'Component Properties',
-          description: 'Component Properties Description',
+          title: 'Component Parameters',
+          description: 'Component parameters description',
           properties: componentSchema.properties,
         };
       }

packages/ui/src/pages/SourceCode/SourceCodePage.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent, useCallback, useContext, useEffect } from 'react';
+import { FunctionComponent, useCallback, useContext } from 'react';
 import { SourceCode } from '../../components/SourceCode';
 import { useLocalStorage } from '../../hooks';
 import { LocalStorageKeys } from '../../models';
@@ -19,11 +19,5 @@ export const SourceCodePage: FunctionComponent = () => {
     [entitiesContext],
   );
 
-  useEffect(() => {
-    return entitiesContext?.eventNotifier.subscribe('code:update', (code) => {
-      setLocalSourceCode(code);
-    });
-  }, [entitiesContext?.eventNotifier, setLocalSourceCode]);
-
   return <SourceCode code={entitiesContext?.code ?? ''} onCodeChange={handleCodeChange} />;
 };