fix(editor): Use last task data for calculating the current state (#15546)

packages/frontend/editor-ui/src/composables/useCanvasMapping.test.ts

@@ -265,6 +265,7 @@ describe('useCanvasMapping', () => {
 				}),
 			);
 		});
+	});
 
 	describe('render', () => {
 		it('should handle render options for default node type', () => {
@@ -559,7 +560,6 @@ describe('useCanvasMapping', () => {
 				});
 			});
 		});
-		});
 
 		describe('additionalNodePropertiesById', () => {
 			it('should return empty object when there are no sticky nodes', () => {
@@ -621,7 +621,9 @@ describe('useCanvasMapping', () => {
 				expect(additionalNodePropertiesById.value[nodes[0].id]).toEqual({
 					style: { zIndex: -100 },
 				});
-				expect(additionalNodePropertiesById.value[nodes[1].id]).toEqual({ style: { zIndex: -99 } });
+				expect(additionalNodePropertiesById.value[nodes[1].id]).toEqual({
+					style: { zIndex: -99 },
+				});
 			});
 
 			it('should calculate zIndex correctly for overlapping sticky nodes', () => {
@@ -1141,6 +1143,62 @@ describe('useCanvasMapping', () => {
 				expect(nodeHasIssuesById.value[node2.id]).toBe(true); // Has error status
 				expect(nodeHasIssuesById.value[node3.id]).toBe(false); // No issues
 			});
+
+			it('should handle node validation issues', () => {
+				const node1 = createTestNode({
+					name: 'Node 1',
+					issues: {
+						parameters: {
+							formTitle: ['Parameter "Form Title" is required.'],
+						},
+					},
+				} as Partial<INode>);
+				const nodes = [node1];
+				const connections = {};
+				const workflowObject = createTestWorkflowObject({ nodes, connections });
+
+				const { nodeHasIssuesById } = useCanvasMapping({
+					nodes: ref(nodes),
+					connections: ref(connections),
+					workflowObject: ref(workflowObject) as Ref<Workflow>,
+				});
+				expect(nodeHasIssuesById.value[node1.id]).toBe(true); // Has error status
+			});
+
+			it('should handle successful executions after errors', () => {
+				const workflowsStore = mockedStore(useWorkflowsStore);
+				const node1 = createTestNode({ name: 'Node 2' });
+				const nodes = [node1];
+				const connections = {};
+				const workflowObject = createTestWorkflowObject({ nodes, connections });
+
+				workflowsStore.getWorkflowRunData = {
+					'Node 2': [
+						{
+							startTime: 0,
+							executionTime: 0,
+							executionIndex: 0,
+							source: [],
+							executionStatus: 'error',
+						},
+						{
+							startTime: 0,
+							executionTime: 0,
+							executionIndex: 0,
+							source: [],
+							executionStatus: 'success',
+						},
+					],
+				};
+
+				const { nodeHasIssuesById } = useCanvasMapping({
+					nodes: ref(nodes),
+					connections: ref(connections),
+					workflowObject: ref(workflowObject) as Ref<Workflow>,
+				});
+
+				expect(nodeHasIssuesById.value[node1.id]).toBe(false); // Last run was successful
+			});
 		});
 	});
 

packages/frontend/editor-ui/src/composables/useCanvasMapping.ts

@@ -329,9 +329,9 @@ export function useCanvasMapping({
 
 	const nodeExecutionStatusById = computed(() =>
 		nodes.value.reduce<Record<string, ExecutionStatus>>((acc, node) => {
-			acc[node.id] =
-				workflowsStore.getWorkflowRunData?.[node.name]?.filter(Boolean)[0]?.executionStatus ??
-				'new';
+			const tasks = workflowsStore.getWorkflowRunData?.[node.name] ?? [];
+
+			acc[node.id] = tasks.at(-1)?.executionStatus ?? 'new';
 			return acc;
 		}, {}),
 	);
@@ -406,8 +406,12 @@ export function useCanvasMapping({
 				acc[node.id] = true;
 			} else if (nodePinnedDataById.value[node.id]) {
 				acc[node.id] = false;
+			} else if (node.issues && nodeHelpers.nodeIssuesToString(node.issues, node).length) {
+				acc[node.id] = true;
 			} else {
-				acc[node.id] = nodeIssuesById.value[node.id].length > 0;
+				const tasks = workflowsStore.getWorkflowRunData?.[node.name] ?? [];
+
+				acc[node.id] = Boolean(tasks.at(-1)?.error);
 			}
 
 			return acc;