From a3958dafcbf822ca64d68e6875c13bf3598d3cdd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E0=A4=95=E0=A4=BE=E0=A4=B0=E0=A4=A4=E0=A5=8B=E0=A4=AB?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=AB=E0=A5=87=E0=A4=B2=E0=A4=B8=E0=A5=8D=E0=A4=95?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=B0=E0=A4=BF=E0=A4=AA=E0=A5=8D=E0=A4=9F=E2=84=A2?=
 <aditya@netroy.in>
Date: Wed, 27 Nov 2024 13:27:04 +0100
Subject: [PATCH] alternative proposal for node-2026

---
 .../editor-ui/src/stores/workflows.store.ts   | 13 ++-------
 .../editor-ui/src/utils/executionUtils.ts     | 29 ++++++++++---------
 2 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/packages/editor-ui/src/stores/workflows.store.ts b/packages/editor-ui/src/stores/workflows.store.ts
index f49beaed84781..58452eaf34249 100644
--- a/packages/editor-ui/src/stores/workflows.store.ts
+++ b/packages/editor-ui/src/stores/workflows.store.ts
@@ -84,7 +84,7 @@ import { TelemetryHelpers } from 'n8n-workflow';
 import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
 import { useRouter } from 'vue-router';
 import { useSettingsStore } from './settings.store';
-import { openPopUpWindow } from '@/utils/executionUtils';
+import { closeFormPopupWindow, openFormPopupWindow } from '@/utils/executionUtils';
 import { useNodeHelpers } from '@/composables/useNodeHelpers';
 
 const defaults: Omit<IWorkflowDb, 'id'> & { settings: NonNullable<IWorkflowDb['settings']> } = {
@@ -143,7 +143,6 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 	const chatMessages = ref<string[]>([]);
 	const isChatPanelOpen = ref(false);
 	const isLogsPanelOpen = ref(false);
-	const formPopupWindow = ref<Window | null>(null);
 
 	const workflowName = computed(() => workflow.value.name);
 
@@ -1319,12 +1318,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 				(node.type === WAIT_NODE_TYPE && node.parameters.resume === 'form')
 			) {
 				const testUrl = getFormResumeUrl(node, executionId);
-				if (!formPopupWindow.value || formPopupWindow.value.closed) {
-					formPopupWindow.value = openPopUpWindow(testUrl);
-				} else {
-					formPopupWindow.value.location = testUrl;
-					formPopupWindow.value.focus();
-				}
+				openFormPopupWindow(testUrl);
 			}
 		} else {
 			if (tasksData.length && tasksData[tasksData.length - 1].executionStatus === 'waiting') {
@@ -1577,8 +1571,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 		uiStore.removeActiveAction('workflowRunning');
 		workflowHelpers.setDocumentTitle(workflowName.value, 'IDLE');
 
-		formPopupWindow.value?.close();
-		formPopupWindow.value = null;
+		closeFormPopupWindow();
 
 		const runData = workflowExecutionData.value?.data?.resultData.runData ?? {};
 		for (const nodeName in runData) {
diff --git a/packages/editor-ui/src/utils/executionUtils.ts b/packages/editor-ui/src/utils/executionUtils.ts
index 014f3492b638d..d8db7b8f8e950 100644
--- a/packages/editor-ui/src/utils/executionUtils.ts
+++ b/packages/editor-ui/src/utils/executionUtils.ts
@@ -82,25 +82,28 @@ export const executionFilterToQueryFilter = (
 	return queryFilter;
 };
 
-export const openPopUpWindow = (
-	url: string,
-	options?: { width?: number; height?: number; alwaysInNewTab?: boolean },
-) => {
-	const windowWidth = window.innerWidth;
-	const smallScreen = windowWidth <= 800;
-	if (options?.alwaysInNewTab || smallScreen) {
-		return window.open(url, '_blank');
-	} else {
-		const height = options?.width || 700;
-		const width = options?.height || window.innerHeight - 50;
+let formPopupWindow: Window | null = null;
+
+export const openFormPopupWindow = (url: string) => {
+	if (!formPopupWindow || formPopupWindow.closed) {
+		const height = 700;
+		const width = window.innerHeight - 50;
 		const left = (window.innerWidth - height) / 2;
 		const top = 50;
 		const features = `width=${height},height=${width},left=${left},top=${top},resizable=yes,scrollbars=yes`;
 		const windowName = `form-waiting-since-${Date.now()}`;
-		return window.open(url, windowName, features);
+		formPopupWindow = window.open(url, windowName, features);
+	} else {
+		formPopupWindow.location = url;
+		formPopupWindow.focus();
 	}
 };
 
+export const closeFormPopupWindow = () => {
+	formPopupWindow?.close();
+	formPopupWindow = null;
+};
+
 export function displayForm({
 	nodes,
 	runData,
@@ -131,7 +134,7 @@ export function displayForm({
 		if (node.name === destinationNode || !node.disabled) {
 			let testUrl = '';
 			if (node.type === FORM_TRIGGER_NODE_TYPE) testUrl = getTestUrl(node);
-			if (testUrl && source !== 'RunData.ManualChatMessage') openPopUpWindow(testUrl);
+			if (testUrl && source !== 'RunData.ManualChatMessage') openFormPopupWindow(testUrl);
 		}
 	}
 }