From 1ba656ef4aae97c78162114ad8de533b275db280 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Mon, 24 Jun 2024 15:08:24 +0200
Subject: [PATCH] fix(editor): Properly update workflow info in main header
 (#9789)

---
 cypress/e2e/20-workflow-executions.cy.ts      |  78 ++-
 .../src/components/MainHeader/MainHeader.vue  | 328 +++++------
 .../workflow/WorkflowExecutionsList.vue       |   6 +-
 .../workflow/WorkflowExecutionsPreview.vue    |   3 +-
 .../src/composables/useNodeHelpers.ts         | 458 ++++++++++++++-
 .../src/composables/useWorkflowHelpers.ts     |  22 +
 .../editor-ui/src/stores/workflows.store.ts   |  26 +-
 packages/editor-ui/src/views/NodeView.vue     | 524 ++----------------
 .../src/views/WorkflowExecutionsView.vue      |  36 +-
 9 files changed, 780 insertions(+), 701 deletions(-)

diff --git a/cypress/e2e/20-workflow-executions.cy.ts b/cypress/e2e/20-workflow-executions.cy.ts
index 8a867afe1bed4..2431289761111 100644
--- a/cypress/e2e/20-workflow-executions.cy.ts
+++ b/cypress/e2e/20-workflow-executions.cy.ts
@@ -2,6 +2,7 @@ import type { RouteHandler } from 'cypress/types/net-stubbing';
 import { WorkflowPage } from '../pages';
 import { WorkflowExecutionsTab } from '../pages/workflow-executions-tab';
 import executionOutOfMemoryServerResponse from '../fixtures/responses/execution-out-of-memory-server-response.json';
+import { getVisibleSelect } from '../utils';
 
 const workflowPage = new WorkflowPage();
 const executionsTab = new WorkflowExecutionsTab();
@@ -136,15 +137,90 @@ describe('Current Workflow Executions', () => {
 		executionsTab.getters.executionListItems().eq(14).should('not.be.visible');
 	});
 
-	it('should show workflow data in executions tab after hard reload', () => {
+	it('should show workflow data in executions tab after hard reload and modify name and tags', () => {
 		executionsTab.actions.switchToExecutionsTab();
 		checkMainHeaderELements();
+		workflowPage.getters.saveButton().find('button').should('not.exist');
+		workflowPage.getters.tagPills().should('have.length', 2);
+
+		workflowPage.getters.workflowTags().click();
+		getVisibleSelect().find('li:contains("Manage tags")').click();
+		cy.get('button:contains("Add new")').click();
+		cy.getByTestId('tags-table').find('input').type('nutag').type('{enter}');
+		cy.get('button:contains("Done")').click();
 
 		cy.reload();
 		checkMainHeaderELements();
+		workflowPage.getters.saveButton().find('button').should('not.exist');
+		workflowPage.getters.workflowTags().click();
+		workflowPage.getters.tagsInDropdown().first().should('have.text', 'nutag').click();
+		workflowPage.getters.tagPills().should('have.length', 3);
+
+		let newWorkflowName = 'Renamed workflow';
+		workflowPage.actions.renameWorkflow(newWorkflowName);
+		workflowPage.getters.isWorkflowSaved();
+		workflowPage.getters
+			.workflowNameInputContainer()
+			.invoke('attr', 'title')
+			.should('eq', newWorkflowName);
+
+		executionsTab.actions.switchToEditorTab();
+		checkMainHeaderELements();
+		workflowPage.getters.saveButton().find('button').should('not.exist');
+		workflowPage.getters.tagPills().should('have.length', 3);
+		workflowPage.getters
+			.workflowNameInputContainer()
+			.invoke('attr', 'title')
+			.should('eq', newWorkflowName);
+
+		executionsTab.actions.switchToExecutionsTab();
+		checkMainHeaderELements();
+		workflowPage.getters.saveButton().find('button').should('not.exist');
+		workflowPage.getters.tagPills().should('have.length', 3);
+		workflowPage.getters
+			.workflowNameInputContainer()
+			.invoke('attr', 'title')
+			.should('eq', newWorkflowName);
+
+		executionsTab.actions.switchToEditorTab();
+		checkMainHeaderELements();
+		workflowPage.getters.saveButton().find('button').should('not.exist');
+		workflowPage.getters.tagPills().should('have.length', 3);
+		workflowPage.getters
+			.workflowNameInputContainer()
+			.invoke('attr', 'title')
+			.should('eq', newWorkflowName);
+
+		newWorkflowName = 'New workflow';
+		workflowPage.actions.renameWorkflow(newWorkflowName);
+		workflowPage.getters.isWorkflowSaved();
+		workflowPage.getters
+			.workflowNameInputContainer()
+			.invoke('attr', 'title')
+			.should('eq', newWorkflowName);
+		workflowPage.getters.workflowTags().click();
+		workflowPage.getters.tagsDropdown().find('.el-tag__close').first().click();
+		cy.get('body').click(0, 0);
+		workflowPage.getters.saveButton().find('button').should('not.exist');
+		workflowPage.getters.tagPills().should('have.length', 2);
+
+		executionsTab.actions.switchToExecutionsTab();
+		checkMainHeaderELements();
+		workflowPage.getters.saveButton().find('button').should('not.exist');
+		workflowPage.getters.tagPills().should('have.length', 2);
+		workflowPage.getters
+			.workflowNameInputContainer()
+			.invoke('attr', 'title')
+			.should('eq', newWorkflowName);
 
 		executionsTab.actions.switchToEditorTab();
 		checkMainHeaderELements();
+		workflowPage.getters.saveButton().find('button').should('not.exist');
+		workflowPage.getters.tagPills().should('have.length', 2);
+		workflowPage.getters
+			.workflowNameInputContainer()
+			.invoke('attr', 'title')
+			.should('eq', newWorkflowName);
 	});
 });
 
diff --git a/packages/editor-ui/src/components/MainHeader/MainHeader.vue b/packages/editor-ui/src/components/MainHeader/MainHeader.vue
index 8f484042cb92d..f402412de2093 100644
--- a/packages/editor-ui/src/components/MainHeader/MainHeader.vue
+++ b/packages/editor-ui/src/components/MainHeader/MainHeader.vue
@@ -1,24 +1,7 @@
-<template>
-	<div>
-		<div :class="{ 'main-header': true, expanded: !uiStore.sidebarMenuCollapsed }">
-			<div v-show="!hideMenuBar" class="top-menu">
-				<WorkflowDetails v-if="workflow?.name" :workflow="workflow" :read-only="readOnly" />
-				<TabBar
-					v-if="onWorkflowPage"
-					:items="tabBarItems"
-					:model-value="activeHeaderTab"
-					@update:model-value="onTabSelected"
-				/>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import { ref, computed, watch, onBeforeMount, onMounted } from 'vue';
 import type { RouteLocation, RouteLocationRaw } from 'vue-router';
-import { useRouter } from 'vue-router';
-import { mapStores } from 'pinia';
+import { useRouter, useRoute } from 'vue-router';
 import WorkflowDetails from '@/components/MainHeader/WorkflowDetails.vue';
 import TabBar from '@/components/MainHeader/TabBar.vue';
 import {
@@ -27,7 +10,7 @@ import {
 	STICKY_NODE_TYPE,
 	VIEWS,
 } from '@/constants';
-import type { INodeUi, ITabBarItem, IWorkflowDb } from '@/Interface';
+import { useI18n } from '@/composables/useI18n';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useSourceControlStore } from '@/stores/sourceControl.store';
 import { useUIStore } from '@/stores/ui.store';
@@ -35,173 +18,160 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useExecutionsStore } from '@/stores/executions.store';
 import { usePushConnection } from '@/composables/usePushConnection';
 
