fix(editor): Show error toast for failed executions (#15388)

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

@@ -53,6 +53,7 @@ import { nextTick } from 'vue';
 import { useProjectsStore } from '@/stores/projects.store';
 import type { CanvasLayoutEvent } from './useCanvasLayout';
 import { useTelemetry } from './useTelemetry';
+import { useToast } from '@/composables/useToast';
 
 vi.mock('vue-router', async (importOriginal) => {
 	const actual = await importOriginal<{}>();
@@ -88,6 +89,21 @@ vi.mock('@/composables/useTelemetry', () => {
 	};
 });
 
+vi.mock('@/composables/useToast', () => {
+	const showMessage = vi.fn();
+	const showError = vi.fn();
+	const showToast = vi.fn();
+	return {
+		useToast: () => {
+			return {
+				showMessage,
+				showError,
+				showToast,
+			};
+		},
+	};
+});
+
 describe('useCanvasOperations', () => {
 	const router = useRouter();
 
@@ -2726,6 +2742,39 @@ describe('useCanvasOperations', () => {
 
 			expect(workflowsStore.setWorkflowPinData).toHaveBeenCalledWith({});
 		});
+		it('should show an error notification for failed executions', async () => {
+			const workflowsStore = mockedStore(useWorkflowsStore);
+			const { openExecution } = useCanvasOperations({ router });
+			const toast = useToast();
+
+			const executionId = '123';
+			const executionData: IExecutionResponse = {
+				id: executionId,
+				finished: true,
+				status: 'error',
+				startedAt: new Date(),
+				createdAt: new Date(),
+				workflowData: createTestWorkflow(),
+				mode: 'manual',
+				data: {
+					resultData: {
+						error: { message: 'Crashed', node: { name: 'Step1' } },
+						lastNodeExecuted: 'Last Node',
+					},
+				} as IExecutionResponse['data'],
+			};
+
+			workflowsStore.getExecution.mockResolvedValue(executionData);
+
+			await openExecution(executionId);
+
+			expect(toast.showMessage).toHaveBeenCalledWith({
+				duration: 0,
+				message: 'Crashed',
+				title: 'Problem in node ‘Last Node‘',
+				type: 'error',
+			});
+		});
 	});
 
 	describe('connectAdjacentNodes', () => {