From 650e703402aeee7982ac9f8a0ad43aa283a00a40 Mon Sep 17 00:00:00 2001
From: Ricardo M <lordrip@gmail.com>
Date: Wed, 24 Jan 2024 11:46:42 +0100
Subject: [PATCH] fix(canvas): Refersh canvas after error

Currently, if there's an error during a flow parsing, an error message is shown to the user to explain what happens and suggest checking the source code. In the VSCode extension, the canvas doesn't refresh after an error, causing the editor to be stuck until the user closes the extension and reopens it again or switches to another tab.

This commit addresses this issue by assigning a `key` property to the error boundary component, so it gets refreshed after an entity update that happens only after editing the source code.

fix: https://github.com/KaotoIO/kaoto-next/issues/714
---
 packages/ui/src/components/Visualization/Visualization.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/Visualization/Visualization.tsx b/packages/ui/src/components/Visualization/Visualization.tsx
index 0fa4414cc..bdd28ad74 100644
--- a/packages/ui/src/components/Visualization/Visualization.tsx
+++ b/packages/ui/src/components/Visualization/Visualization.tsx
@@ -1,4 +1,4 @@
-import { FunctionComponent, PropsWithChildren, ReactNode } from 'react';
+import { FunctionComponent, PropsWithChildren, ReactNode, useMemo } from 'react';
 import { BaseVisualCamelEntity } from '../../models/visualization/base-visual-entity';
 import { ErrorBoundary } from '../ErrorBoundary';
 import { Canvas } from './Canvas';
@@ -13,9 +13,11 @@ interface CanvasProps {
 }
 
 export const Visualization: FunctionComponent<PropsWithChildren<CanvasProps>> = (props) => {
+  const lastUpdate = useMemo(() => Date.now(), [props.entities]);
+
   return (
     <div className={`canvas-surface ${props.className ?? ''}`}>
-      <ErrorBoundary fallback={props.fallback ?? <CanvasFallback />}>
+      <ErrorBoundary key={lastUpdate} fallback={props.fallback ?? <CanvasFallback />}>
         <Canvas contextToolbar={<ContextToolbar />} entities={props.entities} />
       </ErrorBoundary>
     </div>