-export default defineComponent({
-	name: 'MainHeader',
-	components: {
-		WorkflowDetails,
-		TabBar,
-	},
-	setup() {
-		const router = useRouter();
-		const pushConnection = usePushConnection({ router });
-
-		return {
-			pushConnection,
-		};
-	},
-	data() {
-		return {
-			activeHeaderTab: MAIN_HEADER_TABS.WORKFLOW,
-			workflowToReturnTo: '',
-			executionToReturnTo: '',
-			dirtyState: false,
-		};
-	},
-	computed: {
-		...mapStores(
-			useNDVStore,
-			useUIStore,
-			useSourceControlStore,
-			useWorkflowsStore,
-			useExecutionsStore,
-		),
-		tabBarItems(): ITabBarItem[] {
-			return [
-				{ value: MAIN_HEADER_TABS.WORKFLOW, label: this.$locale.baseText('generic.editor') },
-				{ value: MAIN_HEADER_TABS.EXECUTIONS, label: this.$locale.baseText('generic.executions') },
-			];
-		},
-		activeNode(): INodeUi | null {
-			return this.ndvStore.activeNode;
-		},
-		hideMenuBar(): boolean {
-			return Boolean(this.activeNode && this.activeNode.type !== STICKY_NODE_TYPE);
-		},
-		workflow(): IWorkflowDb {
-			return this.workflowsStore.workflow;
-		},
-		currentWorkflow(): string {
-			return String(this.$route.params.name || this.workflowsStore.workflowId);
-		},
-		onWorkflowPage(): boolean {
-			return !!(this.$route.meta.nodeView || this.$route.meta.keepWorkflowAlive);
-		},
-		readOnly(): boolean {
-			return this.sourceControlStore.preferences.branchReadOnly;
-		},
-	},
-	watch: {
-		$route(to, from) {
-			this.syncTabsWithRoute(to, from);
-		},
-	},
-	beforeMount() {
-		this.pushConnection.initialize();
-	},
-	mounted() {
-		this.dirtyState = this.uiStore.stateIsDirty;
-		this.syncTabsWithRoute(this.$route);
-	},
-	beforeUnmount() {
-		this.pushConnection.terminate();
-	},
-	methods: {
-		syncTabsWithRoute(to: RouteLocation, from?: RouteLocation): void {
-			if (
-				to.name === VIEWS.EXECUTION_HOME ||
-				to.name === VIEWS.WORKFLOW_EXECUTIONS ||
-				to.name === VIEWS.EXECUTION_PREVIEW
-			) {
-				this.activeHeaderTab = MAIN_HEADER_TABS.EXECUTIONS;
-			} else if (
-				to.name === VIEWS.WORKFLOW ||
-				to.name === VIEWS.NEW_WORKFLOW ||
-				to.name === VIEWS.EXECUTION_DEBUG
-			) {
-				this.activeHeaderTab = MAIN_HEADER_TABS.WORKFLOW;
-			}
+const router = useRouter();
+const route = useRoute();
+const locale = useI18n();
+const pushConnection = usePushConnection({ router });
+const ndvStore = useNDVStore();
+const uiStore = useUIStore();
+const sourceControlStore = useSourceControlStore();
+const workflowsStore = useWorkflowsStore();
+const executionsStore = useExecutionsStore();
 
-			if (to.params.name !== 'new' && typeof to.params.name === 'string') {
-				this.workflowToReturnTo = to.params.name;
-			}
+const activeHeaderTab = ref(MAIN_HEADER_TABS.WORKFLOW);
+const workflowToReturnTo = ref('');
+const executionToReturnTo = ref('');
+const dirtyState = ref(false);
 
-			if (
-				from?.name === VIEWS.EXECUTION_PREVIEW &&
-				to.params.name === from.params.name &&
-				typeof from.params.executionId === 'string'
-			) {
-				this.executionToReturnTo = from.params.executionId;
-			}
-		},
-		onTabSelected(tab: MAIN_HEADER_TABS, event: MouseEvent) {
-			const openInNewTab = event.ctrlKey || event.metaKey;
+const tabBarItems = computed(() => [
+	{ value: MAIN_HEADER_TABS.WORKFLOW, label: locale.baseText('generic.editor') },
+	{ value: MAIN_HEADER_TABS.EXECUTIONS, label: locale.baseText('generic.executions') },
+]);
 
-			switch (tab) {
-				case MAIN_HEADER_TABS.WORKFLOW:
-					void this.navigateToWorkflowView(openInNewTab);
-					break;
+const activeNode = computed(() => ndvStore.activeNode);
+const hideMenuBar = computed(() =>
+	Boolean(activeNode.value && activeNode.value.type !== STICKY_NODE_TYPE),
+);
+const workflow = computed(() => workflowsStore.workflow);
+const workflowId = computed(() =>
+	String(router.currentRoute.value.params.name || workflowsStore.workflowId),
+);
+const onWorkflowPage = computed(() => !!(route.meta.nodeView || route.meta.keepWorkflowAlive));
+const readOnly = computed(() => sourceControlStore.preferences.branchReadOnly);
 
-				case MAIN_HEADER_TABS.EXECUTIONS:
-					void this.navigateToExecutionsView(openInNewTab);
-					break;
+watch(route, (to, from) => {
+	syncTabsWithRoute(to, from);
+});
 
-				default:
-					break;
-			}
-		},
-
-		async navigateToWorkflowView(openInNewTab: boolean) {
-			let routeToNavigateTo: RouteLocationRaw;
-			if (!['', 'new', PLACEHOLDER_EMPTY_WORKFLOW_ID].includes(this.workflowToReturnTo)) {
-				routeToNavigateTo = {
-					name: VIEWS.WORKFLOW,
-					params: { name: this.workflowToReturnTo },
-				};
-			} else {
-				routeToNavigateTo = { name: VIEWS.NEW_WORKFLOW };
-			}
+onBeforeMount(() => {
+	pushConnection.initialize();
+});
 
-			if (openInNewTab) {
-				const { href } = this.$router.resolve(routeToNavigateTo);
-				window.open(href, '_blank');
-			} else if (this.$route.name !== routeToNavigateTo.name) {
-				if (this.$route.name === VIEWS.NEW_WORKFLOW) {
-					this.uiStore.stateIsDirty = this.dirtyState;
-				}
-				this.activeHeaderTab = MAIN_HEADER_TABS.WORKFLOW;
-				await this.$router.push(routeToNavigateTo);
-			}
-		},
-
-		async navigateToExecutionsView(openInNewTab: boolean) {
-			const routeWorkflowId =
-				this.currentWorkflow === PLACEHOLDER_EMPTY_WORKFLOW_ID ? 'new' : this.currentWorkflow;
-			const executionToReturnTo =
-				this.executionsStore.activeExecution?.id || this.executionToReturnTo;
-			const routeToNavigateTo: RouteLocationRaw = executionToReturnTo
-				? {
-						name: VIEWS.EXECUTION_PREVIEW,
-						params: { name: routeWorkflowId, executionId: executionToReturnTo },
-					}
-				: {
-						name: VIEWS.EXECUTION_HOME,
-						params: { name: routeWorkflowId },
-					};
-
-			if (openInNewTab) {
-				const { href } = this.$router.resolve(routeToNavigateTo);
-				window.open(href, '_blank');
-			} else if (this.$route.name !== routeToNavigateTo.name) {
-				this.dirtyState = this.uiStore.stateIsDirty;
-				this.workflowToReturnTo = this.currentWorkflow;
-				this.activeHeaderTab = MAIN_HEADER_TABS.EXECUTIONS;
-				await this.$router.push(routeToNavigateTo);
-			}
-		},
-	},
+onMounted(async () => {
+	dirtyState.value = uiStore.stateIsDirty;
+	syncTabsWithRoute(route);
 });
+
+function syncTabsWithRoute(to: RouteLocation, from?: RouteLocation): void {
+	if (
+		to.name === VIEWS.EXECUTION_HOME ||
+		to.name === VIEWS.WORKFLOW_EXECUTIONS ||
+		to.name === VIEWS.EXECUTION_PREVIEW
+	) {
+		activeHeaderTab.value = MAIN_HEADER_TABS.EXECUTIONS;
+	} else if (
+		to.name === VIEWS.WORKFLOW ||
+		to.name === VIEWS.NEW_WORKFLOW ||
+		to.name === VIEWS.EXECUTION_DEBUG
+	) {
+		activeHeaderTab.value = MAIN_HEADER_TABS.WORKFLOW;
+	}
+
+	if (to.params.name !== 'new' && typeof to.params.name === 'string') {
+		workflowToReturnTo.value = to.params.name;
+	}
+
+	if (
+		from?.name === VIEWS.EXECUTION_PREVIEW &&
+		to.params.name === from.params.name &&
+		typeof from.params.executionId === 'string'
+	) {
+		executionToReturnTo.value = from.params.executionId;
+	}
+}
+
+function onTabSelected(tab: MAIN_HEADER_TABS, event: MouseEvent) {
+	const openInNewTab = event.ctrlKey || event.metaKey;
+
+	switch (tab) {
+		case MAIN_HEADER_TABS.WORKFLOW:
+			void navigateToWorkflowView(openInNewTab);
+			break;
+
+		case MAIN_HEADER_TABS.EXECUTIONS:
+			void navigateToExecutionsView(openInNewTab);
+			break;
+
+		default:
+			break;
+	}
+}
+
+async function navigateToWorkflowView(openInNewTab: boolean) {
+	let routeToNavigateTo: RouteLocationRaw;
+	if (!['', 'new', PLACEHOLDER_EMPTY_WORKFLOW_ID].includes(workflowToReturnTo.value)) {
+		routeToNavigateTo = {
+			name: VIEWS.WORKFLOW,
+			params: { name: workflowToReturnTo.value },
+		};
+	} else {
+		routeToNavigateTo = { name: VIEWS.NEW_WORKFLOW };
+	}
+
+	if (openInNewTab) {
+		const { href } = router.resolve(routeToNavigateTo);
+		window.open(href, '_blank');
+	} else if (route.name !== routeToNavigateTo.name) {
+		if (route.name === VIEWS.NEW_WORKFLOW) {
+			uiStore.stateIsDirty = dirtyState.value;
+		}
+		activeHeaderTab.value = MAIN_HEADER_TABS.WORKFLOW;
+		await router.push(routeToNavigateTo);
+	}
+}
+
+async function navigateToExecutionsView(openInNewTab: boolean) {
+	const routeWorkflowId =
+		workflowId.value === PLACEHOLDER_EMPTY_WORKFLOW_ID ? 'new' : workflowId.value;
+	const executionToReturnToValue = executionsStore.activeExecution?.id || executionToReturnTo.value;
+	const routeToNavigateTo: RouteLocationRaw = executionToReturnToValue
+		? {
+				name: VIEWS.EXECUTION_PREVIEW,
+				params: { name: routeWorkflowId, executionId: executionToReturnToValue },
+			}
+		: {
+				name: VIEWS.EXECUTION_HOME,
+				params: { name: routeWorkflowId },
+			};
+
+	if (openInNewTab) {
+		const { href } = router.resolve(routeToNavigateTo);
+		window.open(href, '_blank');
+	} else if (route.name !== routeToNavigateTo.name) {
+		dirtyState.value = uiStore.stateIsDirty;
+		workflowToReturnTo.value = workflowId.value;
+		activeHeaderTab.value = MAIN_HEADER_TABS.EXECUTIONS;
+		await router.push(routeToNavigateTo);
+	}
+}
 </script>
 
+<template>
+	<div>
+		<div :class="{ 'main-header': true, expanded: !uiStore.sidebarMenuCollapsed }">
+			<div v-show="!hideMenuBar" class="top-menu">
+				<WorkflowDetails v-if="workflow?.name" :workflow="workflow" :read-only="readOnly" />
+				<TabBar
+					v-if="onWorkflowPage"
+					:items="tabBarItems"
+					:model-value="activeHeaderTab"
+					@update:model-value="onTabSelected"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss">
 .main-header {
 	background-color: var(--color-background-xlight);
diff --git a/packages/editor-ui/src/components/executions/workflow/WorkflowExecutionsList.vue b/packages/editor-ui/src/components/executions/workflow/WorkflowExecutionsList.vue
index eee9370a9aafb..316e1887c5c86 100644
--- a/packages/editor-ui/src/components/executions/workflow/WorkflowExecutionsList.vue
+++ b/packages/editor-ui/src/components/executions/workflow/WorkflowExecutionsList.vue
@@ -110,7 +110,7 @@ export default defineComponent({
 			default: () => ({}),
 		},
 		execution: {
-			type: Object as PropType<ExecutionSummary>,
+			type: Object as PropType<ExecutionSummary> | null,
 			default: null,
 		},
 		loadingMore: {
@@ -179,10 +179,10 @@ export default defineComponent({
 	},
 	methods: {
 		async onDeleteCurrentExecution(): Promise<void> {
-			this.$emit('execution:delete', this.execution.id);
+			this.$emit('execution:delete', this.execution?.id);
 		},
 		async onStopExecution(): Promise<void> {
-			this.$emit('execution:stop', this.execution.id);
+			this.$emit('execution:stop', this.execution?.id);
 		},
 		async onRetryExecution(payload: { execution: ExecutionSummary; command: string }) {
 			const loadWorkflow = payload.command === 'current-workflow';
diff --git a/packages/editor-ui/src/components/executions/workflow/WorkflowExecutionsPreview.vue b/packages/editor-ui/src/components/executions/workflow/WorkflowExecutionsPreview.vue
index add0b1cd6bd47..1f36aea7abb60 100644
--- a/packages/editor-ui/src/components/executions/workflow/WorkflowExecutionsPreview.vue
+++ b/packages/editor-ui/src/components/executions/workflow/WorkflowExecutionsPreview.vue
@@ -143,6 +143,7 @@
 </template>
 
 <script lang="ts">
+import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
 import { ElDropdown } from 'element-plus';
 import { useExecutionDebugging } from '@/composables/useExecutionDebugging';
@@ -165,7 +166,7 @@ export default defineComponent({
 	},
 	props: {
 		execution: {
-			type: Object as () => ExecutionSummary | null,
+			type: Object as PropType<ExecutionSummary>,
 			required: true,
 		},
 	},
diff --git a/packages/editor-ui/src/composables/useNodeHelpers.ts b/packages/editor-ui/src/composables/useNodeHelpers.ts
index 003fda4848967..cadcb7c3505ad 100644
--- a/packages/editor-ui/src/composables/useNodeHelpers.ts
+++ b/packages/editor-ui/src/composables/useNodeHelpers.ts
@@ -1,8 +1,14 @@
+import { ref, nextTick } from 'vue';
+import { useRoute } from 'vue-router';
+import { v4 as uuid } from 'uuid';
+import type { Connection, ConnectionDetachedParams } from '@jsplumb/core';
 import { useHistoryStore } from '@/stores/history.store';
 import {
 	CUSTOM_API_CALL_KEY,
+	FORM_TRIGGER_NODE_TYPE,
 	NODE_OUTPUT_DEFAULT_KEY,
 	PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
+	WEBHOOK_NODE_TYPE,
 } from '@/constants';
 
 import { NodeHelpers, NodeConnectionType, ExpressionEvaluatorProxy } from 'n8n-workflow';
@@ -26,6 +32,10 @@ import type {
 	INodeCredentialsDetails,
 	INodeParameters,
 	ITaskData,
+	IConnections,
+	INodeTypeNameVersion,
+	IConnection,
+	IPinData,
 } from 'n8n-workflow';
 
 import type {
@@ -43,12 +53,15 @@ import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useCredentialsStore } from '@/stores/credentials.store';
 import { get } from 'lodash-es';
 import { useI18n } from './useI18n';
-import { EnableNodeToggleCommand } from '@/models/history';
+import { AddNodeCommand, EnableNodeToggleCommand, RemoveConnectionCommand } from '@/models/history';
 import { useTelemetry } from './useTelemetry';
 import { hasPermission } from '@/utils/rbac/permissions';
 import type { N8nPlusEndpoint } from '@/plugins/jsplumb/N8nPlusEndpointType';
 import * as NodeViewUtils from '@/utils/nodeViewUtils';
 import { useCanvasStore } from '@/stores/canvas.store';
+import { getEndpointScope } from '@/utils/nodeViewUtils';
+import { useSourceControlStore } from '@/stores/sourceControl.store';
+import { getConnectionInfo } from '@/utils/canvasUtils';
 
 declare namespace HttpRequestNode {
 	namespace V2 {
@@ -67,6 +80,13 @@ export function useNodeHelpers() {
 	const workflowsStore = useWorkflowsStore();
 	const i18n = useI18n();
 	const canvasStore = useCanvasStore();
+	const sourceControlStore = useSourceControlStore();
+	const route = useRoute();
+
+	const isInsertingNodes = ref(false);
+	const credentialsUpdated = ref(false);
+	const isProductionExecutionPreview = ref(false);
+	const pullConnActiveNodeName = ref<string | null>(null);
 
 	function hasProxyAuth(node: INodeUi): boolean {
 		return Object.keys(node.parameters).includes('nodeCredentialType');
@@ -776,6 +796,430 @@ export function useNodeHelpers() {
 		});
 	}
 
+	function matchCredentials(node: INodeUi) {
+		if (!node.credentials) {
+			return;
+		}
+		Object.entries(node.credentials).forEach(
+			([nodeCredentialType, nodeCredentials]: [string, INodeCredentialsDetails]) => {
+				const credentialOptions = credentialsStore.getCredentialsByType(nodeCredentialType);
+
+				// Check if workflows applies old credentials style
+				if (typeof nodeCredentials === 'string') {
+					nodeCredentials = {
+						id: null,
+						name: nodeCredentials,
+					};
+					credentialsUpdated.value = true;
+				}
+
+				if (nodeCredentials.id) {
+					// Check whether the id is matching with a credential
+					const credentialsId = nodeCredentials.id.toString(); // due to a fixed bug in the migration UpdateWorkflowCredentials (just sqlite) we have to cast to string and check later if it has been a number
+					const credentialsForId = credentialOptions.find(
+						(optionData: ICredentialsResponse) => optionData.id === credentialsId,
+					);
+					if (credentialsForId) {
+						if (
+							credentialsForId.name !== nodeCredentials.name ||
+							typeof nodeCredentials.id === 'number'
+						) {
+							node.credentials![nodeCredentialType] = {
+								id: credentialsForId.id,
+								name: credentialsForId.name,
+							};
+							credentialsUpdated.value = true;
+						}
+						return;
+					}
+				}
+
+				// No match for id found or old credentials type used
+				node.credentials![nodeCredentialType] = nodeCredentials;
+
+				// check if only one option with the name would exist
+				const credentialsForName = credentialOptions.filter(
+					(optionData: ICredentialsResponse) => optionData.name === nodeCredentials.name,
+				);
+
+				// only one option exists for the name, take it
+				if (credentialsForName.length === 1) {
+					node.credentials![nodeCredentialType].id = credentialsForName[0].id;
+					credentialsUpdated.value = true;
+				}
+			},
+		);
+	}
+
+	function deleteJSPlumbConnection(connection: Connection, trackHistory = false) {
+		// Make sure to remove the overlay else after the second move
+		// it visibly stays behind free floating without a connection.
+		connection.removeOverlays();
+
+		pullConnActiveNodeName.value = null; // prevent new connections when connectionDetached is triggered
+		canvasStore.jsPlumbInstance?.deleteConnection(connection); // on delete, triggers connectionDetached event which applies mutation to store
+		if (trackHistory && connection.__meta) {
+			const connectionData: [IConnection, IConnection] = [
+				{
+					index: connection.__meta?.sourceOutputIndex,
+					node: connection.__meta.sourceNodeName,
+					type: NodeConnectionType.Main,
+				},
+				{
+					index: connection.__meta?.targetOutputIndex,
+					node: connection.__meta.targetNodeName,
+					type: NodeConnectionType.Main,
+				},
+			];
+			const removeCommand = new RemoveConnectionCommand(connectionData);
+			historyStore.pushCommandToUndo(removeCommand);
+		}
+	}
+
+	async function loadNodesProperties(nodeInfos: INodeTypeNameVersion[]): Promise<void> {
+		const allNodes: INodeTypeDescription[] = nodeTypesStore.allNodeTypes;
+
+		const nodesToBeFetched: INodeTypeNameVersion[] = [];
+		allNodes.forEach((node) => {
+			const nodeVersions = Array.isArray(node.version) ? node.version : [node.version];
+			if (
+				!!nodeInfos.find((n) => n.name === node.name && nodeVersions.includes(n.version)) &&
+				!node.hasOwnProperty('properties')
+			) {
+				nodesToBeFetched.push({
+					name: node.name,
+					version: Array.isArray(node.version) ? node.version.slice(-1)[0] : node.version,
+				});
+			}
+		});
+
+		if (nodesToBeFetched.length > 0) {
+			// Only call API if node information is actually missing
+			canvasStore.startLoading();
+			await nodeTypesStore.getNodesInformation(nodesToBeFetched);
+			canvasStore.stopLoading();
+		}
+	}
+
+	function addConnectionsTestData() {
+		canvasStore.jsPlumbInstance?.connections.forEach((connection) => {
+			NodeViewUtils.addConnectionTestData(
+				connection.source,
+				connection.target,
+				connection?.connector?.hasOwnProperty('canvas') ? connection?.connector.canvas : undefined,
+			);
+		});
+	}
+
+	async function processConnectionBatch(batchedConnectionData: Array<[IConnection, IConnection]>) {
+		const batchSize = 100;
+
+		for (let i = 0; i < batchedConnectionData.length; i += batchSize) {
+			const batch = batchedConnectionData.slice(i, i + batchSize);
+
+			batch.forEach((connectionData) => {
+				addConnection(connectionData);
+			});
+		}
+	}
+
+	function addPinDataConnections(pinData?: IPinData) {
+		if (!pinData) {
+			return;
+		}
+
+		Object.keys(pinData).forEach((nodeName) => {
+			const node = workflowsStore.getNodeByName(nodeName);
+			if (!node) {
+				return;
+			}
+
+			const nodeElement = document.getElementById(node.id);
+			if (!nodeElement) {
+				return;
+			}
+
+			const hasRun = workflowsStore.getWorkflowResultDataByNodeName(nodeName) !== null;
+			// In case we are showing a production execution preview we want
+			// to show pinned data connections as they wouldn't have been pinned
+			const classNames = isProductionExecutionPreview.value ? [] : ['pinned'];
+
+			if (hasRun) {
+				classNames.push('has-run');
+			}
+
+			const connections = canvasStore.jsPlumbInstance?.getConnections({
+				source: nodeElement,
+			});
+
+			const connectionsArray = Array.isArray(connections)
+				? connections
+				: Object.values(connections);
+
+			connectionsArray.forEach((connection) => {
+				NodeViewUtils.addConnectionOutputSuccess(connection, {
+					total: pinData[nodeName].length,
+					iterations: 0,
+					classNames,
+				});
+			});
+		});
+	}
+
+	function removePinDataConnections(pinData: IPinData) {
+		Object.keys(pinData).forEach((nodeName) => {
+			const node = workflowsStore.getNodeByName(nodeName);
+			if (!node) {
+				return;
+			}
+
+			const nodeElement = document.getElementById(node.id);
+			if (!nodeElement) {
+				return;
+			}
+
+			const connections = canvasStore.jsPlumbInstance?.getConnections({
+				source: nodeElement,
+			});
+
+			const connectionsArray = Array.isArray(connections)
+				? connections
+				: Object.values(connections);
+
+			canvasStore.jsPlumbInstance.setSuspendDrawing(true);
+			connectionsArray.forEach(NodeViewUtils.resetConnection);
+			canvasStore.jsPlumbInstance.setSuspendDrawing(false, true);
+		});
+	}
+
+	function getOutputEndpointUUID(
+		nodeName: string,
+		connectionType: NodeConnectionType,
+		index: number,
+	): string | null {
+		const node = workflowsStore.getNodeByName(nodeName);
+		if (!node) {
+			return null;
+		}
+
+		return NodeViewUtils.getOutputEndpointUUID(node.id, connectionType, index);
+	}
+	function getInputEndpointUUID(
+		nodeName: string,
+		connectionType: NodeConnectionType,
+		index: number,
+	) {
+		const node = workflowsStore.getNodeByName(nodeName);
+		if (!node) {
+			return null;
+		}
+
+		return NodeViewUtils.getInputEndpointUUID(node.id, connectionType, index);
+	}
+
+	function addConnection(connection: [IConnection, IConnection]) {
+		const outputUuid = getOutputEndpointUUID(
+			connection[0].node,
+			connection[0].type,
+			connection[0].index,
+		);
+		const inputUuid = getInputEndpointUUID(
+			connection[1].node,
+			connection[1].type,
+			connection[1].index,
+		);
+		if (!outputUuid || !inputUuid) {
+			return;
+		}
+
+		const uuids: [string, string] = [outputUuid, inputUuid];
+		// Create connections in DOM
+		canvasStore.jsPlumbInstance?.connect({
+			uuids,
+			detachable: !route?.meta?.readOnlyCanvas && !sourceControlStore.preferences.branchReadOnly,
+		});
+
+		setTimeout(() => {
+			addPinDataConnections(workflowsStore.pinnedWorkflowData);
+		});
+	}
+
+	function removeConnection(
+		connection: [IConnection, IConnection],
+		removeVisualConnection = false,
+	) {
+		if (removeVisualConnection) {
+			const sourceNode = workflowsStore.getNodeByName(connection[0].node);
+			const targetNode = workflowsStore.getNodeByName(connection[1].node);
+
+			if (!sourceNode || !targetNode) {
+				return;
+			}
+
+			const sourceElement = document.getElementById(sourceNode.id);
+			const targetElement = document.getElementById(targetNode.id);
+
+			if (sourceElement && targetElement) {
+				const connections = canvasStore.jsPlumbInstance?.getConnections({
+					source: sourceElement,
+					target: targetElement,
+				});
+
+				if (Array.isArray(connections)) {
+					connections.forEach((connectionInstance: Connection) => {
+						if (connectionInstance.__meta) {
+							// Only delete connections from specific indexes (if it can be determined by meta)
+							if (
+								connectionInstance.__meta.sourceOutputIndex === connection[0].index &&
+								connectionInstance.__meta.targetOutputIndex === connection[1].index
+							) {
+								deleteJSPlumbConnection(connectionInstance);
+							}
+						} else {
+							deleteJSPlumbConnection(connectionInstance);
+						}
+					});
+				}
+			}
+		}
+
+		workflowsStore.removeConnection({ connection });
+	}
+
+	function removeConnectionByConnectionInfo(
+		info: ConnectionDetachedParams,
+		removeVisualConnection = false,
+		trackHistory = false,
+	) {
+		const connectionInfo: [IConnection, IConnection] | null = getConnectionInfo(info);
+
+		if (connectionInfo) {
+			if (removeVisualConnection) {
+				deleteJSPlumbConnection(info.connection, trackHistory);
+			} else if (trackHistory) {
+				historyStore.pushCommandToUndo(new RemoveConnectionCommand(connectionInfo));
+			}
+			workflowsStore.removeConnection({ connection: connectionInfo });
+		}
+	}
+
+	async function addConnections(connections: IConnections) {
+		const batchedConnectionData: Array<[IConnection, IConnection]> = [];
+
+		for (const sourceNode in connections) {
+			for (const type in connections[sourceNode]) {
+				connections[sourceNode][type].forEach((outwardConnections, sourceIndex) => {
+					if (outwardConnections) {
+						outwardConnections.forEach((targetData) => {
+							batchedConnectionData.push([
+								{
+									node: sourceNode,
+									type: getEndpointScope(type) ?? NodeConnectionType.Main,
+									index: sourceIndex,
+								},
+								{ node: targetData.node, type: targetData.type, index: targetData.index },
+							]);
+						});
+					}
+				});
+			}
+		}
+
+		// Process the connections in batches
+		await processConnectionBatch(batchedConnectionData);
+		setTimeout(addConnectionsTestData, 0);
+	}
+
+	async function addNodes(nodes: INodeUi[], connections?: IConnections, trackHistory = false) {
+		if (!nodes?.length) {
+			return;
+		}
+		isInsertingNodes.value = true;
+		// Before proceeding we must check if all nodes contain the `properties` attribute.
+		// Nodes are loaded without this information so we must make sure that all nodes
+		// being added have this information.
+		await loadNodesProperties(
+			nodes.map((node) => ({ name: node.type, version: node.typeVersion })),
+		);
+
+		// Add the node to the node-list
+		let nodeType: INodeTypeDescription | null;
+		nodes.forEach((node) => {
+			const newNode: INodeUi = {
+				...node,
+			};
+
+			if (!newNode.id) {
+				newNode.id = uuid();
+			}
+
+			nodeType = nodeTypesStore.getNodeType(newNode.type, newNode.typeVersion);
+
+			// Make sure that some properties always exist
+			if (!newNode.hasOwnProperty('disabled')) {
+				newNode.disabled = false;
+			}
+
+			if (!newNode.hasOwnProperty('parameters')) {
+				newNode.parameters = {};
+			}
+
+			// Load the default parameter values because only values which differ
+			// from the defaults get saved
+			if (nodeType !== null) {
+				let nodeParameters = null;
+				try {
+					nodeParameters = NodeHelpers.getNodeParameters(
+						nodeType.properties,
+						newNode.parameters,
+						true,
+						false,
+						node,
+					);
+				} catch (e) {
+					console.error(
+						i18n.baseText('nodeView.thereWasAProblemLoadingTheNodeParametersOfNode') +
+							`: "${newNode.name}"`,
+					);
+					console.error(e);
+				}
+				newNode.parameters = nodeParameters ?? {};
+
+				// if it's a webhook and the path is empty set the UUID as the default path
+				if (
+					[WEBHOOK_NODE_TYPE, FORM_TRIGGER_NODE_TYPE].includes(newNode.type) &&
+					newNode.parameters.path === ''
+				) {
+					newNode.parameters.path = newNode.webhookId as string;
+				}
+			}
+
+			// check and match credentials, apply new format if old is used
+			matchCredentials(newNode);
+			workflowsStore.addNode(newNode);
+			if (trackHistory) {
+				historyStore.pushCommandToUndo(new AddNodeCommand(newNode));
+			}
+		});
+
+		// Wait for the nodes to be rendered
+		await nextTick();
+
+		canvasStore.jsPlumbInstance?.setSuspendDrawing(true);
+
+		if (connections) {
+			await addConnections(connections);
+		}
+		// Add the node issues at the end as the node-connections are required
+		refreshNodeIssues();
+		updateNodesInputIssues();
+		/////////////////////////////this.resetEndpointsErrors();
+		isInsertingNodes.value = false;
+
+		// Now it can draw again
+		canvasStore.jsPlumbInstance?.setSuspendDrawing(false, true);
+	}
+
 	return {
 		hasProxyAuth,
 		isCustomApiCallSelected,
@@ -795,5 +1239,17 @@ export function useNodeHelpers() {
 		updateNodesCredentialsIssues,
 		getNodeInputData,
 		setSuccessOutput,
+		isInsertingNodes,
+		credentialsUpdated,
+		isProductionExecutionPreview,
+		pullConnActiveNodeName,
+		deleteJSPlumbConnection,
+		loadNodesProperties,
+		addNodes,
+		addConnection,
+		removeConnection,
+		removeConnectionByConnectionInfo,
+		addPinDataConnections,
+		removePinDataConnections,
 	};
 }
diff --git a/packages/editor-ui/src/composables/useWorkflowHelpers.ts b/packages/editor-ui/src/composables/useWorkflowHelpers.ts
index 2f48484929e54..7338578a90c36 100644
--- a/packages/editor-ui/src/composables/useWorkflowHelpers.ts
+++ b/packages/editor-ui/src/composables/useWorkflowHelpers.ts
@@ -68,6 +68,7 @@ import { useI18n } from '@/composables/useI18n';
 import type { useRouter } from 'vue-router';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { useProjectsStore } from '@/stores/projects.store';
+import { useTagsStore } from '@/stores/tags.store';
 
 export function resolveParameter<T = IDataObject>(
 	parameter: NodeParameterValue | INodeParameters | NodeParameterValue[] | INodeParameters[],
@@ -483,6 +484,7 @@ export function useWorkflowHelpers(options: { router: ReturnType<typeof useRoute
 	const uiStore = useUIStore();
 	const nodeHelpers = useNodeHelpers();
 	const projectsStore = useProjectsStore();
+	const tagsStore = useTagsStore();
 
 	const toast = useToast();
 	const message = useMessage();
@@ -1189,6 +1191,25 @@ export function useWorkflowHelpers(options: { router: ReturnType<typeof useRoute
 		}
 	}
 
+	async function initState(workflowData: IWorkflowDb): Promise<void> {
+		workflowsStore.addWorkflow(workflowData);
+		workflowsStore.setActive(workflowData.active || false);
+		workflowsStore.setWorkflowId(workflowData.id);
+		workflowsStore.setWorkflowName({
+			newName: workflowData.name,
+			setStateDirty: uiStore.stateIsDirty,
+		});
+		workflowsStore.setWorkflowSettings(workflowData.settings ?? {});
+		workflowsStore.setWorkflowPinData(workflowData.pinData ?? {});
+		workflowsStore.setWorkflowVersionId(workflowData.versionId);
+		workflowsStore.setWorkflowMetadata(workflowData.meta);
+
+		const tags = (workflowData.tags ?? []) as ITag[];
+		const tagIds = tags.map((tag) => tag.id);
+		workflowsStore.setWorkflowTagIds(tagIds || []);
+		tagsStore.upsertTags(tags);
+	}
+
 	return {
 		resolveParameter,
 		resolveRequiredParameters,
@@ -1214,5 +1235,6 @@ export function useWorkflowHelpers(options: { router: ReturnType<typeof useRoute
 		dataHasChanged,
 		removeForeignCredentialsFromWorkflow,
 		getWorkflowProjectRole,
+		initState,
 	};
 }
diff --git a/packages/editor-ui/src/stores/workflows.store.ts b/packages/editor-ui/src/stores/workflows.store.ts
index 92b59ff2865f8..57aef660e9400 100644
--- a/packages/editor-ui/src/stores/workflows.store.ts
+++ b/packages/editor-ui/src/stores/workflows.store.ts
@@ -73,8 +73,6 @@ import { i18n } from '@/plugins/i18n';
 
 import { computed, ref } from 'vue';
 import { useProjectsStore } from '@/stores/projects.store';
-import { useSettingsStore } from './settings.store';
-import { useUsersStore } from './users.store';
 
 const defaults: Omit<IWorkflowDb, 'id'> & { settings: NonNullable<IWorkflowDb['settings']> } = {
 	name: '',
@@ -101,6 +99,8 @@ let cachedWorkflowKey: string | null = '';
 let cachedWorkflow: Workflow | null = null;
 
 export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
+	const uiStore = useUIStore();
+
 	const workflow = ref<IWorkflowDb>(createEmptyWorkflow());
 	const usedCredentials = ref<Record<string, IUsedCredential>>({});
 
@@ -436,8 +436,6 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 	}
 
 	function resetWorkflow() {
-		const usersStore = useUsersStore();
-		const settingsStore = useSettingsStore();
 		workflow.value = createEmptyWorkflow();
 	}
 
@@ -481,7 +479,6 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 
 	function setWorkflowName(data: { newName: string; setStateDirty: boolean }) {
 		if (data.setStateDirty) {
-			const uiStore = useUIStore();
 			uiStore.stateIsDirty = true;
 		}
 		workflow.value.name = data.newName;
@@ -560,7 +557,6 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 	}
 
 	function setWorkflowActive(targetWorkflowId: string) {
-		const uiStore = useUIStore();
 		uiStore.stateIsDirty = false;
 		const index = activeWorkflows.value.indexOf(targetWorkflowId);
 		if (index === -1) {
@@ -648,10 +644,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 	}
 
 	function setWorkflowTagIds(tags: string[]) {
-		workflow.value = {
-			...workflow.value,
-			tags,
-		};
+		workflow.value.tags = tags;
 	}
 
 	function addWorkflowTagIds(tags: string[]) {
@@ -715,7 +708,6 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 			},
 		};
 
-		const uiStore = useUIStore();
 		uiStore.stateIsDirty = true;
 
 		dataPinningEventBus.emit('pin-data', { [payload.node.name]: storedPinData });
@@ -732,7 +724,6 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 			pinData,
 		};
 
-		const uiStore = useUIStore();
 		uiStore.stateIsDirty = true;
 
 		dataPinningEventBus.emit('unpin-data', { [payload.node.name]: undefined });
@@ -829,7 +820,6 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 			return;
 		}
 
-		const uiStore = useUIStore();
 		uiStore.stateIsDirty = true;
 
 		const connections =
@@ -847,8 +837,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 	}
 
 	function removeAllConnections(data: { setStateDirty: boolean }): void {
-		if (data && data.setStateDirty) {
-			const uiStore = useUIStore();
+		if (data?.setStateDirty) {
 			uiStore.stateIsDirty = true;
 		}
 
@@ -859,7 +848,6 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 		node: INodeUi,
 		{ preserveInputConnections = false, preserveOutputConnections = false } = {},
 	): void {
-		const uiStore = useUIStore();
 		uiStore.stateIsDirty = true;
 
 		// Remove all source connections
@@ -904,7 +892,6 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 	}
 
 	function renameNodeSelectedAndExecution(nameData: { old: string; new: string }): void {
-		const uiStore = useUIStore();
 		uiStore.stateIsDirty = true;
 
 		// If node has any WorkflowResultData rename also that one that the data
@@ -1024,7 +1011,6 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 	}
 
 	function removeNode(node: INodeUi): void {
-		const uiStore = useUIStore();
 		const { [node.name]: removedNodeMetadata, ...remainingNodeMetadata } = nodeMetadata.value;
 		nodeMetadata.value = remainingNodeMetadata;
 
@@ -1051,7 +1037,6 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 
 	function removeAllNodes(data: { setStateDirty: boolean; removePinData: boolean }): void {
 		if (data.setStateDirty) {
-			const uiStore = useUIStore();
 			uiStore.stateIsDirty = true;
 		}
 
@@ -1074,7 +1059,6 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 
 		if (nodeIndex !== -1) {
 			for (const key of Object.keys(updateInformation.properties)) {
-				const uiStore = useUIStore();
 				uiStore.stateIsDirty = true;
 
 				updateNodeAtIndex(nodeIndex, {
@@ -1096,7 +1080,6 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 			);
 		}
 
-		const uiStore = useUIStore();
 		uiStore.stateIsDirty = true;
 
 		updateNodeAtIndex(nodeIndex, {
@@ -1118,7 +1101,6 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 
 		const node = workflow.value.nodes[nodeIndex];
 
-		const uiStore = useUIStore();
 		uiStore.stateIsDirty = true;
 		const newParameters =
 			!!append && isObject(updateInformation.value)
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 88d61ea461a29..d4ac4dbfc6239 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -235,8 +235,6 @@ import {
 	START_NODE_TYPE,
 	STICKY_NODE_TYPE,
 	VIEWS,
-	WEBHOOK_NODE_TYPE,
-	FORM_TRIGGER_NODE_TYPE,
 	TRIGGER_NODE_CREATOR_VIEW,
 	EnterpriseEditionFeature,
 	REGULAR_NODE_CREATOR_VIEW,
@@ -279,11 +277,8 @@ import type {
 	ExecutionSummary,
 	INode,
 	INodeConnections,
-	INodeCredentialsDetails,
 	INodeInputConfiguration,
 	INodeTypeDescription,
-	INodeTypeNameVersion,
-	IPinData,
 	ITaskData,
 	ITelemetryTrackProperties,
 	IWorkflowBase,
@@ -302,7 +297,6 @@ import {
 } from 'n8n-workflow';
 import type {
 	NewConnectionInfo,
-	ICredentialsResponse,
 	IExecutionResponse,
 	IWorkflowDb,
 	IWorkflowData,
@@ -350,7 +344,6 @@ import { getAccountAge } from '@/utils/userUtils';
 import { getConnectionInfo, getNodeViewTab } from '@/utils/canvasUtils';
 import {
 	AddConnectionCommand,
-	AddNodeCommand,
 	MoveNodeCommand,
 	RemoveConnectionCommand,
 	RemoveNodeCommand,
@@ -550,8 +543,6 @@ export default defineComponent({
 			moveCanvasKeyPressed: false,
 			stopExecutionInProgress: false,
 			blankRedirect: false,
-			credentialsUpdated: false,
-			pullConnActiveNodeName: null as string | null,
 			pullConnActive: false,
 			dropPrevented: false,
 			connectionDragScope: {
@@ -564,8 +555,6 @@ export default defineComponent({
 			showTriggerMissingTooltip: false,
 			workflowData: null as INewWorkflowData | null,
 			activeConnection: null as null | Connection,
-			isInsertingNodes: false,
-			isProductionExecutionPreview: false,
 			enterTimer: undefined as undefined | ReturnType<typeof setTimeout>,
 			exitTimer: undefined as undefined | ReturnType<typeof setTimeout>,
 			readOnlyNotification: null as null | NotificationHandle,
@@ -779,6 +768,9 @@ export default defineComponent({
 			const isCloudDeployment = this.settingsStore.isCloudDeployment;
 			return isCloudDeployment && experimentEnabled && !userHasSeenAIAssistantExperiment;
 		},
+		isProductionExecutionPreview(): boolean {
+			return this.nodeHelpers.isProductionExecutionPreview.value;
+		},
 	},
 	watch: {
 		// Listen to route changes and load the workflow accordingly
@@ -916,7 +908,7 @@ export default defineComponent({
 
 			setTimeout(() => {
 				void this.usersStore.showPersonalizationSurvey();
-				this.addPinDataConnections(this.workflowsStore.pinnedWorkflowData);
+				this.nodeHelpers.addPinDataConnections(this.workflowsStore.pinnedWorkflowData);
 			}, 0);
 		});
 
@@ -1007,8 +999,8 @@ export default defineComponent({
 		historyBus.on('revertRenameNode', this.onRevertNameChange);
 		historyBus.on('enableNodeToggle', this.onRevertEnableToggle);
 
-		dataPinningEventBus.on('pin-data', this.addPinDataConnections);
-		dataPinningEventBus.on('unpin-data', this.removePinDataConnections);
+		dataPinningEventBus.on('pin-data', this.nodeHelpers.addPinDataConnections);
+		dataPinningEventBus.on('unpin-data', this.nodeHelpers.removePinDataConnections);
 		nodeViewEventBus.on('saveWorkflow', this.saveCurrentWorkflowExternal);
 
 		this.canvasStore.isDemo = this.isDemo;
@@ -1033,8 +1025,8 @@ export default defineComponent({
 		historyBus.off('revertRenameNode', this.onRevertNameChange);
 		historyBus.off('enableNodeToggle', this.onRevertEnableToggle);
 
-		dataPinningEventBus.off('pin-data', this.addPinDataConnections);
-		dataPinningEventBus.off('unpin-data', this.removePinDataConnections);
+		dataPinningEventBus.off('pin-data', this.nodeHelpers.addPinDataConnections);
+		dataPinningEventBus.off('unpin-data', this.nodeHelpers.removePinDataConnections);
 		nodeViewEventBus.off('saveWorkflow', this.saveCurrentWorkflowExternal);
 	},
 	beforeMount() {
@@ -1334,7 +1326,7 @@ export default defineComponent({
 				this.workflowsStore.setUsedCredentials(data.workflowData.usedCredentials);
 			}
 
-			await this.addNodes(
+			await this.nodeHelpers.addNodes(
 				deepCopy(data.workflowData.nodes),
 				deepCopy(data.workflowData.connections),
 			);
@@ -1405,7 +1397,7 @@ export default defineComponent({
 			this.resetWorkspace();
 			data.workflow.nodes = NodeViewUtils.getFixedNodesList(data.workflow.nodes);
 
-			await this.addNodes(data.workflow.nodes as INodeUi[], data.workflow.connections);
+			await this.nodeHelpers.addNodes(data.workflow.nodes as INodeUi[], data.workflow.connections);
 
 			if (data.workflow.pinData) {
 				this.workflowsStore.setWorkflowPinData(data.workflow.pinData);
@@ -1457,7 +1449,7 @@ export default defineComponent({
 			const convertedNodes = data.workflow.nodes.map(
 				this.workflowsStore.convertTemplateNodeToNodeUi,
 			);
-			await this.addNodes(convertedNodes, data.workflow.connections);
+			await this.nodeHelpers.addNodes(convertedNodes, data.workflow.connections);
 			this.workflowData =
 				(await this.workflowsStore.getNewWorkflowData(
 					data.name,
@@ -1482,14 +1474,7 @@ export default defineComponent({
 
 			this.resetWorkspace();
 
-			this.workflowsStore.addWorkflow(workflow);
-			this.workflowsStore.setActive(workflow.active || false);
-			this.workflowsStore.setWorkflowId(workflow.id);
-			this.workflowsStore.setWorkflowName({ newName: workflow.name, setStateDirty: false });
-			this.workflowsStore.setWorkflowSettings(workflow.settings ?? {});
-			this.workflowsStore.setWorkflowPinData(workflow.pinData ?? {});
-			this.workflowsStore.setWorkflowVersionId(workflow.versionId);
-			this.workflowsStore.setWorkflowMetadata(workflow.meta);
+			await this.workflowHelpers.initState(workflow);
 
 			if (workflow.sharedWithProjects) {
 				this.workflowsEEStore.setWorkflowSharedWith({
@@ -1502,14 +1487,9 @@ export default defineComponent({
 				this.workflowsStore.setUsedCredentials(workflow.usedCredentials);
 			}
 
-			const tags = (workflow.tags ?? []) as ITag[];
-			const tagIds = tags.map((tag) => tag.id);
-			this.workflowsStore.setWorkflowTagIds(tagIds || []);
-			this.tagsStore.upsertTags(tags);
-
-			await this.addNodes(workflow.nodes, workflow.connections);
+			await this.nodeHelpers.addNodes(workflow.nodes, workflow.connections);
 
-			if (!this.credentialsUpdated) {
+			if (!this.nodeHelpers.credentialsUpdated.value) {
 				this.uiStore.stateIsDirty = false;
 			}
 			this.canvasStore.zoomToFit();
@@ -2340,7 +2320,7 @@ export default defineComponent({
 
 					this.workflowsStore.addWorkflowTagIds(tagIds);
 					setTimeout(() => {
-						this.addPinDataConnections(this.workflowsStore.pinnedWorkflowData);
+						this.nodeHelpers.addPinDataConnections(this.workflowsStore.pinnedWorkflowData);
 					});
 				}
 			} catch (error) {
@@ -2461,7 +2441,7 @@ export default defineComponent({
 					[defaultCredential.type]: selected,
 				};
 
-				await this.loadNodesProperties(
+				await this.nodeHelpers.loadNodesProperties(
 					[newNodeData].map((node) => ({ name: node.type, version: node.typeVersion })),
 				);
 				const nodeType = this.nodeTypesStore.getNodeType(newNodeData.type, newNodeData.typeVersion);
@@ -2703,7 +2683,7 @@ export default defineComponent({
 				newNodeData.webhookId = uuid();
 			}
 
-			await this.addNodes([newNodeData], undefined, trackHistory);
+			await this.nodeHelpers.addNodes([newNodeData], undefined, trackHistory);
 			this.workflowsStore.setNodePristine(newNodeData.name, true);
 
 			this.uiStore.stateIsDirty = true;
@@ -2811,7 +2791,7 @@ export default defineComponent({
 				},
 			] as [IConnection, IConnection];
 
-			this.__addConnection(connectionData);
+			this.nodeHelpers.addConnection(connectionData);
 		},
 		async addNode(
 			nodeTypeName: string,
@@ -2879,7 +2859,7 @@ export default defineComponent({
 				await this.$nextTick();
 
 				if (lastSelectedConnection?.__meta) {
-					this.__deleteJSPlumbConnection(lastSelectedConnection, trackHistory);
+					this.nodeHelpers.deleteJSPlumbConnection(lastSelectedConnection, trackHistory);
 
 					const targetNodeName = lastSelectedConnection.__meta.targetNodeName;
 					const targetOutputIndex = lastSelectedConnection.__meta.targetOutputIndex;
@@ -2980,7 +2960,7 @@ export default defineComponent({
 					this.dropPrevented = false;
 					return;
 				}
-				if (this.pullConnActiveNodeName) {
+				if (this.nodeHelpers.pullConnActiveNodeName.value) {
 					const sourceNode = this.workflowsStore.getNodeById(connection.parameters.nodeId);
 					const connectionType = connection.parameters.type ?? NodeConnectionType.Main;
 					const overrideTargetEndpoint = connection?.connector
@@ -2988,8 +2968,12 @@ export default defineComponent({
 
 					if (sourceNode) {
 						const isTarget = connection.parameters.connection === 'target';
-						const sourceNodeName = isTarget ? this.pullConnActiveNodeName : sourceNode.name;
-						const targetNodeName = isTarget ? sourceNode.name : this.pullConnActiveNodeName;
+						const sourceNodeName = isTarget
+							? this.nodeHelpers.pullConnActiveNodeName.value
+							: sourceNode.name;
+						const targetNodeName = isTarget
+							? sourceNode.name
+							: this.nodeHelpers.pullConnActiveNodeName.value;
 						const outputIndex = connection.parameters.index;
 						NodeViewUtils.resetConnectionAfterPull(connection);
 						await this.$nextTick();
@@ -3001,7 +2985,7 @@ export default defineComponent({
 							overrideTargetEndpoint?.parameters?.index ?? 0,
 							connectionType,
 						);
-						this.pullConnActiveNodeName = null;
+						this.nodeHelpers.pullConnActiveNodeName.value = null;
 						this.dropPrevented = false;
 					}
 					return;
@@ -3149,7 +3133,7 @@ export default defineComponent({
 					)
 				) {
 					this.dropPrevented = true;
-					this.pullConnActiveNodeName = null;
+					this.nodeHelpers.pullConnActiveNodeName.value = null;
 					return false;
 				}
 
@@ -3213,7 +3197,7 @@ export default defineComponent({
 						info.connection,
 						() => {
 							this.activeConnection = null;
-							this.__deleteJSPlumbConnection(info.connection);
+							this.nodeHelpers.deleteJSPlumbConnection(info.connection);
 						},
 						() => {
 							this.insertNodeAfterSelected({
@@ -3245,7 +3229,7 @@ export default defineComponent({
 					}
 					// When we add multiple nodes, this event could be fired hundreds of times for large workflows.
 					// And because the updateNodesInputIssues() method is quite expensive, we only call it if not in insert mode
-					if (!this.isInsertingNodes) {
+					if (!this.nodeHelpers.isInsertingNodes.value) {
 						this.nodeHelpers.updateNodesInputIssues();
 						this.resetEndpointsErrors();
 						setTimeout(() => {
@@ -3263,17 +3247,6 @@ export default defineComponent({
 				console.error(e);
 			}
 		},
-		addConectionsTestData() {
-			this.instance.connections.forEach((connection) => {
-				NodeViewUtils.addConnectionTestData(
-					connection.source,
-					connection.target,
-					connection?.connector?.hasOwnProperty('canvas')
-						? connection?.connector.canvas
-						: undefined,
-				);
-			});
-		},
 		onDragMove() {
 			const totalNodes = this.nodes.length;
 			void this.callDebounced(this.updateConnectionsOverlays, {
@@ -3390,7 +3363,7 @@ export default defineComponent({
 					},
 				] as [IConnection, IConnection];
 
-				this.__removeConnection(connectionInfo, false);
+				this.nodeHelpers.removeConnection(connectionInfo, false);
 			} catch (e) {
 				console.error(e);
 			}
@@ -3420,9 +3393,9 @@ export default defineComponent({
 				NodeViewUtils.showOutputNameLabel(info.sourceEndpoint, info.connection);
 
 				info.connection.removeOverlays();
-				this.__removeConnectionByConnectionInfo(info, false, false);
+				this.nodeHelpers.removeConnectionByConnectionInfo(info, false, false);
 
-				if (this.pullConnActiveNodeName) {
+				if (this.nodeHelpers.pullConnActiveNodeName.value) {
 					// establish new connection when dragging connection from one node to another
 					this.historyStore.startRecordingUndo();
 					const sourceNode = this.workflowsStore.getNodeById(info.connection.parameters.nodeId);
@@ -3442,11 +3415,11 @@ export default defineComponent({
 					this.connectTwoNodes(
 						sourceNodeName,
 						outputIndex,
-						this.pullConnActiveNodeName,
+						this.nodeHelpers.pullConnActiveNodeName.value,
 						overrideTargetEndpoint?.parameters?.index ?? 0,
 						NodeConnectionType.Main,
 					);
-					this.pullConnActiveNodeName = null;
+					this.nodeHelpers.pullConnActiveNodeName.value = null;
 					await this.$nextTick();
 					this.historyStore.stopRecordingUndo();
 				} else if (
@@ -3470,7 +3443,7 @@ export default defineComponent({
 			// manually
 			connection.overlays['midpoint-arrow']?.setVisible(false);
 			try {
-				this.pullConnActiveNodeName = null;
+				this.nodeHelpers.pullConnActiveNodeName.value = null;
 				this.pullConnActive = true;
 				this.canvasStore.newNodeInsertPosition = null;
 				NodeViewUtils.hideConnectionActions(connection);
@@ -3555,12 +3528,12 @@ export default defineComponent({
 						const endpoint = intersectingEndpoint.jtk.endpoint as Endpoint;
 						const node = this.workflowsStore.getNodeById(endpoint.parameters.nodeId);
 
-						this.pullConnActiveNodeName = node?.name ?? null;
+						this.nodeHelpers.pullConnActiveNodeName.value = node?.name ?? null;
 
 						NodeViewUtils.showDropConnectionState(connection, endpoint);
 					} else {
 						NodeViewUtils.showPullConnectionState(connection);
-						this.pullConnActiveNodeName = null;
+						this.nodeHelpers.pullConnActiveNodeName.value = null;
 					}
 				};
 
@@ -3762,7 +3735,7 @@ export default defineComponent({
 			) {
 				const manualTriggerNode = this.canvasStore.getAutoAddManualTriggerNode();
 				if (manualTriggerNode) {
-					await this.addNodes([manualTriggerNode]);
+					await this.nodeHelpers.addNodes([manualTriggerNode]);
 					this.uiStore.lastSelectedNode = manualTriggerNode.name;
 				}
 			}
@@ -3857,130 +3830,6 @@ export default defineComponent({
 			// waiting in the store and display them
 			this.showNotificationForViews([VIEWS.WORKFLOW, VIEWS.NEW_WORKFLOW]);
 		},
-		getOutputEndpointUUID(
-			nodeName: string,
-			connectionType: NodeConnectionType,
-			index: number,
-		): string | null {
-			const node = this.workflowsStore.getNodeByName(nodeName);
-			if (!node) {
-				return null;
-			}
-
-			return NodeViewUtils.getOutputEndpointUUID(node.id, connectionType, index);
-		},
-		getInputEndpointUUID(nodeName: string, connectionType: NodeConnectionType, index: number) {
-			const node = this.workflowsStore.getNodeByName(nodeName);
-			if (!node) {
-				return null;
-			}
-
-			return NodeViewUtils.getInputEndpointUUID(node.id, connectionType, index);
-		},
-		__addConnection(connection: [IConnection, IConnection]) {
-			const outputUuid = this.getOutputEndpointUUID(
-				connection[0].node,
-				connection[0].type,
-				connection[0].index,
-			);
-			const inputUuid = this.getInputEndpointUUID(
-				connection[1].node,
-				connection[1].type,
-				connection[1].index,
-			);
-			if (!outputUuid || !inputUuid) {
-				return;
-			}
-
-			const uuid: [string, string] = [outputUuid, inputUuid];
-			// Create connections in DOM
-			this.instance?.connect({
-				uuids: uuid,
-				detachable: !this.isReadOnlyRoute && !this.readOnlyEnv,
-			});
-
-			setTimeout(() => {
-				this.addPinDataConnections(this.workflowsStore.pinnedWorkflowData);
-			});
-		},
-		__removeConnection(connection: [IConnection, IConnection], removeVisualConnection = false) {
-			if (removeVisualConnection) {
-				const sourceNode = this.workflowsStore.getNodeByName(connection[0].node);
-				const targetNode = this.workflowsStore.getNodeByName(connection[1].node);
-
-				if (!sourceNode || !targetNode) {
-					return;
-				}
-
-				const sourceElement = document.getElementById(sourceNode.id);
-				const targetElement = document.getElementById(targetNode.id);
-
-				if (sourceElement && targetElement) {
-					const connections = this.instance?.getConnections({
-						source: sourceElement,
-						target: targetElement,
-					});
-
-					if (Array.isArray(connections)) {
-						connections.forEach((connectionInstance: Connection) => {
-							if (connectionInstance.__meta) {
-								// Only delete connections from specific indexes (if it can be determined by meta)
-								if (
-									connectionInstance.__meta.sourceOutputIndex === connection[0].index &&
-									connectionInstance.__meta.targetOutputIndex === connection[1].index
-								) {
-									this.__deleteJSPlumbConnection(connectionInstance);
-								}
-							} else {
-								this.__deleteJSPlumbConnection(connectionInstance);
-							}
-						});
-					}
-				}
-			}
-
-			this.workflowsStore.removeConnection({ connection });
-		},
-		__deleteJSPlumbConnection(connection: Connection, trackHistory = false) {
-			// Make sure to remove the overlay else after the second move
-			// it visibly stays behind free floating without a connection.
-			connection.removeOverlays();
-
-			this.pullConnActiveNodeName = null; // prevent new connections when connectionDetached is triggered
-			this.instance?.deleteConnection(connection); // on delete, triggers connectionDetached event which applies mutation to store
-			if (trackHistory && connection.__meta) {
-				const connectionData: [IConnection, IConnection] = [
-					{
-						index: connection.__meta?.sourceOutputIndex,
-						node: connection.__meta.sourceNodeName,
-						type: NodeConnectionType.Main,
-					},
-					{
-						index: connection.__meta?.targetOutputIndex,
-						node: connection.__meta.targetNodeName,
-						type: NodeConnectionType.Main,
-					},
-				];
-				const removeCommand = new RemoveConnectionCommand(connectionData);
-				this.historyStore.pushCommandToUndo(removeCommand);
-			}
-		},
-		__removeConnectionByConnectionInfo(
-			info: ConnectionDetachedParams,
-			removeVisualConnection = false,
-			trackHistory = false,
-		) {
-			const connectionInfo: [IConnection, IConnection] | null = getConnectionInfo(info);
-
-			if (connectionInfo) {
-				if (removeVisualConnection) {
-					this.__deleteJSPlumbConnection(info.connection, trackHistory);
-				} else if (trackHistory) {
-					this.historyStore.pushCommandToUndo(new RemoveConnectionCommand(connectionInfo));
-				}
-				this.workflowsStore.removeConnection({ connection: connectionInfo });
-			}
-		},
 		async duplicateNodes(nodes: INode[]): Promise<void> {
 			if (!this.editAllowedCheck()) {
 				return;
@@ -4310,7 +4159,11 @@ export default defineComponent({
 			await this.$nextTick();
 
 			// Add the new updated nodes
-			await this.addNodes(Object.values(workflow.nodes), workflow.connectionsBySourceNode, false);
+			await this.nodeHelpers.addNodes(
+				Object.values(workflow.nodes),
+				workflow.connectionsBySourceNode,
+				false,
+			);
 
 			// Make sure that the node is selected again
 			this.deselectAllNodes();
@@ -4337,188 +4190,6 @@ export default defineComponent({
 				this.instance.deleteEveryConnection({ fireEvent: true });
 			}
 		},
-		matchCredentials(node: INodeUi) {
-			if (!node.credentials) {
-				return;
-			}
-			Object.entries(node.credentials).forEach(
-				([nodeCredentialType, nodeCredentials]: [string, INodeCredentialsDetails]) => {
-					const credentialOptions = this.credentialsStore.getCredentialsByType(nodeCredentialType);
-
-					// Check if workflows applies old credentials style
-					if (typeof nodeCredentials === 'string') {
-						nodeCredentials = {
-							id: null,
-							name: nodeCredentials,
-						};
-						this.credentialsUpdated = true;
-					}
-
-					if (nodeCredentials.id) {
-						// Check whether the id is matching with a credential
-						const credentialsId = nodeCredentials.id.toString(); // due to a fixed bug in the migration UpdateWorkflowCredentials (just sqlite) we have to cast to string and check later if it has been a number
-						const credentialsForId = credentialOptions.find(
-							(optionData: ICredentialsResponse) => optionData.id === credentialsId,
-						);
-						if (credentialsForId) {
-							if (
-								credentialsForId.name !== nodeCredentials.name ||
-								typeof nodeCredentials.id === 'number'
-							) {
-								node.credentials![nodeCredentialType] = {
-									id: credentialsForId.id,
-									name: credentialsForId.name,
-								};
-								this.credentialsUpdated = true;
-							}
-							return;
-						}
-					}
-
-					// No match for id found or old credentials type used
-					node.credentials![nodeCredentialType] = nodeCredentials;
-
-					// check if only one option with the name would exist
-					const credentialsForName = credentialOptions.filter(
-						(optionData: ICredentialsResponse) => optionData.name === nodeCredentials.name,
-					);
-
-					// only one option exists for the name, take it
-					if (credentialsForName.length === 1) {
-						node.credentials![nodeCredentialType].id = credentialsForName[0].id;
-						this.credentialsUpdated = true;
-					}
-				},
-			);
-		},
-		async addNodes(nodes: INodeUi[], connections?: IConnections, trackHistory = false) {
-			if (!nodes?.length) {
-				return;
-			}
-			this.isInsertingNodes = true;
-			// Before proceeding we must check if all nodes contain the `properties` attribute.
-			// Nodes are loaded without this information so we must make sure that all nodes
-			// being added have this information.
-			await this.loadNodesProperties(
-				nodes.map((node) => ({ name: node.type, version: node.typeVersion })),
-			);
-
-			// Add the node to the node-list
-			let nodeType: INodeTypeDescription | null;
-			nodes.forEach((node) => {
-				const newNode: INodeUi = {
-					...node,
-				};
-
-				if (!newNode.id) {
-					newNode.id = uuid();
-				}
-
-				nodeType = this.nodeTypesStore.getNodeType(newNode.type, newNode.typeVersion);
-
-				// Make sure that some properties always exist
-				if (!newNode.hasOwnProperty('disabled')) {
-					newNode.disabled = false;
-				}
-
-				if (!newNode.hasOwnProperty('parameters')) {
-					newNode.parameters = {};
-				}
-
-				// Load the default parameter values because only values which differ
-				// from the defaults get saved
-				if (nodeType !== null) {
-					let nodeParameters = null;
-					try {
-						nodeParameters = NodeHelpers.getNodeParameters(
-							nodeType.properties,
-							newNode.parameters,
-							true,
-							false,
-							node,
-						);
-					} catch (e) {
-						console.error(
-							this.$locale.baseText('nodeView.thereWasAProblemLoadingTheNodeParametersOfNode') +
-								`: "${newNode.name}"`,
-						);
-						console.error(e);
-					}
-					newNode.parameters = nodeParameters ?? {};
-
-					// if it's a webhook and the path is empty set the UUID as the default path
-					if (
-						[WEBHOOK_NODE_TYPE, FORM_TRIGGER_NODE_TYPE].includes(newNode.type) &&
-						newNode.parameters.path === ''
-					) {
-						newNode.parameters.path = newNode.webhookId as string;
-					}
-				}
-
-				// check and match credentials, apply new format if old is used
-				this.matchCredentials(newNode);
-				this.workflowsStore.addNode(newNode);
-				if (trackHistory) {
-					this.historyStore.pushCommandToUndo(new AddNodeCommand(newNode));
-				}
-			});
-
-			// Wait for the nodes to be rendered
-			await this.$nextTick();
-
-			this.instance?.setSuspendDrawing(true);
-
-			if (connections) {
-				await this.addConnections(connections);
-			}
-			// Add the node issues at the end as the node-connections are required
-			this.nodeHelpers.refreshNodeIssues();
-			this.nodeHelpers.updateNodesInputIssues();
-			this.resetEndpointsErrors();
-			this.isInsertingNodes = false;
-
-			// Now it can draw again
-			this.instance?.setSuspendDrawing(false, true);
-		},
-		async addConnections(connections: IConnections) {
-			const batchedConnectionData: Array<[IConnection, IConnection]> = [];
-
-			for (const sourceNode in connections) {
-				for (const type in connections[sourceNode]) {
-					connections[sourceNode][type].forEach((outwardConnections, sourceIndex) => {
-						if (outwardConnections) {
-							outwardConnections.forEach((targetData) => {
-								batchedConnectionData.push([
-									{
-										node: sourceNode,
-										type: getEndpointScope(type) ?? NodeConnectionType.Main,
-										index: sourceIndex,
-									},
-									{ node: targetData.node, type: targetData.type, index: targetData.index },
-								]);
-							});
-						}
-					});
-				}
-			}
-
-			// Process the connections in batches
-			await this.processConnectionBatch(batchedConnectionData);
-			setTimeout(this.addConectionsTestData, 0);
-		},
-
-		async processConnectionBatch(batchedConnectionData: Array<[IConnection, IConnection]>) {
-			const batchSize = 100;
-
-			for (let i = 0; i < batchedConnectionData.length; i += batchSize) {
-				const batch = batchedConnectionData.slice(i, i + batchSize);
-
-				batch.forEach((connectionData) => {
-					this.__addConnection(connectionData);
-				});
-			}
-		},
-
 		async addNodesToWorkflow(data: IWorkflowDataUpdate): Promise<IWorkflowDataUpdate> {
 			// Because nodes with the same name maybe already exist, it could
 			// be needed that they have to be renamed. Also could it be possible
@@ -4544,7 +4215,7 @@ export default defineComponent({
 			let newName: string;
 			const createNodes: INode[] = [];
 
-			await this.loadNodesProperties(
+			await this.nodeHelpers.loadNodesProperties(
 				data.nodes.map((node) => ({ name: node.type, version: node.typeVersion })),
 			);
 
@@ -4660,7 +4331,7 @@ export default defineComponent({
 
 			// Add the nodes with the changed node names, expressions and connections
 			this.historyStore.startRecordingUndo();
-			await this.addNodes(
+			await this.nodeHelpers.addNodes(
 				Object.values(tempWorkflow.nodes),
 				tempWorkflow.connectionsBySourceNode,
 				true,
@@ -4784,7 +4455,7 @@ export default defineComponent({
 			this.uiStore.resetSelectedNodes();
 			this.uiStore.nodeViewOffsetPosition = [0, 0];
 
-			this.credentialsUpdated = false;
+			this.nodeHelpers.credentialsUpdated.value = false;
 		},
 		async loadActiveWorkflows(): Promise<void> {
 			await this.workflowsStore.fetchActiveWorkflows();
@@ -4824,30 +4495,6 @@ export default defineComponent({
 		async loadSecrets(): Promise<void> {
 			await this.externalSecretsStore.fetchAllSecrets();
 		},
-		async loadNodesProperties(nodeInfos: INodeTypeNameVersion[]): Promise<void> {
-			const allNodes: INodeTypeDescription[] = this.nodeTypesStore.allNodeTypes;
-
-			const nodesToBeFetched: INodeTypeNameVersion[] = [];
-			allNodes.forEach((node) => {
-				const nodeVersions = Array.isArray(node.version) ? node.version : [node.version];
-				if (
-					!!nodeInfos.find((n) => n.name === node.name && nodeVersions.includes(n.version)) &&
-					!node.hasOwnProperty('properties')
-				) {
-					nodesToBeFetched.push({
-						name: node.name,
-						version: Array.isArray(node.version) ? node.version.slice(-1)[0] : node.version,
-					});
-				}
-			});
-
-			if (nodesToBeFetched.length > 0) {
-				// Only call API if node information is actually missing
-				this.canvasStore.startLoading();
-				await this.nodeTypesStore.getNodesInformation(nodesToBeFetched);
-				this.canvasStore.stopLoading();
-			}
-		},
 		async onPostMessageReceived(message: MessageEvent) {
 			if (!message || typeof message.data !== 'string' || !message.data?.includes?.('"command"')) {
 				return;
@@ -4880,7 +4527,7 @@ export default defineComponent({
 					try {
 						// If this NodeView is used in preview mode (in iframe) it will not have access to the main app store
 						// so everything it needs has to be sent using post messages and passed down to child components
-						this.isProductionExecutionPreview = json.executionMode !== 'manual';
+						this.nodeHelpers.isProductionExecutionPreview.value = json.executionMode !== 'manual';
 
 						await this.openExecution(json.executionId);
 						this.canOpenNDV = json.canOpenNDV ?? true;
@@ -4918,73 +4565,6 @@ export default defineComponent({
 				await this.importWorkflowData(workflowData, 'url');
 			}
 		},
-		addPinDataConnections(pinData?: IPinData) {
-			if (!pinData) {
-				return;
-			}
-
-			Object.keys(pinData).forEach((nodeName) => {
-				const node = this.workflowsStore.getNodeByName(nodeName);
-				if (!node) {
-					return;
-				}
-
-				const nodeElement = document.getElementById(node.id);
-				if (!nodeElement) {
-					return;
-				}
-
-				const hasRun = this.workflowsStore.getWorkflowResultDataByNodeName(nodeName) !== null;
-				// In case we are showing a production execution preview we want
-				// to show pinned data connections as they wouldn't have been pinned
-				const classNames = this.isProductionExecutionPreview ? [] : ['pinned'];
-
-				if (hasRun) {
-					classNames.push('has-run');
-				}
-
-				const connections = this.instance?.getConnections({
-					source: nodeElement,
-				});
-
-				const connectionsArray = Array.isArray(connections)
-					? connections
-					: Object.values(connections);
-
-				connectionsArray.forEach((connection) => {
-					NodeViewUtils.addConnectionOutputSuccess(connection, {
-						total: pinData[nodeName].length,
-						iterations: 0,
-						classNames,
-					});
-				});
-			});
-		},
-		removePinDataConnections(pinData: IPinData) {
-			Object.keys(pinData).forEach((nodeName) => {
-				const node = this.workflowsStore.getNodeByName(nodeName);
-				if (!node) {
-					return;
-				}
-
-				const nodeElement = document.getElementById(node.id);
-				if (!nodeElement) {
-					return;
-				}
-
-				const connections = this.instance?.getConnections({
-					source: nodeElement,
-				});
-
-				const connectionsArray = Array.isArray(connections)
-					? connections
-					: Object.values(connections);
-
-				this.instance.setSuspendDrawing(true);
-				connectionsArray.forEach(NodeViewUtils.resetConnection);
-				this.instance.setSuspendDrawing(false, true);
-			});
-		},
 		onToggleNodeCreator({ source, createNodeActive, nodeCreatorView }: ToggleNodeCreatorOptions) {
 			if (createNodeActive === this.createNodeActive) return;
 
@@ -5077,7 +4657,7 @@ export default defineComponent({
 				});
 			}
 
-			this.addPinDataConnections(this.workflowsStore.pinnedWorkflowData);
+			this.nodeHelpers.addPinDataConnections(this.workflowsStore.pinnedWorkflowData);
 		},
 
 		async saveCurrentWorkflowExternal(callback: () => void) {
@@ -5108,16 +4688,16 @@ export default defineComponent({
 			// For some reason, returning node to canvas with old id
 			// makes it's endpoint to render at wrong position
 			node.id = uuid();
-			await this.addNodes([node]);
+			await this.nodeHelpers.addNodes([node]);
 		},
 		onRevertAddConnection({ connection }: { connection: [IConnection, IConnection] }) {
 			this.suspendRecordingDetachedConnections = true;
-			this.__removeConnection(connection, true);
+			this.nodeHelpers.removeConnection(connection, true);
 			this.suspendRecordingDetachedConnections = false;
 		},
 		async onRevertRemoveConnection({ connection }: { connection: [IConnection, IConnection] }) {
 			this.suspendRecordingDetachedConnections = true;
-			this.__addConnection(connection);
+			this.nodeHelpers.addConnection(connection);
 			this.suspendRecordingDetachedConnections = false;
 		},
 		async onRevertNameChange({ currentName, newName }: { currentName: string; newName: string }) {
diff --git a/packages/editor-ui/src/views/WorkflowExecutionsView.vue b/packages/editor-ui/src/views/WorkflowExecutionsView.vue
index 4155d06809d1d..567e020fe768d 100644
--- a/packages/editor-ui/src/views/WorkflowExecutionsView.vue
+++ b/packages/editor-ui/src/views/WorkflowExecutionsView.vue
@@ -3,22 +3,22 @@ import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import WorkflowExecutionsList from '@/components/executions/workflow/WorkflowExecutionsList.vue';
 import { useExecutionsStore } from '@/stores/executions.store';
 import { useI18n } from '@/composables/useI18n';
-import type { ExecutionFilterType, ITag, IWorkflowDb } from '@/Interface';
+import type { ExecutionFilterType, IWorkflowDb } from '@/Interface';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { NO_NETWORK_ERROR_CODE } from '@/utils/apiUtils';
 import { useToast } from '@/composables/useToast';
-import { VIEWS } from '@/constants';
+import { PLACEHOLDER_EMPTY_WORKFLOW_ID, VIEWS } from '@/constants';
 import { useRoute, useRouter } from 'vue-router';
 import type { ExecutionSummary } from 'n8n-workflow';
 import { useDebounce } from '@/composables/useDebounce';
 import { storeToRefs } from 'pinia';
 import { useTelemetry } from '@/composables/useTelemetry';
-import { useTagsStore } from '@/stores/tags.store';
+import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
+import { useNodeHelpers } from '@/composables/useNodeHelpers';
 
 const executionsStore = useExecutionsStore();
 const workflowsStore = useWorkflowsStore();
-const tagsStore = useTagsStore();
 const nodeTypesStore = useNodeTypesStore();
 const i18n = useI18n();
 const telemetry = useTelemetry();
@@ -26,6 +26,8 @@ const route = useRoute();
 const router = useRouter();
 const toast = useToast();
 const { callDebounced } = useDebounce();
+const workflowHelpers = useWorkflowHelpers({ router });
+const nodeHelpers = useNodeHelpers();
 
 const { filters } = storeToRefs(executionsStore);
 
@@ -117,29 +119,19 @@ async function initializeRoute() {
 }
 
 async function fetchWorkflow() {
-	let data: IWorkflowDb | undefined = workflowsStore.workflowsById[workflowId.value];
-	if (!data) {
+	// Check if the workflow already has an ID
+	// In other words: are we coming from the Editor tab or browser loaded the Executions tab directly
+	if (workflowsStore.workflow.id === PLACEHOLDER_EMPTY_WORKFLOW_ID) {
 		try {
-			data = await workflowsStore.fetchWorkflow(workflowId.value);
+			await workflowsStore.fetchActiveWorkflows();
+			const data = await workflowsStore.fetchWorkflow(workflowId.value);
+			await workflowHelpers.initState(data);
+			await nodeHelpers.addNodes(data.nodes, data.connections);
 		} catch (error) {
 			toast.showError(error, i18n.baseText('nodeView.showError.openWorkflow.title'));
-			return;
 		}
 	}
-
-	if (!data) {
-		throw new Error(
-			i18n.baseText('nodeView.workflowWithIdCouldNotBeFound', {
-				interpolate: { workflowId: workflowId.value },
-			}),
-		);
-	}
-
-	const tags = (data.tags ?? []) as ITag[];
-	workflow.value = data;
-	workflowsStore.setWorkflowName({ newName: data.name, setStateDirty: false });
-	workflowsStore.setWorkflowTagIds(tags.map(({ id }) => id) ?? []);
-	tagsStore.upsertTags(tags);
+	workflow.value = workflowsStore.workflow;
 }
 
 async function onAutoRefreshToggle(value: boolean) {