refactor(editor): Turn showMessage mixin to composable (#6081)

* refactor(editor): move $getExecutionError from showMessages mixin to pushConnection (it is used there only)

* refactor(editor): resolve showMessage mixin methods

* fix(editor): use composable instead of mixin

* fix(editor): resolve conflicts

* fix(editor): replace clearAllStickyNotifications

* fix(editor): replace confirmMessage

* fix(editor): replace confirmMessage

* fix(editor): replace confirmMessage

* fix(editor): remove last confirmMessage usage

* fix(editor): remove $prompt usage

* fix(editor): remove $show methods

* fix(editor): lint fix

* fix(editor): lint fix

* fix(editor): fixes after review

packages/editor-ui/src/mixins/pushConnection.ts

@@ -7,8 +7,7 @@ import type {
 
 import { externalHooks } from '@/mixins/externalHooks';
 import { nodeHelpers } from '@/mixins/nodeHelpers';
-import { showMessage } from '@/mixins/showMessage';
-import { useTitleChange } from '@/composables/useTitleChange';
+import { useTitleChange, useToast } from '@/composables';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 
 import type {
@@ -19,6 +18,7 @@ import type {
 	IRunExecutionData,
 	IWorkflowBase,
 	SubworkflowOperationError,
+	IExecuteContextData,
 } from 'n8n-workflow';
 import { TelemetryHelpers } from 'n8n-workflow';
 
@@ -35,15 +35,11 @@ import { useSettingsStore } from '@/stores/settings.store';
 import { parse } from 'flatted';
 import { useSegment } from '@/stores/segment.store';
 
-export const pushConnection = mixins(
-	externalHooks,
-	nodeHelpers,
-	showMessage,
-	workflowHelpers,
-).extend({
+export const pushConnection = mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
 	setup() {
 		return {
 			...useTitleChange(),
+			...useToast(),
 		};
 	},
 	data() {
@@ -324,7 +320,7 @@ export const pushConnection = mixins(
 
 				const runDataExecuted = pushData.data;
 
-				let runDataExecutedErrorMessage = this.$getExecutionError(runDataExecuted.data);
+				let runDataExecutedErrorMessage = this.getExecutionError(runDataExecuted.data);
 
 				if (pushData.data.status === 'crashed') {
 					runDataExecutedErrorMessage = this.$locale.baseText(
@@ -367,7 +363,7 @@ export const pushConnection = mixins(
 
 					// Workflow did start but had been put to wait
 					this.titleSet(workflow.name as string, 'IDLE');
-					this.$showToast({
+					this.showToast({
 						title: 'Workflow started waiting',
 						message: `${action} <a href="https://docs.n8n.io/integrations/builtin/core-nodes/n8n-nodes-base.wait/" target="_blank">More info</a>`,
 						type: 'success',
@@ -422,7 +418,7 @@ export const pushConnection = mixins(
 
 						this.workflowsStore.subWorkflowExecutionError = error;
 
-						this.$showMessage({
+						this.showMessage({
 							title: error.message,
 							message: error.description,
 							type: 'error',
@@ -436,7 +432,7 @@ export const pushConnection = mixins(
 							title = 'Problem executing workflow';
 						}
 
-						this.$showMessage({
+						this.showMessage({
 							title,
 							message: runDataExecutedErrorMessage,
 							type: 'error',
@@ -459,7 +455,7 @@ export const pushConnection = mixins(
 							execution.data.resultData.runData &&
 							execution.data.resultData.runData[execution.executedNode];
 						if (nodeType && nodeType.polling && !nodeOutput) {
-							this.$showMessage({
+							this.showMessage({
 								title: this.$locale.baseText('pushConnection.pollingNode.dataNotFound', {
 									interpolate: {
 										service: getTriggerNodeServiceName(nodeType),
@@ -473,13 +469,13 @@ export const pushConnection = mixins(
 								type: 'success',
 							});
 						} else {
-							this.$showMessage({
+							this.showMessage({
 								title: this.$locale.baseText('pushConnection.nodeExecutedSuccessfully'),
 								type: 'success',
 							});
 						}
 					} else {
-						this.$showMessage({
+						this.showMessage({
 							title: this.$locale.baseText('pushConnection.workflowExecutedSuccessfully'),
 							type: 'success',
 						});
@@ -582,5 +578,38 @@ export const pushConnection = mixins(
 			}
 			return true;
 		},
+		getExecutionError(data: IRunExecutionData | IExecuteContextData) {
+			const error = data.resultData.error;
+
+			let errorMessage: string;
+
+			if (data.resultData.lastNodeExecuted && error) {
+				errorMessage = error.message || error.description;
+			} else {
+				errorMessage = this.$locale.baseText('pushConnection.executionError', {
+					interpolate: { error: '!' },
+				});
+
+				if (error && error.message) {
+					let nodeName: string | undefined;
+					if ('node' in error) {
+						nodeName = typeof error.node === 'string' ? error.node : error.node!.name;
+					}
+
+					const receivedError = nodeName ? `${nodeName}: ${error.message}` : error.message;
+					errorMessage = this.$locale.baseText('pushConnection.executionError', {
+						interpolate: {
+							error: `.${this.$locale.baseText('pushConnection.executionError.details', {
+								interpolate: {
+									details: receivedError,
+								},
+							})}`,
+						},
+					});
+				}
+			}
+
+			return errorMessage;
+		},
 	},
 });