fix(ExpressionEditor): Fix stale data in Expression Editor

Currently, the ExpressionEditor and DataFormatEditor hold stale data
about the selected node, hence forcing the node update with old data.

The issue behaves as the following:

1. The user updates the expression field using the ExpressionEditor
2. After that, a change in an endpoint parameter is made
3. Another update is made in the ExpressionEditor
At this point, the ExpressionEditor doesn't know the latest change from
the endpoint parameters, hence updating the model with stale information
and ignoring the pending changes.

The fix is to refresh the data in the ExpressionEditor before making the
changes.

This issue will behave the same for the `DataFormatEditor`

fix: #518

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

@@ -1,4 +1,3 @@
-import { FunctionComponent, Ref, useCallback, useContext, useMemo, useState } from 'react';
 import {
   Card,
   CardBody,
@@ -11,8 +10,9 @@ import {
   MenuToggle,
   MenuToggleElement,
 } from '@patternfly/react-core';
-import { MetadataEditor } from '../../MetadataEditor';
+import { FunctionComponent, Ref, useCallback, useContext, useMemo, useState } from 'react';
 import { EntitiesContext } from '../../../providers';
+import { MetadataEditor } from '../../MetadataEditor';
 import { CanvasNode } from './canvas.models';
 import { DataFormatService } from './dataformat.service';
 
@@ -35,10 +35,9 @@ export const DataFormatEditor: FunctionComponent<DataFormatEditorProps> = (props
       visualComponentSchema.definition = {};
     }
   }
-  const model = visualComponentSchema?.definition;
-  const { dataFormat: dataFormat, model: dataFormatModel } = DataFormatService.parseDataFormatModel(
+  const { dataFormat, model: dataFormatModel } = DataFormatService.parseDataFormatModel(
     dataFormatCatalogMap,
-    model,
+    visualComponentSchema?.definition,
   );
   const dataFormatSchema = useMemo(() => {
     return DataFormatService.getDataFormatSchema(dataFormat!);
@@ -50,12 +49,13 @@ export const DataFormatEditor: FunctionComponent<DataFormatEditorProps> = (props
 
   const handleOnChange = useCallback(
     (selectedDataFormat: string, newDataFormatModel: Record<string, unknown>) => {
+      const model = props.selectedNode.data?.vizNode?.getComponentSchema()?.definition;
       if (!model) return;
       DataFormatService.setDataFormatModel(dataFormatCatalogMap, model, selectedDataFormat, newDataFormatModel);
       props.selectedNode.data?.vizNode?.updateModel(model);
       entitiesContext?.updateSourceCodeFromEntities();
     },
-    [entitiesContext, dataFormatCatalogMap, model, props.selectedNode.data?.vizNode],
+    [entitiesContext, dataFormatCatalogMap, props.selectedNode.data?.vizNode],
   );
 
   const onSelect = useCallback(
@@ -78,7 +78,6 @@ export const DataFormatEditor: FunctionComponent<DataFormatEditorProps> = (props
 
   return (
     dataFormatCatalogMap &&
-    model &&
     dataFormat && (
       <Card isCompact={true} isExpanded={isExpanded}>
         <CardHeader onExpand={() => setIsExpanded(!isExpanded)}>

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

@@ -1,4 +1,3 @@
-import { FunctionComponent, Ref, useCallback, useContext, useMemo, useState } from 'react';
 import {
   Card,
   CardBody,
@@ -11,8 +10,9 @@ import {
   MenuToggle,
   MenuToggleElement,
 } from '@patternfly/react-core';
-import { MetadataEditor } from '../../MetadataEditor';
+import { FunctionComponent, Ref, useCallback, useContext, useMemo, useState } from 'react';
 import { EntitiesContext } from '../../../providers';
+import { MetadataEditor } from '../../MetadataEditor';
 import { CanvasNode } from './canvas.models';
 import { ExpressionService } from './expression.service';
 
@@ -34,8 +34,10 @@ export const ExpressionEditor: FunctionComponent<ExpressionEditorProps> = (props
       visualComponentSchema.definition = {};
     }
   }
-  const model = visualComponentSchema?.definition;
-  const { language, model: expressionModel } = ExpressionService.parseExpressionModel(languageCatalogMap, model);
+  const { language, model: expressionModel } = ExpressionService.parseExpressionModel(
+    languageCatalogMap,
+    visualComponentSchema?.definition,
+  );
   const languageSchema = useMemo(() => {
     return ExpressionService.getLanguageSchema(language!);
   }, [language]);
@@ -46,12 +48,13 @@ export const ExpressionEditor: FunctionComponent<ExpressionEditorProps> = (props
 
   const handleOnChange = useCallback(
     (selectedLanguage: string, newExpressionModel: Record<string, unknown>) => {
+      const model = props.selectedNode.data?.vizNode?.getComponentSchema()?.definition;
       if (!model) return;
       ExpressionService.setExpressionModel(languageCatalogMap, model, selectedLanguage, newExpressionModel);
       props.selectedNode.data?.vizNode?.updateModel(model);
       entitiesContext?.updateSourceCodeFromEntities();
     },
-    [entitiesContext, languageCatalogMap, model, props.selectedNode.data?.vizNode],
+    [entitiesContext, languageCatalogMap, props.selectedNode.data?.vizNode],
   );
 
   const onSelect = useCallback(
@@ -74,7 +77,6 @@ export const ExpressionEditor: FunctionComponent<ExpressionEditorProps> = (props
 
   return (
     languageCatalogMap &&
-    model &&
     language && (
       <Card isCompact={true} isExpanded={isExpanded}>
         <CardHeader onExpand={() => setIsExpanded(!isExpanded)}>