From 9d6f0c5dec9784d6f08f75b3d2d88312886e227f Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <mutasem@n8n.io>
Date: Mon, 11 Nov 2024 10:57:10 +0100
Subject: [PATCH] fix: handle better case when workflow id is missing

---
 .../src/composables/useExecutionHelpers.ts    | 30 +++++++++++++++++--
 .../src/plugins/i18n/locales/en.json          |  2 +-
 .../src/views/WorkflowExecutionsView.vue      |  5 +++-
 3 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/packages/editor-ui/src/composables/useExecutionHelpers.ts b/packages/editor-ui/src/composables/useExecutionHelpers.ts
index ea54b60e58..c1de782c7b 100644
--- a/packages/editor-ui/src/composables/useExecutionHelpers.ts
+++ b/packages/editor-ui/src/composables/useExecutionHelpers.ts
@@ -3,6 +3,8 @@ import { convertToDisplayDate } from '@/utils/formatters/dateFormatter';
 import { useI18n } from '@/composables/useI18n';
 import { useRouter } from 'vue-router';
 import { VIEWS } from '@/constants';
+import { useExecutionsStore } from '@/stores/executions.store';
+import { useToast } from './useToast';
 
 export interface IExecutionUIData {
 	name: string;
@@ -17,6 +19,8 @@ export interface IExecutionUIData {
 export function useExecutionHelpers() {
 	const i18n = useI18n();
 	const router = useRouter();
+	const executionsStore = useExecutionsStore();
+	const toast = useToast();
 
 	function getUIDetails(execution: ExecutionSummary): IExecutionUIData {
 		const status = {
@@ -72,8 +76,7 @@ export function useExecutionHelpers() {
 		return ['crashed', 'error'].includes(execution.status) && !execution.retrySuccessId;
 	}
 
-	function openExecutionInNewTab(executionId: string, workflowId?: string) {
-		// todo this does not work when workflowId is not set
+	function openInNewTab(executionId: string, workflowId: string) {
 		const route = router.resolve({
 			name: VIEWS.EXECUTION_PREVIEW,
 			params: { name: workflowId, executionId },
@@ -81,6 +84,29 @@ export function useExecutionHelpers() {
 		window.open(route.href, '_blank');
 	}
 
+	async function openExecutionById(executionId: string): Promise<void> {
+		try {
+			const execution = (await executionsStore.fetchExecution(executionId)) as ExecutionSummary;
+
+			openInNewTab(executionId, execution.workflowId);
+		} catch (e) {
+			toast.showMessage({
+				type: 'error',
+				message: i18n.baseText('nodeView.showError.openExecution.title'),
+			});
+		}
+	}
+
+	function openExecutionInNewTab(executionId: string, workflowId?: string): void {
+		// todo this does not work when workflowId is not set
+		if (!workflowId) {
+			void openExecutionById(executionId);
+			return;
+		}
+
+		openInNewTab(executionId, workflowId);
+	}
+
 	return {
 		getUIDetails,
 		formatDate,
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 9658bc25e2..be60350050 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -2614,7 +2614,7 @@
 	"executionUsage.button.upgrade": "Upgrade plan",
 	"executionUsage.expired.text": "Your trial is over. Upgrade now to keep your data.",
 	"executionUsage.ranOutOfExecutions.text": "You’re out of executions. Upgrade your plan to keep automating.",
-	"executionsView.missingExeuctionId": "Could not find execution. Make sure workflow saving is turned on.",
+	"openExecution.missingExeuctionId": "Could not find execution. Make sure workflow saving is turned on.",
 	"type.string": "String",
 	"type.number": "Number",
 	"type.dateTime": "Date & Time",
diff --git a/packages/editor-ui/src/views/WorkflowExecutionsView.vue b/packages/editor-ui/src/views/WorkflowExecutionsView.vue
index aea8d3c8a2..e89ddcc6b8 100644
--- a/packages/editor-ui/src/views/WorkflowExecutionsView.vue
+++ b/packages/editor-ui/src/views/WorkflowExecutionsView.vue
@@ -25,6 +25,7 @@ const route = useRoute();
 const router = useRouter();
 const toast = useToast();
 const { callDebounced } = useDebounce();
+
 const workflowHelpers = useWorkflowHelpers({ router });
 const nodeHelpers = useNodeHelpers();
 
@@ -104,8 +105,10 @@ async function fetchExecution() {
 	if (!currentExecution.value) {
 		toast.showMessage({
 			type: 'error',
-			message: i18n.baseText('executionsView.missingExeuctionId'),
+			message: i18n.baseText('openExecution.missingExeuctionId'),
 		});
+
+		return;
 	}
 }