From c218ccdd3f012827fad0a8d81fffc2c338eb39cb Mon Sep 17 00:00:00 2001
From: Ricardo M <lordrip@gmail.com>
Date: Fri, 8 Dec 2023 07:23:15 +0100
Subject: [PATCH] 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: https://github.com/KaotoIO/kaoto-next/issues/518
---
 .../Visualization/Canvas/DataFormatEditor.tsx      | 13 ++++++-------
 .../Visualization/Canvas/ExpressionEditor.tsx      | 14 ++++++++------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/packages/ui/src/components/Visualization/Canvas/DataFormatEditor.tsx b/packages/ui/src/components/Visualization/Canvas/DataFormatEditor.tsx
index 8bfaba497..0ed354cb8 100644
--- a/packages/ui/src/components/Visualization/Canvas/DataFormatEditor.tsx
+++ b/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)}>
diff --git a/packages/ui/src/components/Visualization/Canvas/ExpressionEditor.tsx b/packages/ui/src/components/Visualization/Canvas/ExpressionEditor.tsx
index 68390c14d..5084544d7 100644
--- a/packages/ui/src/components/Visualization/Canvas/ExpressionEditor.tsx
+++ b/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)}>