From 9244ea617e0c5bd5163d70310ffcf4799f1293f1 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Tue, 9 Apr 2024 16:04:30 +0300
Subject: [PATCH 01/22] feat: initial canvas v2 commit

---
 packages/editor-ui/src/api/workflows.ts       |   4 +-
 .../src/components/canvas/Canvas.vue          | 222 ++++++++++++++++++
 .../src/components/canvas/plugins/index.ts    |   9 +
 packages/editor-ui/src/constants.ts           |   1 +
 packages/editor-ui/src/router.ts              |  13 +
 .../src/stores/workflows.store.v2.ts          |  34 +++
 packages/editor-ui/src/types/canvas.ts        |  41 ++++
 packages/editor-ui/src/types/index.ts         |   1 +
 packages/editor-ui/src/utils/canvasUtilsV2.ts |  69 ++++++
 packages/editor-ui/src/views/NodeView.v2.vue  |  64 +++++
 10 files changed, 456 insertions(+), 2 deletions(-)
 create mode 100644 packages/editor-ui/src/components/canvas/Canvas.vue
 create mode 100644 packages/editor-ui/src/components/canvas/plugins/index.ts
 create mode 100644 packages/editor-ui/src/stores/workflows.store.v2.ts
 create mode 100644 packages/editor-ui/src/types/canvas.ts
 create mode 100644 packages/editor-ui/src/utils/canvasUtilsV2.ts
 create mode 100644 packages/editor-ui/src/views/NodeView.v2.vue

diff --git a/packages/editor-ui/src/api/workflows.ts b/packages/editor-ui/src/api/workflows.ts
index 82ae637c4247b..a1a28712b2c9b 100644
--- a/packages/editor-ui/src/api/workflows.ts
+++ b/packages/editor-ui/src/api/workflows.ts
@@ -1,4 +1,4 @@
-import type { IExecutionsCurrentSummaryExtended, IRestApiContext } from '@/Interface';
+import type { IExecutionsCurrentSummaryExtended, IRestApiContext, IWorkflowDb } from '@/Interface';
 import type { ExecutionFilters, ExecutionOptions, IDataObject } from 'n8n-workflow';
 import { makeRestApiRequest } from '@/utils/apiUtils';
 
@@ -14,7 +14,7 @@ export async function getNewWorkflow(context: IRestApiContext, name?: string) {
 export async function getWorkflow(context: IRestApiContext, id: string, filter?: object) {
 	const sendData = filter ? { filter } : undefined;
 
-	return await makeRestApiRequest(context, 'GET', `/workflows/${id}`, sendData);
+	return await makeRestApiRequest<IWorkflowDb>(context, 'GET', `/workflows/${id}`, sendData);
 }
 
 export async function getWorkflows(context: IRestApiContext, filter?: object) {
diff --git a/packages/editor-ui/src/components/canvas/Canvas.vue b/packages/editor-ui/src/components/canvas/Canvas.vue
new file mode 100644
index 0000000000000..000e3db104b6e
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/Canvas.vue
@@ -0,0 +1,222 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue';
+import type { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
+import { ready, newInstance } from '@jsplumb/browser-ui';
+import type {
+	CanvasConnection,
+	CanvasConnectionEndpoint,
+	CanvasElement,
+	CanvasElementEndpoint,
+	CanvasPlugin,
+} from '@/types';
+import { canvasPan, canvasZoom } from '@/components/canvas/plugins';
+
+const props = withDefaults(
+	defineProps<{
+		elements: CanvasElement[];
+		connections: CanvasConnection[];
+		plugins: CanvasPlugin[];
+	}>(),
+	{
+		elements: () => [],
+		connections: () => [],
+		plugins: () => [canvasPan, canvasZoom],
+	},
+);
+
+const instance = ref<BrowserJsPlumbInstance | undefined>();
+
+const canvasRef = ref<HTMLDivElement | undefined>();
+const elementRefs = ref<HTMLElement[]>([]);
+const elementRefsById = computed(() =>
+	elementRefs.value.reduce<Record<string, HTMLElement>>((acc, elementRef) => {
+		acc[elementRef.id] = elementRef as HTMLElement;
+		return acc;
+	}, {}),
+);
+
+onMounted(() => {
+	ready(() => {
+		if (!canvasRef.value) {
+			return;
+		}
+
+		instance.value = newInstance({
+			container: canvasRef.value,
+		});
+
+		render();
+	});
+});
+
+function render() {
+	instance.value?.setSuspendDrawing(true);
+
+	renderElements();
+	renderConnections();
+
+	registerPlugins();
+
+	instance.value?.setSuspendDrawing(false, true);
+}
+
+function renderElements() {
+	props.elements.forEach((element) => {
+		const elementRef = getElementById(element.id);
+		if (!elementRef) {
+			return;
+		}
+
+		setElementPosition(element.id, element.position);
+
+		element.inputs.forEach((input) => {
+			addElementInputEndpoint(element.id, input);
+		});
+
+		element.outputs.forEach((output) => {
+			addElementOutputEndpoint(element.id, output);
+		});
+	});
+}
+
+function renderConnections() {
+	props.connections.forEach((connection) => {
+		addConnection(connection);
+	});
+}
+
+function registerPlugins() {
+	props.plugins.forEach((plugin) => {
+		if (!instance.value) {
+			return;
+		}
+
+		plugin({
+			instance: instance.value,
+		});
+	});
+}
+
+function getElementById(id: string) {
+	return elementRefsById.value[`element-${id}`];
+}
+
+function getInputEndpoint(endpoint: CanvasConnectionEndpoint) {
+	return instance.value?.getEndpoint(`${endpoint.id}/inputs/${endpoint.type}/${endpoint.port}`);
+}
+
+function getOutputEndpoint(endpoint: CanvasConnectionEndpoint) {
+	return instance.value?.getEndpoint(`${endpoint.id}/outputs/${endpoint.type}/${endpoint.port}`);
+}
+
+function setElementPosition(id: string, position: [number, number]) {
+	const elementRef = getElementById(id);
+	if (!elementRef) {
+		return;
+	}
+
+	elementRef.style.left = `${position[0]}px`;
+	elementRef.style.top = `${position[1]}px`;
+}
+
+function addElementInputEndpoint(id: string, endpoint: CanvasElementEndpoint) {
+	const elementRef = getElementById(id);
+	if (!elementRef) {
+		return;
+	}
+
+	instance.value?.addEndpoint(elementRef, {
+		uuid: `${id}/inputs/${endpoint.type}/${endpoint.port}`,
+		endpoint: 'Dot',
+		target: true,
+		maxConnections: -1,
+		anchor: 'Left', // @TODO Adjust anchor based on endpoint name
+	});
+}
+
+function addElementOutputEndpoint(id: string, endpoint: CanvasElementEndpoint) {
+	const elementRef = getElementById(id);
+	if (!elementRef) {
+		return;
+	}
+
+	instance.value?.addEndpoint(elementRef, {
+		uuid: `${id}/outputs/${endpoint.type}/${endpoint.port}`,
+		endpoint: 'Rectangle',
+		source: true,
+		maxConnections: -1,
+		anchor: 'Right', // @TODO Adjust anchor based on endpoint name
+	});
+}
+
+function addConnection(connection: CanvasConnection) {
+	console.log(connection);
+	const sourceElementRef = getElementById(connection.source.id);
+	const targetElementRef = getElementById(connection.target.id);
+	if (!sourceElementRef || !targetElementRef) {
+		return;
+	}
+
+	const sourceEndpoint = getOutputEndpoint(connection.source);
+	const targetEndpoint = getInputEndpoint(connection.target);
+
+	instance.value?.connect({
+		source: sourceEndpoint,
+		target: targetEndpoint,
+		anchor: 'Continuous',
+		connector: 'Bezier',
+		overlays: [
+			{ type: 'Label', options: { label: 'X Items', location: 0.5 } },
+			{ type: 'Arrow', options: { location: 1 } },
+		],
+	});
+}
+</script>
+
+<template>
+	<div class="canvas-wrapper">
+		<div class="canvas-anchor">
+			<div ref="canvasRef" class="canvas">
+				<template v-for="element in props.elements" :key="element.id">
+					<div
+						v-if="element.type === 'node'"
+						:id="`element-${element.id}`"
+						ref="elementRefs"
+						class="element box"
+					/>
+				</template>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss">
+.canvas-wrapper {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	display: block;
+}
+
+.canvas-anchor {
+	position: fixed;
+}
+
+.canvas {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	transform-origin: 0 0;
+	z-index: -1;
+}
+
+.element {
+	position: absolute;
+}
+
+.box {
+	width: 100px;
+	height: 100px;
+	background: gray;
+}
+</style>
diff --git a/packages/editor-ui/src/components/canvas/plugins/index.ts b/packages/editor-ui/src/components/canvas/plugins/index.ts
new file mode 100644
index 0000000000000..1c38ed369733c
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/plugins/index.ts
@@ -0,0 +1,9 @@
+import type { CanvasPlugin } from '@/types';
+
+export const canvasPan: CanvasPlugin = (ctx) => {
+	ctx.instance.bind('pan', (e) => {
+		console.log('pan', e);
+	});
+};
+
+export const canvasZoom: CanvasPlugin = () => {};
diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts
index c8d119f14f594..42beef1efb303 100644
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@@ -595,6 +595,7 @@ export const enum STORES {
 	UI = 'ui',
 	USERS = 'users',
 	WORKFLOWS = 'workflows',
+	WORKFLOWS_V2 = 'workflowsV2',
 	WORKFLOWS_EE = 'workflowsEE',
 	NDV = 'ndv',
 	TEMPLATES = 'templates',
diff --git a/packages/editor-ui/src/router.ts b/packages/editor-ui/src/router.ts
index 356ab3f57a550..edade1cd87448 100644
--- a/packages/editor-ui/src/router.ts
+++ b/packages/editor-ui/src/router.ts
@@ -26,6 +26,7 @@ const ForgotMyPasswordView = async () => await import('./views/ForgotMyPasswordV
 const MainHeader = async () => await import('@/components/MainHeader/MainHeader.vue');
 const MainSidebar = async () => await import('@/components/MainSidebar.vue');
 const NodeView = async () => await import('@/views/NodeView.vue');
+const NodeViewV2 = async () => await import('@/views/NodeView.v2.vue');
 const WorkflowExecutionsList = async () =>
 	await import('@/components/ExecutionsView/ExecutionsList.vue');
 const ExecutionsLandingPage = async () =>
@@ -387,6 +388,18 @@ export const routes = [
 		path: '/workflow',
 		redirect: '/workflow/new',
 	},
+	{
+		path: '/workflow-v2/:workflowId',
+		name: VIEWS.WORKFLOW,
+		components: {
+			default: NodeViewV2,
+			header: MainHeader,
+			sidebar: MainSidebar,
+		},
+		meta: {
+			middleware: ['authenticated'],
+		},
+	},
 	{
 		path: '/signin',
 		name: VIEWS.SIGNIN,
diff --git a/packages/editor-ui/src/stores/workflows.store.v2.ts b/packages/editor-ui/src/stores/workflows.store.v2.ts
new file mode 100644
index 0000000000000..e7a3a605b86ba
--- /dev/null
+++ b/packages/editor-ui/src/stores/workflows.store.v2.ts
@@ -0,0 +1,34 @@
+import { defineStore } from 'pinia';
+import { STORES } from '@/constants';
+import { computed, ref } from 'vue';
+import type { IWorkflowDb } from '@/Interface';
+import { useRootStore } from '@/stores/n8nRoot.store';
+import { getWorkflow } from '@/api/workflows';
+
+export const useWorkflowsStoreV2 = defineStore(STORES.WORKFLOWS_V2, () => {
+	const workflowsById = ref<Record<string, IWorkflowDb>>({});
+	const workflows = computed(() => Object.values(workflowsById.value));
+
+	function addWorkflow(workflow: IWorkflowDb) {
+		workflowsById.value[workflow.id] = workflow;
+	}
+
+	function removeWorkflow(id: string) {
+		delete workflowsById.value[id];
+	}
+
+	async function fetchWorkflow(id: string) {
+		const rootStore = useRootStore();
+		const workflow = await getWorkflow(rootStore.getRestApiContext, id);
+
+		addWorkflow(workflow);
+	}
+
+	return {
+		workflowsById,
+		workflows,
+		addWorkflow,
+		removeWorkflow,
+		fetchWorkflow,
+	};
+});
diff --git a/packages/editor-ui/src/types/canvas.ts b/packages/editor-ui/src/types/canvas.ts
new file mode 100644
index 0000000000000..1a42fdfa3d8a4
--- /dev/null
+++ b/packages/editor-ui/src/types/canvas.ts
@@ -0,0 +1,41 @@
+/* eslint-disable @typescript-eslint/no-redundant-type-constituents */
+import type { ConnectionTypes } from 'n8n-workflow';
+import { JsPlumbInstance } from '@jsplumb/core';
+import type { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
+
+export type CanvasElementType = 'node' | 'note';
+
+export type CanvasConnectionEndpointType = ConnectionTypes;
+
+export type CanvasElementEndpoint = {
+	type: CanvasConnectionEndpointType;
+	port: number;
+};
+
+export interface CanvasElement {
+	id: string;
+	type: CanvasElementType;
+	position: [number, number];
+	metadata: unknown;
+	inputs: CanvasElementEndpoint[];
+	outputs: CanvasElementEndpoint[];
+}
+
+export interface CanvasConnectionEndpoint {
+	id: string;
+	type: CanvasConnectionEndpointType;
+	port: number;
+}
+
+export interface CanvasConnection {
+	source: CanvasConnectionEndpoint;
+	target: CanvasConnectionEndpoint;
+}
+
+export interface CanvasPluginContext {
+	instance: BrowserJsPlumbInstance;
+}
+
+export interface CanvasPlugin {
+	(ctx: CanvasPluginContext): void;
+}
diff --git a/packages/editor-ui/src/types/index.ts b/packages/editor-ui/src/types/index.ts
index 7bd3ad2db7474..7c2e3d7fb4804 100644
--- a/packages/editor-ui/src/types/index.ts
+++ b/packages/editor-ui/src/types/index.ts
@@ -1 +1,2 @@
+export * from './canvas';
 export * from './externalHooks';
diff --git a/packages/editor-ui/src/utils/canvasUtilsV2.ts b/packages/editor-ui/src/utils/canvasUtilsV2.ts
new file mode 100644
index 0000000000000..8a845a0ac48ab
--- /dev/null
+++ b/packages/editor-ui/src/utils/canvasUtilsV2.ts
@@ -0,0 +1,69 @@
+import type { IConnections, INodeTypeDescription } from 'n8n-workflow';
+import type { INodeUi } from '@/Interface';
+import type {
+	CanvasConnection,
+	CanvasConnectionEndpointType,
+	CanvasElementEndpoint,
+} from '@/types';
+
+export function mapLegacyConnections(
+	legacyConnections: IConnections,
+	nodes: INodeUi[],
+): CanvasConnection[] {
+	const mappedConnections: CanvasConnection[] = [];
+
+	Object.keys(legacyConnections).forEach((fromNodeName) => {
+		const fromId = nodes.find((node) => node.name === fromNodeName)?.id;
+
+		Object.keys(legacyConnections[fromNodeName]).forEach((fromConnectionType) => {
+			legacyConnections[fromNodeName][fromConnectionType].forEach((portTargets, fromPort) => {
+				portTargets.forEach((portTarget) => {
+					const toId = nodes.find((node) => node.name === portTarget.node)?.id;
+					const toPort = portTarget.index;
+					const toConnectionType = portTarget.type;
+
+					if (fromId && toId) {
+						mappedConnections.push({
+							source: {
+								id: fromId,
+								port: fromPort,
+								type: fromConnectionType as CanvasConnectionEndpointType,
+							},
+							target: {
+								id: toId,
+								port: toPort,
+								type: toConnectionType as CanvasConnectionEndpointType,
+							},
+						});
+					}
+				});
+			});
+		});
+	});
+
+	return mappedConnections;
+}
+
+export function normalizeElementEndpoints(
+	endpoints: INodeTypeDescription['inputs'],
+): CanvasElementEndpoint[] {
+	// @TODO Handle string case
+	if (typeof endpoints === 'string') {
+		return [];
+	}
+
+	return endpoints.map((endpoint, index) => {
+		if (typeof endpoint === 'string') {
+			const port = endpoints.slice(0, index).filter((e) => e === endpoint).length;
+			return {
+				type: endpoint,
+				port,
+			};
+		} else {
+			return {
+				type: endpoint.type,
+				port: 0,
+			};
+		}
+	});
+}
diff --git a/packages/editor-ui/src/views/NodeView.v2.vue b/packages/editor-ui/src/views/NodeView.v2.vue
new file mode 100644
index 0000000000000..d2c9a4d0d413e
--- /dev/null
+++ b/packages/editor-ui/src/views/NodeView.v2.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import Canvas from '@/components/canvas/Canvas.vue';
+import { computed, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useWorkflowsStoreV2 } from '@/stores/workflows.store.v2';
+import type { CanvasConnection, CanvasElement } from '@/types';
+import { mapLegacyConnections, normalizeElementEndpoints } from '@/utils/canvasUtilsV2';
+import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+
+const router = useRouter();
+const route = useRoute();
+
+const nodeTypesStore = useNodeTypesStore();
+const workflowsStoreV2 = useWorkflowsStoreV2();
+
+const workflowId = computed<string>(() => route.params.workflowId as string);
+const workflow = computed(() => workflowsStoreV2.workflowsById[workflowId.value]);
+
+const connections = computed<CanvasConnection[]>(() =>
+	mapLegacyConnections(workflow.value?.connections ?? [], workflow.value?.nodes ?? []),
+);
+
+const elements = computed<CanvasElement[]>(() => [
+	...workflow.value?.nodes.map<CanvasElement>((node) => {
+		const nodeType = nodeTypesStore.getNodeType(node.type);
+
+		return {
+			id: node.id,
+			type: 'node', // @TODO Handle "n8n-nodes-base.stickyNote" type
+			position: node.position,
+			metadata: node,
+			inputs: normalizeElementEndpoints(nodeType?.inputs ?? []),
+			outputs: normalizeElementEndpoints(nodeType?.outputs ?? []),
+		};
+	}),
+]);
+
+onMounted(() => {
+	void initialize();
+});
+
+async function initialize() {
+	await nodeTypesStore.getNodeTypes();
+	await workflowsStoreV2.fetchWorkflow(workflowId.value);
+	console.log(workflow.value);
+}
+</script>
+
+<template>
+	<div id="node-view">
+		<Canvas v-if="workflow" :elements="elements" :connections="connections" />
+	</div>
+</template>
+
+<style lang="scss">
+#node-view {
+	display: block;
+	position: relative;
+	width: 100%;
+	height: 100%;
+	background-color: var(--color-canvas-background);
+	overflow: hidden;
+}
+</style>

From a7b66bcf5b5f2aa8cf2e173088dc195cbd157d43 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Fri, 12 Apr 2024 10:40:14 +0300
Subject: [PATCH 02/22] feat: add VueFlow for canvas rendering

---
 packages/editor-ui/package.json               |   1 +
 .../src/components/canvas/Canvas.vue          | 221 +++--------------
 .../src/components/canvas/CanvasJsPlumb.vue   | 222 ++++++++++++++++++
 .../components/canvas/elements/CanvasNode.vue | 103 ++++++++
 packages/editor-ui/src/constants.ts           |   1 +
 packages/editor-ui/src/main.ts                |   3 +
 packages/editor-ui/src/router.ts              |   2 +-
 .../src/stores/workflows.store.v2.ts          | 145 +++++++++++-
 packages/editor-ui/src/types/canvas.ts        |  40 ++--
 packages/editor-ui/src/utils/canvasUtilsV2.ts |  38 +--
 packages/editor-ui/src/views/NodeView.v2.vue  |  46 +++-
 pnpm-lock.yaml                                |  93 +++++++-
 12 files changed, 670 insertions(+), 245 deletions(-)
 create mode 100644 packages/editor-ui/src/components/canvas/CanvasJsPlumb.vue
 create mode 100644 packages/editor-ui/src/components/canvas/elements/CanvasNode.vue

diff --git a/packages/editor-ui/package.json b/packages/editor-ui/package.json
index 6aaf9ef007471..de3fcaf133424 100644
--- a/packages/editor-ui/package.json
+++ b/packages/editor-ui/package.json
@@ -45,6 +45,7 @@
     "@n8n/chat": "workspace:*",
     "@n8n/codemirror-lang-sql": "^1.0.2",
     "@n8n/permissions": "workspace:*",
+    "@vue-flow/core": "^1.33.5",
     "@vueuse/components": "^10.5.0",
     "@vueuse/core": "^10.5.0",
     "axios": "1.6.7",
diff --git a/packages/editor-ui/src/components/canvas/Canvas.vue b/packages/editor-ui/src/components/canvas/Canvas.vue
index 000e3db104b6e..5cf345a3bca68 100644
--- a/packages/editor-ui/src/components/canvas/Canvas.vue
+++ b/packages/editor-ui/src/components/canvas/Canvas.vue
@@ -1,192 +1,59 @@
 <script lang="ts" setup>
-import { computed, onMounted, ref } from 'vue';
-import type { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
-import { ready, newInstance } from '@jsplumb/browser-ui';
-import type {
-	CanvasConnection,
-	CanvasConnectionEndpoint,
-	CanvasElement,
-	CanvasElementEndpoint,
-	CanvasPlugin,
-} from '@/types';
-import { canvasPan, canvasZoom } from '@/components/canvas/plugins';
+import type { CanvasConnection, CanvasConnectionPort, CanvasElement } from '@/types';
+import type { EdgeChange, NodeChange } from '@vue-flow/core';
+import { useVueFlow, VueFlow } from '@vue-flow/core';
+import CanvasNode from './elements/CanvasNode.vue';
+
+const emit = defineEmits(['update:modelValue']);
 
 const props = withDefaults(
 	defineProps<{
+		id: string;
 		elements: CanvasElement[];
 		connections: CanvasConnection[];
-		plugins: CanvasPlugin[];
 	}>(),
 	{
+		id: 'canvas',
 		elements: () => [],
 		connections: () => [],
-		plugins: () => [canvasPan, canvasZoom],
 	},
 );
 
-const instance = ref<BrowserJsPlumbInstance | undefined>();
-
-const canvasRef = ref<HTMLDivElement | undefined>();
-const elementRefs = ref<HTMLElement[]>([]);
-const elementRefsById = computed(() =>
-	elementRefs.value.reduce<Record<string, HTMLElement>>((acc, elementRef) => {
-		acc[elementRef.id] = elementRef as HTMLElement;
-		return acc;
-	}, {}),
-);
-
-onMounted(() => {
-	ready(() => {
-		if (!canvasRef.value) {
-			return;
-		}
-
-		instance.value = newInstance({
-			container: canvasRef.value,
-		});
+const { onInit } = useVueFlow({ id: props.id });
 
-		render();
-	});
+onInit((instance) => {
+	console.log(instance);
 });
 
-function render() {
-	instance.value?.setSuspendDrawing(true);
-
-	renderElements();
-	renderConnections();
-
-	registerPlugins();
-
-	instance.value?.setSuspendDrawing(false, true);
-}
-
-function renderElements() {
-	props.elements.forEach((element) => {
-		const elementRef = getElementById(element.id);
-		if (!elementRef) {
-			return;
-		}
-
-		setElementPosition(element.id, element.position);
-
-		element.inputs.forEach((input) => {
-			addElementInputEndpoint(element.id, input);
-		});
-
-		element.outputs.forEach((output) => {
-			addElementOutputEndpoint(element.id, output);
-		});
-	});
-}
-
-function renderConnections() {
-	props.connections.forEach((connection) => {
-		addConnection(connection);
-	});
-}
-
-function registerPlugins() {
-	props.plugins.forEach((plugin) => {
-		if (!instance.value) {
-			return;
-		}
-
-		plugin({
-			instance: instance.value,
-		});
-	});
-}
-
-function getElementById(id: string) {
-	return elementRefsById.value[`element-${id}`];
-}
-
-function getInputEndpoint(endpoint: CanvasConnectionEndpoint) {
-	return instance.value?.getEndpoint(`${endpoint.id}/inputs/${endpoint.type}/${endpoint.port}`);
-}
-
-function getOutputEndpoint(endpoint: CanvasConnectionEndpoint) {
-	return instance.value?.getEndpoint(`${endpoint.id}/outputs/${endpoint.type}/${endpoint.port}`);
-}
-
-function setElementPosition(id: string, position: [number, number]) {
-	const elementRef = getElementById(id);
-	if (!elementRef) {
-		return;
-	}
-
-	elementRef.style.left = `${position[0]}px`;
-	elementRef.style.top = `${position[1]}px`;
-}
-
-function addElementInputEndpoint(id: string, endpoint: CanvasElementEndpoint) {
-	const elementRef = getElementById(id);
-	if (!elementRef) {
-		return;
-	}
-
-	instance.value?.addEndpoint(elementRef, {
-		uuid: `${id}/inputs/${endpoint.type}/${endpoint.port}`,
-		endpoint: 'Dot',
-		target: true,
-		maxConnections: -1,
-		anchor: 'Left', // @TODO Adjust anchor based on endpoint name
-	});
-}
-
-function addElementOutputEndpoint(id: string, endpoint: CanvasElementEndpoint) {
-	const elementRef = getElementById(id);
-	if (!elementRef) {
-		return;
-	}
-
-	instance.value?.addEndpoint(elementRef, {
-		uuid: `${id}/outputs/${endpoint.type}/${endpoint.port}`,
-		endpoint: 'Rectangle',
-		source: true,
-		maxConnections: -1,
-		anchor: 'Right', // @TODO Adjust anchor based on endpoint name
-	});
+function onNodesChange(e: NodeChange[]) {
+	console.log('onNodesChange', e);
 }
 
-function addConnection(connection: CanvasConnection) {
-	console.log(connection);
-	const sourceElementRef = getElementById(connection.source.id);
-	const targetElementRef = getElementById(connection.target.id);
-	if (!sourceElementRef || !targetElementRef) {
-		return;
-	}
-
-	const sourceEndpoint = getOutputEndpoint(connection.source);
-	const targetEndpoint = getInputEndpoint(connection.target);
-
-	instance.value?.connect({
-		source: sourceEndpoint,
-		target: targetEndpoint,
-		anchor: 'Continuous',
-		connector: 'Bezier',
-		overlays: [
-			{ type: 'Label', options: { label: 'X Items', location: 0.5 } },
-			{ type: 'Arrow', options: { location: 1 } },
-		],
-	});
+function onConnectionsChange(e: EdgeChange[]) {
+	console.log('onConnectionsChange', e);
 }
 </script>
 
 <template>
 	<div class="canvas-wrapper">
-		<div class="canvas-anchor">
-			<div ref="canvasRef" class="canvas">
-				<template v-for="element in props.elements" :key="element.id">
-					<div
-						v-if="element.type === 'node'"
-						:id="`element-${element.id}`"
-						ref="elementRefs"
-						class="element box"
-					/>
-				</template>
-			</div>
-		</div>
+		<VueFlow
+			:id="id"
+			:nodes="elements"
+			:edges="connections"
+			fit-view-on-init
+			:apply-changes="false"
+			@nodes-change="onNodesChange"
+			@edges-change="onConnectionsChange"
+		>
+			<template #node-canvas-node="canvasNodeProps">
+				<CanvasNode v-bind="canvasNodeProps" />
+			</template>
+
+			<!--			&lt;!&ndash; bind your custom edge type to a component by using slots, slot names are always `edge-<type>` &ndash;&gt;-->
+			<!--			<template #edge-special="specialEdgeProps">-->
+			<!--				<SpecialEdge v-bind="specialEdgeProps" />-->
+			<!--			</template>-->
+		</VueFlow>
 	</div>
 </template>
 
@@ -197,26 +64,4 @@ function addConnection(connection: CanvasConnection) {
 	position: relative;
 	display: block;
 }
-
-.canvas-anchor {
-	position: fixed;
-}
-
-.canvas {
-	position: relative;
-	width: 100%;
-	height: 100%;
-	transform-origin: 0 0;
-	z-index: -1;
-}
-
-.element {
-	position: absolute;
-}
-
-.box {
-	width: 100px;
-	height: 100px;
-	background: gray;
-}
 </style>
diff --git a/packages/editor-ui/src/components/canvas/CanvasJsPlumb.vue b/packages/editor-ui/src/components/canvas/CanvasJsPlumb.vue
new file mode 100644
index 0000000000000..382f1c932ad8e
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/CanvasJsPlumb.vue
@@ -0,0 +1,222 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue';
+import type { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
+import { ready, newInstance } from '@jsplumb/browser-ui';
+import type {
+	CanvasConnection,
+	CanvasConnectionPort,
+	CanvasElement,
+	CanvasConnectionPort,
+	CanvasPlugin,
+} from '@/types';
+import { canvasPan, canvasZoom } from '@/components/canvas/plugins';
+
+const props = withDefaults(
+	defineProps<{
+		elements: CanvasElement[];
+		connections: CanvasConnection[];
+		plugins: CanvasPlugin[];
+	}>(),
+	{
+		elements: () => [],
+		connections: () => [],
+		plugins: () => [canvasPan, canvasZoom],
+	},
+);
+
+const instance = ref<BrowserJsPlumbInstance | undefined>();
+
+const canvasRef = ref<HTMLDivElement | undefined>();
+const elementRefs = ref<HTMLElement[]>([]);
+const elementRefsById = computed(() =>
+	elementRefs.value.reduce<Record<string, HTMLElement>>((acc, elementRef) => {
+		acc[elementRef.id] = elementRef as HTMLElement;
+		return acc;
+	}, {}),
+);
+
+onMounted(() => {
+	ready(() => {
+		if (!canvasRef.value) {
+			return;
+		}
+
+		instance.value = newInstance({
+			container: canvasRef.value,
+		});
+
+		render();
+	});
+});
+
+function render() {
+	instance.value?.setSuspendDrawing(true);
+
+	renderElements();
+	renderConnections();
+
+	registerPlugins();
+
+	instance.value?.setSuspendDrawing(false, true);
+}
+
+function renderElements() {
+	props.elements.forEach((element) => {
+		const elementRef = getElementById(element.id);
+		if (!elementRef) {
+			return;
+		}
+
+		setElementPosition(element.id, element.position);
+
+		element.inputs.forEach((input) => {
+			addElementInputEndpoint(element.id, input);
+		});
+
+		element.outputs.forEach((output) => {
+			addElementOutputEndpoint(element.id, output);
+		});
+	});
+}
+
+function renderConnections() {
+	props.connections.forEach((connection) => {
+		addConnection(connection);
+	});
+}
+
+function registerPlugins() {
+	props.plugins.forEach((plugin) => {
+		if (!instance.value) {
+			return;
+		}
+
+		plugin({
+			instance: instance.value,
+		});
+	});
+}
+
+function getElementById(id: string) {
+	return elementRefsById.value[`element-${id}`];
+}
+
+function getInputEndpoint(endpoint: CanvasConnectionPort) {
+	return instance.value?.getEndpoint(`${endpoint.id}/inputs/${endpoint.type}/${endpoint.index}`);
+}
+
+function getOutputEndpoint(endpoint: CanvasConnectionPort) {
+	return instance.value?.getEndpoint(`${endpoint.id}/outputs/${endpoint.type}/${endpoint.index}`);
+}
+
+function setElementPosition(id: string, position: [number, number]) {
+	const elementRef = getElementById(id);
+	if (!elementRef) {
+		return;
+	}
+
+	elementRef.style.left = `${position[0]}px`;
+	elementRef.style.top = `${position[1]}px`;
+}
+
+function addElementInputEndpoint(id: string, endpoint: CanvasConnectionPort) {
+	const elementRef = getElementById(id);
+	if (!elementRef) {
+		return;
+	}
+
+	instance.value?.addEndpoint(elementRef, {
+		uuid: `${id}/inputs/${endpoint.type}/${endpoint.index}`,
+		endpoint: 'Dot',
+		target: true,
+		maxConnections: -1,
+		anchor: 'Left', // @TODO Adjust anchor based on endpoint name
+	});
+}
+
+function addElementOutputEndpoint(id: string, endpoint: CanvasConnectionPort) {
+	const elementRef = getElementById(id);
+	if (!elementRef) {
+		return;
+	}
+
+	instance.value?.addEndpoint(elementRef, {
+		uuid: `${id}/outputs/${endpoint.type}/${endpoint.index}`,
+		endpoint: 'Rectangle',
+		source: true,
+		maxConnections: -1,
+		anchor: 'Right', // @TODO Adjust anchor based on endpoint name
+	});
+}
+
+function addConnection(connection: CanvasConnection) {
+	console.log(connection);
+	const sourceElementRef = getElementById(connection.source.id);
+	const targetElementRef = getElementById(connection.target.id);
+	if (!sourceElementRef || !targetElementRef) {
+		return;
+	}
+
+	const sourceEndpoint = getOutputEndpoint(connection.source);
+	const targetEndpoint = getInputEndpoint(connection.target);
+
+	instance.value?.connect({
+		source: sourceEndpoint,
+		target: targetEndpoint,
+		anchor: 'Continuous',
+		connector: 'Bezier',
+		overlays: [
+			{ type: 'Label', options: { label: 'X Items', location: 0.5 } },
+			{ type: 'Arrow', options: { location: 1 } },
+		],
+	});
+}
+</script>
+
+<template>
+	<div class="canvas-wrapper">
+		<div class="canvas-anchor">
+			<div ref="canvasRef" class="canvas">
+				<template v-for="element in props.elements" :key="element.id">
+					<div
+						v-if="element.type === 'node'"
+						:id="`element-${element.id}`"
+						ref="elementRefs"
+						class="element box"
+					/>
+				</template>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss">
+.canvas-wrapper {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	display: block;
+}
+
+.canvas-anchor {
+	position: fixed;
+}
+
+.canvas {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	transform-origin: 0 0;
+	z-index: -1;
+}
+
+.element {
+	position: absolute;
+}
+
+.box {
+	width: 100px;
+	height: 100px;
+	background: gray;
+}
+</style>
diff --git a/packages/editor-ui/src/components/canvas/elements/CanvasNode.vue b/packages/editor-ui/src/components/canvas/elements/CanvasNode.vue
new file mode 100644
index 0000000000000..d6b2b4e2f4c36
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/CanvasNode.vue
@@ -0,0 +1,103 @@
+<script lang="ts" setup>
+import { Handle, Position } from '@vue-flow/core';
+import { computed } from 'vue';
+import type {
+	CanvasElementData,
+	CanvasConnectionPort,
+	CanvasElementPortWithPosition,
+} from '@/types';
+import NodeIcon from '@/components/NodeIcon.vue';
+import { NodeConnectionType } from 'n8n-workflow';
+import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+
+const nodeTypesStore = useNodeTypesStore();
+
+const props = defineProps<{
+	data: CanvasElementData;
+}>();
+
+const nodeType = computed(() => {
+	return nodeTypesStore.getNodeType(props.data.type, props.data.typeVersion);
+});
+
+const inputsWithPosition = computed(() => {
+	const mainInputs = props.data.inputs.filter((input) => input.type === NodeConnectionType.Main);
+	const nonMainInputs = props.data.inputs.filter((input) => input.type !== NodeConnectionType.Main);
+
+	return [
+		...mainInputs.map(mapEndpointWithPosition(Position.Left, 'top')),
+		...nonMainInputs.map(mapEndpointWithPosition(Position.Bottom, 'left')),
+	];
+});
+
+const outputsWithPosition = computed(() => {
+	const mainOutputs = props.data.outputs.filter(
+		(output) => output.type === NodeConnectionType.Main,
+	);
+	const nonMainOutputs = props.data.outputs.filter(
+		(output) => output.type !== NodeConnectionType.Main,
+	);
+
+	return [
+		...mainOutputs.map(mapEndpointWithPosition(Position.Right, 'top')),
+		...nonMainOutputs.map(mapEndpointWithPosition(Position.Top, 'left')),
+	];
+});
+
+console.log(props);
+
+const mapEndpointWithPosition =
+	(position: Position, offsetAxis: 'top' | 'left') =>
+	(
+		endpoint: CanvasConnectionPort,
+		index: number,
+		endpoints: CanvasConnectionPort[],
+	): CanvasElementPortWithPosition => {
+		return {
+			...endpoint,
+			position,
+			offset: {
+				[offsetAxis]: `${(100 / (endpoints.length + 1)) * (index + 1)}%`,
+			},
+		};
+	};
+</script>
+
+<template>
+	<div class="canvas-node">
+		<template v-for="source in outputsWithPosition" :key="`${source.type}/${source.index}`">
+			<Handle
+				:id="`outputs/${source.type}/${source.index}`"
+				type="source"
+				:position="source.position"
+				:style="source.offset"
+			/>
+		</template>
+
+		<template v-for="target in inputsWithPosition" :key="`${target.type}/${target.index}`">
+			<Handle
+				:id="`inputs/${target.type}/${target.index}`"
+				type="target"
+				:position="target.position"
+				:style="target.offset"
+			/>
+		</template>
+
+		<NodeIcon class="node-icon" :node-type="nodeType" :size="40" :shrink="false" />
+		<!--			:color-default="iconColorDefault"-->
+		<!--			:disabled="data.disabled"-->
+	</div>
+</template>
+
+<style scoped>
+.canvas-node {
+	height: 100px;
+	width: 100px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: white;
+	border: 1px solid black;
+	border-radius: 4px;
+}
+</style>
diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts
index 42beef1efb303..1649b24aa2033 100644
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@@ -442,6 +442,7 @@ export const enum VIEWS {
 	VARIABLES = 'VariablesView',
 	NEW_WORKFLOW = 'NodeViewNew',
 	WORKFLOW = 'NodeViewExisting',
+	WORKFLOW_V2 = 'NodeViewV2',
 	DEMO = 'WorkflowDemo',
 	TEMPLATE_IMPORT = 'WorkflowTemplate',
 	WORKFLOW_ONBOARDING = 'WorkflowOnboarding',
diff --git a/packages/editor-ui/src/main.ts b/packages/editor-ui/src/main.ts
index 33cf110c2a818..047a9afb3793d 100644
--- a/packages/editor-ui/src/main.ts
+++ b/packages/editor-ui/src/main.ts
@@ -1,5 +1,8 @@
 import { createApp } from 'vue';
 
+import '@vue-flow/core/dist/style.css';
+import '@vue-flow/core/dist/theme-default.css';
+
 import 'vue-json-pretty/lib/styles.css';
 import '@jsplumb/browser-ui/css/jsplumbtoolkit.css';
 import 'n8n-design-system/css/index.scss';
diff --git a/packages/editor-ui/src/router.ts b/packages/editor-ui/src/router.ts
index edade1cd87448..0b3350a20b3eb 100644
--- a/packages/editor-ui/src/router.ts
+++ b/packages/editor-ui/src/router.ts
@@ -390,7 +390,7 @@ export const routes = [
 	},
 	{
 		path: '/workflow-v2/:workflowId',
-		name: VIEWS.WORKFLOW,
+		name: VIEWS.WORKFLOW_V2,
 		components: {
 			default: NodeViewV2,
 			header: MainHeader,
diff --git a/packages/editor-ui/src/stores/workflows.store.v2.ts b/packages/editor-ui/src/stores/workflows.store.v2.ts
index e7a3a605b86ba..17b709f9fb8d4 100644
--- a/packages/editor-ui/src/stores/workflows.store.v2.ts
+++ b/packages/editor-ui/src/stores/workflows.store.v2.ts
@@ -1,14 +1,50 @@
 import { defineStore } from 'pinia';
-import { STORES } from '@/constants';
+import {
+	ERROR_TRIGGER_NODE_TYPE,
+	PLACEHOLDER_EMPTY_WORKFLOW_ID,
+	START_NODE_TYPE,
+	STORES,
+} from '@/constants';
 import { computed, ref } from 'vue';
 import type { IWorkflowDb } from '@/Interface';
 import { useRootStore } from '@/stores/n8nRoot.store';
-import { getWorkflow } from '@/api/workflows';
+import * as workflowsApi from '@/api/workflows';
+import type { INodeType, INodeTypes } from 'n8n-workflow';
+import { deepCopy, Workflow } from 'n8n-workflow';
+import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+
+const defaultWorkflowSettings: Omit<IWorkflowDb, 'id'> & {
+	settings: NonNullable<IWorkflowDb['settings']>;
+} = {
+	name: '',
+	active: false,
+	createdAt: -1,
+	updatedAt: -1,
+	connections: {},
+	nodes: [],
+	settings: {
+		executionOrder: 'v1',
+	},
+	tags: [],
+	pinData: {},
+	versionId: '',
+	usedCredentials: [],
+};
 
 export const useWorkflowsStoreV2 = defineStore(STORES.WORKFLOWS_V2, () => {
 	const workflowsById = ref<Record<string, IWorkflowDb>>({});
 	const workflows = computed(() => Object.values(workflowsById.value));
 
+	const workflowInstancesCacheById = ref<
+		Record<
+			string,
+			{
+				key: string;
+				workflow: Workflow;
+			}
+		>
+	>({});
+
 	function addWorkflow(workflow: IWorkflowDb) {
 		workflowsById.value[workflow.id] = workflow;
 	}
@@ -19,16 +55,119 @@ export const useWorkflowsStoreV2 = defineStore(STORES.WORKFLOWS_V2, () => {
 
 	async function fetchWorkflow(id: string) {
 		const rootStore = useRootStore();
-		const workflow = await getWorkflow(rootStore.getRestApiContext, id);
+		const workflow = await workflowsApi.getWorkflow(rootStore.getRestApiContext, id);
 
 		addWorkflow(workflow);
 	}
 
+	function createNodeTypesForWorkflowObject(): INodeTypes {
+		return {
+			nodeTypes: {},
+			init: async (): Promise<void> => {},
+			getByNameAndVersion: (nodeType: string, version?: number): INodeType | undefined => {
+				const description = useNodeTypesStore().getNodeType(nodeType, version);
+				if (description === null) {
+					return undefined;
+				}
+
+				// As we do not have the trigger/poll functions available in the frontend
+				// we use the information available to figure out what are trigger nodes
+				const trigger = ((![ERROR_TRIGGER_NODE_TYPE, START_NODE_TYPE].includes(nodeType) &&
+					description.inputs.length === 0 &&
+					!description.webhooks) ||
+					undefined) as INodeType['trigger'];
+
+				return {
+					description,
+					trigger,
+				};
+			},
+		} as unknown as INodeTypes;
+	}
+
+	function createWorkflowInstance(
+		id: IWorkflowDb['id'],
+		name: IWorkflowDb['name'],
+		nodes: IWorkflowDb['nodes'],
+		connections: IWorkflowDb['connections'],
+		settings: IWorkflowDb['settings'],
+		pinData: IWorkflowDb['pinData'],
+		copyData?: boolean,
+	): Workflow {
+		const nodeTypes = createNodeTypesForWorkflowObject();
+		let workflowId: string | undefined = id;
+		if (workflowId && workflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID) {
+			workflowId = undefined;
+		}
+
+		return new Workflow({
+			id: workflowId,
+			name,
+			nodes: copyData ? deepCopy(nodes) : nodes,
+			connections: copyData ? deepCopy(connections) : connections,
+			active: false,
+			nodeTypes,
+			settings,
+			pinData,
+		});
+	}
+
+	function getWorkflowInstance(id: string, copyData?: boolean): Workflow {
+		const nodes = getWorkflowNodes(id);
+		const connections = getWorkflowConnections(id);
+		const cacheKey = JSON.stringify({ nodes, connections });
+
+		const cacheEntry = workflowInstancesCacheById.value[id];
+		if (!copyData && cacheEntry && cacheKey === cacheEntry.key) {
+			return cacheEntry.workflow;
+		}
+
+		const name = getWorkflowName(id);
+		const settings = getWorkflowSettings(id);
+		const pinData = getWorkflowPinData(id);
+		const workflowObject = createWorkflowInstance(
+			id,
+			name,
+			nodes,
+			connections,
+			settings,
+			pinData,
+			copyData,
+		);
+		workflowInstancesCacheById.value[id] = { key: cacheKey, workflow: workflowObject };
+		return workflowObject;
+	}
+
+	// Returns a shallow copy of the nodes which means that all the data on the lower
+	// levels still only gets referenced but the top level object is a different one.
+	// This has the advantage that it is very fast and does not cause problems with vuex
+	// when the workflow replaces the node-parameters.
+	function getWorkflowNodes(id: string): IWorkflowDb['nodes'] {
+		return workflowsById.value[id].nodes.map((node) => ({ ...node }));
+	}
+
+	function getWorkflowConnections(id: string): IWorkflowDb['connections'] {
+		return { ...workflowsById.value[id].connections };
+	}
+
+	function getWorkflowSettings(id: string): IWorkflowDb['settings'] {
+		return workflowsById.value[id].settings ?? { ...defaultWorkflowSettings.settings };
+	}
+
+	function getWorkflowName(id: string): IWorkflowDb['name'] {
+		return workflowsById.value[id].name;
+	}
+
+	function getWorkflowPinData(id: string): IWorkflowDb['pinData'] {
+		return workflowsById.value[id].pinData;
+	}
+
 	return {
 		workflowsById,
 		workflows,
 		addWorkflow,
 		removeWorkflow,
 		fetchWorkflow,
+		getWorkflowObject: getWorkflowInstance,
 	};
 });
diff --git a/packages/editor-ui/src/types/canvas.ts b/packages/editor-ui/src/types/canvas.ts
index 1a42fdfa3d8a4..cc919e1e4518d 100644
--- a/packages/editor-ui/src/types/canvas.ts
+++ b/packages/editor-ui/src/types/canvas.ts
@@ -1,37 +1,39 @@
 /* eslint-disable @typescript-eslint/no-redundant-type-constituents */
 import type { ConnectionTypes } from 'n8n-workflow';
-import { JsPlumbInstance } from '@jsplumb/core';
 import type { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
+import type { DefaultEdge, Node, Position } from '@vue-flow/core';
+import type { INodeUi } from '@/Interface';
 
 export type CanvasElementType = 'node' | 'note';
 
-export type CanvasConnectionEndpointType = ConnectionTypes;
+export type CanvasConnectionPortType = ConnectionTypes;
 
-export type CanvasElementEndpoint = {
-	type: CanvasConnectionEndpointType;
-	port: number;
+export type CanvasConnectionPort = {
+	type: CanvasConnectionPortType;
+	index: number;
 };
 
-export interface CanvasElement {
-	id: string;
-	type: CanvasElementType;
-	position: [number, number];
-	metadata: unknown;
-	inputs: CanvasElementEndpoint[];
-	outputs: CanvasElementEndpoint[];
+export interface CanvasElementPortWithPosition extends CanvasConnectionPort {
+	position: Position;
+	offset?: { top?: number | string; left?: number | string };
 }
 
-export interface CanvasConnectionEndpoint {
-	id: string;
-	type: CanvasConnectionEndpointType;
-	port: number;
+export interface CanvasElementData {
+	type: INodeUi['type'];
+	typeVersion: INodeUi['typeVersion'];
+	inputs: CanvasConnectionPort[];
+	outputs: CanvasConnectionPort[];
 }
 
-export interface CanvasConnection {
-	source: CanvasConnectionEndpoint;
-	target: CanvasConnectionEndpoint;
+export type CanvasElement = Node<CanvasElementData>;
+
+export interface CanvasConnectionData {
+	source: CanvasConnectionPort;
+	target: CanvasConnectionPort;
 }
 
+export type CanvasConnection = DefaultEdge<CanvasConnectionData>;
+
 export interface CanvasPluginContext {
 	instance: BrowserJsPlumbInstance;
 }
diff --git a/packages/editor-ui/src/utils/canvasUtilsV2.ts b/packages/editor-ui/src/utils/canvasUtilsV2.ts
index 8a845a0ac48ab..ef0c499082142 100644
--- a/packages/editor-ui/src/utils/canvasUtilsV2.ts
+++ b/packages/editor-ui/src/utils/canvasUtilsV2.ts
@@ -1,10 +1,7 @@
 import type { IConnections, INodeTypeDescription } from 'n8n-workflow';
 import type { INodeUi } from '@/Interface';
-import type {
-	CanvasConnection,
-	CanvasConnectionEndpointType,
-	CanvasElementEndpoint,
-} from '@/types';
+import type { CanvasConnection, CanvasConnectionPortType, CanvasConnectionPort } from '@/types';
+import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
 
 export function mapLegacyConnections(
 	legacyConnections: IConnections,
@@ -24,15 +21,20 @@ export function mapLegacyConnections(
 
 					if (fromId && toId) {
 						mappedConnections.push({
-							source: {
-								id: fromId,
-								port: fromPort,
-								type: fromConnectionType as CanvasConnectionEndpointType,
-							},
-							target: {
-								id: toId,
-								port: toPort,
-								type: toConnectionType as CanvasConnectionEndpointType,
+							id: `[${fromId}/${fromConnectionType}/${fromPort}][${toId}/${toConnectionType}/${toPort}]`,
+							source: fromId,
+							target: toId,
+							sourceHandle: `outputs/${fromConnectionType}/${fromPort}`,
+							targetHandle: `inputs/${toConnectionType}/${toPort}`,
+							data: {
+								source: {
+									index: fromPort,
+									type: fromConnectionType as CanvasConnectionPortType,
+								},
+								target: {
+									index: toPort,
+									type: toConnectionType as CanvasConnectionPortType,
+								},
 							},
 						});
 					}
@@ -46,9 +48,9 @@ export function mapLegacyConnections(
 
 export function normalizeElementEndpoints(
 	endpoints: INodeTypeDescription['inputs'],
-): CanvasElementEndpoint[] {
-	// @TODO Handle string case
+): CanvasConnectionPort[] {
 	if (typeof endpoints === 'string') {
+		console.warn('Node endpoints have not been evaluated', endpoints);
 		return [];
 	}
 
@@ -57,12 +59,12 @@ export function normalizeElementEndpoints(
 			const port = endpoints.slice(0, index).filter((e) => e === endpoint).length;
 			return {
 				type: endpoint,
-				port,
+				index: port,
 			};
 		} else {
 			return {
 				type: endpoint.type,
-				port: 0,
+				index: 0,
 			};
 		}
 	});
diff --git a/packages/editor-ui/src/views/NodeView.v2.vue b/packages/editor-ui/src/views/NodeView.v2.vue
index d2c9a4d0d413e..92f069b54ffc1 100644
--- a/packages/editor-ui/src/views/NodeView.v2.vue
+++ b/packages/editor-ui/src/views/NodeView.v2.vue
@@ -3,11 +3,11 @@ import Canvas from '@/components/canvas/Canvas.vue';
 import { computed, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useWorkflowsStoreV2 } from '@/stores/workflows.store.v2';
-import type { CanvasConnection, CanvasElement } from '@/types';
+import type { CanvasConnection, CanvasElement, CanvasElementData } from '@/types';
 import { mapLegacyConnections, normalizeElementEndpoints } from '@/utils/canvasUtilsV2';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+import { NodeHelpers } from 'n8n-workflow';
 
-const router = useRouter();
 const route = useRoute();
 
 const nodeTypesStore = useNodeTypesStore();
@@ -15,6 +15,7 @@ const workflowsStoreV2 = useWorkflowsStoreV2();
 
 const workflowId = computed<string>(() => route.params.workflowId as string);
 const workflow = computed(() => workflowsStoreV2.workflowsById[workflowId.value]);
+const workflowObject = computed(() => workflowsStoreV2.getWorkflowObject(workflowId.value));
 
 const connections = computed<CanvasConnection[]>(() =>
 	mapLegacyConnections(workflow.value?.connections ?? [], workflow.value?.nodes ?? []),
@@ -22,15 +23,44 @@ const connections = computed<CanvasConnection[]>(() =>
 
 const elements = computed<CanvasElement[]>(() => [
 	...workflow.value?.nodes.map<CanvasElement>((node) => {
-		const nodeType = nodeTypesStore.getNodeType(node.type);
+		const nodeTypeDescription = nodeTypesStore.getNodeType(node.type);
+		const workflowObjectNode = workflowObject.value.getNode(node.name);
+
+		const inputs =
+			workflowObjectNode && nodeTypeDescription
+				? normalizeElementEndpoints(
+						NodeHelpers.getNodeInputs(
+							workflowObject.value,
+							workflowObjectNode,
+							nodeTypeDescription,
+						),
+					)
+				: [];
+
+		const outputs =
+			workflowObjectNode && nodeTypeDescription
+				? normalizeElementEndpoints(
+						NodeHelpers.getNodeOutputs(
+							workflowObject.value,
+							workflowObjectNode,
+							nodeTypeDescription,
+						),
+					)
+				: [];
+
+		const data: CanvasElementData = {
+			type: node.type,
+			typeVersion: node.typeVersion,
+			inputs,
+			outputs,
+		};
 
 		return {
 			id: node.id,
-			type: 'node', // @TODO Handle "n8n-nodes-base.stickyNote" type
-			position: node.position,
-			metadata: node,
-			inputs: normalizeElementEndpoints(nodeType?.inputs ?? []),
-			outputs: normalizeElementEndpoints(nodeType?.outputs ?? []),
+			label: 'node',
+			type: 'canvas-node',
+			position: { x: node.position[0], y: node.position[1] },
+			data,
 		};
 	}),
 ]);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a7abbcb9eee3d..fb5f898a5586e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1053,6 +1053,9 @@ importers:
       '@n8n/permissions':
         specifier: workspace:*
         version: link:../@n8n/permissions
+      '@vue-flow/core':
+        specifier: ^1.33.5
+        version: 1.33.5(vue@3.4.21)
       '@vueuse/components':
         specifier: ^10.5.0
         version: 10.5.0(vue@3.4.21)
@@ -8985,7 +8988,7 @@ packages:
       ts-dedent: 2.2.0
       type-fest: 2.19.0
       vue: 3.4.21(typescript@5.4.2)
-      vue-component-type-helpers: 2.0.7
+      vue-component-type-helpers: 2.0.12
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -10332,6 +10335,20 @@ packages:
       path-browserify: 1.0.1
     dev: true
 
+  /@vue-flow/core@1.33.5(vue@3.4.21):
+    resolution: {integrity: sha512-Obo+KHmcww/NYGARMqVH1dhd42QeFzV+TNwytrjVgYCoMVCNjs/blCh437TYTsNy4vgX1NKpNwTbQrS+keurgA==}
+    peerDependencies:
+      vue: ^3.3.0
+    dependencies:
+      '@vueuse/core': 10.5.0(vue@3.4.21)
+      d3-drag: 3.0.0
+      d3-selection: 3.0.0
+      d3-zoom: 3.0.0
+      vue: 3.4.21(typescript@5.4.2)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+    dev: false
+
   /@vue/compiler-core@3.3.4:
     resolution: {integrity: sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==}
     dependencies:
@@ -12804,11 +12821,6 @@ packages:
     dependencies:
       safe-buffer: 5.2.1
 
-  /content-type@1.0.4:
-    resolution: {integrity: sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==}
-    engines: {node: '>= 0.6'}
-    dev: false
-
   /content-type@1.0.5:
     resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
     engines: {node: '>= 0.6'}
@@ -13242,6 +13254,24 @@ packages:
       yauzl: 2.10.0
     dev: true
 
+  /d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-dispatch@3.0.1:
+    resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-drag@3.0.0:
+    resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-selection: 3.0.0
+    dev: false
+
   /d3-dsv@2.0.0:
     resolution: {integrity: sha512-E+Pn8UJYx9mViuIUkoc93gJGGYut6mSDKy2+XaPwccwkRGlR+LO97L2VCCRjQivTwLHkSnAJG7yo00BWY6QM+w==}
     hasBin: true
@@ -13251,6 +13281,53 @@ packages:
       rw: 1.3.3
     dev: false
 
+  /d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-color: 3.1.0
+    dev: false
+
+  /d3-selection@3.0.0:
+    resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-transition@3.0.1(d3-selection@3.0.0):
+    resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      d3-selection: 2 - 3
+    dependencies:
+      d3-color: 3.1.0
+      d3-dispatch: 3.0.1
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-timer: 3.0.1
+    dev: false
+
+  /d3-zoom@3.0.0:
+    resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+    dev: false
+
   /d@1.0.1:
     resolution: {integrity: sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==}
     dependencies:
@@ -25663,8 +25740,8 @@ packages:
     resolution: {integrity: sha512-0vOfAtI67UjeO1G6UiX5Kd76CqaQ67wrRZiOe7UAb9Jm6GzlUr/fC7CV90XfwapJRjpCMaZFhv1V0ajWRmE9Dg==}
     dev: true
 
-  /vue-component-type-helpers@2.0.7:
-    resolution: {integrity: sha512-7e12Evdll7JcTIocojgnCgwocX4WzIYStGClBQ+QuWPinZo/vQolv2EMq4a3lg16TKfwWafLimG77bxb56UauA==}
+  /vue-component-type-helpers@2.0.12:
+    resolution: {integrity: sha512-iVJugClQdu3ZyF0N4CF3Egi+gWYfnxlIPPGtFXZG29rF3kQIuziP+k7rVGCCHiibIOQ1SlspKjrh+LRYzMpwTA==}
     dev: true
 
   /vue-demi@0.14.5(vue@3.4.21):

From ee990833349f799084e0784266c5d1b137bd0890 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Fri, 12 Apr 2024 10:41:35 +0300
Subject: [PATCH 03/22] chore: remove deprecated JSPlumb migration

---
 .../src/components/canvas/CanvasJsPlumb.vue   | 222 ------------------
 .../src/components/canvas/plugins/index.ts    |   9 -
 2 files changed, 231 deletions(-)
 delete mode 100644 packages/editor-ui/src/components/canvas/CanvasJsPlumb.vue
 delete mode 100644 packages/editor-ui/src/components/canvas/plugins/index.ts

diff --git a/packages/editor-ui/src/components/canvas/CanvasJsPlumb.vue b/packages/editor-ui/src/components/canvas/CanvasJsPlumb.vue
deleted file mode 100644
index 382f1c932ad8e..0000000000000
--- a/packages/editor-ui/src/components/canvas/CanvasJsPlumb.vue
+++ /dev/null
@@ -1,222 +0,0 @@
-<script lang="ts" setup>
-import { computed, onMounted, ref } from 'vue';
-import type { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
-import { ready, newInstance } from '@jsplumb/browser-ui';
-import type {
-	CanvasConnection,
-	CanvasConnectionPort,
-	CanvasElement,
-	CanvasConnectionPort,
-	CanvasPlugin,
-} from '@/types';
-import { canvasPan, canvasZoom } from '@/components/canvas/plugins';
-
-const props = withDefaults(
-	defineProps<{
-		elements: CanvasElement[];
-		connections: CanvasConnection[];
-		plugins: CanvasPlugin[];
-	}>(),
-	{
-		elements: () => [],
-		connections: () => [],
-		plugins: () => [canvasPan, canvasZoom],
-	},
-);
-
-const instance = ref<BrowserJsPlumbInstance | undefined>();
-
-const canvasRef = ref<HTMLDivElement | undefined>();
-const elementRefs = ref<HTMLElement[]>([]);
-const elementRefsById = computed(() =>
-	elementRefs.value.reduce<Record<string, HTMLElement>>((acc, elementRef) => {
-		acc[elementRef.id] = elementRef as HTMLElement;
-		return acc;
-	}, {}),
-);
-
-onMounted(() => {
-	ready(() => {
-		if (!canvasRef.value) {
-			return;
-		}
-
-		instance.value = newInstance({
-			container: canvasRef.value,
-		});
-
-		render();
-	});
-});
-
-function render() {
-	instance.value?.setSuspendDrawing(true);
-
-	renderElements();
-	renderConnections();
-
-	registerPlugins();
-
-	instance.value?.setSuspendDrawing(false, true);
-}
-
-function renderElements() {
-	props.elements.forEach((element) => {
-		const elementRef = getElementById(element.id);
-		if (!elementRef) {
-			return;
-		}
-
-		setElementPosition(element.id, element.position);
-
-		element.inputs.forEach((input) => {
-			addElementInputEndpoint(element.id, input);
-		});
-
-		element.outputs.forEach((output) => {
-			addElementOutputEndpoint(element.id, output);
-		});
-	});
-}
-
-function renderConnections() {
-	props.connections.forEach((connection) => {
-		addConnection(connection);
-	});
-}
-
-function registerPlugins() {
-	props.plugins.forEach((plugin) => {
-		if (!instance.value) {
-			return;
-		}
-
-		plugin({
-			instance: instance.value,
-		});
-	});
-}
-
-function getElementById(id: string) {
-	return elementRefsById.value[`element-${id}`];
-}
-
-function getInputEndpoint(endpoint: CanvasConnectionPort) {
-	return instance.value?.getEndpoint(`${endpoint.id}/inputs/${endpoint.type}/${endpoint.index}`);
-}
-
-function getOutputEndpoint(endpoint: CanvasConnectionPort) {
-	return instance.value?.getEndpoint(`${endpoint.id}/outputs/${endpoint.type}/${endpoint.index}`);
-}
-
-function setElementPosition(id: string, position: [number, number]) {
-	const elementRef = getElementById(id);
-	if (!elementRef) {
-		return;
-	}
-
-	elementRef.style.left = `${position[0]}px`;
-	elementRef.style.top = `${position[1]}px`;
-}
-
-function addElementInputEndpoint(id: string, endpoint: CanvasConnectionPort) {
-	const elementRef = getElementById(id);
-	if (!elementRef) {
-		return;
-	}
-
-	instance.value?.addEndpoint(elementRef, {
-		uuid: `${id}/inputs/${endpoint.type}/${endpoint.index}`,
-		endpoint: 'Dot',
-		target: true,
-		maxConnections: -1,
-		anchor: 'Left', // @TODO Adjust anchor based on endpoint name
-	});
-}
-
-function addElementOutputEndpoint(id: string, endpoint: CanvasConnectionPort) {
-	const elementRef = getElementById(id);
-	if (!elementRef) {
-		return;
-	}
-
-	instance.value?.addEndpoint(elementRef, {
-		uuid: `${id}/outputs/${endpoint.type}/${endpoint.index}`,
-		endpoint: 'Rectangle',
-		source: true,
-		maxConnections: -1,
-		anchor: 'Right', // @TODO Adjust anchor based on endpoint name
-	});
-}
-
-function addConnection(connection: CanvasConnection) {
-	console.log(connection);
-	const sourceElementRef = getElementById(connection.source.id);
-	const targetElementRef = getElementById(connection.target.id);
-	if (!sourceElementRef || !targetElementRef) {
-		return;
-	}
-
-	const sourceEndpoint = getOutputEndpoint(connection.source);
-	const targetEndpoint = getInputEndpoint(connection.target);
-
-	instance.value?.connect({
-		source: sourceEndpoint,
-		target: targetEndpoint,
-		anchor: 'Continuous',
-		connector: 'Bezier',
-		overlays: [
-			{ type: 'Label', options: { label: 'X Items', location: 0.5 } },
-			{ type: 'Arrow', options: { location: 1 } },
-		],
-	});
-}
-</script>
-
-<template>
-	<div class="canvas-wrapper">
-		<div class="canvas-anchor">
-			<div ref="canvasRef" class="canvas">
-				<template v-for="element in props.elements" :key="element.id">
-					<div
-						v-if="element.type === 'node'"
-						:id="`element-${element.id}`"
-						ref="elementRefs"
-						class="element box"
-					/>
-				</template>
-			</div>
-		</div>
-	</div>
-</template>
-
-<style lang="scss">
-.canvas-wrapper {
-	width: 100%;
-	height: 100%;
-	position: relative;
-	display: block;
-}
-
-.canvas-anchor {
-	position: fixed;
-}
-
-.canvas {
-	position: relative;
-	width: 100%;
-	height: 100%;
-	transform-origin: 0 0;
-	z-index: -1;
-}
-
-.element {
-	position: absolute;
-}
-
-.box {
-	width: 100px;
-	height: 100px;
-	background: gray;
-}
-</style>
diff --git a/packages/editor-ui/src/components/canvas/plugins/index.ts b/packages/editor-ui/src/components/canvas/plugins/index.ts
deleted file mode 100644
index 1c38ed369733c..0000000000000
--- a/packages/editor-ui/src/components/canvas/plugins/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { CanvasPlugin } from '@/types';
-
-export const canvasPan: CanvasPlugin = (ctx) => {
-	ctx.instance.bind('pan', (e) => {
-		console.log('pan', e);
-	});
-};
-
-export const canvasZoom: CanvasPlugin = () => {};

From e8dd041822faafa9e0c52158fe9eae96b24a322c Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Fri, 12 Apr 2024 10:50:15 +0300
Subject: [PATCH 04/22] fix: migrate to css modules

---
 packages/editor-ui/src/components/canvas/Canvas.vue | 13 ++++++++-----
 .../src/components/canvas/elements/CanvasNode.vue   | 12 +++++++-----
 packages/editor-ui/src/views/NodeView.v2.vue        | 10 ++++++----
 3 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/packages/editor-ui/src/components/canvas/Canvas.vue b/packages/editor-ui/src/components/canvas/Canvas.vue
index 5cf345a3bca68..9201494a419bb 100644
--- a/packages/editor-ui/src/components/canvas/Canvas.vue
+++ b/packages/editor-ui/src/components/canvas/Canvas.vue
@@ -1,10 +1,13 @@
 <script lang="ts" setup>
-import type { CanvasConnection, CanvasConnectionPort, CanvasElement } from '@/types';
+import type { CanvasConnection, CanvasElement } from '@/types';
 import type { EdgeChange, NodeChange } from '@vue-flow/core';
 import { useVueFlow, VueFlow } from '@vue-flow/core';
 import CanvasNode from './elements/CanvasNode.vue';
+import { useCssModule } from 'vue';
 
-const emit = defineEmits(['update:modelValue']);
+const $style = useCssModule();
+
+const $emit = defineEmits(['update:modelValue']);
 
 const props = withDefaults(
 	defineProps<{
@@ -35,7 +38,7 @@ function onConnectionsChange(e: EdgeChange[]) {
 </script>
 
 <template>
-	<div class="canvas-wrapper">
+	<div :class="$style.canvasWrapper">
 		<VueFlow
 			:id="id"
 			:nodes="elements"
@@ -57,8 +60,8 @@ function onConnectionsChange(e: EdgeChange[]) {
 	</div>
 </template>
 
-<style lang="scss">
-.canvas-wrapper {
+<style lang="scss" module>
+.canvasWrapper {
 	width: 100%;
 	height: 100%;
 	position: relative;
diff --git a/packages/editor-ui/src/components/canvas/elements/CanvasNode.vue b/packages/editor-ui/src/components/canvas/elements/CanvasNode.vue
index d6b2b4e2f4c36..70945be2efd3e 100644
--- a/packages/editor-ui/src/components/canvas/elements/CanvasNode.vue
+++ b/packages/editor-ui/src/components/canvas/elements/CanvasNode.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { Handle, Position } from '@vue-flow/core';
-import { computed } from 'vue';
+import { computed, useCssModule } from 'vue';
 import type {
 	CanvasElementData,
 	CanvasConnectionPort,
@@ -10,12 +10,14 @@ import NodeIcon from '@/components/NodeIcon.vue';
 import { NodeConnectionType } from 'n8n-workflow';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 
-const nodeTypesStore = useNodeTypesStore();
+const $style = useCssModule();
 
 const props = defineProps<{
 	data: CanvasElementData;
 }>();
 
+const nodeTypesStore = useNodeTypesStore();
+
 const nodeType = computed(() => {
 	return nodeTypesStore.getNodeType(props.data.type, props.data.typeVersion);
 });
@@ -64,7 +66,7 @@ const mapEndpointWithPosition =
 </script>
 
 <template>
-	<div class="canvas-node">
+	<div :class="$style.canvasNode">
 		<template v-for="source in outputsWithPosition" :key="`${source.type}/${source.index}`">
 			<Handle
 				:id="`outputs/${source.type}/${source.index}`"
@@ -89,8 +91,8 @@ const mapEndpointWithPosition =
 	</div>
 </template>
 
-<style scoped>
-.canvas-node {
+<style lang="scss" module>
+.canvasNode {
 	height: 100px;
 	width: 100px;
 	display: flex;
diff --git a/packages/editor-ui/src/views/NodeView.v2.vue b/packages/editor-ui/src/views/NodeView.v2.vue
index 92f069b54ffc1..5544c49abded1 100644
--- a/packages/editor-ui/src/views/NodeView.v2.vue
+++ b/packages/editor-ui/src/views/NodeView.v2.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Canvas from '@/components/canvas/Canvas.vue';
-import { computed, onMounted } from 'vue';
+import { computed, onMounted, useCssModule } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useWorkflowsStoreV2 } from '@/stores/workflows.store.v2';
 import type { CanvasConnection, CanvasElement, CanvasElementData } from '@/types';
@@ -8,6 +8,8 @@ import { mapLegacyConnections, normalizeElementEndpoints } from '@/utils/canvasU
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { NodeHelpers } from 'n8n-workflow';
 
+const $style = useCssModule();
+
 const route = useRoute();
 
 const nodeTypesStore = useNodeTypesStore();
@@ -77,13 +79,13 @@ async function initialize() {
 </script>
 
 <template>
-	<div id="node-view">
+	<div :class="$style.nodeView">
 		<Canvas v-if="workflow" :elements="elements" :connections="connections" />
 	</div>
 </template>
 
-<style lang="scss">
-#node-view {
+<style lang="scss" module>
+.nodeView {
 	display: block;
 	position: relative;
 	width: 100%;

From a534fdbdb43fa44489468fc17b095500480cbc9b Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Fri, 12 Apr 2024 11:34:03 +0300
Subject: [PATCH 05/22] feat: add background, minimap, controls

---
 packages/editor-ui/package.json               |  3 ++
 .../src/components/canvas/Canvas.vue          | 23 ++++++++-
 packages/editor-ui/src/main.ts                |  2 +
 pnpm-lock.yaml                                | 47 +++++++++++++++++--
 4 files changed, 70 insertions(+), 5 deletions(-)

diff --git a/packages/editor-ui/package.json b/packages/editor-ui/package.json
index de3fcaf133424..ed28f8d9552c1 100644
--- a/packages/editor-ui/package.json
+++ b/packages/editor-ui/package.json
@@ -45,7 +45,10 @@
     "@n8n/chat": "workspace:*",
     "@n8n/codemirror-lang-sql": "^1.0.2",
     "@n8n/permissions": "workspace:*",
+    "@vue-flow/background": "^1.3.0",
+    "@vue-flow/controls": "^1.1.1",
     "@vue-flow/core": "^1.33.5",
+    "@vue-flow/minimap": "^1.4.0",
     "@vueuse/components": "^10.5.0",
     "@vueuse/core": "^10.5.0",
     "axios": "1.6.7",
diff --git a/packages/editor-ui/src/components/canvas/Canvas.vue b/packages/editor-ui/src/components/canvas/Canvas.vue
index 9201494a419bb..2781889cb0e83 100644
--- a/packages/editor-ui/src/components/canvas/Canvas.vue
+++ b/packages/editor-ui/src/components/canvas/Canvas.vue
@@ -2,6 +2,9 @@
 import type { CanvasConnection, CanvasElement } from '@/types';
 import type { EdgeChange, NodeChange } from '@vue-flow/core';
 import { useVueFlow, VueFlow } from '@vue-flow/core';
+import { Background } from '@vue-flow/background';
+import { ControlButton, Controls } from '@vue-flow/controls';
+import { MiniMap } from '@vue-flow/minimap';
 import CanvasNode from './elements/CanvasNode.vue';
 import { useCssModule } from 'vue';
 
@@ -22,7 +25,7 @@ const props = withDefaults(
 	},
 );
 
-const { onInit } = useVueFlow({ id: props.id });
+const { onInit, setViewport } = useVueFlow({ id: props.id });
 
 onInit((instance) => {
 	console.log(instance);
@@ -35,6 +38,10 @@ function onNodesChange(e: NodeChange[]) {
 function onConnectionsChange(e: EdgeChange[]) {
 	console.log('onConnectionsChange', e);
 }
+
+async function resetViewport() {
+	await setViewport({ x: 0, y: 0, zoom: 1 });
+}
 </script>
 
 <template>
@@ -43,8 +50,10 @@ function onConnectionsChange(e: EdgeChange[]) {
 			:id="id"
 			:nodes="elements"
 			:edges="connections"
-			fit-view-on-init
 			:apply-changes="false"
+			fit-view-on-init
+			:min-zoom="0.2"
+			:max-zoom="4"
 			@nodes-change="onNodesChange"
 			@edges-change="onConnectionsChange"
 		>
@@ -56,6 +65,12 @@ function onConnectionsChange(e: EdgeChange[]) {
 			<!--			<template #edge-special="specialEdgeProps">-->
 			<!--				<SpecialEdge v-bind="specialEdgeProps" />-->
 			<!--			</template>-->
+
+			<Background pattern-color="#aaa" :gap="16" />
+
+			<MiniMap />
+
+			<Controls :class="$style.canvasControls" position="bottom-left"></Controls>
 		</VueFlow>
 	</div>
 </template>
@@ -67,4 +82,8 @@ function onConnectionsChange(e: EdgeChange[]) {
 	position: relative;
 	display: block;
 }
+
+.canvasControls {
+	display: flex;
+}
 </style>
diff --git a/packages/editor-ui/src/main.ts b/packages/editor-ui/src/main.ts
index 047a9afb3793d..591bd01d4fa0d 100644
--- a/packages/editor-ui/src/main.ts
+++ b/packages/editor-ui/src/main.ts
@@ -2,6 +2,8 @@ import { createApp } from 'vue';
 
 import '@vue-flow/core/dist/style.css';
 import '@vue-flow/core/dist/theme-default.css';
+import '@vue-flow/controls/dist/style.css';
+import '@vue-flow/minimap/dist/style.css';
 
 import 'vue-json-pretty/lib/styles.css';
 import '@jsplumb/browser-ui/css/jsplumbtoolkit.css';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fb5f898a5586e..cb06c986ae96a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1053,9 +1053,18 @@ importers:
       '@n8n/permissions':
         specifier: workspace:*
         version: link:../@n8n/permissions
+      '@vue-flow/background':
+        specifier: ^1.3.0
+        version: 1.3.0(@vue-flow/core@1.33.5)(vue@3.4.21)
+      '@vue-flow/controls':
+        specifier: ^1.1.1
+        version: 1.1.1(@vue-flow/core@1.33.5)(vue@3.4.21)
       '@vue-flow/core':
         specifier: ^1.33.5
         version: 1.33.5(vue@3.4.21)
+      '@vue-flow/minimap':
+        specifier: ^1.4.0
+        version: 1.4.0(@vue-flow/core@1.33.5)(vue@3.4.21)
       '@vueuse/components':
         specifier: ^10.5.0
         version: 10.5.0(vue@3.4.21)
@@ -8988,7 +8997,7 @@ packages:
       ts-dedent: 2.2.0
       type-fest: 2.19.0
       vue: 3.4.21(typescript@5.4.2)
-      vue-component-type-helpers: 2.0.12
+      vue-component-type-helpers: 2.0.13
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -10335,6 +10344,26 @@ packages:
       path-browserify: 1.0.1
     dev: true
 
+  /@vue-flow/background@1.3.0(@vue-flow/core@1.33.5)(vue@3.4.21):
+    resolution: {integrity: sha512-fu/8s9wzSOQIitnSTI10XT3bzTtagh4h8EF2SWwtlDklOZjAaKy75lqv4htHa3wigy/r4LGCOGwLw3Pk88/AxA==}
+    peerDependencies:
+      '@vue-flow/core': ^1.23.0
+      vue: ^3.3.0
+    dependencies:
+      '@vue-flow/core': 1.33.5(vue@3.4.21)
+      vue: 3.4.21(typescript@5.4.2)
+    dev: false
+
+  /@vue-flow/controls@1.1.1(@vue-flow/core@1.33.5)(vue@3.4.21):
+    resolution: {integrity: sha512-TCoRD5aYZQsM/N7QlPJcIILg1Gxm0O/zoUikxaeadcom1OlKFHutY72agsySJEWM6fTlyb7w8DYCbB4T8YbFoQ==}
+    peerDependencies:
+      '@vue-flow/core': ^1.23.0
+      vue: ^3.3.0
+    dependencies:
+      '@vue-flow/core': 1.33.5(vue@3.4.21)
+      vue: 3.4.21(typescript@5.4.2)
+    dev: false
+
   /@vue-flow/core@1.33.5(vue@3.4.21):
     resolution: {integrity: sha512-Obo+KHmcww/NYGARMqVH1dhd42QeFzV+TNwytrjVgYCoMVCNjs/blCh437TYTsNy4vgX1NKpNwTbQrS+keurgA==}
     peerDependencies:
@@ -10349,6 +10378,18 @@ packages:
       - '@vue/composition-api'
     dev: false
 
+  /@vue-flow/minimap@1.4.0(@vue-flow/core@1.33.5)(vue@3.4.21):
+    resolution: {integrity: sha512-GetmN8uOQxIx4ja85VDnIwpZO5SnGIOfYSqUw8MRMbc8CdACun2M2e3FRaMZRaWapclU2ssXms4xHMWrA3YWpw==}
+    peerDependencies:
+      '@vue-flow/core': ^1.23.0
+      vue: ^3.3.0
+    dependencies:
+      '@vue-flow/core': 1.33.5(vue@3.4.21)
+      d3-selection: 3.0.0
+      d3-zoom: 3.0.0
+      vue: 3.4.21(typescript@5.4.2)
+    dev: false
+
   /@vue/compiler-core@3.3.4:
     resolution: {integrity: sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==}
     dependencies:
@@ -25740,8 +25781,8 @@ packages:
     resolution: {integrity: sha512-0vOfAtI67UjeO1G6UiX5Kd76CqaQ67wrRZiOe7UAb9Jm6GzlUr/fC7CV90XfwapJRjpCMaZFhv1V0ajWRmE9Dg==}
     dev: true
 
-  /vue-component-type-helpers@2.0.12:
-    resolution: {integrity: sha512-iVJugClQdu3ZyF0N4CF3Egi+gWYfnxlIPPGtFXZG29rF3kQIuziP+k7rVGCCHiibIOQ1SlspKjrh+LRYzMpwTA==}
+  /vue-component-type-helpers@2.0.13:
+    resolution: {integrity: sha512-xNO5B7DstNWETnoYflLkVgh8dK8h2ZDgxY1M2O0zrqGeBNq5yAZ8a10yCS9+HnixouNGYNX+ggU9MQQq86HTpg==}
     dev: true
 
   /vue-demi@0.14.5(vue@3.4.21):

From cd41d08d7ac43b66e003ddfc77198b4ee1705ad1 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Fri, 12 Apr 2024 11:53:01 +0300
Subject: [PATCH 06/22] fix: remove unused function

---
 packages/editor-ui/src/components/canvas/Canvas.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/editor-ui/src/components/canvas/Canvas.vue b/packages/editor-ui/src/components/canvas/Canvas.vue
index 2781889cb0e83..fef7b60770fd1 100644
--- a/packages/editor-ui/src/components/canvas/Canvas.vue
+++ b/packages/editor-ui/src/components/canvas/Canvas.vue
@@ -38,10 +38,6 @@ function onNodesChange(e: NodeChange[]) {
 function onConnectionsChange(e: EdgeChange[]) {
 	console.log('onConnectionsChange', e);
 }
-
-async function resetViewport() {
-	await setViewport({ x: 0, y: 0, zoom: 1 });
-}
 </script>
 
 <template>

From 242f0dabc7fc94eadda8a0b9c301f29f3979ee07 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Tue, 16 Apr 2024 10:45:36 +0200
Subject: [PATCH 07/22] feat: update main and non-main inputs and outputs

---
 .../src/components/canvas/Canvas.vue          |   6 +-
 .../components/canvas/elements/CanvasNode.vue | 102 ++++++++++++++----
 packages/editor-ui/src/types/canvas.ts        |   1 +
 packages/editor-ui/src/utils/canvasUtilsV2.ts |   1 +
 4 files changed, 85 insertions(+), 25 deletions(-)

diff --git a/packages/editor-ui/src/components/canvas/Canvas.vue b/packages/editor-ui/src/components/canvas/Canvas.vue
index fef7b60770fd1..ab303821d1f35 100644
--- a/packages/editor-ui/src/components/canvas/Canvas.vue
+++ b/packages/editor-ui/src/components/canvas/Canvas.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { CanvasConnection, CanvasElement } from '@/types';
-import type { EdgeChange, NodeChange } from '@vue-flow/core';
+import type { EdgeChange, NodeChange, PanelPositionType } from '@vue-flow/core';
 import { useVueFlow, VueFlow } from '@vue-flow/core';
 import { Background } from '@vue-flow/background';
 import { ControlButton, Controls } from '@vue-flow/controls';
@@ -17,11 +17,13 @@ const props = withDefaults(
 		id: string;
 		elements: CanvasElement[];
 		connections: CanvasConnection[];
+		controlsPosition: PanelPositionType;
 	}>(),
 	{
 		id: 'canvas',
 		elements: () => [],
 		connections: () => [],
+		controlsPosition: 'bottom-left',
 	},
 );
 
@@ -66,7 +68,7 @@ function onConnectionsChange(e: EdgeChange[]) {
 
 			<MiniMap />
 
-			<Controls :class="$style.canvasControls" position="bottom-left"></Controls>
+			<Controls :class="$style.canvasControls" :position="controlsPosition"></Controls>
 		</VueFlow>
 	</div>
 </template>
diff --git a/packages/editor-ui/src/components/canvas/elements/CanvasNode.vue b/packages/editor-ui/src/components/canvas/elements/CanvasNode.vue
index 70945be2efd3e..31821968bcd3e 100644
--- a/packages/editor-ui/src/components/canvas/elements/CanvasNode.vue
+++ b/packages/editor-ui/src/components/canvas/elements/CanvasNode.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Handle, Position } from '@vue-flow/core';
+import { Handle, Position, XYPosition } from '@vue-flow/core';
 import { computed, useCssModule } from 'vue';
 import type {
 	CanvasElementData,
@@ -7,13 +7,21 @@ import type {
 	CanvasElementPortWithPosition,
 } from '@/types';
 import NodeIcon from '@/components/NodeIcon.vue';
-import { NodeConnectionType } from 'n8n-workflow';
+import {
+	type ConnectionTypes,
+	type INodeInputConfiguration,
+	type INodeOutputConfiguration,
+	NodeConnectionType,
+	NodeHelpers,
+} from 'n8n-workflow';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+import { NODE_INSERT_SPACER_BETWEEN_INPUT_GROUPS } from '@/constants';
 
 const $style = useCssModule();
 
 const props = defineProps<{
 	data: CanvasElementData;
+	position: XYPosition;
 }>();
 
 const nodeTypesStore = useNodeTypesStore();
@@ -22,31 +30,48 @@ const nodeType = computed(() => {
 	return nodeTypesStore.getNodeType(props.data.type, props.data.typeVersion);
 });
 
-const inputsWithPosition = computed(() => {
-	const mainInputs = props.data.inputs.filter((input) => input.type === NodeConnectionType.Main);
-	const nonMainInputs = props.data.inputs.filter((input) => input.type !== NodeConnectionType.Main);
+/**
+ * Inputs
+ */
+
+const mainInputs = computed(() =>
+	props.data.inputs.filter((input) => input.type === NodeConnectionType.Main),
+);
+
+const nonMainInputs = computed(() =>
+	props.data.inputs.filter((input) => input.type !== NodeConnectionType.Main),
+);
 
+const requiredNonMainInputs = computed(() => nonMainInputs.value.filter((input) => input.required));
+
+const inputsWithPosition = computed(() => {
 	return [
-		...mainInputs.map(mapEndpointWithPosition(Position.Left, 'top')),
-		...nonMainInputs.map(mapEndpointWithPosition(Position.Bottom, 'left')),
+		...mainInputs.value.map(mapEndpointWithPosition(Position.Left, 'top')),
+		...nonMainInputs.value.map(mapEndpointWithPosition(Position.Bottom, 'left')),
 	];
 });
 
-const outputsWithPosition = computed(() => {
-	const mainOutputs = props.data.outputs.filter(
-		(output) => output.type === NodeConnectionType.Main,
-	);
-	const nonMainOutputs = props.data.outputs.filter(
-		(output) => output.type !== NodeConnectionType.Main,
-	);
+/**
+ * Outputs
+ */
+
+const mainOutputs = computed(() =>
+	props.data.outputs.filter((output) => output.type === NodeConnectionType.Main),
+);
+const nonMainOutputs = computed(() =>
+	props.data.outputs.filter((output) => output.type !== NodeConnectionType.Main),
+);
 
+const outputsWithPosition = computed(() => {
 	return [
-		...mainOutputs.map(mapEndpointWithPosition(Position.Right, 'top')),
-		...nonMainOutputs.map(mapEndpointWithPosition(Position.Top, 'left')),
+		...mainOutputs.value.map(mapEndpointWithPosition(Position.Right, 'top')),
+		...nonMainOutputs.value.map(mapEndpointWithPosition(Position.Top, 'left')),
 	];
 });
 
-console.log(props);
+/**
+ * Endpoints
+ */
 
 const mapEndpointWithPosition =
 	(position: Position, offsetAxis: 'top' | 'left') =>
@@ -63,10 +88,35 @@ const mapEndpointWithPosition =
 			},
 		};
 	};
+
+/**
+ * Styles
+ */
+
+const canvasNodeStyles = computed(() => {
+	const styles: {
+		[key: string]: string | number;
+	} = {
+		'--node-main-output-count': mainOutputs.value.length,
+	};
+
+	if (requiredNonMainInputs.value.length > 0) {
+		let spacerCount = 0;
+		if (NODE_INSERT_SPACER_BETWEEN_INPUT_GROUPS) {
+			const requiredNonMainInputsCount = requiredNonMainInputs.value.length;
+			const optionalNonMainInputsCount = nonMainInputs.value.length - requiredNonMainInputsCount;
+			spacerCount = requiredNonMainInputsCount > 0 && optionalNonMainInputsCount > 0 ? 1 : 0;
+		}
+
+		styles['--configurable-node-input-count'] = nonMainInputs.value.length + spacerCount;
+	}
+
+	return styles;
+});
 </script>
 
 <template>
-	<div :class="$style.canvasNode">
+	<div :class="$style.canvasNode" :style="canvasNodeStyles">
 		<template v-for="source in outputsWithPosition" :key="`${source.type}/${source.index}`">
 			<Handle
 				:id="`outputs/${source.type}/${source.index}`"
@@ -93,13 +143,19 @@ const mapEndpointWithPosition =
 
 <style lang="scss" module>
 .canvasNode {
-	height: 100px;
-	width: 100px;
+	--node-width: 100px;
+	--node-height: calc(100px + max(0, var(--node-main-output-count, 1) - 4) * 20px);
+
+	--configurable-node-min-input-count: 4;
+	--configurable-node-input-width: 65px;
+
+	width: var(--node-width);
+	height: var(--node-height);
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	background: white;
-	border: 1px solid black;
-	border-radius: 4px;
+	background: var(--color-canvas-node-background);
+	border: 2px solid var(--color-foreground-xdark);
+	border-radius: var(--border-radius-large);
 }
 </style>
diff --git a/packages/editor-ui/src/types/canvas.ts b/packages/editor-ui/src/types/canvas.ts
index cc919e1e4518d..99c46440e2fea 100644
--- a/packages/editor-ui/src/types/canvas.ts
+++ b/packages/editor-ui/src/types/canvas.ts
@@ -10,6 +10,7 @@ export type CanvasConnectionPortType = ConnectionTypes;
 
 export type CanvasConnectionPort = {
 	type: CanvasConnectionPortType;
+	required?: boolean;
 	index: number;
 };
 
diff --git a/packages/editor-ui/src/utils/canvasUtilsV2.ts b/packages/editor-ui/src/utils/canvasUtilsV2.ts
index ef0c499082142..a11c80dfb722c 100644
--- a/packages/editor-ui/src/utils/canvasUtilsV2.ts
+++ b/packages/editor-ui/src/utils/canvasUtilsV2.ts
@@ -65,6 +65,7 @@ export function normalizeElementEndpoints(
 			return {
 				type: endpoint.type,
 				index: 0,
+				...(endpoint.required ? { required: endpoint.required } : {}),
 			};
 		}
 	});

From b0f23476263f029c1065998038a3e21f255a0090 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Tue, 16 Apr 2024 15:31:09 +0200
Subject: [PATCH 08/22] feat: update connection mapping

---
 .../src/components/canvas/Canvas.vue          |  24 +--
 .../components/canvas/elements/CanvasNode.vue | 161 ------------------
 .../canvas/elements/edges/CanvasEdge.vue      |  66 +++++++
 .../canvas/elements/nodes/CanvasNode.vue      | 137 +++++++++++++++
 .../elements/nodes/CanvasNodeRenderer.vue     |  50 ++++++
 .../render-types/CanvasNodeConfigurable.vue   |  66 +++++++
 .../render-types/CanvasNodeConfiguration.vue  |  31 ++++
 .../nodes/render-types/CanvasNodeDefault.vue  |  50 ++++++
 .../src/composables/useNodeConnections.ts     |  47 +++++
 packages/editor-ui/src/types/canvas.ts        |   1 +
 packages/editor-ui/src/utils/canvasUtilsV2.ts |  54 +++---
 packages/editor-ui/src/views/NodeView.v2.vue  |  29 +++-
 12 files changed, 514 insertions(+), 202 deletions(-)
 delete mode 100644 packages/editor-ui/src/components/canvas/elements/CanvasNode.vue
 create mode 100644 packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue
 create mode 100644 packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
 create mode 100644 packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeRenderer.vue
 create mode 100644 packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfigurable.vue
 create mode 100644 packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfiguration.vue
 create mode 100644 packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
 create mode 100644 packages/editor-ui/src/composables/useNodeConnections.ts

diff --git a/packages/editor-ui/src/components/canvas/Canvas.vue b/packages/editor-ui/src/components/canvas/Canvas.vue
index ab303821d1f35..c136e877a74e1 100644
--- a/packages/editor-ui/src/components/canvas/Canvas.vue
+++ b/packages/editor-ui/src/components/canvas/Canvas.vue
@@ -1,11 +1,12 @@
 <script lang="ts" setup>
 import type { CanvasConnection, CanvasElement } from '@/types';
-import type { EdgeChange, NodeChange, PanelPositionType } from '@vue-flow/core';
-import { useVueFlow, VueFlow } from '@vue-flow/core';
+import type { EdgeChange, NodeChange } from '@vue-flow/core';
+import { useVueFlow, VueFlow, PanelPosition } from '@vue-flow/core';
 import { Background } from '@vue-flow/background';
-import { ControlButton, Controls } from '@vue-flow/controls';
+import { Controls } from '@vue-flow/controls';
 import { MiniMap } from '@vue-flow/minimap';
-import CanvasNode from './elements/CanvasNode.vue';
+import CanvasNode from './elements/nodes/CanvasNode.vue';
+import CanvasEdge from './elements/edges/CanvasEdge.vue';
 import { useCssModule } from 'vue';
 
 const $style = useCssModule();
@@ -14,16 +15,16 @@ const $emit = defineEmits(['update:modelValue']);
 
 const props = withDefaults(
 	defineProps<{
-		id: string;
+		id?: string;
 		elements: CanvasElement[];
 		connections: CanvasConnection[];
-		controlsPosition: PanelPositionType;
+		controlsPosition?: PanelPosition;
 	}>(),
 	{
 		id: 'canvas',
 		elements: () => [],
 		connections: () => [],
-		controlsPosition: 'bottom-left',
+		controlsPosition: PanelPosition.BottomLeft,
 	},
 );
 
@@ -59,14 +60,13 @@ function onConnectionsChange(e: EdgeChange[]) {
 				<CanvasNode v-bind="canvasNodeProps" />
 			</template>
 
-			<!--			&lt;!&ndash; bind your custom edge type to a component by using slots, slot names are always `edge-<type>` &ndash;&gt;-->
-			<!--			<template #edge-special="specialEdgeProps">-->
-			<!--				<SpecialEdge v-bind="specialEdgeProps" />-->
-			<!--			</template>-->
+			<template #edge-canvas-edge="canvasEdgeProps">
+				<CanvasEdge v-bind="canvasEdgeProps" />
+			</template>
 
 			<Background pattern-color="#aaa" :gap="16" />
 
-			<MiniMap />
+			<MiniMap pannable />
 
 			<Controls :class="$style.canvasControls" :position="controlsPosition"></Controls>
 		</VueFlow>
diff --git a/packages/editor-ui/src/components/canvas/elements/CanvasNode.vue b/packages/editor-ui/src/components/canvas/elements/CanvasNode.vue
deleted file mode 100644
index 31821968bcd3e..0000000000000
--- a/packages/editor-ui/src/components/canvas/elements/CanvasNode.vue
+++ /dev/null
@@ -1,161 +0,0 @@
-<script lang="ts" setup>
-import { Handle, Position, XYPosition } from '@vue-flow/core';
-import { computed, useCssModule } from 'vue';
-import type {
-	CanvasElementData,
-	CanvasConnectionPort,
-	CanvasElementPortWithPosition,
-} from '@/types';
-import NodeIcon from '@/components/NodeIcon.vue';
-import {
-	type ConnectionTypes,
-	type INodeInputConfiguration,
-	type INodeOutputConfiguration,
-	NodeConnectionType,
-	NodeHelpers,
-} from 'n8n-workflow';
-import { useNodeTypesStore } from '@/stores/nodeTypes.store';
-import { NODE_INSERT_SPACER_BETWEEN_INPUT_GROUPS } from '@/constants';
-
-const $style = useCssModule();
-
-const props = defineProps<{
-	data: CanvasElementData;
-	position: XYPosition;
-}>();
-
-const nodeTypesStore = useNodeTypesStore();
-
-const nodeType = computed(() => {
-	return nodeTypesStore.getNodeType(props.data.type, props.data.typeVersion);
-});
-
-/**
- * Inputs
- */
-
-const mainInputs = computed(() =>
-	props.data.inputs.filter((input) => input.type === NodeConnectionType.Main),
-);
-
-const nonMainInputs = computed(() =>
-	props.data.inputs.filter((input) => input.type !== NodeConnectionType.Main),
-);
-
-const requiredNonMainInputs = computed(() => nonMainInputs.value.filter((input) => input.required));
-
-const inputsWithPosition = computed(() => {
-	return [
-		...mainInputs.value.map(mapEndpointWithPosition(Position.Left, 'top')),
-		...nonMainInputs.value.map(mapEndpointWithPosition(Position.Bottom, 'left')),
-	];
-});
-
-/**
- * Outputs
- */
-
-const mainOutputs = computed(() =>
-	props.data.outputs.filter((output) => output.type === NodeConnectionType.Main),
-);
-const nonMainOutputs = computed(() =>
-	props.data.outputs.filter((output) => output.type !== NodeConnectionType.Main),
-);
-
-const outputsWithPosition = computed(() => {
-	return [
-		...mainOutputs.value.map(mapEndpointWithPosition(Position.Right, 'top')),
-		...nonMainOutputs.value.map(mapEndpointWithPosition(Position.Top, 'left')),
-	];
-});
-
-/**
- * Endpoints
- */
-
-const mapEndpointWithPosition =
-	(position: Position, offsetAxis: 'top' | 'left') =>
-	(
-		endpoint: CanvasConnectionPort,
-		index: number,
-		endpoints: CanvasConnectionPort[],
-	): CanvasElementPortWithPosition => {
-		return {
-			...endpoint,
-			position,
-			offset: {
-				[offsetAxis]: `${(100 / (endpoints.length + 1)) * (index + 1)}%`,
-			},
-		};
-	};
-
-/**
- * Styles
- */
-
-const canvasNodeStyles = computed(() => {
-	const styles: {
-		[key: string]: string | number;
-	} = {
-		'--node-main-output-count': mainOutputs.value.length,
-	};
-
-	if (requiredNonMainInputs.value.length > 0) {
-		let spacerCount = 0;
-		if (NODE_INSERT_SPACER_BETWEEN_INPUT_GROUPS) {
-			const requiredNonMainInputsCount = requiredNonMainInputs.value.length;
-			const optionalNonMainInputsCount = nonMainInputs.value.length - requiredNonMainInputsCount;
-			spacerCount = requiredNonMainInputsCount > 0 && optionalNonMainInputsCount > 0 ? 1 : 0;
-		}
-
-		styles['--configurable-node-input-count'] = nonMainInputs.value.length + spacerCount;
-	}
-
-	return styles;
-});
-</script>
-
-<template>
-	<div :class="$style.canvasNode" :style="canvasNodeStyles">
-		<template v-for="source in outputsWithPosition" :key="`${source.type}/${source.index}`">
-			<Handle
-				:id="`outputs/${source.type}/${source.index}`"
-				type="source"
-				:position="source.position"
-				:style="source.offset"
-			/>
-		</template>
-
-		<template v-for="target in inputsWithPosition" :key="`${target.type}/${target.index}`">
-			<Handle
-				:id="`inputs/${target.type}/${target.index}`"
-				type="target"
-				:position="target.position"
-				:style="target.offset"
-			/>
-		</template>
-
-		<NodeIcon class="node-icon" :node-type="nodeType" :size="40" :shrink="false" />
-		<!--			:color-default="iconColorDefault"-->
-		<!--			:disabled="data.disabled"-->
-	</div>
-</template>
-
-<style lang="scss" module>
-.canvasNode {
-	--node-width: 100px;
-	--node-height: calc(100px + max(0, var(--node-main-output-count, 1) - 4) * 20px);
-
-	--configurable-node-min-input-count: 4;
-	--configurable-node-input-width: 65px;
-
-	width: var(--node-width);
-	height: var(--node-height);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	background: var(--color-canvas-node-background);
-	border: 2px solid var(--color-foreground-xdark);
-	border-radius: var(--border-radius-large);
-}
-</style>
diff --git a/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue b/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue
new file mode 100644
index 0000000000000..1770935eb5610
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue
@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import { BaseEdge, getBezierPath } from '@vue-flow/core';
+import { computed } from 'vue';
+
+const props = defineProps({
+	id: {
+		type: String,
+		required: true,
+	},
+	sourceX: {
+		type: Number,
+		required: true,
+	},
+	sourceY: {
+		type: Number,
+		required: true,
+	},
+	targetX: {
+		type: Number,
+		required: true,
+	},
+	targetY: {
+		type: Number,
+		required: true,
+	},
+	sourcePosition: {
+		type: String,
+		required: true,
+	},
+	targetPosition: {
+		type: String,
+		required: true,
+	},
+	data: {
+		type: Object,
+		required: false,
+	},
+	markerEnd: {
+		type: String,
+		required: false,
+	},
+	style: {
+		type: Object,
+		required: false,
+	},
+});
+
+const path = computed(() => getBezierPath(props));
+</script>
+
+<template>
+	<BaseEdge
+		:id="id"
+		:style="style"
+		:path="path[0]"
+		:marker-end="markerEnd"
+		:label="data.text"
+		:label-x="path[1]"
+		:label-y="path[2]"
+		:label-style="{ fill: 'white' }"
+		:label-show-bg="true"
+		:label-bg-style="{ fill: 'red' }"
+		:label-bg-padding="[2, 4]"
+		:label-bg-border-radius="2"
+	/>
+</template>
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
new file mode 100644
index 0000000000000..d313d180b26cd
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
@@ -0,0 +1,137 @@
+<script lang="ts" setup>
+import { Handle, Position } from '@vue-flow/core';
+import { computed, useCssModule } from 'vue';
+import type {
+	CanvasElementData,
+	CanvasConnectionPort,
+	CanvasElementPortWithPosition,
+} from '@/types';
+import NodeIcon from '@/components/NodeIcon.vue';
+import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+import CanvasNodeRenderer from '@/components/canvas/elements/nodes/CanvasNodeRenderer.vue';
+import { useNodeConnections } from '@/composables/useNodeConnections';
+
+const $style = useCssModule();
+
+const props = defineProps<{
+	data: CanvasElementData;
+}>();
+
+const inputs = computed(() => props.data.inputs);
+const outputs = computed(() => props.data.outputs);
+
+const nodeTypesStore = useNodeTypesStore();
+
+const nodeType = computed(() => {
+	return nodeTypesStore.getNodeType(props.data.type, props.data.typeVersion);
+});
+
+const { mainInputs, nonMainInputs, mainOutputs, nonMainOutputs, requiredNonMainInputs } =
+	useNodeConnections({
+		inputs,
+		outputs,
+	});
+
+/**
+ * Inputs
+ */
+
+const inputsWithPosition = computed(() => {
+	return [
+		...mainInputs.value.map(mapEndpointWithPosition(Position.Left, 'top')),
+		...nonMainInputs.value.map(mapEndpointWithPosition(Position.Bottom, 'left')),
+	];
+});
+
+/**
+ * Outputs
+ */
+
+const outputsWithPosition = computed(() => {
+	return [
+		...mainOutputs.value.map(mapEndpointWithPosition(Position.Right, 'top')),
+		...nonMainOutputs.value.map(mapEndpointWithPosition(Position.Top, 'left')),
+	];
+});
+
+/**
+ * Endpoints
+ */
+
+const mapEndpointWithPosition =
+	(position: Position, offsetAxis: 'top' | 'left') =>
+	(
+		endpoint: CanvasConnectionPort,
+		index: number,
+		endpoints: CanvasConnectionPort[],
+	): CanvasElementPortWithPosition => {
+		return {
+			...endpoint,
+			position,
+			offset: {
+				[offsetAxis]: `${(100 / (endpoints.length + 1)) * (index + 1)}%`,
+			},
+		};
+	};
+</script>
+
+<template>
+	<div :class="$style.canvasNode">
+		<template v-for="source in outputsWithPosition" :key="`${source.type}/${source.index}`">
+			<Handle
+				:id="`outputs/${source.type}/${source.index}`"
+				:class="[$style.canvasOutputHandle, $style[`canvasOutputHandle--${source.type}`]]"
+				type="source"
+				:position="source.position"
+				:style="source.offset"
+			/>
+		</template>
+
+		<template v-for="target in inputsWithPosition" :key="`${target.type}/${target.index}`">
+			<Handle
+				:id="`inputs/${target.type}/${target.index}`"
+				:class="[$style.canvasInputHandle, $style[`canvasInputHandle--${target.type}`]]"
+				type="target"
+				:position="target.position"
+				:style="target.offset"
+			/>
+		</template>
+
+		<CanvasNodeRenderer v-if="nodeType" :node-type="nodeType" :data="data">
+			<NodeIcon :node-type="nodeType" :size="40" :shrink="false" />
+			<!--			:color-default="iconColorDefault"-->
+			<!--			:disabled="data.disabled"-->
+		</CanvasNodeRenderer>
+	</div>
+</template>
+
+<style lang="scss" module>
+.canvasNode {
+}
+
+.canvasInputHandle,
+.canvasOutputHandle {
+	background: var(--node-type-main-color);
+	border: 0;
+
+	&:hover {
+		background: var(--color-primary);
+	}
+}
+
+.canvasOutputHandle {
+	width: 14px;
+	height: 14px;
+}
+
+.canvasInputHandle {
+	width: 8px;
+	height: 20px;
+	border-radius: 0;
+}
+
+@each $node-type in $supplemental-node-types {
+	.canvasInputHandle__#{$node-type} {
+	}
+}
+</style>
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeRenderer.vue b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeRenderer.vue
new file mode 100644
index 0000000000000..5313bdaa6c3e2
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeRenderer.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import { h } from 'vue';
+import CanvasNodeDefault from '@/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue';
+import CanvasNodeConfiguration from '@/components/canvas/elements/nodes/render-types/CanvasNodeConfiguration.vue';
+import CanvasNodeConfigurable from '@/components/canvas/elements/nodes/render-types/CanvasNodeConfigurable.vue';
+import type { CanvasElementData } from '@/types';
+import type { INodeTypeDescription } from 'n8n-workflow';
+
+const props = defineProps<{
+	nodeType: INodeTypeDescription;
+	data: CanvasElementData;
+}>();
+
+const slots = defineSlots<{
+	default?: () => unknown;
+}>();
+
+const Render = () => {
+	let Component;
+	switch (props.data.renderType) {
+		case 'configurable':
+			Component = CanvasNodeConfigurable;
+			break;
+
+		case 'configuration':
+			Component = CanvasNodeConfiguration;
+			break;
+
+		case 'trigger':
+			Component = CanvasNodeDefault;
+			break;
+
+		default:
+			Component = CanvasNodeDefault;
+	}
+
+	return h(
+		Component,
+		{
+			nodeType: props.nodeType,
+			data: props.data,
+		},
+		slots.default,
+	);
+};
+</script>
+
+<template>
+	<Render />
+</template>
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfigurable.vue b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfigurable.vue
new file mode 100644
index 0000000000000..07dca8464b189
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfigurable.vue
@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import { computed, useCssModule } from 'vue';
+import type { INodeTypeDescription } from 'n8n-workflow';
+import type { CanvasElementData } from '@/types';
+import { NODE_INSERT_SPACER_BETWEEN_INPUT_GROUPS } from '@/constants';
+import { useNodeConnections } from '@/composables/useNodeConnections';
+
+const props = defineProps<{
+	nodeType: INodeTypeDescription;
+	data: CanvasElementData;
+}>();
+
+const $style = useCssModule();
+
+const inputs = computed(() => props.data.inputs);
+const outputs = computed(() => props.data.outputs);
+
+const { nonMainInputs, requiredNonMainInputs } = useNodeConnections({
+	inputs,
+	outputs,
+});
+
+const styles = computed(() => {
+	const styles: {
+		[key: string]: string | number;
+	} = {};
+
+	if (requiredNonMainInputs.value.length > 0) {
+		let spacerCount = 0;
+		if (NODE_INSERT_SPACER_BETWEEN_INPUT_GROUPS) {
+			const requiredNonMainInputsCount = requiredNonMainInputs.value.length;
+			const optionalNonMainInputsCount = nonMainInputs.value.length - requiredNonMainInputsCount;
+			spacerCount = requiredNonMainInputsCount > 0 && optionalNonMainInputsCount > 0 ? 1 : 0;
+		}
+
+		styles['--configurable-node-input-count'] = nonMainInputs.value.length + spacerCount;
+	}
+
+	return styles;
+});
+</script>
+
+<template>
+	<div :class="$style.canvasNodeConfiguration" :style="styles">
+		<slot />
+	</div>
+</template>
+
+<style lang="scss" module>
+.canvasNodeConfiguration {
+	--configurable-node-min-input-count: 4;
+	--configurable-node-input-width: 65px;
+
+	width: calc(
+		max(var(--configurable-node-input-count, 5), var(--configurable-node-min-input-count)) *
+			var(--configurable-node-input-width)
+	);
+	height: 100px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: var(--canvas-node--background, var(--color-canvas-node-background));
+	border: 2px solid var(--canvas-node--border-color, var(--color-foreground-xdark));
+	border-radius: var(--border-radius-large);
+}
+</style>
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfiguration.vue b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfiguration.vue
new file mode 100644
index 0000000000000..081fdb7a545ca
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfiguration.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { useCssModule } from 'vue';
+import type { INodeTypeDescription } from 'n8n-workflow';
+import type { CanvasElementData } from '@/types';
+
+defineProps<{
+	nodeType: INodeTypeDescription;
+	data: CanvasElementData;
+}>();
+
+const $style = useCssModule();
+</script>
+
+<template>
+	<div :class="$style.canvasNodeConfiguration">
+		<slot />
+	</div>
+</template>
+
+<style lang="scss" module>
+.canvasNodeConfiguration {
+	width: 75px;
+	height: 75px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: var(--canvas-node--background, var(--node-type-supplemental-background));
+	border: 2px solid var(--canvas-node--border-color, var(--color-foreground-dark));
+	border-radius: 50%;
+}
+</style>
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
new file mode 100644
index 0000000000000..91a27b08a4438
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import { computed, useCssModule } from 'vue';
+import type { INodeTypeDescription } from 'n8n-workflow';
+import type { CanvasElementData } from '@/types';
+import { useNodeConnections } from '@/composables/useNodeConnections';
+
+const props = defineProps<{
+	nodeType: INodeTypeDescription;
+	data: CanvasElementData;
+}>();
+
+const $style = useCssModule();
+
+const inputs = computed(() => props.data.inputs);
+const outputs = computed(() => props.data.outputs);
+
+const { mainOutputs } = useNodeConnections({
+	inputs,
+	outputs,
+});
+
+/**
+ * Styles
+ */
+
+const styles = computed(() => {
+	return {
+		'--node-main-output-count': mainOutputs.value.length,
+	};
+});
+</script>
+
+<template>
+	<div :class="$style.canvasNode" :style="styles">
+		<slot />
+	</div>
+</template>
+
+<style lang="scss" module>
+.canvasNode {
+	height: calc(100px + max(0, var(--node-main-output-count, 1) - 4) * 20px);
+	width: 100px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: var(--canvas-node--background, var(--color-canvas-node-background));
+	border: 2px solid var(--canvas-node--border-color, var(--color-foreground-xdark));
+	border-radius: var(--border-radius-large);
+}
+</style>
diff --git a/packages/editor-ui/src/composables/useNodeConnections.ts b/packages/editor-ui/src/composables/useNodeConnections.ts
new file mode 100644
index 0000000000000..9b581a40433eb
--- /dev/null
+++ b/packages/editor-ui/src/composables/useNodeConnections.ts
@@ -0,0 +1,47 @@
+import type { CanvasElementData } from '@/types';
+import type { MaybeRef } from 'vue';
+import { computed, unref } from 'vue';
+import { NodeConnectionType } from 'n8n-workflow';
+
+export function useNodeConnections({
+	inputs,
+	outputs,
+}: {
+	inputs: MaybeRef<CanvasElementData['inputs']>;
+	outputs: MaybeRef<CanvasElementData['outputs']>;
+}) {
+	/**
+	 * Inputs
+	 */
+
+	const mainInputs = computed(() =>
+		unref(inputs).filter((input) => input.type === NodeConnectionType.Main),
+	);
+
+	const nonMainInputs = computed(() =>
+		unref(inputs).filter((input) => input.type !== NodeConnectionType.Main),
+	);
+
+	const requiredNonMainInputs = computed(() =>
+		nonMainInputs.value.filter((input) => input.required),
+	);
+
+	/**
+	 * Outputs
+	 */
+
+	const mainOutputs = computed(() =>
+		unref(outputs).filter((output) => output.type === NodeConnectionType.Main),
+	);
+	const nonMainOutputs = computed(() =>
+		unref(outputs).filter((output) => output.type !== NodeConnectionType.Main),
+	);
+
+	return {
+		mainInputs,
+		nonMainInputs,
+		requiredNonMainInputs,
+		mainOutputs,
+		nonMainOutputs,
+	};
+}
diff --git a/packages/editor-ui/src/types/canvas.ts b/packages/editor-ui/src/types/canvas.ts
index 99c46440e2fea..649952d4c4af5 100644
--- a/packages/editor-ui/src/types/canvas.ts
+++ b/packages/editor-ui/src/types/canvas.ts
@@ -24,6 +24,7 @@ export interface CanvasElementData {
 	typeVersion: INodeUi['typeVersion'];
 	inputs: CanvasConnectionPort[];
 	outputs: CanvasConnectionPort[];
+	renderType: 'default' | 'trigger' | 'configuration' | 'configurable';
 }
 
 export type CanvasElement = Node<CanvasElementData>;
diff --git a/packages/editor-ui/src/utils/canvasUtilsV2.ts b/packages/editor-ui/src/utils/canvasUtilsV2.ts
index a11c80dfb722c..daa2bfd286377 100644
--- a/packages/editor-ui/src/utils/canvasUtilsV2.ts
+++ b/packages/editor-ui/src/utils/canvasUtilsV2.ts
@@ -1,7 +1,6 @@
 import type { IConnections, INodeTypeDescription } from 'n8n-workflow';
 import type { INodeUi } from '@/Interface';
 import type { CanvasConnection, CanvasConnectionPortType, CanvasConnectionPort } from '@/types';
-import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
 
 export function mapLegacyConnections(
 	legacyConnections: IConnections,
@@ -9,30 +8,34 @@ export function mapLegacyConnections(
 ): CanvasConnection[] {
 	const mappedConnections: CanvasConnection[] = [];
 
+	console.log(legacyConnections);
+
 	Object.keys(legacyConnections).forEach((fromNodeName) => {
 		const fromId = nodes.find((node) => node.name === fromNodeName)?.id;
+		const fromConnectionTypes = Object.keys(legacyConnections[fromNodeName]);
 
-		Object.keys(legacyConnections[fromNodeName]).forEach((fromConnectionType) => {
-			legacyConnections[fromNodeName][fromConnectionType].forEach((portTargets, fromPort) => {
-				portTargets.forEach((portTarget) => {
-					const toId = nodes.find((node) => node.name === portTarget.node)?.id;
-					const toPort = portTarget.index;
-					const toConnectionType = portTarget.type;
+		fromConnectionTypes.forEach((fromConnectionType) => {
+			const fromPorts = legacyConnections[fromNodeName][fromConnectionType];
+			fromPorts.forEach((toPorts, fromIndex) => {
+				toPorts.forEach((toPort) => {
+					const toId = nodes.find((node) => node.name === toPort.node)?.id;
+					const toConnectionType = toPort.type;
+					const toIndex = toPort.index;
 
 					if (fromId && toId) {
 						mappedConnections.push({
-							id: `[${fromId}/${fromConnectionType}/${fromPort}][${toId}/${toConnectionType}/${toPort}]`,
+							id: `[${fromId}/${fromConnectionType}/${fromIndex}][${toId}/${toConnectionType}/${toIndex}]`,
 							source: fromId,
 							target: toId,
-							sourceHandle: `outputs/${fromConnectionType}/${fromPort}`,
-							targetHandle: `inputs/${toConnectionType}/${toPort}`,
+							sourceHandle: `outputs/${fromConnectionType}/${fromIndex}`,
+							targetHandle: `inputs/${toConnectionType}/${toIndex}`,
 							data: {
 								source: {
-									index: fromPort,
+									index: fromIndex,
 									type: fromConnectionType as CanvasConnectionPortType,
 								},
 								target: {
-									index: toPort,
+									index: toIndex,
 									type: toConnectionType as CanvasConnectionPortType,
 								},
 							},
@@ -54,19 +57,18 @@ export function normalizeElementEndpoints(
 		return [];
 	}
 
-	return endpoints.map((endpoint, index) => {
-		if (typeof endpoint === 'string') {
-			const port = endpoints.slice(0, index).filter((e) => e === endpoint).length;
-			return {
-				type: endpoint,
-				index: port,
-			};
-		} else {
-			return {
-				type: endpoint.type,
-				index: 0,
-				...(endpoint.required ? { required: endpoint.required } : {}),
-			};
-		}
+	return endpoints.map((endpoint, endpointIndex) => {
+		const type = typeof endpoint === 'string' ? endpoint : endpoint.type;
+		const index =
+			endpoints
+				.slice(0, endpointIndex + 1)
+				.filter((e) => (typeof e === 'string' ? e : e.type) === type).length - 1;
+		const required = typeof endpoint === 'string' ? false : endpoint.required;
+
+		return {
+			type,
+			index,
+			...(required ? { required } : {}),
+		};
 	});
 }
diff --git a/packages/editor-ui/src/views/NodeView.v2.vue b/packages/editor-ui/src/views/NodeView.v2.vue
index 5544c49abded1..ac86c83e550d4 100644
--- a/packages/editor-ui/src/views/NodeView.v2.vue
+++ b/packages/editor-ui/src/views/NodeView.v2.vue
@@ -19,9 +19,18 @@ const workflowId = computed<string>(() => route.params.workflowId as string);
 const workflow = computed(() => workflowsStoreV2.workflowsById[workflowId.value]);
 const workflowObject = computed(() => workflowsStoreV2.getWorkflowObject(workflowId.value));
 
-const connections = computed<CanvasConnection[]>(() =>
-	mapLegacyConnections(workflow.value?.connections ?? [], workflow.value?.nodes ?? []),
-);
+const connections = computed<CanvasConnection[]>(() => {
+	const mappedConnections = mapLegacyConnections(
+		workflow.value?.connections ?? [],
+		workflow.value?.nodes ?? [],
+	);
+
+	return mappedConnections.map((connection) => ({
+		...connection,
+		type: 'canvas-edge',
+		updatable: true,
+	}));
+});
 
 const elements = computed<CanvasElement[]>(() => [
 	...workflow.value?.nodes.map<CanvasElement>((node) => {
@@ -50,11 +59,25 @@ const elements = computed<CanvasElement[]>(() => [
 					)
 				: [];
 
+		let renderType: CanvasElementData['renderType'] = 'default';
+		switch (true) {
+			case nodeTypesStore.isTriggerNode(node.type):
+				renderType = 'trigger';
+				break;
+			case nodeTypesStore.isConfigNode(workflowObject.value, node, node.type):
+				renderType = 'configuration';
+				break;
+			case nodeTypesStore.isConfigurableNode(workflowObject.value, node, node.type):
+				renderType = 'configurable';
+				break;
+		}
+
 		const data: CanvasElementData = {
 			type: node.type,
 			typeVersion: node.typeVersion,
 			inputs,
 			outputs,
+			renderType,
 		};
 
 		return {

From 3b0abadbe7a40a59ca6e5ec1053fdd2b6a7b5f44 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba.tuncsik@gmail.com>
Date: Tue, 16 Apr 2024 15:35:38 +0200
Subject: [PATCH 09/22] feat: Scaffolding workflow execution

---
 .../editor-ui/src/mixins/pushConnection.ts    |  3 +
 .../src/stores/workflows.store.v2.ts          | 37 +++++++++++-
 packages/editor-ui/src/views/NodeView.v2.vue  | 58 ++++++++++++++++++-
 3 files changed, 95 insertions(+), 3 deletions(-)

diff --git a/packages/editor-ui/src/mixins/pushConnection.ts b/packages/editor-ui/src/mixins/pushConnection.ts
index f92dfc10fafad..7717e65315829 100644
--- a/packages/editor-ui/src/mixins/pushConnection.ts
+++ b/packages/editor-ui/src/mixins/pushConnection.ts
@@ -40,6 +40,7 @@ import { useCollaborationStore } from '@/stores/collaboration.store';
 import { useExternalHooks } from '@/composables/useExternalHooks';
 import { useRouter } from 'vue-router';
 import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
+import { useWorkflowsStoreV2 } from '@/stores/workflows.store.v2';
 
 export const pushConnection = defineComponent({
 	setup() {
@@ -81,6 +82,7 @@ export const pushConnection = defineComponent({
 			useOrchestrationStore,
 			usePushConnectionStore,
 			useCollaborationStore,
+			useWorkflowsStoreV2,
 		),
 		pushRef(): string {
 			return this.rootStore.pushRef;
@@ -279,6 +281,7 @@ export const pushConnection = defineComponent({
 						}
 					}
 					this.workflowsStore.finishActiveExecution(pushData);
+					this.workflowsStoreV2.finishActiveExecution(receivedData.data.workflowId, pushData);
 				}
 
 				if (!this.uiStore.isActionActive('workflowRunning')) {
diff --git a/packages/editor-ui/src/stores/workflows.store.v2.ts b/packages/editor-ui/src/stores/workflows.store.v2.ts
index 17b709f9fb8d4..f41e9ebc6066d 100644
--- a/packages/editor-ui/src/stores/workflows.store.v2.ts
+++ b/packages/editor-ui/src/stores/workflows.store.v2.ts
@@ -6,10 +6,14 @@ import {
 	STORES,
 } from '@/constants';
 import { computed, ref } from 'vue';
-import type { IWorkflowDb } from '@/Interface';
+import type {
+	IPushDataExecutionFinished,
+	IPushDataUnsavedExecutionFinished,
+	IWorkflowDb,
+} from '@/Interface';
 import { useRootStore } from '@/stores/n8nRoot.store';
 import * as workflowsApi from '@/api/workflows';
-import type { INodeType, INodeTypes } from 'n8n-workflow';
+import type { INodeType, INodeTypes, ITaskData } from 'n8n-workflow';
 import { deepCopy, Workflow } from 'n8n-workflow';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 
@@ -162,6 +166,33 @@ export const useWorkflowsStoreV2 = defineStore(STORES.WORKFLOWS_V2, () => {
 		return workflowsById.value[id].pinData;
 	}
 
+	async function runWorkflow(
+		workflowId: string,
+		options: {
+			destinationNode?: string;
+			triggerNode?: string;
+			nodeData?: ITaskData;
+			source?: string;
+		},
+	) {
+		const workflow = workflowsById.value[workflowId];
+		console.log('runWorkflow', workflow);
+		console.log('options', options);
+		// TODO: Implement behavior from 'runWorkflow' in useRunWorkflow.ts using the new workflow store
+	}
+
+	function finishActiveExecution(
+		workflowId: string,
+		finishedActiveExecution: IPushDataExecutionFinished | IPushDataUnsavedExecutionFinished,
+	) {
+		const workflow = workflowsById.value[workflowId];
+		console.log('workflow', workflow);
+		console.log('finishedActiveExecution', finishedActiveExecution);
+		// TODO: Implement behavior from old workflows store
+		// Execution data should be stored in the executions store and not in the workflows store
+		// The workflow store should only be responsible for the workflow data itself
+	}
+
 	return {
 		workflowsById,
 		workflows,
@@ -169,5 +200,7 @@ export const useWorkflowsStoreV2 = defineStore(STORES.WORKFLOWS_V2, () => {
 		removeWorkflow,
 		fetchWorkflow,
 		getWorkflowObject: getWorkflowInstance,
+		runWorkflow,
+		finishActiveExecution,
 	};
 });
diff --git a/packages/editor-ui/src/views/NodeView.v2.vue b/packages/editor-ui/src/views/NodeView.v2.vue
index ac86c83e550d4..a2bd77ef6e207 100644
--- a/packages/editor-ui/src/views/NodeView.v2.vue
+++ b/packages/editor-ui/src/views/NodeView.v2.vue
@@ -1,23 +1,36 @@
 <script setup lang="ts">
 import Canvas from '@/components/canvas/Canvas.vue';
 import { computed, onMounted, useCssModule } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
 import { useWorkflowsStoreV2 } from '@/stores/workflows.store.v2';
 import type { CanvasConnection, CanvasElement, CanvasElementData } from '@/types';
 import { mapLegacyConnections, normalizeElementEndpoints } from '@/utils/canvasUtilsV2';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { NodeHelpers } from 'n8n-workflow';
+import { useUIStore } from '@/stores/ui.store';
+import KeyboardShortcutTooltip from '@/components/KeyboardShortcutTooltip.vue';
+import { useI18n } from '@/composables/useI18n';
 
 const $style = useCssModule();
 
 const route = useRoute();
+const locale = useI18n();
 
 const nodeTypesStore = useNodeTypesStore();
+const uiStore = useUIStore();
 const workflowsStoreV2 = useWorkflowsStoreV2();
 
 const workflowId = computed<string>(() => route.params.workflowId as string);
 const workflow = computed(() => workflowsStoreV2.workflowsById[workflowId.value]);
 const workflowObject = computed(() => workflowsStoreV2.getWorkflowObject(workflowId.value));
+const workflowRunning = computed(() => uiStore.isActionActive('workflowRunning'));
+const runButtonText = computed(() => {
+	if (!workflowRunning.value) {
+		return locale.baseText('nodeView.runButtonText.executeWorkflow');
+	}
+
+	return locale.baseText('nodeView.runButtonText.executingWorkflow');
+});
 
 const connections = computed<CanvasConnection[]>(() => {
 	const mappedConnections = mapLegacyConnections(
@@ -99,11 +112,28 @@ async function initialize() {
 	await workflowsStoreV2.fetchWorkflow(workflowId.value);
 	console.log(workflow.value);
 }
+
+async function onRunWorkflow() {
+	await workflowsStoreV2.runWorkflow(workflowId.value, {});
+}
 </script>
 
 <template>
 	<div :class="$style.nodeView">
 		<Canvas v-if="workflow" :elements="elements" :connections="connections" />
+		<div :class="$style.executionButtons">
+			<KeyboardShortcutTooltip :label="runButtonText" :shortcut="{ metaKey: true, keys: ['↵'] }">
+				<n8n-button
+					:loading="workflowRunning"
+					:label="runButtonText"
+					size="large"
+					icon="flask"
+					type="primary"
+					data-test-id="execute-workflow-button"
+					@click.stop="onRunWorkflow"
+				/>
+			</KeyboardShortcutTooltip>
+		</div>
 	</div>
 </template>
 
@@ -116,4 +146,30 @@ async function initialize() {
 	background-color: var(--color-canvas-background);
 	overflow: hidden;
 }
+
+.executionButtons {
+	position: absolute;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	left: 50%;
+	transform: translateX(-50%);
+	bottom: var(--spacing-l);
+	width: auto;
+
+	@media (max-width: $breakpoint-2xs) {
+		bottom: 150px;
+	}
+
+	button {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-left: 0.625rem;
+
+		&:first-child {
+			margin: 0;
+		}
+	}
+}
 </style>

From 4b756de58a6f472da2bce3c02de99578f1b6c99c Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Tue, 16 Apr 2024 16:25:57 +0200
Subject: [PATCH 10/22] feat: add handle renderer

---
 .../elements/handles/HandleRenderer.vue       | 98 +++++++++++++++++++
 .../render-types/CanvasHandleMainOutput.vue   | 21 ++++
 .../canvas/elements/nodes/CanvasNode.vue      | 52 +++-------
 packages/editor-ui/src/types/canvas.ts        |  2 +-
 4 files changed, 132 insertions(+), 41 deletions(-)
 create mode 100644 packages/editor-ui/src/components/canvas/elements/handles/HandleRenderer.vue
 create mode 100644 packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue

diff --git a/packages/editor-ui/src/components/canvas/elements/handles/HandleRenderer.vue b/packages/editor-ui/src/components/canvas/elements/handles/HandleRenderer.vue
new file mode 100644
index 0000000000000..225505611abfb
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/handles/HandleRenderer.vue
@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import { h, useCssModule } from 'vue';
+import type { CanvasConnectionPort, CanvasElementPortWithPosition } from '@/types';
+
+import { Handle } from '@vue-flow/core';
+import { NodeConnectionType } from 'n8n-workflow';
+import CanvasHandleMainOutput from '@/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue';
+
+const props = defineProps<{
+	mode: 'output' | 'input';
+	type: CanvasConnectionPort['type'];
+	index: CanvasConnectionPort['index'];
+	position: CanvasElementPortWithPosition['position'];
+	offset: CanvasElementPortWithPosition['offset'];
+}>();
+
+const $style = useCssModule();
+
+const Render = () => {
+	let Component;
+
+	if (props.type === NodeConnectionType.Main) {
+		if (props.mode === 'input') {
+			Component = CanvasHandleMainOutput;
+		} else {
+			Component = CanvasHandleMainOutput;
+		}
+	} else {
+		Component = CanvasHandleMainOutput;
+	}
+
+	return h(Component);
+};
+</script>
+
+<template>
+	<Handle
+		:id="`${mode}s/${type}/${index}`"
+		:class="[$style.handle, $style[`handle--${mode}--${type}`]]"
+		type="source"
+		:position="position"
+		:style="offset"
+	>
+	</Handle>
+</template>
+
+<style lang="scss" module>
+.handle {
+	width: 16px;
+	height: 16px;
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	border: 0;
+}
+
+.handle--input,
+.handle--output {
+	border: 0;
+}
+
+.handle--output--main,
+.handle--input--main {
+	background: var(--node-type-main-color);
+
+	&:hover {
+		background: var(--color-primary);
+	}
+}
+
+.handle--output--main {
+	width: 14px;
+	height: 14px;
+}
+
+.handle--input--main {
+	width: 8px;
+	height: 20px;
+	border-radius: 0;
+}
+
+@each $node-type in $supplemental-node-types {
+	.handle--output--#{$node-type},
+	.handle--input--#{$node-type} {
+		width: 14px;
+		height: 14px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border-radius: 0;
+		background: hsl(
+			var(--node-type-supplemental-color-h)
+				var(--node-type-supplemental-color-s)
+				var(--node-type-supplemental-color-l)
+		);
+	}
+}
+</style>
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue
new file mode 100644
index 0000000000000..7f179da2f6bd6
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { useCssModule } from 'vue';
+
+const $style = useCssModule();
+</script>
+<template>
+	<div :class="$style.mainOutputHandle" />
+</template>
+
+<style lang="scss" module>
+.mainOutputHandle {
+	width: 16px;
+	height: 16px;
+	border-radius: 100%;
+	background: var(--color-foreground-xdark);
+
+	&:hover {
+		background: var(--color-primary);
+	}
+}
+</style>
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
index d313d180b26cd..6ff08974eaef4 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
@@ -9,6 +9,7 @@ import type {
 import NodeIcon from '@/components/NodeIcon.vue';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import CanvasNodeRenderer from '@/components/canvas/elements/nodes/CanvasNodeRenderer.vue';
+import HandleRenderer from '@/components/canvas/elements/handles/HandleRenderer.vue';
 import { useNodeConnections } from '@/composables/useNodeConnections';
 
 const $style = useCssModule();
@@ -78,22 +79,22 @@ const mapEndpointWithPosition =
 <template>
 	<div :class="$style.canvasNode">
 		<template v-for="source in outputsWithPosition" :key="`${source.type}/${source.index}`">
-			<Handle
-				:id="`outputs/${source.type}/${source.index}`"
-				:class="[$style.canvasOutputHandle, $style[`canvasOutputHandle--${source.type}`]]"
-				type="source"
+			<HandleRenderer
+				mode="output"
+				:type="source.type"
+				:index="source.index"
 				:position="source.position"
-				:style="source.offset"
+				:offset="source.offset"
 			/>
 		</template>
 
 		<template v-for="target in inputsWithPosition" :key="`${target.type}/${target.index}`">
-			<Handle
-				:id="`inputs/${target.type}/${target.index}`"
-				:class="[$style.canvasInputHandle, $style[`canvasInputHandle--${target.type}`]]"
-				type="target"
+			<HandleRenderer
+				mode="input"
+				:type="target.type"
+				:index="target.index"
 				:position="target.position"
-				:style="target.offset"
+				:offset="target.offset"
 			/>
 		</template>
 
@@ -105,33 +106,4 @@ const mapEndpointWithPosition =
 	</div>
 </template>
 
-<style lang="scss" module>
-.canvasNode {
-}
-
-.canvasInputHandle,
-.canvasOutputHandle {
-	background: var(--node-type-main-color);
-	border: 0;
-
-	&:hover {
-		background: var(--color-primary);
-	}
-}
-
-.canvasOutputHandle {
-	width: 14px;
-	height: 14px;
-}
-
-.canvasInputHandle {
-	width: 8px;
-	height: 20px;
-	border-radius: 0;
-}
-
-@each $node-type in $supplemental-node-types {
-	.canvasInputHandle__#{$node-type} {
-	}
-}
-</style>
+<style lang="scss" module></style>
diff --git a/packages/editor-ui/src/types/canvas.ts b/packages/editor-ui/src/types/canvas.ts
index 649952d4c4af5..0beee140a73aa 100644
--- a/packages/editor-ui/src/types/canvas.ts
+++ b/packages/editor-ui/src/types/canvas.ts
@@ -16,7 +16,7 @@ export type CanvasConnectionPort = {
 
 export interface CanvasElementPortWithPosition extends CanvasConnectionPort {
 	position: Position;
-	offset?: { top?: number | string; left?: number | string };
+	offset?: { top?: string; left?: string };
 }
 
 export interface CanvasElementData {

From 8d2a5c9c6f7d4aba974a5533ff239f8f279d26fe Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba.tuncsik@gmail.com>
Date: Tue, 16 Apr 2024 16:29:17 +0200
Subject: [PATCH 11/22] feat: Add pinned data length as label

---
 packages/editor-ui/src/types/canvas.ts        |  1 +
 packages/editor-ui/src/utils/canvasUtilsV2.ts |  1 +
 packages/editor-ui/src/views/NodeView.v2.vue  | 19 ++++++++++++++-----
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/editor-ui/src/types/canvas.ts b/packages/editor-ui/src/types/canvas.ts
index 0beee140a73aa..5fa6a5bf44cf4 100644
--- a/packages/editor-ui/src/types/canvas.ts
+++ b/packages/editor-ui/src/types/canvas.ts
@@ -32,6 +32,7 @@ export type CanvasElement = Node<CanvasElementData>;
 export interface CanvasConnectionData {
 	source: CanvasConnectionPort;
 	target: CanvasConnectionPort;
+	fromNodeName?: string;
 }
 
 export type CanvasConnection = DefaultEdge<CanvasConnectionData>;
diff --git a/packages/editor-ui/src/utils/canvasUtilsV2.ts b/packages/editor-ui/src/utils/canvasUtilsV2.ts
index daa2bfd286377..18eb328d0dea8 100644
--- a/packages/editor-ui/src/utils/canvasUtilsV2.ts
+++ b/packages/editor-ui/src/utils/canvasUtilsV2.ts
@@ -30,6 +30,7 @@ export function mapLegacyConnections(
 							sourceHandle: `outputs/${fromConnectionType}/${fromIndex}`,
 							targetHandle: `inputs/${toConnectionType}/${toIndex}`,
 							data: {
+								fromNodeName,
 								source: {
 									index: fromIndex,
 									type: fromConnectionType as CanvasConnectionPortType,
diff --git a/packages/editor-ui/src/views/NodeView.v2.vue b/packages/editor-ui/src/views/NodeView.v2.vue
index a2bd77ef6e207..3aa9846c20ea2 100644
--- a/packages/editor-ui/src/views/NodeView.v2.vue
+++ b/packages/editor-ui/src/views/NodeView.v2.vue
@@ -38,11 +38,20 @@ const connections = computed<CanvasConnection[]>(() => {
 		workflow.value?.nodes ?? [],
 	);
 
-	return mappedConnections.map((connection) => ({
-		...connection,
-		type: 'canvas-edge',
-		updatable: true,
-	}));
+	return mappedConnections.map((connection) => {
+		const pinDataLength = workflow.value.pinData?.[connection.data?.fromNodeName ?? '']?.length;
+		return {
+			...connection,
+			type: 'canvas-edge',
+			updatable: true,
+			label: pinDataLength
+				? locale.baseText('ndv.output.items', {
+						adjustToNumber: pinDataLength,
+						interpolate: { count: String(pinDataLength) },
+					})
+				: '',
+		};
+	});
 });
 
 const elements = computed<CanvasElement[]>(() => [

From ea9bc5f013898dd799c087671b0f6a10a960be75 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Mon, 22 Apr 2024 14:50:19 +0300
Subject: [PATCH 12/22] feat: add multiple handle renderers and handle labels

---
 packages/editor-ui/package.json               |   1 +
 .../components/MainHeaderV2/MainHeaderV2.vue  | 213 +++++
 .../MainHeaderV2/WorkflowDetailsV2.vue        | 786 ++++++++++++++++++
 .../src/components/canvas/Canvas.vue          |  95 ++-
 .../src/components/canvas/WorkflowCanvas.vue  | 184 ++++
 .../canvas/elements/edges/CanvasEdge.vue      |  28 +-
 .../elements/handles/HandleRenderer.vue       |  64 +-
 .../render-types/CanvasHandleMainInput.vue    |  38 +
 .../render-types/CanvasHandleMainOutput.vue   |  84 +-
 .../render-types/CanvasHandleNonMain.vue      |  48 ++
 .../canvas/elements/nodes/CanvasNode.vue      |  34 +-
 .../elements/nodes/CanvasNodeToolbar.vue      |  86 ++
 .../nodes/render-types/CanvasNodeDefault.vue  |   2 +-
 packages/editor-ui/src/router.ts              |   3 +-
 packages/editor-ui/src/types/canvas.ts        |   1 +
 packages/editor-ui/src/utils/canvasUtilsV2.ts |   4 +-
 packages/editor-ui/src/views/NodeView.v2.vue  | 107 +--
 pnpm-lock.yaml                                |  11 +
 18 files changed, 1593 insertions(+), 196 deletions(-)
 create mode 100644 packages/editor-ui/src/components/MainHeaderV2/MainHeaderV2.vue
 create mode 100644 packages/editor-ui/src/components/MainHeaderV2/WorkflowDetailsV2.vue
 create mode 100644 packages/editor-ui/src/components/canvas/WorkflowCanvas.vue
 create mode 100644 packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainInput.vue
 create mode 100644 packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMain.vue
 create mode 100644 packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.vue

diff --git a/packages/editor-ui/package.json b/packages/editor-ui/package.json
index 199b2ad70620f..85ac1cf3e8bd2 100644
--- a/packages/editor-ui/package.json
+++ b/packages/editor-ui/package.json
@@ -49,6 +49,7 @@
     "@vue-flow/controls": "^1.1.1",
     "@vue-flow/core": "^1.33.5",
     "@vue-flow/minimap": "^1.4.0",
+    "@vue-flow/node-toolbar": "^1.1.0",
     "@vueuse/components": "^10.5.0",
     "@vueuse/core": "^10.5.0",
     "axios": "1.6.7",
diff --git a/packages/editor-ui/src/components/MainHeaderV2/MainHeaderV2.vue b/packages/editor-ui/src/components/MainHeaderV2/MainHeaderV2.vue
new file mode 100644
index 0000000000000..671357090651a
--- /dev/null
+++ b/packages/editor-ui/src/components/MainHeaderV2/MainHeaderV2.vue
@@ -0,0 +1,213 @@
+<template>
+	<div>
+		<div :class="{ 'main-header': true, expanded: !uiStore.sidebarMenuCollapsed }">
+			<div class="top-menu">
+				<WorkflowDetailsV2 :read-only="readOnly" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import WorkflowDetailsV2 from '@/components/MainHeaderV2/WorkflowDetailsV2.vue';
+
+import { useNDVStore } from '@/stores/ndv.store';
+import { useSourceControlStore } from '@/stores/sourceControl.store';
+import { useUIStore } from '@/stores/ui.store';
+
+const props = defineProps<{
+	readOnly?: boolean;
+}>();
+
+const ndvStore = useNDVStore();
+const uiStore = useUIStore();
+const sourceControlStore = useSourceControlStore();
+</script>
+
+<script lang="ts">
+// import { defineComponent } from 'vue';
+// import type { Route, RouteLocationRaw } from 'vue-router';
+// import { mapStores } from 'pinia';
+// import type { ExecutionSummary } from 'n8n-workflow';
+// import { pushConnection } from '@/mixins/pushConnection';
+// import WorkflowDetails from '@/components/MainHeader/WorkflowDetails.vue';
+// import TabBar from '@/components/MainHeader/TabBar.vue';
+// import {
+// 	MAIN_HEADER_TABS,
+// 	PLACEHOLDER_EMPTY_WORKFLOW_ID,
+// 	STICKY_NODE_TYPE,
+// 	VIEWS,
+// } from '@/constants';
+// import type { INodeUi, ITabBarItem } from '@/Interface';
+// import { useNDVStore } from '@/stores/ndv.store';
+// import { useSourceControlStore } from '@/stores/sourceControl.store';
+// import { useUIStore } from '@/stores/ui.store';
+//
+// export default defineComponent({
+// 	name: 'MainHeader',
+// 	components: {
+// 		WorkflowDetails,
+// 		TabBar,
+// 	},
+// 	mixins: [pushConnection],
+// 	setup(props, ctx) {
+// 		return {
+// 			// eslint-disable-next-line @typescript-eslint/no-misused-promises
+// 			...pushConnection.setup?.(props, ctx),
+// 		};
+// 	},
+// 	data() {
+// 		return {
+// 			activeHeaderTab: MAIN_HEADER_TABS.WORKFLOW,
+// 			workflowToReturnTo: '',
+// 			dirtyState: false,
+// 		};
+// 	},
+// 	computed: {
+// 		...mapStores(useNDVStore, useUIStore, useSourceControlStore),
+// 		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);
+// 		},
+// 		workflowName(): string {
+// 			return this.workflowsStore.workflowName;
+// 		},
+// 		currentWorkflow(): string {
+// 			return this.$route.params.name || this.workflowsStore.workflowId;
+// 		},
+// 		onWorkflowPage(): boolean {
+// 			return (
+// 				this.$route.meta &&
+// 				(this.$route.meta.nodeView || this.$route.meta.keepWorkflowAlive === true)
+// 			);
+// 		},
+// 		activeExecution(): ExecutionSummary {
+// 			return this.workflowsStore.activeWorkflowExecution as ExecutionSummary;
+// 		},
+// 		readOnly(): boolean {
+// 			return this.sourceControlStore.preferences.branchReadOnly;
+// 		},
+// 	},
+// 	watch: {
+// 		$route(to, from) {
+// 			this.syncTabsWithRoute(to);
+// 		},
+// 	},
+// 	mounted() {
+// 		this.dirtyState = this.uiStore.stateIsDirty;
+// 		this.syncTabsWithRoute(this.$route);
+// 	},
+// 	methods: {
+// 		syncTabsWithRoute(route: Route): void {
+// 			if (
+// 				route.name === VIEWS.EXECUTION_HOME ||
+// 				route.name === VIEWS.WORKFLOW_EXECUTIONS ||
+// 				route.name === VIEWS.EXECUTION_PREVIEW
+// 			) {
+// 				this.activeHeaderTab = MAIN_HEADER_TABS.EXECUTIONS;
+// 			} else if (
+// 				route.name === VIEWS.WORKFLOW ||
+// 				route.name === VIEWS.NEW_WORKFLOW ||
+// 				route.name === VIEWS.EXECUTION_DEBUG
+// 			) {
+// 				this.activeHeaderTab = MAIN_HEADER_TABS.WORKFLOW;
+// 			}
+// 			const workflowName = route.params.name;
+// 			if (workflowName !== 'new') {
+// 				this.workflowToReturnTo = workflowName;
+// 			}
+// 		},
+// 		onTabSelected(tab: MAIN_HEADER_TABS, event: MouseEvent) {
+// 			const openInNewTab = event.ctrlKey || event.metaKey;
+//
+// 			switch (tab) {
+// 				case MAIN_HEADER_TABS.WORKFLOW:
+// 					void this.navigateToWorkflowView(openInNewTab);
+// 					break;
+//
+// 				case MAIN_HEADER_TABS.EXECUTIONS:
+// 					void this.navigateToExecutionsView(openInNewTab);
+// 					break;
+//
+// 				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 };
+// 			}
+//
+// 			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 routeToNavigateTo: RouteLocationRaw = this.activeExecution
+// 				? {
+// 						name: VIEWS.EXECUTION_PREVIEW,
+// 						params: { name: routeWorkflowId, executionId: this.activeExecution.id },
+// 					}
+// 				: {
+// 						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);
+// 			}
+// 		},
+// 	},
+// });
+</script>
+
+<style lang="scss">
+.main-header {
+	background-color: var(--color-background-xlight);
+	height: $header-height;
+	width: 100%;
+	box-sizing: border-box;
+	border-bottom: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
+}
+
+.top-menu {
+	position: relative;
+	display: flex;
+	align-items: center;
+	font-size: 0.9em;
+	height: $header-height;
+	font-weight: 400;
+	padding: 0 var(--spacing-m) 0 var(--spacing-xs);
+}
+</style>
diff --git a/packages/editor-ui/src/components/MainHeaderV2/WorkflowDetailsV2.vue b/packages/editor-ui/src/components/MainHeaderV2/WorkflowDetailsV2.vue
new file mode 100644
index 0000000000000..72b891301d5d4
--- /dev/null
+++ b/packages/editor-ui/src/components/MainHeaderV2/WorkflowDetailsV2.vue
@@ -0,0 +1,786 @@
+<script lang="ts" setup>
+import {
+	DUPLICATE_MODAL_KEY,
+	EnterpriseEditionFeature,
+	MAX_WORKFLOW_NAME_LENGTH,
+	MODAL_CONFIRM,
+	PLACEHOLDER_EMPTY_WORKFLOW_ID,
+	SOURCE_CONTROL_PUSH_MODAL_KEY,
+	VIEWS,
+	WORKFLOW_MENU_ACTIONS,
+	WORKFLOW_SETTINGS_MODAL_KEY,
+	WORKFLOW_SHARE_MODAL_KEY,
+} from '@/constants';
+
+import ShortenName from '@/components/ShortenName.vue';
+import TagsContainer from '@/components/TagsContainer.vue';
+import PushConnectionTracker from '@/components/PushConnectionTracker.vue';
+import WorkflowActivator from '@/components/WorkflowActivator.vue';
+import SaveButton from '@/components/SaveButton.vue';
+import TagsDropdown from '@/components/TagsDropdown.vue';
+import InlineTextEdit from '@/components/InlineTextEdit.vue';
+import BreakpointsObserver from '@/components/BreakpointsObserver.vue';
+import CollaborationPane from '@/components/MainHeader/CollaborationPane.vue';
+
+import { useRootStore } from '@/stores/n8nRoot.store';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useSourceControlStore } from '@/stores/sourceControl.store';
+import { useTagsStore } from '@/stores/tags.store';
+import { useUIStore } from '@/stores/ui.store';
+import { useUsageStore } from '@/stores/usage.store';
+import { useUsersStore } from '@/stores/users.store';
+import { useWorkflowsStore } from '@/stores/workflows.store';
+
+import { saveAs } from 'file-saver';
+import { useTitleChange } from '@/composables/useTitleChange';
+import { useMessage } from '@/composables/useMessage';
+import { useToast } from '@/composables/useToast';
+
+import type { IPermissions } from '@/permissions';
+import { getWorkflowPermissions } from '@/permissions';
+import { createEventBus } from 'n8n-design-system/utils';
+import { nodeViewEventBus } from '@/event-bus';
+import { hasPermission } from '@/rbac/permissions';
+import { useCanvasStore } from '@/stores/canvas.store';
+import { useRoute, useRouter } from 'vue-router';
+import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
+import { computed, ref, useCssModule, watch } from 'vue';
+import type { IUser, IWorkflowDataUpdate, IWorkflowDb, IWorkflowToShare } from '@/Interface';
+import { useI18n } from '@/composables/useI18n';
+import { useTelemetry } from '@/composables/useTelemetry';
+import type { MessageBoxInputData } from 'element-plus';
+
+const props = defineProps({
+	readOnly: {
+		type: Boolean,
+		default: false,
+	},
+});
+
+const $style = useCssModule();
+
+const rootStore = useRootStore();
+const canvasStore = useCanvasStore();
+const settingsStore = useSettingsStore();
+const sourceControlStore = useSourceControlStore();
+const tagsStore = useTagsStore();
+const uiStore = useUIStore();
+const usageStore = useUsageStore();
+const usersStore = useUsersStore();
+const workflowsStore = useWorkflowsStore();
+
+const router = useRouter();
+const route = useRoute();
+
+const locale = useI18n();
+const telemetry = useTelemetry();
+const message = useMessage();
+const toast = useToast();
+const titleChange = useTitleChange();
+const workflowHelpers = useWorkflowHelpers({ router });
+
+const isTagsEditEnabled = ref(false);
+const isNameEditEnabled = ref(false);
+const appliedTagIds = ref<string[]>([]);
+const tagsEditBus = createEventBus();
+const tagsSaving = ref(false);
+const importFile = ref<HTMLInputElement | undefined>();
+const eventBus = createEventBus();
+
+const hasChanged = (prev: string[], curr: string[]) => {
+	if (prev.length !== curr.length) {
+		return true;
+	}
+
+	const set = new Set(prev);
+	return curr.reduce((accu, val) => accu || !set.has(val), false);
+};
+
+const currentUser = computed(() => {
+	return usersStore.currentUser;
+});
+
+const contextBasedTranslationKeys = computed(() => {
+	return uiStore.contextBasedTranslationKeys;
+});
+
+const isWorkflowActive = computed(() => {
+	return workflowsStore.isWorkflowActive;
+});
+
+const workflowName = computed(() => {
+	return workflowsStore.workflowName;
+});
+
+const isDirty = computed(() => {
+	return uiStore.stateIsDirty;
+});
+
+const readOnlyEnv = computed(() => {
+	return sourceControlStore.preferences.branchReadOnly;
+});
+
+const currentWorkflowTagIds = computed(() => {
+	return workflowsStore.workflowTags;
+});
+
+const isNewWorkflow = computed(() => {
+	return (
+		!currentWorkflowId.value ||
+		currentWorkflowId.value === PLACEHOLDER_EMPTY_WORKFLOW_ID ||
+		currentWorkflowId.value === 'new'
+	);
+});
+
+const isWorkflowSaving = computed(() => {
+	return uiStore.isActionActive('workflowSaving');
+});
+
+const workflow = computed(() => {
+	return workflowsStore.workflow;
+});
+
+const currentWorkflowId = computed(() => {
+	return workflowsStore.workflowId;
+});
+
+const onWorkflowPage = computed(() => {
+	return route.meta && (route.meta.nodeView || route.meta.keepWorkflowAlive === true);
+});
+
+const onExecutionsTab = computed(() => {
+	return [
+		VIEWS.EXECUTION_HOME.toString(),
+		VIEWS.WORKFLOW_EXECUTIONS.toString(),
+		VIEWS.EXECUTION_PREVIEW,
+	].includes((route.name as string) || '');
+});
+
+const workflowPermissions = computed(() => {
+	return getWorkflowPermissions(currentUser.value, workflow.value);
+});
+
+const workflowMenuItems = computed(() => {
+	const actions = [
+		{
+			id: WORKFLOW_MENU_ACTIONS.DOWNLOAD,
+			label: locale.baseText('menuActions.download'),
+			disabled: !onWorkflowPage.value,
+		},
+	];
+
+	if (!props.readOnly) {
+		actions.unshift({
+			id: WORKFLOW_MENU_ACTIONS.DUPLICATE,
+			label: locale.baseText('menuActions.duplicate'),
+			disabled: !onWorkflowPage.value || !currentWorkflowId.value,
+		});
+
+		actions.push(
+			{
+				id: WORKFLOW_MENU_ACTIONS.IMPORT_FROM_URL,
+				label: locale.baseText('menuActions.importFromUrl'),
+				disabled: !onWorkflowPage.value || onExecutionsTab.value,
+			},
+			{
+				id: WORKFLOW_MENU_ACTIONS.IMPORT_FROM_FILE,
+				label: locale.baseText('menuActions.importFromFile'),
+				disabled: !onWorkflowPage.value || onExecutionsTab.value,
+			},
+		);
+	}
+
+	if (hasPermission(['rbac'], { rbac: { scope: 'sourceControl:push' } })) {
+		actions.push({
+			id: WORKFLOW_MENU_ACTIONS.PUSH,
+			label: locale.baseText('menuActions.push'),
+			disabled:
+				!sourceControlStore.isEnterpriseSourceControlEnabled ||
+				!onWorkflowPage.value ||
+				onExecutionsTab.value ||
+				readOnlyEnv.value,
+		});
+	}
+
+	actions.push({
+		id: WORKFLOW_MENU_ACTIONS.SETTINGS,
+		label: locale.baseText('generic.settings'),
+		disabled: !onWorkflowPage.value || isNewWorkflow.value,
+	});
+
+	if (workflowPermissions.value.delete && !props.readOnly) {
+		actions.push({
+			id: WORKFLOW_MENU_ACTIONS.DELETE,
+			label: locale.baseText('menuActions.delete'),
+			disabled: !onWorkflowPage.value || isNewWorkflow.value,
+			customClass: $style.deleteItem,
+			divided: true,
+		});
+	}
+
+	return actions;
+});
+
+const isWorkflowHistoryFeatureEnabled = computed(() => {
+	return settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.WorkflowHistory);
+});
+
+const workflowHistoryRoute = computed<{ name: string; params: { workflowId: string } }>(() => {
+	return {
+		name: VIEWS.WORKFLOW_HISTORY,
+		params: {
+			workflowId: currentWorkflowId.value,
+		},
+	};
+});
+
+const isWorkflowHistoryButtonDisabled = computed(() => {
+	return workflowsStore.isNewWorkflow;
+});
+
+watch(currentWorkflowId, () => {
+	isTagsEditEnabled.value = false;
+	isNameEditEnabled.value = false;
+});
+
+async function onSaveButtonClick() {
+	// If the workflow is saving, do not allow another save
+	if (isWorkflowSaving.value) {
+		return;
+	}
+	let currentId: string | undefined = undefined;
+	if (currentWorkflowId.value !== PLACEHOLDER_EMPTY_WORKFLOW_ID) {
+		currentId = currentWorkflowId.value;
+	} else if (route.params.name && route.params.name !== 'new') {
+		currentId = route.params.name;
+	}
+	const saved = await workflowHelpers.saveCurrentWorkflow({
+		id: currentId,
+		name: workflowName.value,
+		tags: currentWorkflowTagIds.value,
+	});
+
+	if (saved) {
+		await settingsStore.fetchPromptsData();
+
+		if (route.name === VIEWS.EXECUTION_DEBUG) {
+			await router.replace({
+				name: VIEWS.WORKFLOW,
+				params: { name: currentWorkflowId.value },
+			});
+		}
+	}
+}
+
+function onShareButtonClick() {
+	uiStore.openModalWithData({
+		name: WORKFLOW_SHARE_MODAL_KEY,
+		data: { id: currentWorkflowId.value },
+	});
+
+	telemetry.track('User opened sharing modal', {
+		workflow_id: currentWorkflowId.value,
+		user_id_sharer: currentUser.value?.id,
+		sub_view: route.name === VIEWS.WORKFLOWS ? 'Workflows listing' : 'Workflow editor',
+	});
+}
+
+function onTagsEditEnable() {
+	appliedTagIds.value = currentWorkflowTagIds.value;
+	isTagsEditEnabled.value = true;
+
+	setTimeout(() => {
+		// allow name update to occur before disabling name edit
+		isNameEditEnabled.value = false;
+		tagsEditBus.emit('focus');
+	}, 0);
+}
+
+async function onTagsBlur() {
+	const current = currentWorkflowTagIds.value;
+	const tags = appliedTagIds.value;
+	if (!hasChanged(current, tags)) {
+		isTagsEditEnabled.value = false;
+
+		return;
+	}
+	if (tagsSaving.value) {
+		return;
+	}
+	tagsSaving.value = true;
+
+	const saved = await workflowHelpers.saveCurrentWorkflow({ tags });
+	telemetry.track('User edited workflow tags', {
+		workflow_id: currentWorkflowId.value,
+		new_tag_count: tags.length,
+	});
+
+	tagsSaving.value = false;
+	if (saved) {
+		isTagsEditEnabled.value = false;
+	}
+}
+
+function onTagsEditEsc() {
+	isTagsEditEnabled.value = false;
+}
+
+function onNameToggle() {
+	isNameEditEnabled.value = !isNameEditEnabled.value;
+	if (isNameEditEnabled.value) {
+		if (isTagsEditEnabled.value) {
+			void onTagsBlur();
+		}
+
+		isTagsEditEnabled.value = false;
+	}
+}
+
+async function onNameSubmit({
+	name,
+	onSubmit: cb,
+}: {
+	name: string;
+	onSubmit: (saved: boolean) => void;
+}) {
+	const newName = name.trim();
+	if (!newName) {
+		toast.showMessage({
+			title: locale.baseText('workflowDetails.showMessage.title'),
+			message: locale.baseText('workflowDetails.showMessage.message'),
+			type: 'error',
+		});
+
+		cb(false);
+		return;
+	}
+
+	if (newName === workflowName.value) {
+		isNameEditEnabled.value = false;
+
+		cb(true);
+		return;
+	}
+
+	uiStore.addActiveAction('workflowSaving');
+	const saved = await workflowHelpers.saveCurrentWorkflow({ name });
+	if (saved) {
+		isNameEditEnabled.value = false;
+	}
+	uiStore.removeActiveAction('workflowSaving');
+	cb(saved);
+}
+
+async function handleFileImport(): Promise<void> {
+	const inputRef = importFile.value;
+	if (inputRef?.files && inputRef.files.length !== 0) {
+		const reader = new FileReader();
+		reader.onload = () => {
+			let workflowData: IWorkflowDataUpdate;
+			try {
+				workflowData = JSON.parse(reader.result as string);
+			} catch (error) {
+				toast.showMessage({
+					title: locale.baseText('mainSidebar.showMessage.handleFileImport.title'),
+					message: locale.baseText('mainSidebar.showMessage.handleFileImport.message'),
+					type: 'error',
+				});
+				return;
+			} finally {
+				reader.onload = null;
+				inputRef.value = '';
+			}
+
+			nodeViewEventBus.emit('importWorkflowData', { data: workflowData });
+		};
+		reader.readAsText(inputRef.files[0]);
+	}
+}
+
+async function onWorkflowMenuSelect(action: string): Promise<void> {
+	switch (action) {
+		case WORKFLOW_MENU_ACTIONS.DUPLICATE: {
+			uiStore.openModalWithData({
+				name: DUPLICATE_MODAL_KEY,
+				data: {
+					id: workflowsStore.workflowId,
+					name: workflowsStore.workflowName,
+					tags: workflowsStore.workflowTags,
+				},
+			});
+			break;
+		}
+		case WORKFLOW_MENU_ACTIONS.DOWNLOAD: {
+			const workflowData = await workflowHelpers.getWorkflowDataToSave();
+			const { tags, ...data } = workflowData;
+			const exportData: IWorkflowToShare = {
+				...data,
+				meta: {
+					...(workflowsStore.workflow.meta || {}),
+					instanceId: rootStore.instanceId,
+				},
+				tags: (tags || []).map((tagId) => {
+					const { usageCount, ...tag } = tagsStore.getTagById(tagId);
+
+					return tag;
+				}),
+			};
+
+			const blob = new Blob([JSON.stringify(exportData, null, 2)], {
+				type: 'application/json;charset=utf-8',
+			});
+
+			let name = workflowName.value || 'unsaved_workflow';
+			name = name.replace(/[^a-z0-9]/gi, '_');
+
+			telemetry.track('User exported workflow', { workflow_id: workflowData.id });
+			saveAs(blob, name + '.json');
+			break;
+		}
+		case WORKFLOW_MENU_ACTIONS.IMPORT_FROM_URL: {
+			try {
+				const promptResponse = (await message.prompt(
+					locale.baseText('mainSidebar.prompt.workflowUrl') + ':',
+					locale.baseText('mainSidebar.prompt.importWorkflowFromUrl') + ':',
+					{
+						confirmButtonText: locale.baseText('mainSidebar.prompt.import'),
+						cancelButtonText: locale.baseText('mainSidebar.prompt.cancel'),
+						inputErrorMessage: locale.baseText('mainSidebar.prompt.invalidUrl'),
+						inputPattern: /^http[s]?:\/\/.*\.json$/i,
+					},
+				)) as MessageBoxInputData;
+
+				if ((promptResponse as string) === 'cancel') {
+					return;
+				}
+
+				nodeViewEventBus.emit('importWorkflowUrl', { url: promptResponse.value });
+			} catch (e) {}
+			break;
+		}
+		case WORKFLOW_MENU_ACTIONS.IMPORT_FROM_FILE: {
+			importFile.value?.click();
+			break;
+		}
+		case WORKFLOW_MENU_ACTIONS.PUSH: {
+			canvasStore.startLoading();
+			try {
+				await onSaveButtonClick();
+
+				const status = await sourceControlStore.getAggregatedStatus();
+
+				uiStore.openModalWithData({
+					name: SOURCE_CONTROL_PUSH_MODAL_KEY,
+					data: { eventBus, status },
+				});
+			} catch (error) {
+				// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+				switch (error.message) {
+					case 'source_control_not_connected':
+						toast.showError(
+							{ ...error, message: '' },
+							locale.baseText('settings.sourceControl.error.not.connected.title'),
+							locale.baseText('settings.sourceControl.error.not.connected.message'),
+						);
+						break;
+					default:
+						toast.showError(error, locale.baseText('error'));
+				}
+			} finally {
+				canvasStore.stopLoading();
+			}
+
+			break;
+		}
+		case WORKFLOW_MENU_ACTIONS.SETTINGS: {
+			uiStore.openModal(WORKFLOW_SETTINGS_MODAL_KEY);
+			break;
+		}
+		case WORKFLOW_MENU_ACTIONS.DELETE: {
+			const deleteConfirmed = await message.confirm(
+				locale.baseText('mainSidebar.confirmMessage.workflowDelete.message', {
+					interpolate: { workflowName: workflowName.value },
+				}),
+				locale.baseText('mainSidebar.confirmMessage.workflowDelete.headline'),
+				{
+					type: 'warning',
+					confirmButtonText: locale.baseText(
+						'mainSidebar.confirmMessage.workflowDelete.confirmButtonText',
+					),
+					cancelButtonText: locale.baseText(
+						'mainSidebar.confirmMessage.workflowDelete.cancelButtonText',
+					),
+				},
+			);
+
+			if (deleteConfirmed !== MODAL_CONFIRM) {
+				return;
+			}
+
+			try {
+				await workflowsStore.deleteWorkflow(currentWorkflowId.value);
+			} catch (error) {
+				toast.showError(error, locale.baseText('generic.deleteWorkflowError'));
+				return;
+			}
+			uiStore.stateIsDirty = false;
+			// Reset tab title since workflow is deleted.
+			titleChange.titleReset();
+			toast.showMessage({
+				title: locale.baseText('mainSidebar.showMessage.handleSelect1.title'),
+				type: 'success',
+			});
+
+			await router.push({ name: VIEWS.NEW_WORKFLOW });
+			break;
+		}
+		default:
+			break;
+	}
+}
+
+function goToUpgrade() {
+	void uiStore.goToUpgrade('workflow_sharing', 'upgrade-workflow-sharing');
+}
+</script>
+
+<template>
+	<div v-if="workflowName" class="container">
+		<BreakpointsObserver :value-x-s="15" :value-s-m="25" :value-m-d="50" class="name-container">
+			<template #default="{ value }">
+				<ShortenName
+					:name="workflowName"
+					:limit="value"
+					:custom="true"
+					test-id="workflow-name-input"
+				>
+					<template #default="{ shortenedName }">
+						<InlineTextEdit
+							:model-value="workflowName"
+							:preview-value="shortenedName"
+							:is-edit-enabled="isNameEditEnabled"
+							:max-length="MAX_WORKFLOW_NAME_LENGTH"
+							:disabled="readOnly"
+							placeholder="Enter workflow name"
+							class="name"
+							@toggle="onNameToggle"
+							@submit="onNameSubmit"
+						/>
+					</template>
+				</ShortenName>
+			</template>
+		</BreakpointsObserver>
+
+		<span v-if="settingsStore.areTagsEnabled" class="tags" data-test-id="workflow-tags-container">
+			<TagsDropdown
+				v-if="isTagsEditEnabled && !readOnly"
+				ref="dropdown"
+				v-model="appliedTagIds"
+				:create-enabled="true"
+				:event-bus="tagsEditBus"
+				:placeholder="$locale.baseText('workflowDetails.chooseOrCreateATag')"
+				class="tags-edit"
+				data-test-id="workflow-tags-dropdown"
+				@blur="onTagsBlur"
+				@esc="onTagsEditEsc"
+			/>
+			<div v-else-if="currentWorkflowTagIds.length === 0 && !readOnly">
+				<span class="add-tag clickable" data-test-id="new-tag-link" @click="onTagsEditEnable">
+					+ {{ $locale.baseText('workflowDetails.addTag') }}
+				</span>
+			</div>
+			<TagsContainer
+				v-else
+				:key="currentWorkflowId"
+				:tag-ids="currentWorkflowTagIds"
+				:clickable="true"
+				:responsive="true"
+				data-test-id="workflow-tags"
+				@click="onTagsEditEnable"
+			/>
+		</span>
+		<span v-else class="tags"></span>
+
+		<PushConnectionTracker class="actions">
+			<span :class="`activator ${$style.group}`">
+				<WorkflowActivator :workflow-active="isWorkflowActive" :workflow-id="currentWorkflowId" />
+			</span>
+			<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]">
+				<div :class="$style.group">
+					<CollaborationPane />
+					<n8n-button
+						type="secondary"
+						data-test-id="workflow-share-button"
+						@click="onShareButtonClick"
+					>
+						{{ $locale.baseText('workflowDetails.share') }}
+					</n8n-button>
+				</div>
+				<template #fallback>
+					<n8n-tooltip>
+						<n8n-button type="secondary" :class="['mr-2xs', $style.disabledShareButton]">
+							{{ $locale.baseText('workflowDetails.share') }}
+						</n8n-button>
+						<template #content>
+							<i18n-t
+								:keypath="
+									contextBasedTranslationKeys.workflows.sharing.unavailable.description.tooltip
+								"
+								tag="span"
+							>
+								<template #action>
+									<a @click="goToUpgrade">
+										{{
+											$locale.baseText(
+												contextBasedTranslationKeys.workflows.sharing.unavailable.button,
+											)
+										}}
+									</a>
+								</template>
+							</i18n-t>
+						</template>
+					</n8n-tooltip>
+				</template>
+			</enterprise-edition>
+			<div :class="$style.group">
+				<SaveButton
+					type="primary"
+					:saved="!isDirty && !isNewWorkflow"
+					:disabled="isWorkflowSaving || readOnly"
+					data-test-id="workflow-save-button"
+					@click="onSaveButtonClick"
+				/>
+				<router-link
+					v-if="isWorkflowHistoryFeatureEnabled"
+					:to="workflowHistoryRoute"
+					:class="$style.workflowHistoryButton"
+				>
+					<n8n-icon-button
+						:disabled="isWorkflowHistoryButtonDisabled"
+						data-test-id="workflow-history-button"
+						type="tertiary"
+						icon="history"
+						size="medium"
+						text
+					/>
+				</router-link>
+			</div>
+			<div :class="[$style.workflowMenuContainer, $style.group]">
+				<input
+					ref="importFile"
+					:class="$style.hiddenInput"
+					type="file"
+					data-test-id="workflow-import-input"
+					@change="handleFileImport()"
+				/>
+				<n8n-action-dropdown
+					:items="workflowMenuItems"
+					data-test-id="workflow-menu"
+					@select="onWorkflowMenuSelect"
+				/>
+			</div>
+		</PushConnectionTracker>
+	</div>
+</template>
+
+<style scoped lang="scss">
+$--text-line-height: 24px;
+$--header-spacing: 20px;
+
+.container {
+	position: relative;
+	top: -1px;
+	width: 100%;
+	display: flex;
+	align-items: center;
+}
+
+.name-container {
+	margin-right: $--header-spacing;
+}
+
+.name {
+	color: $custom-font-dark;
+	font-size: 15px;
+}
+
+.activator {
+	color: $custom-font-dark;
+	font-weight: 400;
+	font-size: 13px;
+	line-height: $--text-line-height;
+	display: flex;
+	align-items: center;
+
+	> span {
+		margin-right: 5px;
+	}
+}
+
+.add-tag {
+	font-size: 12px;
+	padding: 20px 0; // to be more clickable
+	color: $custom-font-very-light;
+	font-weight: 600;
+	white-space: nowrap;
+
+	&:hover {
+		color: $color-primary;
+	}
+}
+
+.tags {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	flex: 1;
+	margin-right: $--header-spacing;
+}
+
+.tags-edit {
+	min-width: 100px;
+	width: 100%;
+	max-width: 460px;
+}
+
+.actions {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-m);
+}
+</style>
+
+<style module lang="scss">
+.group {
+	display: flex;
+	gap: var(--spacing-xs);
+}
+.hiddenInput {
+	display: none;
+}
+
+.deleteItem {
+	color: var(--color-danger);
+}
+
+.disabledShareButton {
+	cursor: not-allowed;
+}
+
+.workflowHistoryButton {
+	width: 30px;
+	height: 30px;
+	color: var(--color-text-dark);
+	border-radius: var(--border-radius-base);
+
+	&:hover {
+		background-color: var(--color-background-base);
+	}
+
+	:disabled {
+		background: transparent;
+		border: none;
+		opacity: 0.5;
+	}
+}
+</style>
diff --git a/packages/editor-ui/src/components/canvas/Canvas.vue b/packages/editor-ui/src/components/canvas/Canvas.vue
index c136e877a74e1..9446ce5f23ea1 100644
--- a/packages/editor-ui/src/components/canvas/Canvas.vue
+++ b/packages/editor-ui/src/components/canvas/Canvas.vue
@@ -11,7 +11,7 @@ import { useCssModule } from 'vue';
 
 const $style = useCssModule();
 
-const $emit = defineEmits(['update:modelValue']);
+defineEmits(['update:modelValue']);
 
 const props = withDefaults(
 	defineProps<{
@@ -44,44 +44,67 @@ function onConnectionsChange(e: EdgeChange[]) {
 </script>
 
 <template>
-	<div :class="$style.canvasWrapper">
-		<VueFlow
-			:id="id"
-			:nodes="elements"
-			:edges="connections"
-			:apply-changes="false"
-			fit-view-on-init
-			:min-zoom="0.2"
-			:max-zoom="4"
-			@nodes-change="onNodesChange"
-			@edges-change="onConnectionsChange"
-		>
-			<template #node-canvas-node="canvasNodeProps">
-				<CanvasNode v-bind="canvasNodeProps" />
-			</template>
-
-			<template #edge-canvas-edge="canvasEdgeProps">
-				<CanvasEdge v-bind="canvasEdgeProps" />
-			</template>
-
-			<Background pattern-color="#aaa" :gap="16" />
-
-			<MiniMap pannable />
-
-			<Controls :class="$style.canvasControls" :position="controlsPosition"></Controls>
-		</VueFlow>
-	</div>
+	<VueFlow
+		:id="id"
+		:nodes="elements"
+		:edges="connections"
+		:apply-changes="false"
+		fit-view-on-init
+		pan-on-scroll
+		:min-zoom="0.2"
+		:max-zoom="4"
+		@nodes-change="onNodesChange"
+		@edges-change="onConnectionsChange"
+	>
+		<template #node-canvas-node="canvasNodeProps">
+			<CanvasNode v-bind="canvasNodeProps" />
+		</template>
+
+		<template #edge-canvas-edge="canvasEdgeProps">
+			<CanvasEdge v-bind="canvasEdgeProps" />
+		</template>
+
+		<Background pattern-color="#aaa" :gap="16" />
+
+		<MiniMap pannable />
+
+		<Controls :class="$style.canvasControls" :position="controlsPosition"></Controls>
+	</VueFlow>
 </template>
 
-<style lang="scss" module>
-.canvasWrapper {
-	width: 100%;
-	height: 100%;
-	position: relative;
-	display: block;
+<style lang="scss">
+.vue-flow__controls {
+	display: flex;
+	gap: var(--spacing-2xs);
+	box-shadow: none;
 }
 
-.canvasControls {
-	display: flex;
+.vue-flow__controls-button {
+	width: 42px;
+	height: 42px;
+	border: var(--border-base);
+	border-radius: var(--border-radius-base);
+	padding: 0;
+	transition-property: transform, background, border, color;
+	transition-duration: 300ms;
+	transition-timing-function: ease;
+
+	&:hover {
+		border-color: var(--color-button-secondary-hover-active-border);
+		background-color: var(--color-button-secondary-active-background);
+		transform: scale(1.1);
+
+		svg {
+			fill: var(--color-primary);
+		}
+	}
+
+	svg {
+		max-height: 16px;
+		max-width: 16px;
+		transition-property: fill;
+		transition-duration: 300ms;
+		transition-timing-function: ease;
+	}
 }
 </style>
diff --git a/packages/editor-ui/src/components/canvas/WorkflowCanvas.vue b/packages/editor-ui/src/components/canvas/WorkflowCanvas.vue
new file mode 100644
index 0000000000000..36849c2a9bde7
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/WorkflowCanvas.vue
@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import Canvas from '@/components/canvas/Canvas.vue';
+import { computed, useCssModule } from 'vue';
+import type {
+	CanvasConnection,
+	CanvasConnectionPort,
+	CanvasElement,
+	CanvasElementData,
+} from '@/types';
+import { mapLegacyConnections, normalizeElementEndpoints } from '@/utils/canvasUtilsV2';
+import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+import { NodeHelpers, Workflow } from 'n8n-workflow';
+import { useI18n } from '@/composables/useI18n';
+import type { IWorkflowDb } from '@/Interface';
+
+const props = defineProps<{
+	workflow: IWorkflowDb;
+	workflowObject: Workflow;
+}>();
+
+const $style = useCssModule();
+
+const locale = useI18n();
+const nodeTypesStore = useNodeTypesStore();
+
+const renderTypeByNodeType = computed(
+	() =>
+		props.workflow.nodes.reduce<Record<string, CanvasElementData['renderType']>>((acc, node) => {
+			let renderType: CanvasElementData['renderType'] = 'default';
+			switch (true) {
+				case nodeTypesStore.isTriggerNode(node.type):
+					renderType = 'trigger';
+					break;
+				case nodeTypesStore.isConfigNode(props.workflowObject, node, node.type):
+					renderType = 'configuration';
+					break;
+				case nodeTypesStore.isConfigurableNode(props.workflowObject, node, node.type):
+					renderType = 'configurable';
+					break;
+			}
+
+			acc[node.type] = renderType;
+			return acc;
+		}, {}) ?? {},
+);
+
+const nodeInputsById = computed(() =>
+	props.workflow.nodes.reduce<Record<string, CanvasConnectionPort[]>>((acc, node) => {
+		const nodeTypeDescription = nodeTypesStore.getNodeType(node.type);
+		const workflowObjectNode = props.workflowObject.getNode(node.name);
+
+		acc[node.id] =
+			workflowObjectNode && nodeTypeDescription
+				? normalizeElementEndpoints(
+						NodeHelpers.getNodeInputs(
+							props.workflowObject,
+							workflowObjectNode,
+							nodeTypeDescription,
+						),
+					)
+				: [];
+
+		return acc;
+	}, {}),
+);
+
+const nodeOutputsById = computed(() =>
+	props.workflow.nodes.reduce<Record<string, CanvasConnectionPort[]>>((acc, node) => {
+		const nodeTypeDescription = nodeTypesStore.getNodeType(node.type);
+		const workflowObjectNode = props.workflowObject.getNode(node.name);
+
+		acc[node.id] =
+			workflowObjectNode && nodeTypeDescription
+				? normalizeElementEndpoints(
+						NodeHelpers.getNodeOutputs(
+							props.workflowObject,
+							workflowObjectNode,
+							nodeTypeDescription,
+						),
+					)
+				: [];
+
+		return acc;
+	}, {}),
+);
+
+const elements = computed<CanvasElement[]>(() => [
+	...props.workflow.nodes.map<CanvasElement>((node) => {
+		const data: CanvasElementData = {
+			type: node.type,
+			typeVersion: node.typeVersion,
+			inputs: nodeInputsById.value[node.id] ?? [],
+			outputs: nodeOutputsById.value[node.id] ?? [],
+			renderType: renderTypeByNodeType.value[node.type] ?? 'default',
+		};
+
+		return {
+			id: node.id,
+			label: 'node',
+			type: 'canvas-node',
+			position: { x: node.position[0], y: node.position[1] },
+			data,
+		};
+	}),
+]);
+
+const connections = computed<CanvasConnection[]>(() => {
+	const mappedConnections = mapLegacyConnections(
+		props.workflow.connections ?? [],
+		props.workflow.nodes ?? [],
+	);
+
+	return mappedConnections.map((connection) => {
+		const pinData = props.workflow.pinData?.[connection.data?.fromNodeName ?? ''];
+
+		let label: string | undefined;
+		if (pinData?.length) {
+			label = locale.baseText('ndv.output.items', {
+				adjustToNumber: pinData.length,
+				interpolate: { count: String(pinData.length) },
+			});
+		}
+
+		return {
+			...connection,
+			type: 'canvas-edge',
+			updatable: true,
+			label,
+		};
+	});
+});
+</script>
+
+<template>
+	<div :class="$style.wrapper">
+		<div :class="$style.canvas">
+			<Canvas v-if="workflow" :elements="elements" :connections="connections" />
+		</div>
+		<slot />
+	</div>
+</template>
+
+<style lang="scss" module>
+.wrapper {
+	display: block;
+	position: relative;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}
+
+.canvas {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	display: block;
+}
+
+.executionButtons {
+	position: absolute;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	left: 50%;
+	transform: translateX(-50%);
+	bottom: var(--spacing-l);
+	width: auto;
+
+	@media (max-width: $breakpoint-2xs) {
+		bottom: 150px;
+	}
+
+	button {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-left: 0.625rem;
+
+		&:first-child {
+			margin: 0;
+		}
+	}
+}
+</style>
diff --git a/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue b/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue
index 1770935eb5610..f807e400f576d 100644
--- a/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue
+++ b/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { BaseEdge, getBezierPath } from '@vue-flow/core';
-import { computed } from 'vue';
+import { BaseEdge, getBezierPath, Position } from '@vue-flow/core';
+import { computed, PropType } from 'vue';
 
 const props = defineProps({
 	id: {
@@ -24,11 +24,11 @@ const props = defineProps({
 		required: true,
 	},
 	sourcePosition: {
-		type: String,
+		type: String as PropType<Position>,
 		required: true,
 	},
 	targetPosition: {
-		type: String,
+		type: String as PropType<Position>,
 		required: true,
 	},
 	data: {
@@ -45,16 +45,30 @@ const props = defineProps({
 	},
 });
 
-const path = computed(() => getBezierPath(props));
+const edgeStyle = computed(() => ({
+	strokeWidth: 2,
+	...props.style,
+}));
+
+const path = computed(() =>
+	getBezierPath({
+		sourceX: props.sourceX,
+		sourceY: props.sourceY,
+		sourcePosition: props.sourcePosition,
+		targetX: props.targetX,
+		targetY: props.targetY,
+		targetPosition: props.targetPosition,
+	}),
+);
 </script>
 
 <template>
 	<BaseEdge
 		:id="id"
-		:style="style"
+		:style="edgeStyle"
 		:path="path[0]"
 		:marker-end="markerEnd"
-		:label="data.text"
+		:label="data?.label"
 		:label-x="path[1]"
 		:label-y="path[2]"
 		:label-style="{ fill: 'white' }"
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/HandleRenderer.vue b/packages/editor-ui/src/components/canvas/elements/handles/HandleRenderer.vue
index 225505611abfb..a999d3dc51063 100644
--- a/packages/editor-ui/src/components/canvas/elements/handles/HandleRenderer.vue
+++ b/packages/editor-ui/src/components/canvas/elements/handles/HandleRenderer.vue
@@ -4,10 +4,14 @@ import type { CanvasConnectionPort, CanvasElementPortWithPosition } from '@/type
 
 import { Handle } from '@vue-flow/core';
 import { NodeConnectionType } from 'n8n-workflow';
+import CanvasHandleMainInput from '@/components/canvas/elements/handles/render-types/CanvasHandleMainInput.vue';
 import CanvasHandleMainOutput from '@/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue';
+import CanvasHandleNonMain from '@/components/canvas/elements/handles/render-types/CanvasHandleNonMain.vue';
 
 const props = defineProps<{
 	mode: 'output' | 'input';
+	source?: boolean;
+	label?: string;
 	type: CanvasConnectionPort['type'];
 	index: CanvasConnectionPort['index'];
 	position: CanvasElementPortWithPosition['position'];
@@ -16,83 +20,47 @@ const props = defineProps<{
 
 const $style = useCssModule();
 
-const Render = () => {
+const Render = (renderProps: { label?: string }) => {
 	let Component;
 
 	if (props.type === NodeConnectionType.Main) {
 		if (props.mode === 'input') {
-			Component = CanvasHandleMainOutput;
+			Component = CanvasHandleMainInput;
 		} else {
 			Component = CanvasHandleMainOutput;
 		}
 	} else {
-		Component = CanvasHandleMainOutput;
+		Component = CanvasHandleNonMain;
 	}
 
-	return h(Component);
+	return h(Component, renderProps);
 };
 </script>
 
 <template>
 	<Handle
 		:id="`${mode}s/${type}/${index}`"
-		:class="[$style.handle, $style[`handle--${mode}--${type}`]]"
-		type="source"
+		:class="[$style.handle]"
+		:type="source ? 'source' : 'target'"
 		:position="position"
 		:style="offset"
 	>
+		<Render :label="label" />
 	</Handle>
 </template>
 
 <style lang="scss" module>
 .handle {
-	width: 16px;
-	height: 16px;
+	width: auto;
+	height: auto;
 	display: inline-flex;
 	justify-content: center;
 	align-items: center;
 	border: 0;
-}
-
-.handle--input,
-.handle--output {
-	border: 0;
-}
-
-.handle--output--main,
-.handle--input--main {
-	background: var(--node-type-main-color);
-
-	&:hover {
-		background: var(--color-primary);
-	}
-}
-
-.handle--output--main {
-	width: 14px;
-	height: 14px;
-}
-
-.handle--input--main {
-	width: 8px;
-	height: 20px;
-	border-radius: 0;
-}
+	background: none;
 
-@each $node-type in $supplemental-node-types {
-	.handle--output--#{$node-type},
-	.handle--input--#{$node-type} {
-		width: 14px;
-		height: 14px;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		border-radius: 0;
-		background: hsl(
-			var(--node-type-supplemental-color-h)
-				var(--node-type-supplemental-color-s)
-				var(--node-type-supplemental-color-l)
-		);
+	> * {
+		pointer-events: none;
 	}
 }
 </style>
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainInput.vue b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainInput.vue
new file mode 100644
index 0000000000000..5e260cdd26171
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainInput.vue
@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { useCssModule } from 'vue';
+
+defineProps<{
+	label?: string;
+}>();
+
+const $style = useCssModule();
+</script>
+<template>
+	<div :class="$style.handle">
+		<div :class="$style.label">{{ label }}</div>
+	</div>
+</template>
+
+<style lang="scss" module>
+.handle {
+	width: 8px;
+	height: 16px;
+	border-radius: 0;
+	background: var(--color-foreground-xdark);
+
+	&:hover {
+		background: var(--color-primary);
+	}
+}
+
+.label {
+	position: absolute;
+	top: 50%;
+	right: 12px;
+	transform: translate(0, -50%);
+	font-size: var(--font-size-2xs);
+	color: var(--color-foreground-xdark);
+	background: var(--color-background-light);
+	z-index: 1;
+}
+</style>
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue
index 7f179da2f6bd6..bb5ece235cb6d 100644
--- a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue
@@ -1,14 +1,70 @@
 <script lang="ts" setup>
 import { useCssModule } from 'vue';
+import { svg } from '@jsplumb/browser-ui';
+
+defineProps<{
+	label?: string;
+}>();
+
+// const group = svg.node('g');
+// const containerBorder = svg.node('rect', {
+// 	rx: 3,
+// 	'stroke-width': 2,
+// 	fillOpacity: 0,
+// 	height: ep.params.dimensions - 2,
+// 	width: ep.params.dimensions - 2,
+// 	y: 1,
+// 	x: 1,
+// });
+// const plusPath = svg.node('path', {
+// 	d: 'm16.40655,10.89837l-3.30491,0l0,-3.30491c0,-0.40555 -0.32889,-0.73443 -0.73443,-0.73443l-0.73443,0c-0.40554,0 -0.73442,0.32888 -0.73442,0.73443l0,3.30491l-3.30491,0c-0.40555,0 -0.73443,0.32888 -0.73443,0.73442l0,0.73443c0,0.40554 0.32888,0.73443 0.73443,0.73443l3.30491,0l0,3.30491c0,0.40554 0.32888,0.73442 0.73442,0.73442l0.73443,0c0.40554,0 0.73443,-0.32888 0.73443,-0.73442l0,-3.30491l3.30491,0c0.40554,0 0.73442,-0.32889 0.73442,-0.73443l0,-0.73443c0,-0.40554 -0.32888,-0.73442 -0.73442,-0.73442z',
+// });
+// if (ep.params.size !== 'medium') {
+// 	ep.addClass(ep.params.size);
+// }
+// group.appendChild(containerBorder);
+// group.appendChild(plusPath);
+//
+// ep.setupOverlays();
+// ep.setVisible(false);
+// return group;
 
 const $style = useCssModule();
 </script>
 <template>
-	<div :class="$style.mainOutputHandle" />
+	<div :class="$style.handle">
+		<div :class="$style.label">{{ label }}</div>
+		<div :class="$style.circle" />
+		<!-- @TODO Determine whether handle is connected -->
+		<!--		<svg :class="$style.plus" viewBox="0 0 70 24">-->
+		<!--			<line x1="0" y1="12" x2="46" y2="12" stroke="var(&#45;&#45;color-foreground-xdark)" />-->
+		<!--			<rect-->
+		<!--				x="46"-->
+		<!--				y="2"-->
+		<!--				width="20"-->
+		<!--				height="20"-->
+		<!--				stroke="var(&#45;&#45;color-foreground-xdark)"-->
+		<!--				stroke-width="2"-->
+		<!--				rx="4"-->
+		<!--				fill="#ffffff"-->
+		<!--			/>-->
+		<!--			<g transform="translate(44, 0)">-->
+		<!--				<path-->
+		<!--					fill="var(&#45;&#45;color-foreground-xdark)"-->
+		<!--					d="m16.40655,10.89837l-3.30491,0l0,-3.30491c0,-0.40555 -0.32889,-0.73443 -0.73443,-0.73443l-0.73443,0c-0.40554,0 -0.73442,0.32888 -0.73442,0.73443l0,3.30491l-3.30491,0c-0.40555,0 -0.73443,0.32888 -0.73443,0.73442l0,0.73443c0,0.40554 0.32888,0.73443 0.73443,0.73443l3.30491,0l0,3.30491c0,0.40554 0.32888,0.73442 0.73442,0.73442l0.73443,0c0.40554,0 0.73443,-0.32888 0.73443,-0.73442l0,-3.30491l3.30491,0c0.40554,0 0.73442,-0.32889 0.73442,-0.73443l0,-0.73443c0,-0.40554 -0.32888,-0.73442 -0.73442,-0.73442z"-->
+		<!--				></path>-->
+		<!--			</g>-->
+		<!--		</svg>-->
+	</div>
 </template>
 
 <style lang="scss" module>
-.mainOutputHandle {
+.handle {
+	width: 16px;
+	height: 16px;
+}
+
+.circle {
 	width: 16px;
 	height: 16px;
 	border-radius: 100%;
@@ -18,4 +74,28 @@ const $style = useCssModule();
 		background: var(--color-primary);
 	}
 }
+
+.plus {
+	position: absolute;
+	left: 16px;
+	top: 50%;
+	transform: translate(0, -50%);
+	width: 70px;
+	height: 24px;
+
+	:global(.vue-flow__handle.connecting) & {
+		display: none;
+	}
+}
+
+.label {
+	position: absolute;
+	top: 50%;
+	left: 20px;
+	transform: translate(0, -50%);
+	font-size: var(--font-size-2xs);
+	color: var(--color-foreground-xdark);
+	background: var(--color-background-light);
+	z-index: 1;
+}
 </style>
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMain.vue b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMain.vue
new file mode 100644
index 0000000000000..d56b56f294824
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMain.vue
@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { useCssModule } from 'vue';
+
+defineProps<{
+	label?: string;
+}>();
+
+const $style = useCssModule();
+</script>
+<template>
+	<div :class="$style.handle">
+		<div :class="$style.diamond" />
+		<div :class="$style.label">{{ label }}</div>
+	</div>
+</template>
+
+<style lang="scss" module>
+.handle {
+	width: 14px;
+	height: 14px;
+	border-radius: 0;
+}
+
+.diamond {
+	width: 14px;
+	height: 14px;
+	transform: rotate(45deg);
+	background: hsl(
+		var(--node-type-supplemental-color-h) var(--node-type-supplemental-color-s)
+			var(--node-type-supplemental-color-l)
+	);
+
+	&:hover {
+		background: var(--color-primary);
+	}
+}
+
+.label {
+	position: absolute;
+	top: 18px;
+	left: 50%;
+	transform: translate(-50%, 0);
+	font-size: var(--font-size-2xs);
+	color: var(--color-foreground-xdark);
+	background: var(--color-background-light);
+	z-index: 1;
+}
+</style>
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
index 6ff08974eaef4..bc87115f95065 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { Handle, Position } from '@vue-flow/core';
+import { NodeToolbar } from '@vue-flow/node-toolbar';
 import { computed, useCssModule } from 'vue';
 import type {
 	CanvasElementData,
@@ -8,6 +9,7 @@ import type {
 } from '@/types';
 import NodeIcon from '@/components/NodeIcon.vue';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+import CanvasNodeToolbar from '@/components/canvas/elements/nodes/CanvasNodeToolbar.vue';
 import CanvasNodeRenderer from '@/components/canvas/elements/nodes/CanvasNodeRenderer.vue';
 import HandleRenderer from '@/components/canvas/elements/handles/HandleRenderer.vue';
 import { useNodeConnections } from '@/composables/useNodeConnections';
@@ -81,7 +83,9 @@ const mapEndpointWithPosition =
 		<template v-for="source in outputsWithPosition" :key="`${source.type}/${source.index}`">
 			<HandleRenderer
 				mode="output"
+				:source="true"
 				:type="source.type"
+				:label="source.label"
 				:index="source.index"
 				:position="source.position"
 				:offset="source.offset"
@@ -91,13 +95,22 @@ const mapEndpointWithPosition =
 		<template v-for="target in inputsWithPosition" :key="`${target.type}/${target.index}`">
 			<HandleRenderer
 				mode="input"
+				:source="false"
 				:type="target.type"
+				:label="target.label"
 				:index="target.index"
 				:position="target.position"
 				:offset="target.offset"
 			/>
 		</template>
 
+		<CanvasNodeToolbar
+			v-if="nodeType"
+			:class="$style.canvasNodeToolbar"
+			:node-type="nodeType"
+			:data="data"
+		/>
+
 		<CanvasNodeRenderer v-if="nodeType" :node-type="nodeType" :data="data">
 			<NodeIcon :node-type="nodeType" :size="40" :shrink="false" />
 			<!--			:color-default="iconColorDefault"-->
@@ -106,4 +119,23 @@ const mapEndpointWithPosition =
 	</div>
 </template>
 
-<style lang="scss" module></style>
+<style lang="scss" module>
+.canvasNode {
+	&:hover {
+		.canvasNodeToolbar {
+			display: flex;
+			opacity: 1;
+		}
+	}
+}
+
+.canvasNodeToolbar {
+	display: none;
+	position: absolute;
+	top: 0;
+	left: 50%;
+	transform: translate(-50%, -100%);
+	opacity: 0;
+	transition: opacity 0.3s ease;
+}
+</style>
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.vue b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.vue
new file mode 100644
index 0000000000000..20c3f0f066eb1
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { useCssModule } from 'vue';
+import type { INodeTypeDescription } from 'n8n-workflow';
+import type { CanvasElementData } from '@/types';
+
+const props = defineProps<{
+	nodeType: INodeTypeDescription;
+	data: CanvasElementData;
+}>();
+
+const $style = useCssModule();
+
+// @TODO
+const workflowRunning = false;
+
+// @TODO
+const nodeDisabledTitle = 'Test';
+
+// @TODO
+function executeNode() {}
+
+// @TODO
+function toggleDisableNode() {}
+
+// @TODO
+function deleteNode() {}
+
+// @TODO
+function openContextMenu(e: MouseEvent, type: string) {}
+</script>
+
+<template>
+	<div :class="$style.canvasNodeToolbar">
+		<div :class="$style.canvasNodeToolbarItems">
+			<N8nIconButton
+				v-if="data.renderType !== 'configuration'"
+				data-test-id="execute-node-button"
+				type="tertiary"
+				text
+				size="small"
+				icon="play"
+				:disabled="workflowRunning"
+				:title="$locale.baseText('node.testStep')"
+				@click="executeNode"
+			/>
+			<N8nIconButton
+				data-test-id="disable-node-button"
+				type="tertiary"
+				text
+				size="small"
+				icon="power-off"
+				:title="nodeDisabledTitle"
+				@click="toggleDisableNode"
+			/>
+			<N8nIconButton
+				data-test-id="delete-node-button"
+				type="tertiary"
+				size="small"
+				text
+				icon="trash"
+				:title="$locale.baseText('node.delete')"
+				@click="deleteNode"
+			/>
+			<N8nIconButton
+				data-test-id="overflow-node-button"
+				type="tertiary"
+				size="small"
+				text
+				icon="ellipsis-h"
+				@click="(e: MouseEvent) => openContextMenu(e, 'node-button')"
+			/>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" module>
+.canvasNodeToolbar {
+	padding-bottom: var(--spacing-3xs);
+}
+
+.canvasNodeToolbarItems {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+</style>
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
index 91a27b08a4438..e1930cce5e428 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
@@ -38,7 +38,7 @@ const styles = computed(() => {
 
 <style lang="scss" module>
 .canvasNode {
-	height: calc(100px + max(0, var(--node-main-output-count, 1) - 4) * 20px);
+	height: calc(100px + max(0, var(--node-main-output-count, 1) - 4) * 50px);
 	width: 100px;
 	display: flex;
 	align-items: center;
diff --git a/packages/editor-ui/src/router.ts b/packages/editor-ui/src/router.ts
index 70a12adb2ce5b..c1fedf20d9e18 100644
--- a/packages/editor-ui/src/router.ts
+++ b/packages/editor-ui/src/router.ts
@@ -22,6 +22,7 @@ const ChangePasswordView = async () => await import('./views/ChangePasswordView.
 const ErrorView = async () => await import('./views/ErrorView.vue');
 const ForgotMyPasswordView = async () => await import('./views/ForgotMyPasswordView.vue');
 const MainHeader = async () => await import('@/components/MainHeader/MainHeader.vue');
+const MainHeaderV2 = async () => await import('@/components/MainHeaderV2/MainHeaderV2.vue');
 const MainSidebar = async () => await import('@/components/MainSidebar.vue');
 const NodeView = async () => await import('@/views/NodeView.vue');
 const NodeViewV2 = async () => await import('@/views/NodeView.v2.vue');
@@ -390,7 +391,7 @@ export const routes = [
 		name: VIEWS.WORKFLOW_V2,
 		components: {
 			default: NodeViewV2,
-			header: MainHeader,
+			header: MainHeaderV2,
 			sidebar: MainSidebar,
 		},
 		meta: {
diff --git a/packages/editor-ui/src/types/canvas.ts b/packages/editor-ui/src/types/canvas.ts
index 5fa6a5bf44cf4..5ef528726734f 100644
--- a/packages/editor-ui/src/types/canvas.ts
+++ b/packages/editor-ui/src/types/canvas.ts
@@ -12,6 +12,7 @@ export type CanvasConnectionPort = {
 	type: CanvasConnectionPortType;
 	required?: boolean;
 	index: number;
+	label?: string;
 };
 
 export interface CanvasElementPortWithPosition extends CanvasConnectionPort {
diff --git a/packages/editor-ui/src/utils/canvasUtilsV2.ts b/packages/editor-ui/src/utils/canvasUtilsV2.ts
index 18eb328d0dea8..260e4c2a32e28 100644
--- a/packages/editor-ui/src/utils/canvasUtilsV2.ts
+++ b/packages/editor-ui/src/utils/canvasUtilsV2.ts
@@ -8,8 +8,6 @@ export function mapLegacyConnections(
 ): CanvasConnection[] {
 	const mappedConnections: CanvasConnection[] = [];
 
-	console.log(legacyConnections);
-
 	Object.keys(legacyConnections).forEach((fromNodeName) => {
 		const fromId = nodes.find((node) => node.name === fromNodeName)?.id;
 		const fromConnectionTypes = Object.keys(legacyConnections[fromNodeName]);
@@ -60,6 +58,7 @@ export function normalizeElementEndpoints(
 
 	return endpoints.map((endpoint, endpointIndex) => {
 		const type = typeof endpoint === 'string' ? endpoint : endpoint.type;
+		const label = typeof endpoint === 'string' ? undefined : endpoint.displayName;
 		const index =
 			endpoints
 				.slice(0, endpointIndex + 1)
@@ -69,6 +68,7 @@ export function normalizeElementEndpoints(
 		return {
 			type,
 			index,
+			label,
 			...(required ? { required } : {}),
 		};
 	});
diff --git a/packages/editor-ui/src/views/NodeView.v2.vue b/packages/editor-ui/src/views/NodeView.v2.vue
index 3aa9846c20ea2..17db47de65550 100644
--- a/packages/editor-ui/src/views/NodeView.v2.vue
+++ b/packages/editor-ui/src/views/NodeView.v2.vue
@@ -1,12 +1,9 @@
 <script setup lang="ts">
-import Canvas from '@/components/canvas/Canvas.vue';
 import { computed, onMounted, useCssModule } from 'vue';
 import { useRoute } from 'vue-router';
 import { useWorkflowsStoreV2 } from '@/stores/workflows.store.v2';
-import type { CanvasConnection, CanvasElement, CanvasElementData } from '@/types';
-import { mapLegacyConnections, normalizeElementEndpoints } from '@/utils/canvasUtilsV2';
+import WorkflowCanvas from '@/components/canvas/WorkflowCanvas.vue';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
-import { NodeHelpers } from 'n8n-workflow';
 import { useUIStore } from '@/stores/ui.store';
 import KeyboardShortcutTooltip from '@/components/KeyboardShortcutTooltip.vue';
 import { useI18n } from '@/composables/useI18n';
@@ -23,6 +20,7 @@ const workflowsStoreV2 = useWorkflowsStoreV2();
 const workflowId = computed<string>(() => route.params.workflowId as string);
 const workflow = computed(() => workflowsStoreV2.workflowsById[workflowId.value]);
 const workflowObject = computed(() => workflowsStoreV2.getWorkflowObject(workflowId.value));
+
 const workflowRunning = computed(() => uiStore.isActionActive('workflowRunning'));
 const runButtonText = computed(() => {
 	if (!workflowRunning.value) {
@@ -32,86 +30,6 @@ const runButtonText = computed(() => {
 	return locale.baseText('nodeView.runButtonText.executingWorkflow');
 });
 
-const connections = computed<CanvasConnection[]>(() => {
-	const mappedConnections = mapLegacyConnections(
-		workflow.value?.connections ?? [],
-		workflow.value?.nodes ?? [],
-	);
-
-	return mappedConnections.map((connection) => {
-		const pinDataLength = workflow.value.pinData?.[connection.data?.fromNodeName ?? '']?.length;
-		return {
-			...connection,
-			type: 'canvas-edge',
-			updatable: true,
-			label: pinDataLength
-				? locale.baseText('ndv.output.items', {
-						adjustToNumber: pinDataLength,
-						interpolate: { count: String(pinDataLength) },
-					})
-				: '',
-		};
-	});
-});
-
-const elements = computed<CanvasElement[]>(() => [
-	...workflow.value?.nodes.map<CanvasElement>((node) => {
-		const nodeTypeDescription = nodeTypesStore.getNodeType(node.type);
-		const workflowObjectNode = workflowObject.value.getNode(node.name);
-
-		const inputs =
-			workflowObjectNode && nodeTypeDescription
-				? normalizeElementEndpoints(
-						NodeHelpers.getNodeInputs(
-							workflowObject.value,
-							workflowObjectNode,
-							nodeTypeDescription,
-						),
-					)
-				: [];
-
-		const outputs =
-			workflowObjectNode && nodeTypeDescription
-				? normalizeElementEndpoints(
-						NodeHelpers.getNodeOutputs(
-							workflowObject.value,
-							workflowObjectNode,
-							nodeTypeDescription,
-						),
-					)
-				: [];
-
-		let renderType: CanvasElementData['renderType'] = 'default';
-		switch (true) {
-			case nodeTypesStore.isTriggerNode(node.type):
-				renderType = 'trigger';
-				break;
-			case nodeTypesStore.isConfigNode(workflowObject.value, node, node.type):
-				renderType = 'configuration';
-				break;
-			case nodeTypesStore.isConfigurableNode(workflowObject.value, node, node.type):
-				renderType = 'configurable';
-				break;
-		}
-
-		const data: CanvasElementData = {
-			type: node.type,
-			typeVersion: node.typeVersion,
-			inputs,
-			outputs,
-			renderType,
-		};
-
-		return {
-			id: node.id,
-			label: 'node',
-			type: 'canvas-node',
-			position: { x: node.position[0], y: node.position[1] },
-			data,
-		};
-	}),
-]);
-
 onMounted(() => {
 	void initialize();
 });
@@ -119,7 +37,6 @@ onMounted(() => {
 async function initialize() {
 	await nodeTypesStore.getNodeTypes();
 	await workflowsStoreV2.fetchWorkflow(workflowId.value);
-	console.log(workflow.value);
 }
 
 async function onRunWorkflow() {
@@ -128,11 +45,14 @@ async function onRunWorkflow() {
 </script>
 
 <template>
-	<div :class="$style.nodeView">
-		<Canvas v-if="workflow" :elements="elements" :connections="connections" />
+	<WorkflowCanvas
+		v-if="workflow && workflowObject"
+		:workflow="workflow"
+		:workflow-object="workflowObject"
+	>
 		<div :class="$style.executionButtons">
 			<KeyboardShortcutTooltip :label="runButtonText" :shortcut="{ metaKey: true, keys: ['↵'] }">
-				<n8n-button
+				<N8nButton
 					:loading="workflowRunning"
 					:label="runButtonText"
 					size="large"
@@ -143,19 +63,10 @@ async function onRunWorkflow() {
 				/>
 			</KeyboardShortcutTooltip>
 		</div>
-	</div>
+	</WorkflowCanvas>
 </template>
 
 <style lang="scss" module>
-.nodeView {
-	display: block;
-	position: relative;
-	width: 100%;
-	height: 100%;
-	background-color: var(--color-canvas-background);
-	overflow: hidden;
-}
-
 .executionButtons {
 	position: absolute;
 	display: flex;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b71e8bdb01676..34cd1c61294c0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1108,6 +1108,9 @@ importers:
       '@vue-flow/minimap':
         specifier: ^1.4.0
         version: 1.4.0(@vue-flow/core@1.33.5)(vue@3.4.21)
+      '@vue-flow/node-toolbar':
+        specifier: ^1.1.0
+        version: 1.1.0(@vue-flow/core@1.33.5)
       '@vueuse/components':
         specifier: ^10.5.0
         version: 10.5.0(vue@3.4.21)
@@ -10649,6 +10652,14 @@ packages:
       vue: 3.4.21(typescript@5.4.2)
     dev: false
 
+  /@vue-flow/node-toolbar@1.1.0(@vue-flow/core@1.33.5):
+    resolution: {integrity: sha512-6RVDHgY+x8m1cXPaEkqPa/RMR90AC1hPHYBK/QVh8k6lJnFPgwJ9PSiYoC4amsUiDK0mF0Py+PlztLJY1ty+4A==}
+    peerDependencies:
+      '@vue-flow/core': ^1.12.2
+    dependencies:
+      '@vue-flow/core': 1.33.5(vue@3.4.21)
+    dev: false
+
   /@vue/compiler-core@3.3.4:
     resolution: {integrity: sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==}
     dependencies:

From 86cabdbfe8e7f171ee119d27939c55293d43cc76 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Wed, 8 May 2024 13:49:38 +0300
Subject: [PATCH 13/22] feat: add capability to add nodes

---
 packages/editor-ui/src/Interface.ts           |   3 +-
 .../src/components/canvas/Canvas.vue          |  24 +-
 .../src/components/canvas/WorkflowCanvas.vue  |  37 +-
 .../buttons/CanvasExecuteWorkflowButton.vue   |  35 +
 .../elements/handles/HandleRenderer.vue       |  28 +-
 .../render-types/CanvasHandleMainInput.vue    |   9 +-
 .../render-types/CanvasHandleMainOutput.vue   |   9 +-
 .../render-types/CanvasHandleNonMain.vue      |   9 +-
 .../canvas/elements/nodes/CanvasNode.vue      |  32 +-
 .../elements/nodes/CanvasNodeRenderer.vue     |  21 +-
 .../render-types/CanvasNodeConfigurable.vue   |  15 +-
 .../render-types/CanvasNodeConfiguration.vue  |   7 -
 .../nodes/render-types/CanvasNodeDefault.vue  |  29 +-
 packages/editor-ui/src/constants.ts           |  17 +-
 packages/editor-ui/src/stores/ui.store.ts     |   1 +
 .../editor-ui/src/stores/workflows.store.ts   |  13 +
 packages/editor-ui/src/types/canvas.ts        |  13 +-
 packages/editor-ui/src/views/NodeView.v2.vue  | 799 +++++++++++++++++-
 18 files changed, 976 insertions(+), 125 deletions(-)
 create mode 100644 packages/editor-ui/src/components/canvas/elements/buttons/CanvasExecuteWorkflowButton.vue

diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 67a4053308199..a5891c4220749 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1295,6 +1295,7 @@ export interface UIState {
 	pendingNotificationsForViews: {
 		[key in VIEWS]?: NotificationOptions[];
 	};
+	isCreateNodeActive: boolean;
 }
 
 export type IFakeDoor = {
@@ -1871,7 +1872,7 @@ export type AddedNodesAndConnections = {
 export type ToggleNodeCreatorOptions = {
 	createNodeActive: boolean;
 	source?: NodeCreatorOpenSource;
-	nodeCreatorView?: string;
+	nodeCreatorView?: NodeFilterType;
 };
 
 export type AppliedThemeOption = 'light' | 'dark';
diff --git a/packages/editor-ui/src/components/canvas/Canvas.vue b/packages/editor-ui/src/components/canvas/Canvas.vue
index 9446ce5f23ea1..a70375674ad94 100644
--- a/packages/editor-ui/src/components/canvas/Canvas.vue
+++ b/packages/editor-ui/src/components/canvas/Canvas.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { CanvasConnection, CanvasElement } from '@/types';
-import type { EdgeChange, NodeChange } from '@vue-flow/core';
+import type { NodeDragEvent, Connection } from '@vue-flow/core';
 import { useVueFlow, VueFlow, PanelPosition } from '@vue-flow/core';
 import { Background } from '@vue-flow/background';
 import { Controls } from '@vue-flow/controls';
@@ -11,7 +11,7 @@ import { useCssModule } from 'vue';
 
 const $style = useCssModule();
 
-defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'update:node:position', 'create:connection']);
 
 const props = withDefaults(
 	defineProps<{
@@ -28,18 +28,20 @@ const props = withDefaults(
 	},
 );
 
-const { onInit, setViewport } = useVueFlow({ id: props.id });
+const { onInit } = useVueFlow({ id: props.id });
 
 onInit((instance) => {
 	console.log(instance);
 });
 
-function onNodesChange(e: NodeChange[]) {
-	console.log('onNodesChange', e);
+function onNodeDragStop(e: NodeDragEvent) {
+	e.nodes.forEach((node) => {
+		emit('update:node:position', node.id, node.position);
+	});
 }
 
-function onConnectionsChange(e: EdgeChange[]) {
-	console.log('onConnectionsChange', e);
+function onConnect(e: Connection) {
+	emit('create:connection', e);
 }
 </script>
 
@@ -52,9 +54,9 @@ function onConnectionsChange(e: EdgeChange[]) {
 		fit-view-on-init
 		pan-on-scroll
 		:min-zoom="0.2"
-		:max-zoom="4"
-		@nodes-change="onNodesChange"
-		@edges-change="onConnectionsChange"
+		:max-zoom="2"
+		@node-drag-stop="onNodeDragStop"
+		@connect="onConnect"
 	>
 		<template #node-canvas-node="canvasNodeProps">
 			<CanvasNode v-bind="canvasNodeProps" />
@@ -72,6 +74,8 @@ function onConnectionsChange(e: EdgeChange[]) {
 	</VueFlow>
 </template>
 
+<style lang="scss" module></style>
+
 <style lang="scss">
 .vue-flow__controls {
 	display: flex;
diff --git a/packages/editor-ui/src/components/canvas/WorkflowCanvas.vue b/packages/editor-ui/src/components/canvas/WorkflowCanvas.vue
index 36849c2a9bde7..f67dfb29fb1e2 100644
--- a/packages/editor-ui/src/components/canvas/WorkflowCanvas.vue
+++ b/packages/editor-ui/src/components/canvas/WorkflowCanvas.vue
@@ -9,11 +9,13 @@ import type {
 } from '@/types';
 import { mapLegacyConnections, normalizeElementEndpoints } from '@/utils/canvasUtilsV2';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
-import { NodeHelpers, Workflow } from 'n8n-workflow';
+import type { Workflow } from 'n8n-workflow';
+import { NodeHelpers } from 'n8n-workflow';
 import { useI18n } from '@/composables/useI18n';
 import type { IWorkflowDb } from '@/Interface';
 
 const props = defineProps<{
+	id?: string;
 	workflow: IWorkflowDb;
 	workflowObject: Workflow;
 }>();
@@ -111,30 +113,39 @@ const connections = computed<CanvasConnection[]>(() => {
 	);
 
 	return mappedConnections.map((connection) => {
-		const pinData = props.workflow.pinData?.[connection.data?.fromNodeName ?? ''];
-
-		let label: string | undefined;
-		if (pinData?.length) {
-			label = locale.baseText('ndv.output.items', {
-				adjustToNumber: pinData.length,
-				interpolate: { count: String(pinData.length) },
-			});
-		}
+		const type = getConnectionType(connection);
+		const label = getConnectionLabel(connection);
 
 		return {
 			...connection,
-			type: 'canvas-edge',
-			updatable: true,
+			type,
 			label,
 		};
 	});
 });
+
+function getConnectionType(_: CanvasConnection): string {
+	return 'canvas-edge';
+}
+
+function getConnectionLabel(connection: CanvasConnection): string {
+	const pinData = props.workflow.pinData?.[connection.data?.fromNodeName ?? ''];
+
+	if (pinData?.length) {
+		return locale.baseText('ndv.output.items', {
+			adjustToNumber: pinData.length,
+			interpolate: { count: String(pinData.length) },
+		});
+	}
+
+	return '';
+}
 </script>
 
 <template>
 	<div :class="$style.wrapper">
 		<div :class="$style.canvas">
-			<Canvas v-if="workflow" :elements="elements" :connections="connections" />
+			<Canvas v-if="workflow" :elements="elements" :connections="connections" v-bind="$attrs" />
 		</div>
 		<slot />
 	</div>
diff --git a/packages/editor-ui/src/components/canvas/elements/buttons/CanvasExecuteWorkflowButton.vue b/packages/editor-ui/src/components/canvas/elements/buttons/CanvasExecuteWorkflowButton.vue
new file mode 100644
index 0000000000000..a595c0febdc24
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/buttons/CanvasExecuteWorkflowButton.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import KeyboardShortcutTooltip from '@/components/KeyboardShortcutTooltip.vue';
+import { computed } from 'vue';
+import { useI18n } from '@/composables/useI18n';
+import { useUIStore } from '@/stores/ui.store';
+
+defineEmits(['click']);
+
+const uiStore = useUIStore();
+const locale = useI18n();
+
+const workflowRunning = computed(() => uiStore.isActionActive('workflowRunning'));
+
+const runButtonText = computed(() => {
+	if (!workflowRunning.value) {
+		return locale.baseText('nodeView.runButtonText.executeWorkflow');
+	}
+
+	return locale.baseText('nodeView.runButtonText.executingWorkflow');
+});
+</script>
+
+<template>
+	<KeyboardShortcutTooltip :label="runButtonText" :shortcut="{ metaKey: true, keys: ['↵'] }">
+		<N8nButton
+			:loading="workflowRunning"
+			:label="runButtonText"
+			size="large"
+			icon="flask"
+			type="primary"
+			data-test-id="execute-workflow-button"
+			@click.stop="$emit('click', $event)"
+		/>
+	</KeyboardShortcutTooltip>
+</template>
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/HandleRenderer.vue b/packages/editor-ui/src/components/canvas/elements/handles/HandleRenderer.vue
index a999d3dc51063..ae45c5502db93 100644
--- a/packages/editor-ui/src/components/canvas/elements/handles/HandleRenderer.vue
+++ b/packages/editor-ui/src/components/canvas/elements/handles/HandleRenderer.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { h, useCssModule } from 'vue';
+import { computed, h, provide, toRef, useCssModule } from 'vue';
 import type { CanvasConnectionPort, CanvasElementPortWithPosition } from '@/types';
 
 import { Handle } from '@vue-flow/core';
@@ -7,10 +7,10 @@ import { NodeConnectionType } from 'n8n-workflow';
 import CanvasHandleMainInput from '@/components/canvas/elements/handles/render-types/CanvasHandleMainInput.vue';
 import CanvasHandleMainOutput from '@/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue';
 import CanvasHandleNonMain from '@/components/canvas/elements/handles/render-types/CanvasHandleNonMain.vue';
+import { CanvasNodeHandleKey } from '@/constants';
 
 const props = defineProps<{
 	mode: 'output' | 'input';
-	source?: boolean;
 	label?: string;
 	type: CanvasConnectionPort['type'];
 	index: CanvasConnectionPort['index'];
@@ -20,6 +20,16 @@ const props = defineProps<{
 
 const $style = useCssModule();
 
+const handleType = computed(() => (props.mode === 'input' ? 'source' : 'target'));
+
+const isConnectableStart = computed(() => {
+	return props.mode === 'output';
+});
+
+const isConnectableEnd = computed(() => {
+	return props.mode === 'input';
+});
+
 const Render = (renderProps: { label?: string }) => {
 	let Component;
 
@@ -35,15 +45,27 @@ const Render = (renderProps: { label?: string }) => {
 
 	return h(Component, renderProps);
 };
+
+/**
+ * Provide
+ */
+
+const label = toRef(props, 'label');
+
+provide(CanvasNodeHandleKey, {
+	label,
+});
 </script>
 
 <template>
 	<Handle
 		:id="`${mode}s/${type}/${index}`"
 		:class="[$style.handle]"
-		:type="source ? 'source' : 'target'"
+		:type="handleType"
 		:position="position"
 		:style="offset"
+		:connectable-start="isConnectableStart"
+		:connectable-end="isConnectableEnd"
 	>
 		<Render :label="label" />
 	</Handle>
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainInput.vue b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainInput.vue
index 5e260cdd26171..a96437964e3ba 100644
--- a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainInput.vue
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainInput.vue
@@ -1,15 +1,14 @@
 <script lang="ts" setup>
-import { useCssModule } from 'vue';
+import { inject, useCssModule } from 'vue';
+import { CanvasNodeHandleKey } from '@/constants';
 
-defineProps<{
-	label?: string;
-}>();
+const handle = inject(CanvasNodeHandleKey);
 
 const $style = useCssModule();
 </script>
 <template>
 	<div :class="$style.handle">
-		<div :class="$style.label">{{ label }}</div>
+		<div :class="$style.label">{{ handle?.label }}</div>
 	</div>
 </template>
 
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue
index bb5ece235cb6d..b406d0185352c 100644
--- a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup>
-import { useCssModule } from 'vue';
+import { inject, useCssModule } from 'vue';
 import { svg } from '@jsplumb/browser-ui';
+import { CanvasNodeHandleKey } from '@/constants';
 
-defineProps<{
-	label?: string;
-}>();
+const handle = inject(CanvasNodeHandleKey);
 
 // const group = svg.node('g');
 // const containerBorder = svg.node('rect', {
@@ -33,7 +32,7 @@ const $style = useCssModule();
 </script>
 <template>
 	<div :class="$style.handle">
-		<div :class="$style.label">{{ label }}</div>
+		<div :class="$style.label">{{ handle?.label }}</div>
 		<div :class="$style.circle" />
 		<!-- @TODO Determine whether handle is connected -->
 		<!--		<svg :class="$style.plus" viewBox="0 0 70 24">-->
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMain.vue b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMain.vue
index d56b56f294824..e7bc87eac5190 100644
--- a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMain.vue
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMain.vue
@@ -1,16 +1,15 @@
 <script lang="ts" setup>
-import { useCssModule } from 'vue';
+import { inject, useCssModule } from 'vue';
+import { CanvasNodeHandleKey } from '@/constants';
 
-defineProps<{
-	label?: string;
-}>();
+const handle = inject(CanvasNodeHandleKey);
 
 const $style = useCssModule();
 </script>
 <template>
 	<div :class="$style.handle">
 		<div :class="$style.diamond" />
-		<div :class="$style.label">{{ label }}</div>
+		<div :class="$style.label">{{ handle?.label }}</div>
 	</div>
 </template>
 
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
index bc87115f95065..9f07281815ede 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
-import { Handle, Position } from '@vue-flow/core';
-import { NodeToolbar } from '@vue-flow/node-toolbar';
-import { computed, useCssModule } from 'vue';
+import { Position } from '@vue-flow/core';
+import { computed, provide, toRef, useCssModule } from 'vue';
 import type {
 	CanvasElementData,
 	CanvasConnectionPort,
@@ -13,11 +12,13 @@ import CanvasNodeToolbar from '@/components/canvas/elements/nodes/CanvasNodeTool
 import CanvasNodeRenderer from '@/components/canvas/elements/nodes/CanvasNodeRenderer.vue';
 import HandleRenderer from '@/components/canvas/elements/handles/HandleRenderer.vue';
 import { useNodeConnections } from '@/composables/useNodeConnections';
+import { CanvasNodeKey } from '@/constants';
 
 const $style = useCssModule();
 
 const props = defineProps<{
 	data: CanvasElementData;
+	selected: boolean;
 }>();
 
 const inputs = computed(() => props.data.inputs);
@@ -25,16 +26,16 @@ const outputs = computed(() => props.data.outputs);
 
 const nodeTypesStore = useNodeTypesStore();
 
-const nodeType = computed(() => {
-	return nodeTypesStore.getNodeType(props.data.type, props.data.typeVersion);
-});
-
 const { mainInputs, nonMainInputs, mainOutputs, nonMainOutputs, requiredNonMainInputs } =
 	useNodeConnections({
 		inputs,
 		outputs,
 	});
 
+const nodeType = computed(() => {
+	return nodeTypesStore.getNodeType(props.data.type, props.data.typeVersion);
+});
+
 /**
  * Inputs
  */
@@ -76,6 +77,19 @@ const mapEndpointWithPosition =
 			},
 		};
 	};
+
+/**
+ * Provide
+ */
+
+const data = toRef(props, 'data');
+const selected = toRef(props, 'selected');
+
+provide(CanvasNodeKey, {
+	data,
+	selected,
+	nodeType,
+});
 </script>
 
 <template>
@@ -83,7 +97,6 @@ const mapEndpointWithPosition =
 		<template v-for="source in outputsWithPosition" :key="`${source.type}/${source.index}`">
 			<HandleRenderer
 				mode="output"
-				:source="true"
 				:type="source.type"
 				:label="source.label"
 				:index="source.index"
@@ -95,7 +108,6 @@ const mapEndpointWithPosition =
 		<template v-for="target in inputsWithPosition" :key="`${target.type}/${target.index}`">
 			<HandleRenderer
 				mode="input"
-				:source="false"
 				:type="target.type"
 				:label="target.label"
 				:index="target.index"
@@ -111,7 +123,7 @@ const mapEndpointWithPosition =
 			:data="data"
 		/>
 
-		<CanvasNodeRenderer v-if="nodeType" :node-type="nodeType" :data="data">
+		<CanvasNodeRenderer v-if="nodeType">
 			<NodeIcon :node-type="nodeType" :size="40" :shrink="false" />
 			<!--			:color-default="iconColorDefault"-->
 			<!--			:disabled="data.disabled"-->
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeRenderer.vue b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeRenderer.vue
index 5313bdaa6c3e2..65b13bf89196a 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeRenderer.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeRenderer.vue
@@ -1,15 +1,11 @@
 <script lang="ts" setup>
-import { h } from 'vue';
+import { h, inject } from 'vue';
 import CanvasNodeDefault from '@/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue';
 import CanvasNodeConfiguration from '@/components/canvas/elements/nodes/render-types/CanvasNodeConfiguration.vue';
 import CanvasNodeConfigurable from '@/components/canvas/elements/nodes/render-types/CanvasNodeConfigurable.vue';
-import type { CanvasElementData } from '@/types';
-import type { INodeTypeDescription } from 'n8n-workflow';
+import { CanvasNodeKey } from '@/constants';
 
-const props = defineProps<{
-	nodeType: INodeTypeDescription;
-	data: CanvasElementData;
-}>();
+const node = inject(CanvasNodeKey);
 
 const slots = defineSlots<{
 	default?: () => unknown;
@@ -17,7 +13,7 @@ const slots = defineSlots<{
 
 const Render = () => {
 	let Component;
-	switch (props.data.renderType) {
+	switch (node?.data.value.renderType) {
 		case 'configurable':
 			Component = CanvasNodeConfigurable;
 			break;
@@ -34,14 +30,7 @@ const Render = () => {
 			Component = CanvasNodeDefault;
 	}
 
-	return h(
-		Component,
-		{
-			nodeType: props.nodeType,
-			data: props.data,
-		},
-		slots.default,
-	);
+	return h(Component, slots.default);
 };
 </script>
 
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfigurable.vue b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfigurable.vue
index 07dca8464b189..26719363ed3a2 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfigurable.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfigurable.vue
@@ -1,19 +1,14 @@
 <script lang="ts" setup>
-import { computed, useCssModule } from 'vue';
-import type { INodeTypeDescription } from 'n8n-workflow';
-import type { CanvasElementData } from '@/types';
-import { NODE_INSERT_SPACER_BETWEEN_INPUT_GROUPS } from '@/constants';
+import { computed, inject, useCssModule } from 'vue';
+import { CanvasNodeKey, NODE_INSERT_SPACER_BETWEEN_INPUT_GROUPS } from '@/constants';
 import { useNodeConnections } from '@/composables/useNodeConnections';
 
-const props = defineProps<{
-	nodeType: INodeTypeDescription;
-	data: CanvasElementData;
-}>();
+const node = inject(CanvasNodeKey);
 
 const $style = useCssModule();
 
-const inputs = computed(() => props.data.inputs);
-const outputs = computed(() => props.data.outputs);
+const inputs = computed(() => node?.data.value.inputs ?? []);
+const outputs = computed(() => node?.data.value.outputs ?? []);
 
 const { nonMainInputs, requiredNonMainInputs } = useNodeConnections({
 	inputs,
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfiguration.vue b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfiguration.vue
index 081fdb7a545ca..caa61eb62a1d6 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfiguration.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfiguration.vue
@@ -1,12 +1,5 @@
 <script lang="ts" setup>
 import { useCssModule } from 'vue';
-import type { INodeTypeDescription } from 'n8n-workflow';
-import type { CanvasElementData } from '@/types';
-
-defineProps<{
-	nodeType: INodeTypeDescription;
-	data: CanvasElementData;
-}>();
 
 const $style = useCssModule();
 </script>
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
index e1930cce5e428..686711c08b231 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
@@ -1,27 +1,26 @@
 <script lang="ts" setup>
-import { computed, useCssModule } from 'vue';
-import type { INodeTypeDescription } from 'n8n-workflow';
-import type { CanvasElementData } from '@/types';
+import { computed, inject, useCssModule } from 'vue';
 import { useNodeConnections } from '@/composables/useNodeConnections';
+import { CanvasNodeKey } from '@/constants';
 
-const props = defineProps<{
-	nodeType: INodeTypeDescription;
-	data: CanvasElementData;
-}>();
+const node = inject(CanvasNodeKey);
 
 const $style = useCssModule();
 
-const inputs = computed(() => props.data.inputs);
-const outputs = computed(() => props.data.outputs);
+const inputs = computed(() => node?.data.value.inputs ?? []);
+const outputs = computed(() => node?.data.value.outputs ?? []);
 
 const { mainOutputs } = useNodeConnections({
 	inputs,
 	outputs,
 });
 
-/**
- * Styles
- */
+const classes = computed(() => {
+	return {
+		[$style.canvasNode]: true,
+		[$style.selected]: node?.selected.value,
+	};
+});
 
 const styles = computed(() => {
 	return {
@@ -31,7 +30,7 @@ const styles = computed(() => {
 </script>
 
 <template>
-	<div :class="$style.canvasNode" :style="styles">
+	<div :class="classes" :style="styles">
 		<slot />
 	</div>
 </template>
@@ -47,4 +46,8 @@ const styles = computed(() => {
 	border: 2px solid var(--canvas-node--border-color, var(--color-foreground-xdark));
 	border-radius: var(--border-radius-large);
 }
+
+.selected {
+	box-shadow: 0 0 0 4px var(--color-canvas-selected);
+}
 </style>
diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts
index ad3ce59638557..c1701811b2631 100644
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@@ -1,5 +1,7 @@
 import type { NodeCreatorOpenSource } from './Interface';
 import { NodeConnectionType } from 'n8n-workflow';
+import { CanvasNodeHandleInjectionData, CanvasNodeInjectionData } from '@/types';
+import { InjectionKey } from 'vue';
 
 export const MAX_WORKFLOW_SIZE = 1024 * 1024 * 16; // Workflow size limit in bytes
 export const MAX_EXPECTED_REQUEST_SIZE = 2048; // Expected maximum workflow request metadata (i.e. headers) size in bytes
@@ -473,7 +475,12 @@ export const enum VIEWS {
 	WORKER_VIEW = 'WorkerView',
 }
 
-export const EDITABLE_CANVAS_VIEWS = [VIEWS.WORKFLOW, VIEWS.NEW_WORKFLOW, VIEWS.EXECUTION_DEBUG];
+export const EDITABLE_CANVAS_VIEWS = [
+	VIEWS.WORKFLOW,
+	VIEWS.NEW_WORKFLOW,
+	VIEWS.EXECUTION_DEBUG,
+	VIEWS.WORKFLOW_V2,
+];
 
 export const enum FAKE_DOOR_FEATURES {
 	ENVIRONMENTS = 'environments',
@@ -797,3 +804,11 @@ export const INSECURE_CONNECTION_WARNING = `
 	</ul>
 </div>
 </body>`;
+
+/**
+ * Injection Keys
+ */
+
+export const CanvasNodeKey = 'canvasNode' as unknown as InjectionKey<CanvasNodeInjectionData>;
+export const CanvasNodeHandleKey =
+	'canvasNodeHandle' as unknown as InjectionKey<CanvasNodeHandleInjectionData>;
diff --git a/packages/editor-ui/src/stores/ui.store.ts b/packages/editor-ui/src/stores/ui.store.ts
index 4bb61ad677285..59d943957379e 100644
--- a/packages/editor-ui/src/stores/ui.store.ts
+++ b/packages/editor-ui/src/stores/ui.store.ts
@@ -195,6 +195,7 @@ export const useUIStore = defineStore(STORES.UI, {
 		// This enables us to set a queue of notifications form outside (another component)
 		// and then show them when the view is initialized
 		pendingNotificationsForViews: {},
+		isCreateNodeActive: false,
 	}),
 	getters: {
 		appliedTheme(): AppliedThemeOption {
diff --git a/packages/editor-ui/src/stores/workflows.store.ts b/packages/editor-ui/src/stores/workflows.store.ts
index 03876b37c1387..3b74148317f31 100644
--- a/packages/editor-ui/src/stores/workflows.store.ts
+++ b/packages/editor-ui/src/stores/workflows.store.ts
@@ -288,6 +288,12 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 		getPastChatMessages(): string[] {
 			return Array.from(new Set(this.chatMessages));
 		},
+		triggerNodes(): INodeUi[] {
+			const nodeTypesStore = useNodeTypesStore();
+			return this.workflow.nodes.filter(
+				(node) => node.type === START_NODE_TYPE || nodeTypesStore.isTriggerNode(node.type),
+			);
+		},
 	},
 	actions: {
 		getPinDataSize(pinData: Record<string, string | INodeExecutionData[]> = {}): number {
@@ -1065,6 +1071,13 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			}
 		},
 
+		setNodePosition(id: string, position: INodeUi['position']): void {
+			const node = this.workflow.nodes.find((node) => node.id === id);
+			if (!node) return;
+
+			this.setNodeValue({ name: node.name, key: 'position', value: position });
+		},
+
 		setNodeValue(updateInformation: IUpdateInformation): void {
 			// Find the node that should be updated
 			const nodeIndex = this.workflow.nodes.findIndex((node) => {
diff --git a/packages/editor-ui/src/types/canvas.ts b/packages/editor-ui/src/types/canvas.ts
index 5ef528726734f..e00d67888666e 100644
--- a/packages/editor-ui/src/types/canvas.ts
+++ b/packages/editor-ui/src/types/canvas.ts
@@ -1,8 +1,9 @@
 /* eslint-disable @typescript-eslint/no-redundant-type-constituents */
-import type { ConnectionTypes } from 'n8n-workflow';
+import type { ConnectionTypes, INodeTypeDescription } from 'n8n-workflow';
 import type { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
 import type { DefaultEdge, Node, Position } from '@vue-flow/core';
 import type { INodeUi } from '@/Interface';
+import type { ComputedRef, Ref } from 'vue';
 
 export type CanvasElementType = 'node' | 'note';
 
@@ -45,3 +46,13 @@ export interface CanvasPluginContext {
 export interface CanvasPlugin {
 	(ctx: CanvasPluginContext): void;
 }
+
+export interface CanvasNodeInjectionData {
+	data: Ref<CanvasElementData>;
+	selected: Ref<boolean>;
+	nodeType: ComputedRef<INodeTypeDescription | null>;
+}
+
+export interface CanvasNodeHandleInjectionData {
+	label: Ref<string | undefined>;
+}
diff --git a/packages/editor-ui/src/views/NodeView.v2.vue b/packages/editor-ui/src/views/NodeView.v2.vue
index 44e5a768b8c78..cdbb8dd64924a 100644
--- a/packages/editor-ui/src/views/NodeView.v2.vue
+++ b/packages/editor-ui/src/views/NodeView.v2.vue
@@ -1,37 +1,100 @@
 <script setup lang="ts">
-import { computed, onMounted, useCssModule } from 'vue';
+import { computed, defineAsyncComponent, onMounted, ref, useCssModule } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import WorkflowCanvas from '@/components/canvas/WorkflowCanvas.vue';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useUIStore } from '@/stores/ui.store';
-import KeyboardShortcutTooltip from '@/components/KeyboardShortcutTooltip.vue';
+import CanvasExecuteWorkflowButton from '@/components/canvas/elements/buttons/CanvasExecuteWorkflowButton.vue';
 import { useI18n } from '@/composables/useI18n';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useRunWorkflow } from '@/composables/useRunWorkflow';
+import type {
+	AddedNodesAndConnections,
+	INodeUi,
+	ITag,
+	ToggleNodeCreatorOptions,
+	XYPosition,
+} from '@/Interface';
+import useWorkflowsEEStore from '@/stores/workflows.ee.store';
+import { useTagsStore } from '@/stores/tags.store';
+import type { Connection } from '@vue-flow/core';
+import type { CanvasElement } from '@/types';
+import CanvasAddButton from '@/views/CanvasAddButton.vue';
+import {
+	AI_NODE_CREATOR_VIEW,
+	REGULAR_NODE_CREATOR_VIEW,
+	START_NODE_TYPE,
+	STICKY_NODE_TYPE,
+	TRIGGER_NODE_CREATOR_VIEW,
+	VIEWS,
+} from '@/constants';
+import { useSourceControlStore } from '@/stores/sourceControl.store';
+import { useNodeCreatorStore } from '@/stores/nodeCreator.store';
+import { useTelemetry } from '@/composables/useTelemetry';
+import { useExternalHooks } from '@/composables/useExternalHooks';
+import * as NodeViewUtils from '@/utils/nodeViewUtils';
+import {
+	type ConnectionTypes,
+	type INodeOutputConfiguration,
+	type INodeTypeDescription,
+	type INodeTypeNameVersion,
+	type ITelemetryTrackProperties,
+	NodeConnectionType,
+	NodeHelpers,
+} from 'n8n-workflow';
+import { useToast } from '@/composables/useToast';
+import { v4 as uuid } from 'uuid';
+import { useSegment } from '@/stores/segment.store';
+
+const NodeCreation = defineAsyncComponent(
+	async () => await import('@/components/Node/NodeCreation.vue'),
+);
 
 const $style = useCssModule();
 
 const router = useRouter();
 const route = useRoute();
-const locale = useI18n();
+const i18n = useI18n();
+const telemetry = useTelemetry();
+const externalHooks = useExternalHooks();
+const toast = useToast();
 
 const nodeTypesStore = useNodeTypesStore();
 const uiStore = useUIStore();
 const workflowsStore = useWorkflowsStore();
+const workflowsEEStore = useWorkflowsEEStore();
+const tagsStore = useTagsStore();
+const sourceControlStore = useSourceControlStore();
+const nodeCreatorStore = useNodeCreatorStore();
 
 const { runWorkflow } = useRunWorkflow({ router });
 
+const isLoading = ref(true);
+const readOnlyNotification = ref<null | { visible: boolean }>(null);
+
 const workflowId = computed<string>(() => route.params.workflowId as string);
-const workflow = computed(() => workflowsStore.workflow);
-const workflowObject = computed(() => workflowsStore.getCurrentWorkflow());
+const workflow = computed(() => workflowsStore.workflowsById[workflowId.value]);
 
-const workflowRunning = computed(() => uiStore.isActionActive('workflowRunning'));
-const runButtonText = computed(() => {
-	if (!workflowRunning.value) {
-		return locale.baseText('nodeView.runButtonText.executeWorkflow');
-	}
+const editableWorkflow = computed(() => workflowsStore.workflow);
+const editableWorkflowObject = computed(() => workflowsStore.getCurrentWorkflow());
+
+const isDemoRoute = computed(() => route.name === VIEWS.DEMO);
+const isReadOnlyRoute = computed(() => route?.meta?.readOnlyCanvas === true);
+const isReadOnlyEnvironment = computed(() => {
+	return sourceControlStore.preferences.branchReadOnly;
+});
 
-	return locale.baseText('nodeView.runButtonText.executingWorkflow');
+const triggerNodes = computed<INodeUi[]>(() => {
+	return workflowsStore.triggerNodes;
+});
+
+const isCanvasAddButtonVisible = computed(() => {
+	return (
+		triggerNodes.value.length > 0 &&
+		!isLoading.value &&
+		!isDemoRoute.value &&
+		!isReadOnlyEnvironment.value
+	);
 });
 
 onMounted(() => {
@@ -39,34 +102,720 @@ onMounted(() => {
 });
 
 async function initialize() {
+	isLoading.value = true;
+
 	await nodeTypesStore.getNodeTypes();
 	await workflowsStore.fetchWorkflow(workflowId.value);
+
+	initializeEditableWorkflow(workflowId.value);
+
+	isLoading.value = false;
+}
+
+// @TODO Move this to the store
+function initializeEditableWorkflow(id: string) {
+	const targetWorkflow = workflowsStore.workflowsById[id];
+
+	workflowsStore.addWorkflow(targetWorkflow);
+	workflowsStore.setWorkflow(targetWorkflow);
+	workflowsStore.setActive(targetWorkflow.active || false);
+	workflowsStore.setWorkflowId(targetWorkflow.id);
+	workflowsStore.setWorkflowName({ newName: targetWorkflow.name, setStateDirty: false });
+	workflowsStore.setWorkflowSettings(targetWorkflow.settings ?? {});
+	workflowsStore.setWorkflowPinData(targetWorkflow.pinData ?? {});
+	workflowsStore.setWorkflowVersionId(targetWorkflow.versionId);
+	workflowsStore.setWorkflowMetadata(targetWorkflow.meta);
+	if (targetWorkflow.usedCredentials) {
+		workflowsStore.setUsedCredentials(targetWorkflow.usedCredentials);
+	}
+
+	if (targetWorkflow.ownedBy) {
+		workflowsEEStore.setWorkflowOwnedBy({
+			workflowId: targetWorkflow.id,
+			ownedBy: targetWorkflow.ownedBy,
+		});
+	}
+
+	if (targetWorkflow.sharedWith) {
+		workflowsEEStore.setWorkflowSharedWith({
+			workflowId: targetWorkflow.id,
+			sharedWith: targetWorkflow.sharedWith,
+		});
+	}
+
+	const tags = (targetWorkflow.tags ?? []) as ITag[];
+	const tagIds = tags.map((tag) => tag.id);
+	workflowsStore.setWorkflowTagIds(tagIds || []);
+	tagsStore.upsertTags(tags);
+
+	// if (!this.credentialsUpdated) {
+	// 	this.uiStore.stateIsDirty = false;
+	// }
+	// this.canvasStore.zoomToFit();
+	// void this.externalHooks.run('workflow.open', {
+	// 	workflowId: workflow.id,
+	// 	workflowName: workflow.name,
+	// });
+	// if (selectedExecution?.workflowId !== workflow.id) {
+	// 	this.executionsStore.activeExecution = null;
+	// 	workflowsStore.currentWorkflowExecutions = [];
+	// } else {
+	// 	this.executionsStore.activeExecution = selectedExecution;
+	// }
+	// this.canvasStore.stopLoading();
+	// this.collaborationStore.notifyWorkflowOpened(workflow.id);
 }
 
 async function onRunWorkflow() {
 	await runWorkflow({});
 }
+
+/**
+ * Map new node position format to the old one and update the store
+ *
+ * @param id
+ * @param position
+ */
+function onNodePositionUpdate(id: string, position: CanvasElement['position']) {
+	workflowsStore.setNodePosition(id, [position.x, position.y]);
+}
+
+/**
+ * Map new node connection format to the old one and add it to the store
+ *
+ * @param connection
+ */
+function onCreateNodeConnection(connection: Connection) {
+	// Output
+	const targetNodeId = connection.target;
+	const targetNodeName = workflowsStore.getNodeById(targetNodeId)?.name ?? '';
+	const [, targetType, targetIndex] = (connection.targetHandle ?? '').split('/');
+
+	// Input
+	const sourceNodeId = connection.source;
+	const sourceNodeName = workflowsStore.getNodeById(sourceNodeId)?.name ?? '';
+	const [, sourceType, sourceIndex] = (connection.sourceHandle ?? '').split('/');
+
+	workflowsStore.addConnection({
+		connection: [
+			{
+				node: targetNodeName,
+				type: targetType,
+				index: parseInt(targetIndex, 10),
+			},
+			{
+				node: sourceNodeName,
+				type: sourceType,
+				index: parseInt(sourceIndex, 10),
+			},
+		],
+	});
+
+	uiStore.stateIsDirty = true;
+}
+
+function onToggleNodeCreator({
+	source,
+	createNodeActive,
+	nodeCreatorView,
+}: ToggleNodeCreatorOptions) {
+	if (createNodeActive === uiStore.isCreateNodeActive) {
+		return;
+	}
+
+	if (!nodeCreatorView) {
+		nodeCreatorView =
+			triggerNodes.value.length > 0 ? REGULAR_NODE_CREATOR_VIEW : TRIGGER_NODE_CREATOR_VIEW;
+	}
+	// Default to the trigger tab in node creator if there's no trigger node yet
+	nodeCreatorStore.setSelectedView(nodeCreatorView);
+
+	let mode;
+	switch (nodeCreatorStore.selectedView) {
+		case AI_NODE_CREATOR_VIEW:
+			mode = 'ai';
+			break;
+		case REGULAR_NODE_CREATOR_VIEW:
+			mode = 'regular';
+			break;
+		default:
+			mode = 'regular';
+	}
+
+	uiStore.isCreateNodeActive = createNodeActive;
+	if (createNodeActive && source) {
+		nodeCreatorStore.setOpenSource(source);
+	}
+
+	void externalHooks.run('nodeView.createNodeActiveChanged', {
+		source,
+		mode,
+		createNodeActive,
+	});
+
+	telemetry.trackNodesPanel('nodeView.createNodeActiveChanged', {
+		source,
+		mode,
+		createNodeActive,
+		workflow_id: workflowId.value,
+	});
+}
+
+async function onAddNodes(
+	{ nodes, connections }: AddedNodesAndConnections,
+	dragAndDrop = false,
+	position?: XYPosition,
+) {
+	let currentPosition = position;
+	for (const { type, name, position: nodePosition, isAutoAdd, openDetail } of nodes) {
+		await addNode(
+			{
+				name,
+				type,
+				position: nodePosition ?? currentPosition,
+			},
+			{
+				dragAndDrop,
+				openNDV: openDetail ?? false,
+				trackHistory: true,
+				isAutoAdd,
+			},
+		);
+
+		// 	const lastAddedNode = editableWorkflow.value.nodes[editableWorkflow.value.nodes.length - 1];
+		// 	currentPosition = [
+		// 		lastAddedNode.position[0] + NodeViewUtils.NODE_SIZE * 2 + NodeViewUtils.GRID_SIZE,
+		// 		lastAddedNode.position[1],
+		// 	];
+		// }
+		//
+		// const newNodesOffset = editableWorkflow.value.nodes.length - nodes.length;
+		// for (const { from, to } of connections) {
+		// 	const fromNode = editableWorkflow.value.nodes[newNodesOffset + from.nodeIndex];
+		// 	const toNode = editableWorkflow.value.nodes[newNodesOffset + to.nodeIndex];
+		//
+		// 	// this.connectTwoNodes(
+		// 	// 	fromNode.name,
+		// 	// 	from.outputIndex ?? 0,
+		// 	// 	toNode.name,
+		// 	// 	to.inputIndex ?? 0,
+		// 	// 	NodeConnectionType.Main,
+		// 	// );
+	}
+
+	// const lastAddedNode = editableWorkflow.value.nodes[editableWorkflow.value.nodes.length - 1];
+	// const workflow = editableWorkflowObject.value;
+	// const lastNodeInputs = workflow.getParentNodesByDepth(lastAddedNode.name, 1);
+	//
+	// // If the last added node has multiple inputs, move them down
+	// if (lastNodeInputs.length > 1) {
+	// 	lastNodeInputs.slice(1).forEach((node, index) => {
+	// 		const nodeUi = workflowsStore.getNodeByName(node.name);
+	// 		if (!nodeUi) return;
+	//
+	// 		// onMoveNode({
+	// 		// 	nodeName: nodeUi.name,
+	// 		// 	position: [nodeUi.position[0], nodeUi.position[1] + 100 * (index + 1)],
+	// 		// });
+	// 	});
+	// }
+}
+
+type AddNodeData = {
+	name?: string;
+	type: string;
+	position?: XYPosition;
+};
+
+type AddNodeOptions = {
+	dragAndDrop?: boolean;
+	openNDV?: boolean;
+	trackHistory?: boolean;
+	isAutoAdd?: boolean;
+};
+
+async function addNode(node: AddNodeData, options: AddNodeOptions) {
+	if (!checkIfEditingIsAllowed()) {
+		return;
+	}
+
+	const newNodeData = await createNodeWithDefaultCredentials(node);
+	if (!newNodeData) {
+		return;
+	}
+
+	workflowsStore.addNode(newNodeData);
+
+	// const lastSelectedNode = uiStore.getLastSelectedNode;
+	// const lastSelectedNodeOutputIndex = uiStore.lastSelectedNodeOutputIndex;
+	// const lastSelectedNodeEndpointUuid = uiStore.lastSelectedNodeEndpointUuid;
+	// const lastSelectedConnection = canvasStore.lastSelectedConnection;
+	//
+	// historyStore.startRecordingUndo();
+	//
+	// const newNodeData = await injectNode(
+	// 	nodeTypeName,
+	// 	options,
+	// 	showDetail,
+	// 	trackHistory,
+	// 	isAutoAdd,
+	// );
+	// if (!newNodeData) {
+	// 	return;
+	// }
+	//
+	// const outputIndex = lastSelectedNodeOutputIndex || 0;
+	// const targetEndpoint = lastSelectedNodeEndpointUuid || '';
+	//
+	// // Handle connection of scoped_endpoint types
+	// if (lastSelectedNodeEndpointUuid && !isAutoAdd) {
+	// 	const lastSelectedEndpoint = this.instance.getEndpoint(lastSelectedNodeEndpointUuid);
+	// 	if (
+	// 		lastSelectedEndpoint &&
+	// 		this.checkNodeConnectionAllowed(
+	// 			lastSelectedNode,
+	// 			newNodeData,
+	// 			lastSelectedEndpoint.scope as NodeConnectionType,
+	// 		)
+	// 	) {
+	// 		const connectionType = lastSelectedEndpoint.scope as ConnectionTypes;
+	// 		const newNodeElement = this.instance.getManagedElement(newNodeData.id);
+	// 		const newNodeConnections = this.instance.getEndpoints(newNodeElement);
+	// 		const viableConnection = newNodeConnections.find((conn) => {
+	// 			return (
+	// 				conn.scope === connectionType &&
+	// 				lastSelectedEndpoint.parameters.connection !== conn.parameters.connection
+	// 			);
+	// 		});
+	//
+	// 		this.instance?.connect({
+	// 			uuids: [targetEndpoint, viableConnection?.uuid || ''],
+	// 			detachable: !this.isReadOnlyRoute && !this.readOnlyEnv,
+	// 		});
+	// 		this.historyStore.stopRecordingUndo();
+	// 		return;
+	// 	}
+	// }
+	// If a node is last selected then connect between the active and its child ones
+	// if (lastSelectedNode && !isAutoAdd) {
+	// 	await this.$nextTick();
+	//
+	// 	if (lastSelectedConnection?.__meta) {
+	// 		this.__deleteJSPlumbConnection(lastSelectedConnection, trackHistory);
+	//
+	// 		const targetNodeName = lastSelectedConnection.__meta.targetNodeName;
+	// 		const targetOutputIndex = lastSelectedConnection.__meta.targetOutputIndex;
+	// 		this.connectTwoNodes(
+	// 			newNodeData.name,
+	// 			0,
+	// 			targetNodeName,
+	// 			targetOutputIndex,
+	// 			NodeConnectionType.Main,
+	// 		);
+	// 	}
+	//
+	// 	// Connect active node to the newly created one
+	// 	this.connectTwoNodes(
+	// 		lastSelectedNode.name,
+	// 		outputIndex,
+	// 		newNodeData.name,
+	// 		0,
+	// 		NodeConnectionType.Main,
+	// 	);
+	// }
+	// this.historyStore.stopRecordingUndo();
+}
+
+async function createNodeWithDefaultCredentials(node: Partial<INodeUi>) {
+	const nodeTypeDescription = nodeTypesStore.getNodeType(
+		node.type as string,
+	) as INodeTypeDescription;
+
+	let nodeVersion = nodeTypeDescription.defaultVersion;
+	if (nodeVersion === undefined) {
+		nodeVersion = Array.isArray(nodeTypeDescription.version)
+			? nodeTypeDescription.version.slice(-1)[0]
+			: nodeTypeDescription.version;
+	}
+
+	const newNodeData: INodeUi = {
+		id: uuid(),
+		name: node.name ?? (nodeTypeDescription.defaults.name as string),
+		type: nodeTypeDescription.name,
+		typeVersion: nodeVersion,
+		position: [0, 0],
+		parameters: {},
+	};
+
+	// const credentialPerType = nodeTypeData.credentials
+	// 	?.map((type) => credentialsStore.getUsableCredentialByType(type.name))
+	// 	.flat();
+	//
+	// if (credentialPerType && credentialPerType.length === 1) {
+	// 	const defaultCredential = credentialPerType[0];
+	//
+	// 	const selectedCredentials = credentialsStore.getCredentialById(defaultCredential.id);
+	// 	const selected = { id: selectedCredentials.id, name: selectedCredentials.name };
+	// 	const credentials = {
+	// 		[defaultCredential.type]: selected,
+	// 	};
+	//
+	// 	await loadNodesProperties(
+	// 		[newNodeData].map((node) => ({ name: node.type, version: node.typeVersion })),
+	// 	);
+	//
+	// 	const nodeType = nodeTypesStore.getNodeType(newNodeData.type, newNodeData.typeVersion);
+	// 	const nodeParameters = NodeHelpers.getNodeParameters(
+	// 		nodeType?.properties ?? [],
+	// 		{},
+	// 		true,
+	// 		false,
+	// 		newNodeData,
+	// 	);
+	//
+	// 	if (nodeTypeData.credentials) {
+	// 		const authentication = nodeTypeData.credentials.find(
+	// 			(type) => type.name === defaultCredential.type,
+	// 		);
+	// 		if (authentication?.displayOptions?.hide) {
+	// 			return newNodeData;
+	// 		}
+	//
+	// 		const authDisplayOptions = authentication?.displayOptions?.show;
+	// 		if (!authDisplayOptions) {
+	// 			newNodeData.credentials = credentials;
+	// 			return newNodeData;
+	// 		}
+	//
+	// 		if (Object.keys(authDisplayOptions).length === 1 && authDisplayOptions.authentication) {
+	// 			// ignore complex case when there's multiple dependencies
+	// 			newNodeData.credentials = credentials;
+	//
+	// 			let parameters: { [key: string]: string } = {};
+	// 			for (const displayOption of Object.keys(authDisplayOptions)) {
+	// 				if (nodeParameters && !nodeParameters[displayOption]) {
+	// 					parameters = {};
+	// 					newNodeData.credentials = undefined;
+	// 					break;
+	// 				}
+	// 				const optionValue = authDisplayOptions[displayOption]?.[0];
+	// 				if (optionValue && typeof optionValue === 'string') {
+	// 					parameters[displayOption] = optionValue;
+	// 				}
+	// 				newNodeData.parameters = {
+	// 					...newNodeData.parameters,
+	// 					...parameters,
+	// 				};
+	// 			}
+	// 		}
+	// 	}
+	// }
+
+	return newNodeData;
+}
+
+// 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 function injectNode(
+	nodeTypeName: string,
+	options: AddNodeOptions = {},
+	showDetail = true,
+	trackHistory = false,
+	isAutoAdd = false,
+) {
+	// const nodeTypeData: INodeTypeDescription | null =
+	// 	this.nodeTypesStore.getNodeType(nodeTypeName);
+	//
+	// if (nodeTypeData === null) {
+	// 	this.showMessage({
+	// 		title: this.$locale.baseText('nodeView.showMessage.addNodeButton.title'),
+	// 		message: this.$locale.baseText('nodeView.showMessage.addNodeButton.message', {
+	// 			interpolate: { nodeTypeName },
+	// 		}),
+	// 		type: 'error',
+	// 	});
+	// 	return;
+	// }
+	//
+	// if (
+	// 	nodeTypeData.maxNodes !== undefined &&
+	// 	this.workflowHelpers.getNodeTypeCount(nodeTypeName) >= nodeTypeData.maxNodes
+	// ) {
+	// 	this.showMaxNodeTypeError(nodeTypeData);
+	// 	return;
+	// }
+	//
+	// const newNodeData = await this.getNewNodeWithDefaultCredential(nodeTypeData, {
+	// 	name: options.name,
+	// });
+	//
+	// // when pulling new connection from node or injecting into a connection
+	// const lastSelectedNode = this.lastSelectedNode;
+	//
+	// if (options.position) {
+	// 	newNodeData.position = NodeViewUtils.getNewNodePosition(
+	// 		this.canvasStore.getNodesWithPlaceholderNode(),
+	// 		options.position,
+	// 	);
+	// } else if (lastSelectedNode) {
+	// 	const lastSelectedConnection = this.canvasStore.lastSelectedConnection;
+	// 	if (lastSelectedConnection) {
+	// 		// set when injecting into a connection
+	// 		const [diffX] = NodeViewUtils.getConnectorLengths(lastSelectedConnection);
+	// 		if (diffX <= NodeViewUtils.MAX_X_TO_PUSH_DOWNSTREAM_NODES) {
+	// 			this.pushDownstreamNodes(
+	// 				lastSelectedNode.name,
+	// 				NodeViewUtils.PUSH_NODES_OFFSET,
+	// 				trackHistory,
+	// 			);
+	// 		}
+	// 	}
+	//
+	// 	// set when pulling connections
+	// 	if (this.canvasStore.newNodeInsertPosition) {
+	// 		newNodeData.position = NodeViewUtils.getNewNodePosition(this.nodes, [
+	// 			this.canvasStore.newNodeInsertPosition[0] + NodeViewUtils.GRID_SIZE,
+	// 			this.canvasStore.newNodeInsertPosition[1] - NodeViewUtils.NODE_SIZE / 2,
+	// 		]);
+	// 		this.canvasStore.newNodeInsertPosition = null;
+	// 	} else {
+	// 		let yOffset = 0;
+	// 		const workflow = this.workflowHelpers.getCurrentWorkflow();
+	//
+	// 		if (lastSelectedConnection) {
+	// 			const sourceNodeType = this.nodeTypesStore.getNodeType(
+	// 				lastSelectedNode.type,
+	// 				lastSelectedNode.typeVersion,
+	// 			);
+	//
+	// 			if (sourceNodeType) {
+	// 				const offsets = [
+	// 					[-100, 100],
+	// 					[-140, 0, 140],
+	// 					[-240, -100, 100, 240],
+	// 				];
+	//
+	// 				const sourceNodeOutputs = NodeHelpers.getNodeOutputs(
+	// 					workflow,
+	// 					lastSelectedNode,
+	// 					sourceNodeType,
+	// 				);
+	// 				const sourceNodeOutputTypes = NodeHelpers.getConnectionTypes(sourceNodeOutputs);
+	//
+	// 				const sourceNodeOutputMainOutputs = sourceNodeOutputTypes.filter(
+	// 					(output) => output === NodeConnectionType.Main,
+	// 				);
+	//
+	// 				if (sourceNodeOutputMainOutputs.length > 1) {
+	// 					const offset = offsets[sourceNodeOutputMainOutputs.length - 2];
+	// 					const sourceOutputIndex = lastSelectedConnection.__meta
+	// 						? lastSelectedConnection.__meta.sourceOutputIndex
+	// 						: 0;
+	// 					yOffset = offset[sourceOutputIndex];
+	// 				}
+	// 			}
+	// 		}
+	//
+	// 		let outputs: Array<ConnectionTypes | INodeOutputConfiguration> = [];
+	// 		try {
+	// 			// It fails when the outputs are an expression. As those nodes have
+	// 			// normally no outputs by default and the only reason we need the
+	// 			// outputs here is to calculate the position, it is fine to assume
+	// 			// that they have no outputs and are so treated as a regular node
+	// 			// with only "main" outputs.
+	// 			outputs = NodeHelpers.getNodeOutputs(workflow, newNodeData, nodeTypeData);
+	// 		} catch (e) {}
+	// 		const outputTypes = NodeHelpers.getConnectionTypes(outputs);
+	// 		const lastSelectedNodeType = this.nodeTypesStore.getNodeType(
+	// 			lastSelectedNode.type,
+	// 			lastSelectedNode.typeVersion,
+	// 		);
+	//
+	// 		// If node has only scoped outputs, position it below the last selected node
+	// 		if (
+	// 			outputTypes.length > 0 &&
+	// 			outputTypes.every((outputName) => outputName !== NodeConnectionType.Main)
+	// 		) {
+	// 			const lastSelectedNodeWorkflow = workflow.getNode(lastSelectedNode.name);
+	// 			const lastSelectedInputs = NodeHelpers.getNodeInputs(
+	// 				workflow,
+	// 				lastSelectedNodeWorkflow,
+	// 				lastSelectedNodeType,
+	// 			);
+	// 			const lastSelectedInputTypes = NodeHelpers.getConnectionTypes(lastSelectedInputs);
+	//
+	// 			const scopedConnectionIndex = (lastSelectedInputTypes || [])
+	// 				.filter((input) => input !== NodeConnectionType.Main)
+	// 				.findIndex((inputType) => outputs[0] === inputType);
+	//
+	// 			newNodeData.position = NodeViewUtils.getNewNodePosition(
+	// 				this.nodes,
+	// 				[
+	// 					lastSelectedNode.position[0] +
+	// 					(NodeViewUtils.NODE_SIZE /
+	// 						(Math.max(lastSelectedNodeType?.inputs?.length ?? 1), 1)) *
+	// 					scopedConnectionIndex,
+	// 					lastSelectedNode.position[1] + NodeViewUtils.PUSH_NODES_OFFSET,
+	// 				],
+	// 				[100, 0],
+	// 			);
+	// 		} else {
+	// 			// Has only main outputs or no outputs at all
+	// 			const inputs = NodeHelpers.getNodeInputs(
+	// 				workflow,
+	// 				lastSelectedNode,
+	// 				lastSelectedNodeType,
+	// 			);
+	// 			const inputsTypes = NodeHelpers.getConnectionTypes(inputs);
+	//
+	// 			let pushOffset = NodeViewUtils.PUSH_NODES_OFFSET;
+	// 			if (!!inputsTypes.find((input) => input !== NodeConnectionType.Main)) {
+	// 				// If the node has scoped inputs, push it down a bit more
+	// 				pushOffset += 150;
+	// 			}
+	//
+	// 			// If a node is active then add the new node directly after the current one
+	// 			newNodeData.position = NodeViewUtils.getNewNodePosition(
+	// 				this.nodes,
+	// 				[lastSelectedNode.position[0] + pushOffset, lastSelectedNode.position[1] + yOffset],
+	// 				[100, 0],
+	// 			);
+	// 		}
+	// 	}
+	// } else {
+	// 	// If added node is a trigger and it's the first one added to the canvas
+	// 	// we place it at canvasAddButtonPosition to replace the canvas add button
+	// 	const position =
+	// 		this.nodeTypesStore.isTriggerNode(nodeTypeName) && !this.containsTrigger
+	// 			? this.canvasStore.canvasAddButtonPosition
+	// 			: // If no node is active find a free spot
+	// 			(this.lastClickPosition as XYPosition);
+	//
+	// 	newNodeData.position = NodeViewUtils.getNewNodePosition(this.nodes, position);
+	// }
+	//
+	// const localizedName = this.locale.localizeNodeName(newNodeData.name, newNodeData.type);
+	//
+	// newNodeData.name = this.uniqueNodeName(localizedName);
+	//
+	// if (nodeTypeData.webhooks?.length) {
+	// 	newNodeData.webhookId = uuid();
+	// }
+	//
+	// await this.addNodes([newNodeData], undefined, trackHistory);
+	// this.workflowsStore.setNodePristine(newNodeData.name, true);
+	//
+	// this.uiStore.stateIsDirty = true;
+	//
+	// if (nodeTypeName === STICKY_NODE_TYPE) {
+	// 	this.$telemetry.trackNodesPanel('nodeView.addSticky', {
+	// 		workflow_id: this.workflowsStore.workflowId,
+	// 	});
+	// } else {
+	// 	void this.externalHooks.run('nodeView.addNodeButton', { nodeTypeName });
+	// 	useSegment().trackAddedTrigger(nodeTypeName);
+	// 	const trackProperties: ITelemetryTrackProperties = {
+	// 		node_type: nodeTypeName,
+	// 		node_version: newNodeData.typeVersion,
+	// 		is_auto_add: isAutoAdd,
+	// 		workflow_id: this.workflowsStore.workflowId,
+	// 		drag_and_drop: options.dragAndDrop,
+	// 	};
+	//
+	// 	if (lastSelectedNode) {
+	// 		trackProperties.input_node_type = lastSelectedNode.type;
+	// 	}
+	//
+	// 	this.$telemetry.trackNodesPanel('nodeView.addNodeButton', trackProperties);
+	// }
+	//
+	// // Automatically deselect all nodes and select the current one and also active
+	// // current node. But only if it's added manually by the user (not by undo/redo mechanism)
+	// if (trackHistory) {
+	// 	this.deselectAllNodes();
+	// 	setTimeout(() => {
+	// 		this.nodeSelectedByName(
+	// 			newNodeData.name,
+	// 			showDetail && nodeTypeName !== STICKY_NODE_TYPE,
+	// 		);
+	// 	});
+	// }
+	//
+	// return newNodeData;
+}
+
+function checkIfEditingIsAllowed(): boolean {
+	if (readOnlyNotification.value?.visible) {
+		return false;
+	}
+
+	if (isReadOnlyRoute.value || isReadOnlyEnvironment.value) {
+		const messageContext = isReadOnlyRoute.value ? 'executions' : 'workflows';
+		readOnlyNotification.value = toast.showMessage({
+			title: i18n.baseText(
+				isReadOnlyEnvironment.value
+					? `readOnlyEnv.showMessage.${messageContext}.title`
+					: 'readOnly.showMessage.executions.title',
+			),
+			message: i18n.baseText(
+				isReadOnlyEnvironment.value
+					? `readOnlyEnv.showMessage.${messageContext}.message`
+					: 'readOnly.showMessage.executions.message',
+			),
+			type: 'info',
+			dangerouslyUseHTMLString: true,
+		}) as unknown as { visible: boolean };
+
+		return false;
+	}
+
+	return true;
+}
 </script>
 
 <template>
 	<WorkflowCanvas
-		v-if="workflow && workflowObject"
-		:workflow="workflow"
-		:workflow-object="workflowObject"
+		v-if="editableWorkflow && editableWorkflowObject"
+		:workflow="editableWorkflow"
+		:workflow-object="editableWorkflowObject"
+		@update:node:position="onNodePositionUpdate"
+		@create:connection="onCreateNodeConnection"
 	>
 		<div :class="$style.executionButtons">
-			<KeyboardShortcutTooltip :label="runButtonText" :shortcut="{ metaKey: true, keys: ['↵'] }">
-				<N8nButton
-					:loading="workflowRunning"
-					:label="runButtonText"
-					size="large"
-					icon="flask"
-					type="primary"
-					data-test-id="execute-workflow-button"
-					@click.stop="onRunWorkflow"
-				/>
-			</KeyboardShortcutTooltip>
+			<CanvasExecuteWorkflowButton @click="onRunWorkflow" />
 		</div>
+		<Suspense>
+			<NodeCreation
+				v-if="!isReadOnlyRoute && !isReadOnlyEnvironment"
+				:create-node-active="uiStore.isCreateNodeActive"
+				:node-view-scale="1"
+				@toggle-node-creator="onToggleNodeCreator"
+				@add-nodes="onAddNodes"
+			/>
+		</Suspense>
 	</WorkflowCanvas>
 </template>
 

From c99ef4a25cc5a857f43386b796e302944e96d7a6 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Thu, 9 May 2024 10:37:04 +0300
Subject: [PATCH 14/22] fix: update package-lock

---
 pnpm-lock.yaml | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8e0ae250cda94..8dbd012a918c2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10563,7 +10563,6 @@ packages:
       path-browserify: 1.0.1
     dev: true
 
-<<<<<<< HEAD
   /@vue-flow/background@1.3.0(@vue-flow/core@1.33.5)(vue@3.4.21):
     resolution: {integrity: sha512-fu/8s9wzSOQIitnSTI10XT3bzTtagh4h8EF2SWwtlDklOZjAaKy75lqv4htHa3wigy/r4LGCOGwLw3Pk88/AxA==}
     peerDependencies:
@@ -10618,17 +10617,6 @@ packages:
       '@vue-flow/core': 1.33.5(vue@3.4.21)
     dev: false
 
-  /@vue/compiler-core@3.3.4:
-    resolution: {integrity: sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==}
-    dependencies:
-      '@babel/parser': 7.23.6
-      '@vue/shared': 3.3.4
-      estree-walker: 2.0.2
-      source-map-js: 1.0.2
-    dev: false
-
-=======
->>>>>>> master
   /@vue/compiler-core@3.4.21:
     resolution: {integrity: sha512-MjXawxZf2SbZszLPYxaFCjxfibYrzr3eYbKxwpLR9EQN+oaziSu3qKVbwBERj1IFIB8OLUewxB5m/BFzi613og==}
     dependencies:

From 87933d073b0ea82758aa8b4e183b0dbe5b25b2f4 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Thu, 9 May 2024 10:57:15 +0300
Subject: [PATCH 15/22] feat: add node names

---
 .../src/components/canvas/WorkflowCanvas.vue         |  2 +-
 .../components/canvas/elements/nodes/CanvasNode.vue  | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/canvas/WorkflowCanvas.vue b/packages/editor-ui/src/components/canvas/WorkflowCanvas.vue
index f67dfb29fb1e2..c88a030e0e2f3 100644
--- a/packages/editor-ui/src/components/canvas/WorkflowCanvas.vue
+++ b/packages/editor-ui/src/components/canvas/WorkflowCanvas.vue
@@ -98,7 +98,7 @@ const elements = computed<CanvasElement[]>(() => [
 
 		return {
 			id: node.id,
-			label: 'node',
+			label: node.name,
 			type: 'canvas-node',
 			position: { x: node.position[0], y: node.position[1] },
 			data,
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
index 9f07281815ede..d06221729bf42 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
@@ -18,6 +18,7 @@ const $style = useCssModule();
 
 const props = defineProps<{
 	data: CanvasElementData;
+	label: string;
 	selected: boolean;
 }>();
 
@@ -127,6 +128,7 @@ provide(CanvasNodeKey, {
 			<NodeIcon :node-type="nodeType" :size="40" :shrink="false" />
 			<!--			:color-default="iconColorDefault"-->
 			<!--			:disabled="data.disabled"-->
+			<div :class="$style.canvasNodeLabel">{{ label }}</div>
 		</CanvasNodeRenderer>
 	</div>
 </template>
@@ -141,6 +143,16 @@ provide(CanvasNodeKey, {
 	}
 }
 
+.canvasNodeLabel {
+	top: 100%;
+	position: absolute;
+	font-size: var(--font-size-m);
+	text-align: center;
+	width: 100%;
+	min-width: 200px;
+	margin-top: var(--spacing-2xs);
+}
+
 .canvasNodeToolbar {
 	display: none;
 	position: absolute;

From a4765abb737fb8fb77945d98576a77083886b873 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Thu, 9 May 2024 15:28:39 +0300
Subject: [PATCH 16/22] feat: update connections and props

---
 .../components/MainHeaderV2/MainHeaderV2.vue  | 213 -----
 .../MainHeaderV2/WorkflowDetailsV2.vue        | 786 ------------------
 .../src/components/canvas/Canvas.vue          |   4 +-
 .../canvas/elements/edges/CanvasEdge.vue      |  48 +-
 .../elements/handles/HandleRenderer.vue       |   2 +-
 .../render-types/CanvasHandleMainInput.vue    |   6 +-
 .../render-types/CanvasHandleMainOutput.vue   |   6 +-
 .../render-types/CanvasHandleNonMain.vue      |   6 +-
 .../canvas/elements/nodes/CanvasNode.vue      |  20 +-
 .../render-types/CanvasNodeConfigurable.vue   |  34 +-
 .../render-types/CanvasNodeConfiguration.vue  |  33 +-
 .../nodes/render-types/CanvasNodeDefault.vue  |  18 +-
 packages/editor-ui/src/router.ts              |  10 +-
 packages/editor-ui/src/types/canvas.ts        |   5 +-
 packages/editor-ui/src/utils/canvasUtilsV2.ts |  16 +
 packages/editor-ui/src/views/NodeView.v2.vue  | 247 ++++--
 16 files changed, 315 insertions(+), 1139 deletions(-)
 delete mode 100644 packages/editor-ui/src/components/MainHeaderV2/MainHeaderV2.vue
 delete mode 100644 packages/editor-ui/src/components/MainHeaderV2/WorkflowDetailsV2.vue

diff --git a/packages/editor-ui/src/components/MainHeaderV2/MainHeaderV2.vue b/packages/editor-ui/src/components/MainHeaderV2/MainHeaderV2.vue
deleted file mode 100644
index 671357090651a..0000000000000
--- a/packages/editor-ui/src/components/MainHeaderV2/MainHeaderV2.vue
+++ /dev/null
@@ -1,213 +0,0 @@
-<template>
-	<div>
-		<div :class="{ 'main-header': true, expanded: !uiStore.sidebarMenuCollapsed }">
-			<div class="top-menu">
-				<WorkflowDetailsV2 :read-only="readOnly" />
-			</div>
-		</div>
-	</div>
-</template>
-
-<script lang="ts" setup>
-import WorkflowDetailsV2 from '@/components/MainHeaderV2/WorkflowDetailsV2.vue';
-
-import { useNDVStore } from '@/stores/ndv.store';
-import { useSourceControlStore } from '@/stores/sourceControl.store';
-import { useUIStore } from '@/stores/ui.store';
-
-const props = defineProps<{
-	readOnly?: boolean;
-}>();
-
-const ndvStore = useNDVStore();
-const uiStore = useUIStore();
-const sourceControlStore = useSourceControlStore();
-</script>
-
-<script lang="ts">
-// import { defineComponent } from 'vue';
-// import type { Route, RouteLocationRaw } from 'vue-router';
-// import { mapStores } from 'pinia';
-// import type { ExecutionSummary } from 'n8n-workflow';
-// import { pushConnection } from '@/mixins/pushConnection';
-// import WorkflowDetails from '@/components/MainHeader/WorkflowDetails.vue';
-// import TabBar from '@/components/MainHeader/TabBar.vue';
-// import {
-// 	MAIN_HEADER_TABS,
-// 	PLACEHOLDER_EMPTY_WORKFLOW_ID,
-// 	STICKY_NODE_TYPE,
-// 	VIEWS,
-// } from '@/constants';
-// import type { INodeUi, ITabBarItem } from '@/Interface';
-// import { useNDVStore } from '@/stores/ndv.store';
-// import { useSourceControlStore } from '@/stores/sourceControl.store';
-// import { useUIStore } from '@/stores/ui.store';
-//
-// export default defineComponent({
-// 	name: 'MainHeader',
-// 	components: {
-// 		WorkflowDetails,
-// 		TabBar,
-// 	},
-// 	mixins: [pushConnection],
-// 	setup(props, ctx) {
-// 		return {
-// 			// eslint-disable-next-line @typescript-eslint/no-misused-promises
-// 			...pushConnection.setup?.(props, ctx),
-// 		};
-// 	},
-// 	data() {
-// 		return {
-// 			activeHeaderTab: MAIN_HEADER_TABS.WORKFLOW,
-// 			workflowToReturnTo: '',
-// 			dirtyState: false,
-// 		};
-// 	},
-// 	computed: {
-// 		...mapStores(useNDVStore, useUIStore, useSourceControlStore),
-// 		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);
-// 		},
-// 		workflowName(): string {
-// 			return this.workflowsStore.workflowName;
-// 		},
-// 		currentWorkflow(): string {
-// 			return this.$route.params.name || this.workflowsStore.workflowId;
-// 		},
-// 		onWorkflowPage(): boolean {
-// 			return (
-// 				this.$route.meta &&
-// 				(this.$route.meta.nodeView || this.$route.meta.keepWorkflowAlive === true)
-// 			);
-// 		},
-// 		activeExecution(): ExecutionSummary {
-// 			return this.workflowsStore.activeWorkflowExecution as ExecutionSummary;
-// 		},
-// 		readOnly(): boolean {
-// 			return this.sourceControlStore.preferences.branchReadOnly;
-// 		},
-// 	},
-// 	watch: {
-// 		$route(to, from) {
-// 			this.syncTabsWithRoute(to);
-// 		},
-// 	},
-// 	mounted() {
-// 		this.dirtyState = this.uiStore.stateIsDirty;
-// 		this.syncTabsWithRoute(this.$route);
-// 	},
-// 	methods: {
-// 		syncTabsWithRoute(route: Route): void {
-// 			if (
-// 				route.name === VIEWS.EXECUTION_HOME ||
-// 				route.name === VIEWS.WORKFLOW_EXECUTIONS ||
-// 				route.name === VIEWS.EXECUTION_PREVIEW
-// 			) {
-// 				this.activeHeaderTab = MAIN_HEADER_TABS.EXECUTIONS;
-// 			} else if (
-// 				route.name === VIEWS.WORKFLOW ||
-// 				route.name === VIEWS.NEW_WORKFLOW ||
-// 				route.name === VIEWS.EXECUTION_DEBUG
-// 			) {
-// 				this.activeHeaderTab = MAIN_HEADER_TABS.WORKFLOW;
-// 			}
-// 			const workflowName = route.params.name;
-// 			if (workflowName !== 'new') {
-// 				this.workflowToReturnTo = workflowName;
-// 			}
-// 		},
-// 		onTabSelected(tab: MAIN_HEADER_TABS, event: MouseEvent) {
-// 			const openInNewTab = event.ctrlKey || event.metaKey;
-//
-// 			switch (tab) {
-// 				case MAIN_HEADER_TABS.WORKFLOW:
-// 					void this.navigateToWorkflowView(openInNewTab);
-// 					break;
-//
-// 				case MAIN_HEADER_TABS.EXECUTIONS:
-// 					void this.navigateToExecutionsView(openInNewTab);
-// 					break;
-//
-// 				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 };
-// 			}
-//
-// 			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 routeToNavigateTo: RouteLocationRaw = this.activeExecution
-// 				? {
-// 						name: VIEWS.EXECUTION_PREVIEW,
-// 						params: { name: routeWorkflowId, executionId: this.activeExecution.id },
-// 					}
-// 				: {
-// 						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);
-// 			}
-// 		},
-// 	},
-// });
-</script>
-
-<style lang="scss">
-.main-header {
-	background-color: var(--color-background-xlight);
-	height: $header-height;
-	width: 100%;
-	box-sizing: border-box;
-	border-bottom: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
-}
-
-.top-menu {
-	position: relative;
-	display: flex;
-	align-items: center;
-	font-size: 0.9em;
-	height: $header-height;
-	font-weight: 400;
-	padding: 0 var(--spacing-m) 0 var(--spacing-xs);
-}
-</style>
diff --git a/packages/editor-ui/src/components/MainHeaderV2/WorkflowDetailsV2.vue b/packages/editor-ui/src/components/MainHeaderV2/WorkflowDetailsV2.vue
deleted file mode 100644
index 72b891301d5d4..0000000000000
--- a/packages/editor-ui/src/components/MainHeaderV2/WorkflowDetailsV2.vue
+++ /dev/null
@@ -1,786 +0,0 @@
-<script lang="ts" setup>
-import {
-	DUPLICATE_MODAL_KEY,
-	EnterpriseEditionFeature,
-	MAX_WORKFLOW_NAME_LENGTH,
-	MODAL_CONFIRM,
-	PLACEHOLDER_EMPTY_WORKFLOW_ID,
-	SOURCE_CONTROL_PUSH_MODAL_KEY,
-	VIEWS,
-	WORKFLOW_MENU_ACTIONS,
-	WORKFLOW_SETTINGS_MODAL_KEY,
-	WORKFLOW_SHARE_MODAL_KEY,
-} from '@/constants';
-
-import ShortenName from '@/components/ShortenName.vue';
-import TagsContainer from '@/components/TagsContainer.vue';
-import PushConnectionTracker from '@/components/PushConnectionTracker.vue';
-import WorkflowActivator from '@/components/WorkflowActivator.vue';
-import SaveButton from '@/components/SaveButton.vue';
-import TagsDropdown from '@/components/TagsDropdown.vue';
-import InlineTextEdit from '@/components/InlineTextEdit.vue';
-import BreakpointsObserver from '@/components/BreakpointsObserver.vue';
-import CollaborationPane from '@/components/MainHeader/CollaborationPane.vue';
-
-import { useRootStore } from '@/stores/n8nRoot.store';
-import { useSettingsStore } from '@/stores/settings.store';
-import { useSourceControlStore } from '@/stores/sourceControl.store';
-import { useTagsStore } from '@/stores/tags.store';
-import { useUIStore } from '@/stores/ui.store';
-import { useUsageStore } from '@/stores/usage.store';
-import { useUsersStore } from '@/stores/users.store';
-import { useWorkflowsStore } from '@/stores/workflows.store';
-
-import { saveAs } from 'file-saver';
-import { useTitleChange } from '@/composables/useTitleChange';
-import { useMessage } from '@/composables/useMessage';
-import { useToast } from '@/composables/useToast';
-
-import type { IPermissions } from '@/permissions';
-import { getWorkflowPermissions } from '@/permissions';
-import { createEventBus } from 'n8n-design-system/utils';
-import { nodeViewEventBus } from '@/event-bus';
-import { hasPermission } from '@/rbac/permissions';
-import { useCanvasStore } from '@/stores/canvas.store';
-import { useRoute, useRouter } from 'vue-router';
-import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
-import { computed, ref, useCssModule, watch } from 'vue';
-import type { IUser, IWorkflowDataUpdate, IWorkflowDb, IWorkflowToShare } from '@/Interface';
-import { useI18n } from '@/composables/useI18n';
-import { useTelemetry } from '@/composables/useTelemetry';
-import type { MessageBoxInputData } from 'element-plus';
-
-const props = defineProps({
-	readOnly: {
-		type: Boolean,
-		default: false,
-	},
-});
-
-const $style = useCssModule();
-
-const rootStore = useRootStore();
-const canvasStore = useCanvasStore();
-const settingsStore = useSettingsStore();
-const sourceControlStore = useSourceControlStore();
-const tagsStore = useTagsStore();
-const uiStore = useUIStore();
-const usageStore = useUsageStore();
-const usersStore = useUsersStore();
-const workflowsStore = useWorkflowsStore();
-
-const router = useRouter();
-const route = useRoute();
-
-const locale = useI18n();
-const telemetry = useTelemetry();
-const message = useMessage();
-const toast = useToast();
-const titleChange = useTitleChange();
-const workflowHelpers = useWorkflowHelpers({ router });
-
-const isTagsEditEnabled = ref(false);
-const isNameEditEnabled = ref(false);
-const appliedTagIds = ref<string[]>([]);
-const tagsEditBus = createEventBus();
-const tagsSaving = ref(false);
-const importFile = ref<HTMLInputElement | undefined>();
-const eventBus = createEventBus();
-
-const hasChanged = (prev: string[], curr: string[]) => {
-	if (prev.length !== curr.length) {
-		return true;
-	}
-
-	const set = new Set(prev);
-	return curr.reduce((accu, val) => accu || !set.has(val), false);
-};
-
-const currentUser = computed(() => {
-	return usersStore.currentUser;
-});
-
-const contextBasedTranslationKeys = computed(() => {
-	return uiStore.contextBasedTranslationKeys;
-});
-
-const isWorkflowActive = computed(() => {
-	return workflowsStore.isWorkflowActive;
-});
-
-const workflowName = computed(() => {
-	return workflowsStore.workflowName;
-});
-
-const isDirty = computed(() => {
-	return uiStore.stateIsDirty;
-});
-
-const readOnlyEnv = computed(() => {
-	return sourceControlStore.preferences.branchReadOnly;
-});
-
-const currentWorkflowTagIds = computed(() => {
-	return workflowsStore.workflowTags;
-});
-
-const isNewWorkflow = computed(() => {
-	return (
-		!currentWorkflowId.value ||
-		currentWorkflowId.value === PLACEHOLDER_EMPTY_WORKFLOW_ID ||
-		currentWorkflowId.value === 'new'
-	);
-});
-
-const isWorkflowSaving = computed(() => {
-	return uiStore.isActionActive('workflowSaving');
-});
-
-const workflow = computed(() => {
-	return workflowsStore.workflow;
-});
-
-const currentWorkflowId = computed(() => {
-	return workflowsStore.workflowId;
-});
-
-const onWorkflowPage = computed(() => {
-	return route.meta && (route.meta.nodeView || route.meta.keepWorkflowAlive === true);
-});
-
-const onExecutionsTab = computed(() => {
-	return [
-		VIEWS.EXECUTION_HOME.toString(),
-		VIEWS.WORKFLOW_EXECUTIONS.toString(),
-		VIEWS.EXECUTION_PREVIEW,
-	].includes((route.name as string) || '');
-});
-
-const workflowPermissions = computed(() => {
-	return getWorkflowPermissions(currentUser.value, workflow.value);
-});
-
-const workflowMenuItems = computed(() => {
-	const actions = [
-		{
-			id: WORKFLOW_MENU_ACTIONS.DOWNLOAD,
-			label: locale.baseText('menuActions.download'),
-			disabled: !onWorkflowPage.value,
-		},
-	];
-
-	if (!props.readOnly) {
-		actions.unshift({
-			id: WORKFLOW_MENU_ACTIONS.DUPLICATE,
-			label: locale.baseText('menuActions.duplicate'),
-			disabled: !onWorkflowPage.value || !currentWorkflowId.value,
-		});
-
-		actions.push(
-			{
-				id: WORKFLOW_MENU_ACTIONS.IMPORT_FROM_URL,
-				label: locale.baseText('menuActions.importFromUrl'),
-				disabled: !onWorkflowPage.value || onExecutionsTab.value,
-			},
-			{
-				id: WORKFLOW_MENU_ACTIONS.IMPORT_FROM_FILE,
-				label: locale.baseText('menuActions.importFromFile'),
-				disabled: !onWorkflowPage.value || onExecutionsTab.value,
-			},
-		);
-	}
-
-	if (hasPermission(['rbac'], { rbac: { scope: 'sourceControl:push' } })) {
-		actions.push({
-			id: WORKFLOW_MENU_ACTIONS.PUSH,
-			label: locale.baseText('menuActions.push'),
-			disabled:
-				!sourceControlStore.isEnterpriseSourceControlEnabled ||
-				!onWorkflowPage.value ||
-				onExecutionsTab.value ||
-				readOnlyEnv.value,
-		});
-	}
-
-	actions.push({
-		id: WORKFLOW_MENU_ACTIONS.SETTINGS,
-		label: locale.baseText('generic.settings'),
-		disabled: !onWorkflowPage.value || isNewWorkflow.value,
-	});
-
-	if (workflowPermissions.value.delete && !props.readOnly) {
-		actions.push({
-			id: WORKFLOW_MENU_ACTIONS.DELETE,
-			label: locale.baseText('menuActions.delete'),
-			disabled: !onWorkflowPage.value || isNewWorkflow.value,
-			customClass: $style.deleteItem,
-			divided: true,
-		});
-	}
-
-	return actions;
-});
-
-const isWorkflowHistoryFeatureEnabled = computed(() => {
-	return settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.WorkflowHistory);
-});
-
-const workflowHistoryRoute = computed<{ name: string; params: { workflowId: string } }>(() => {
-	return {
-		name: VIEWS.WORKFLOW_HISTORY,
-		params: {
-			workflowId: currentWorkflowId.value,
-		},
-	};
-});
-
-const isWorkflowHistoryButtonDisabled = computed(() => {
-	return workflowsStore.isNewWorkflow;
-});
-
-watch(currentWorkflowId, () => {
-	isTagsEditEnabled.value = false;
-	isNameEditEnabled.value = false;
-});
-
-async function onSaveButtonClick() {
-	// If the workflow is saving, do not allow another save
-	if (isWorkflowSaving.value) {
-		return;
-	}
-	let currentId: string | undefined = undefined;
-	if (currentWorkflowId.value !== PLACEHOLDER_EMPTY_WORKFLOW_ID) {
-		currentId = currentWorkflowId.value;
-	} else if (route.params.name && route.params.name !== 'new') {
-		currentId = route.params.name;
-	}
-	const saved = await workflowHelpers.saveCurrentWorkflow({
-		id: currentId,
-		name: workflowName.value,
-		tags: currentWorkflowTagIds.value,
-	});
-
-	if (saved) {
-		await settingsStore.fetchPromptsData();
-
-		if (route.name === VIEWS.EXECUTION_DEBUG) {
-			await router.replace({
-				name: VIEWS.WORKFLOW,
-				params: { name: currentWorkflowId.value },
-			});
-		}
-	}
-}
-
-function onShareButtonClick() {
-	uiStore.openModalWithData({
-		name: WORKFLOW_SHARE_MODAL_KEY,
-		data: { id: currentWorkflowId.value },
-	});
-
-	telemetry.track('User opened sharing modal', {
-		workflow_id: currentWorkflowId.value,
-		user_id_sharer: currentUser.value?.id,
-		sub_view: route.name === VIEWS.WORKFLOWS ? 'Workflows listing' : 'Workflow editor',
-	});
-}
-
-function onTagsEditEnable() {
-	appliedTagIds.value = currentWorkflowTagIds.value;
-	isTagsEditEnabled.value = true;
-
-	setTimeout(() => {
-		// allow name update to occur before disabling name edit
-		isNameEditEnabled.value = false;
-		tagsEditBus.emit('focus');
-	}, 0);
-}
-
-async function onTagsBlur() {
-	const current = currentWorkflowTagIds.value;
-	const tags = appliedTagIds.value;
-	if (!hasChanged(current, tags)) {
-		isTagsEditEnabled.value = false;
-
-		return;
-	}
-	if (tagsSaving.value) {
-		return;
-	}
-	tagsSaving.value = true;
-
-	const saved = await workflowHelpers.saveCurrentWorkflow({ tags });
-	telemetry.track('User edited workflow tags', {
-		workflow_id: currentWorkflowId.value,
-		new_tag_count: tags.length,
-	});
-
-	tagsSaving.value = false;
-	if (saved) {
-		isTagsEditEnabled.value = false;
-	}
-}
-
-function onTagsEditEsc() {
-	isTagsEditEnabled.value = false;
-}
-
-function onNameToggle() {
-	isNameEditEnabled.value = !isNameEditEnabled.value;
-	if (isNameEditEnabled.value) {
-		if (isTagsEditEnabled.value) {
-			void onTagsBlur();
-		}
-
-		isTagsEditEnabled.value = false;
-	}
-}
-
-async function onNameSubmit({
-	name,
-	onSubmit: cb,
-}: {
-	name: string;
-	onSubmit: (saved: boolean) => void;
-}) {
-	const newName = name.trim();
-	if (!newName) {
-		toast.showMessage({
-			title: locale.baseText('workflowDetails.showMessage.title'),
-			message: locale.baseText('workflowDetails.showMessage.message'),
-			type: 'error',
-		});
-
-		cb(false);
-		return;
-	}
-
-	if (newName === workflowName.value) {
-		isNameEditEnabled.value = false;
-
-		cb(true);
-		return;
-	}
-
-	uiStore.addActiveAction('workflowSaving');
-	const saved = await workflowHelpers.saveCurrentWorkflow({ name });
-	if (saved) {
-		isNameEditEnabled.value = false;
-	}
-	uiStore.removeActiveAction('workflowSaving');
-	cb(saved);
-}
-
-async function handleFileImport(): Promise<void> {
-	const inputRef = importFile.value;
-	if (inputRef?.files && inputRef.files.length !== 0) {
-		const reader = new FileReader();
-		reader.onload = () => {
-			let workflowData: IWorkflowDataUpdate;
-			try {
-				workflowData = JSON.parse(reader.result as string);
-			} catch (error) {
-				toast.showMessage({
-					title: locale.baseText('mainSidebar.showMessage.handleFileImport.title'),
-					message: locale.baseText('mainSidebar.showMessage.handleFileImport.message'),
-					type: 'error',
-				});
-				return;
-			} finally {
-				reader.onload = null;
-				inputRef.value = '';
-			}
-
-			nodeViewEventBus.emit('importWorkflowData', { data: workflowData });
-		};
-		reader.readAsText(inputRef.files[0]);
-	}
-}
-
-async function onWorkflowMenuSelect(action: string): Promise<void> {
-	switch (action) {
-		case WORKFLOW_MENU_ACTIONS.DUPLICATE: {
-			uiStore.openModalWithData({
-				name: DUPLICATE_MODAL_KEY,
-				data: {
-					id: workflowsStore.workflowId,
-					name: workflowsStore.workflowName,
-					tags: workflowsStore.workflowTags,
-				},
-			});
-			break;
-		}
-		case WORKFLOW_MENU_ACTIONS.DOWNLOAD: {
-			const workflowData = await workflowHelpers.getWorkflowDataToSave();
-			const { tags, ...data } = workflowData;
-			const exportData: IWorkflowToShare = {
-				...data,
-				meta: {
-					...(workflowsStore.workflow.meta || {}),
-					instanceId: rootStore.instanceId,
-				},
-				tags: (tags || []).map((tagId) => {
-					const { usageCount, ...tag } = tagsStore.getTagById(tagId);
-
-					return tag;
-				}),
-			};
-
-			const blob = new Blob([JSON.stringify(exportData, null, 2)], {
-				type: 'application/json;charset=utf-8',
-			});
-
-			let name = workflowName.value || 'unsaved_workflow';
-			name = name.replace(/[^a-z0-9]/gi, '_');
-
-			telemetry.track('User exported workflow', { workflow_id: workflowData.id });
-			saveAs(blob, name + '.json');
-			break;
-		}
-		case WORKFLOW_MENU_ACTIONS.IMPORT_FROM_URL: {
-			try {
-				const promptResponse = (await message.prompt(
-					locale.baseText('mainSidebar.prompt.workflowUrl') + ':',
-					locale.baseText('mainSidebar.prompt.importWorkflowFromUrl') + ':',
-					{
-						confirmButtonText: locale.baseText('mainSidebar.prompt.import'),
-						cancelButtonText: locale.baseText('mainSidebar.prompt.cancel'),
-						inputErrorMessage: locale.baseText('mainSidebar.prompt.invalidUrl'),
-						inputPattern: /^http[s]?:\/\/.*\.json$/i,
-					},
-				)) as MessageBoxInputData;
-
-				if ((promptResponse as string) === 'cancel') {
-					return;
-				}
-
-				nodeViewEventBus.emit('importWorkflowUrl', { url: promptResponse.value });
-			} catch (e) {}
-			break;
-		}
-		case WORKFLOW_MENU_ACTIONS.IMPORT_FROM_FILE: {
-			importFile.value?.click();
-			break;
-		}
-		case WORKFLOW_MENU_ACTIONS.PUSH: {
-			canvasStore.startLoading();
-			try {
-				await onSaveButtonClick();
-
-				const status = await sourceControlStore.getAggregatedStatus();
-
-				uiStore.openModalWithData({
-					name: SOURCE_CONTROL_PUSH_MODAL_KEY,
-					data: { eventBus, status },
-				});
-			} catch (error) {
-				// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-				switch (error.message) {
-					case 'source_control_not_connected':
-						toast.showError(
-							{ ...error, message: '' },
-							locale.baseText('settings.sourceControl.error.not.connected.title'),
-							locale.baseText('settings.sourceControl.error.not.connected.message'),
-						);
-						break;
-					default:
-						toast.showError(error, locale.baseText('error'));
-				}
-			} finally {
-				canvasStore.stopLoading();
-			}
-
-			break;
-		}
-		case WORKFLOW_MENU_ACTIONS.SETTINGS: {
-			uiStore.openModal(WORKFLOW_SETTINGS_MODAL_KEY);
-			break;
-		}
-		case WORKFLOW_MENU_ACTIONS.DELETE: {
-			const deleteConfirmed = await message.confirm(
-				locale.baseText('mainSidebar.confirmMessage.workflowDelete.message', {
-					interpolate: { workflowName: workflowName.value },
-				}),
-				locale.baseText('mainSidebar.confirmMessage.workflowDelete.headline'),
-				{
-					type: 'warning',
-					confirmButtonText: locale.baseText(
-						'mainSidebar.confirmMessage.workflowDelete.confirmButtonText',
-					),
-					cancelButtonText: locale.baseText(
-						'mainSidebar.confirmMessage.workflowDelete.cancelButtonText',
-					),
-				},
-			);
-
-			if (deleteConfirmed !== MODAL_CONFIRM) {
-				return;
-			}
-
-			try {
-				await workflowsStore.deleteWorkflow(currentWorkflowId.value);
-			} catch (error) {
-				toast.showError(error, locale.baseText('generic.deleteWorkflowError'));
-				return;
-			}
-			uiStore.stateIsDirty = false;
-			// Reset tab title since workflow is deleted.
-			titleChange.titleReset();
-			toast.showMessage({
-				title: locale.baseText('mainSidebar.showMessage.handleSelect1.title'),
-				type: 'success',
-			});
-
-			await router.push({ name: VIEWS.NEW_WORKFLOW });
-			break;
-		}
-		default:
-			break;
-	}
-}
-
-function goToUpgrade() {
-	void uiStore.goToUpgrade('workflow_sharing', 'upgrade-workflow-sharing');
-}
-</script>
-
-<template>
-	<div v-if="workflowName" class="container">
-		<BreakpointsObserver :value-x-s="15" :value-s-m="25" :value-m-d="50" class="name-container">
-			<template #default="{ value }">
-				<ShortenName
-					:name="workflowName"
-					:limit="value"
-					:custom="true"
-					test-id="workflow-name-input"
-				>
-					<template #default="{ shortenedName }">
-						<InlineTextEdit
-							:model-value="workflowName"
-							:preview-value="shortenedName"
-							:is-edit-enabled="isNameEditEnabled"
-							:max-length="MAX_WORKFLOW_NAME_LENGTH"
-							:disabled="readOnly"
-							placeholder="Enter workflow name"
-							class="name"
-							@toggle="onNameToggle"
-							@submit="onNameSubmit"
-						/>
-					</template>
-				</ShortenName>
-			</template>
-		</BreakpointsObserver>
-
-		<span v-if="settingsStore.areTagsEnabled" class="tags" data-test-id="workflow-tags-container">
-			<TagsDropdown
-				v-if="isTagsEditEnabled && !readOnly"
-				ref="dropdown"
-				v-model="appliedTagIds"
-				:create-enabled="true"
-				:event-bus="tagsEditBus"
-				:placeholder="$locale.baseText('workflowDetails.chooseOrCreateATag')"
-				class="tags-edit"
-				data-test-id="workflow-tags-dropdown"
-				@blur="onTagsBlur"
-				@esc="onTagsEditEsc"
-			/>
-			<div v-else-if="currentWorkflowTagIds.length === 0 && !readOnly">
-				<span class="add-tag clickable" data-test-id="new-tag-link" @click="onTagsEditEnable">
-					+ {{ $locale.baseText('workflowDetails.addTag') }}
-				</span>
-			</div>
-			<TagsContainer
-				v-else
-				:key="currentWorkflowId"
-				:tag-ids="currentWorkflowTagIds"
-				:clickable="true"
-				:responsive="true"
-				data-test-id="workflow-tags"
-				@click="onTagsEditEnable"
-			/>
-		</span>
-		<span v-else class="tags"></span>
-
-		<PushConnectionTracker class="actions">
-			<span :class="`activator ${$style.group}`">
-				<WorkflowActivator :workflow-active="isWorkflowActive" :workflow-id="currentWorkflowId" />
-			</span>
-			<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]">
-				<div :class="$style.group">
-					<CollaborationPane />
-					<n8n-button
-						type="secondary"
-						data-test-id="workflow-share-button"
-						@click="onShareButtonClick"
-					>
-						{{ $locale.baseText('workflowDetails.share') }}
-					</n8n-button>
-				</div>
-				<template #fallback>
-					<n8n-tooltip>
-						<n8n-button type="secondary" :class="['mr-2xs', $style.disabledShareButton]">
-							{{ $locale.baseText('workflowDetails.share') }}
-						</n8n-button>
-						<template #content>
-							<i18n-t
-								:keypath="
-									contextBasedTranslationKeys.workflows.sharing.unavailable.description.tooltip
-								"
-								tag="span"
-							>
-								<template #action>
-									<a @click="goToUpgrade">
-										{{
-											$locale.baseText(
-												contextBasedTranslationKeys.workflows.sharing.unavailable.button,
-											)
-										}}
-									</a>
-								</template>
-							</i18n-t>
-						</template>
-					</n8n-tooltip>
-				</template>
-			</enterprise-edition>
-			<div :class="$style.group">
-				<SaveButton
-					type="primary"
-					:saved="!isDirty && !isNewWorkflow"
-					:disabled="isWorkflowSaving || readOnly"
-					data-test-id="workflow-save-button"
-					@click="onSaveButtonClick"
-				/>
-				<router-link
-					v-if="isWorkflowHistoryFeatureEnabled"
-					:to="workflowHistoryRoute"
-					:class="$style.workflowHistoryButton"
-				>
-					<n8n-icon-button
-						:disabled="isWorkflowHistoryButtonDisabled"
-						data-test-id="workflow-history-button"
-						type="tertiary"
-						icon="history"
-						size="medium"
-						text
-					/>
-				</router-link>
-			</div>
-			<div :class="[$style.workflowMenuContainer, $style.group]">
-				<input
-					ref="importFile"
-					:class="$style.hiddenInput"
-					type="file"
-					data-test-id="workflow-import-input"
-					@change="handleFileImport()"
-				/>
-				<n8n-action-dropdown
-					:items="workflowMenuItems"
-					data-test-id="workflow-menu"
-					@select="onWorkflowMenuSelect"
-				/>
-			</div>
-		</PushConnectionTracker>
-	</div>
-</template>
-
-<style scoped lang="scss">
-$--text-line-height: 24px;
-$--header-spacing: 20px;
-
-.container {
-	position: relative;
-	top: -1px;
-	width: 100%;
-	display: flex;
-	align-items: center;
-}
-
-.name-container {
-	margin-right: $--header-spacing;
-}
-
-.name {
-	color: $custom-font-dark;
-	font-size: 15px;
-}
-
-.activator {
-	color: $custom-font-dark;
-	font-weight: 400;
-	font-size: 13px;
-	line-height: $--text-line-height;
-	display: flex;
-	align-items: center;
-
-	> span {
-		margin-right: 5px;
-	}
-}
-
-.add-tag {
-	font-size: 12px;
-	padding: 20px 0; // to be more clickable
-	color: $custom-font-very-light;
-	font-weight: 600;
-	white-space: nowrap;
-
-	&:hover {
-		color: $color-primary;
-	}
-}
-
-.tags {
-	display: flex;
-	align-items: center;
-	width: 100%;
-	flex: 1;
-	margin-right: $--header-spacing;
-}
-
-.tags-edit {
-	min-width: 100px;
-	width: 100%;
-	max-width: 460px;
-}
-
-.actions {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-m);
-}
-</style>
-
-<style module lang="scss">
-.group {
-	display: flex;
-	gap: var(--spacing-xs);
-}
-.hiddenInput {
-	display: none;
-}
-
-.deleteItem {
-	color: var(--color-danger);
-}
-
-.disabledShareButton {
-	cursor: not-allowed;
-}
-
-.workflowHistoryButton {
-	width: 30px;
-	height: 30px;
-	color: var(--color-text-dark);
-	border-radius: var(--border-radius-base);
-
-	&:hover {
-		background-color: var(--color-background-base);
-	}
-
-	:disabled {
-		background: transparent;
-		border: none;
-		opacity: 0.5;
-	}
-}
-</style>
diff --git a/packages/editor-ui/src/components/canvas/Canvas.vue b/packages/editor-ui/src/components/canvas/Canvas.vue
index a70375674ad94..cdfd274dab3e6 100644
--- a/packages/editor-ui/src/components/canvas/Canvas.vue
+++ b/packages/editor-ui/src/components/canvas/Canvas.vue
@@ -40,8 +40,8 @@ function onNodeDragStop(e: NodeDragEvent) {
 	});
 }
 
-function onConnect(e: Connection) {
-	emit('create:connection', e);
+function onConnect(...args: unknown[]) {
+	emit('create:connection', args[0] as Connection);
 }
 </script>
 
diff --git a/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue b/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue
index f807e400f576d..5a4c0046c44dc 100644
--- a/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue
+++ b/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue
@@ -1,49 +1,9 @@
 <script lang="ts" setup>
-import { BaseEdge, getBezierPath, Position } from '@vue-flow/core';
-import { computed, PropType } from 'vue';
+import type { EdgeProps } from '@vue-flow/core';
+import { BaseEdge, getBezierPath } from '@vue-flow/core';
+import { computed } from 'vue';
 
-const props = defineProps({
-	id: {
-		type: String,
-		required: true,
-	},
-	sourceX: {
-		type: Number,
-		required: true,
-	},
-	sourceY: {
-		type: Number,
-		required: true,
-	},
-	targetX: {
-		type: Number,
-		required: true,
-	},
-	targetY: {
-		type: Number,
-		required: true,
-	},
-	sourcePosition: {
-		type: String as PropType<Position>,
-		required: true,
-	},
-	targetPosition: {
-		type: String as PropType<Position>,
-		required: true,
-	},
-	data: {
-		type: Object,
-		required: false,
-	},
-	markerEnd: {
-		type: String,
-		required: false,
-	},
-	style: {
-		type: Object,
-		required: false,
-	},
-});
+const props = defineProps<EdgeProps>();
 
 const edgeStyle = computed(() => ({
 	strokeWidth: 2,
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/HandleRenderer.vue b/packages/editor-ui/src/components/canvas/elements/handles/HandleRenderer.vue
index ae45c5502db93..0f8968a311323 100644
--- a/packages/editor-ui/src/components/canvas/elements/handles/HandleRenderer.vue
+++ b/packages/editor-ui/src/components/canvas/elements/handles/HandleRenderer.vue
@@ -20,7 +20,7 @@ const props = defineProps<{
 
 const $style = useCssModule();
 
-const handleType = computed(() => (props.mode === 'input' ? 'source' : 'target'));
+const handleType = computed(() => (props.mode === 'input' ? 'target' : 'source'));
 
 const isConnectableStart = computed(() => {
 	return props.mode === 'output';
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainInput.vue b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainInput.vue
index a96437964e3ba..1e72f3c020b99 100644
--- a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainInput.vue
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainInput.vue
@@ -1,14 +1,16 @@
 <script lang="ts" setup>
-import { inject, useCssModule } from 'vue';
+import { computed, inject, useCssModule } from 'vue';
 import { CanvasNodeHandleKey } from '@/constants';
 
 const handle = inject(CanvasNodeHandleKey);
 
 const $style = useCssModule();
+
+const label = computed(() => handle?.label.value ?? '');
 </script>
 <template>
 	<div :class="$style.handle">
-		<div :class="$style.label">{{ handle?.label }}</div>
+		<div :class="$style.label">{{ label }}</div>
 	</div>
 </template>
 
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue
index b406d0185352c..b3101210208d8 100644
--- a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { inject, useCssModule } from 'vue';
+import { computed, inject, useCssModule } from 'vue';
 import { svg } from '@jsplumb/browser-ui';
 import { CanvasNodeHandleKey } from '@/constants';
 
@@ -29,10 +29,12 @@ const handle = inject(CanvasNodeHandleKey);
 // return group;
 
 const $style = useCssModule();
+
+const label = computed(() => handle?.label.value ?? '');
 </script>
 <template>
 	<div :class="$style.handle">
-		<div :class="$style.label">{{ handle?.label }}</div>
+		<div :class="$style.label">{{ label }}</div>
 		<div :class="$style.circle" />
 		<!-- @TODO Determine whether handle is connected -->
 		<!--		<svg :class="$style.plus" viewBox="0 0 70 24">-->
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMain.vue b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMain.vue
index e7bc87eac5190..bca95a6fe1beb 100644
--- a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMain.vue
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMain.vue
@@ -1,15 +1,17 @@
 <script lang="ts" setup>
-import { inject, useCssModule } from 'vue';
+import { computed, inject, useCssModule } from 'vue';
 import { CanvasNodeHandleKey } from '@/constants';
 
 const handle = inject(CanvasNodeHandleKey);
 
 const $style = useCssModule();
+
+const label = computed(() => handle?.label.value ?? '');
 </script>
 <template>
 	<div :class="$style.handle">
 		<div :class="$style.diamond" />
-		<div :class="$style.label">{{ handle?.label }}</div>
+		<div :class="$style.label">{{ label }}</div>
 	</div>
 </template>
 
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
index d06221729bf42..3127ac16d5043 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
@@ -13,14 +13,11 @@ import CanvasNodeRenderer from '@/components/canvas/elements/nodes/CanvasNodeRen
 import HandleRenderer from '@/components/canvas/elements/handles/HandleRenderer.vue';
 import { useNodeConnections } from '@/composables/useNodeConnections';
 import { CanvasNodeKey } from '@/constants';
+import type { NodeProps } from '@vue-flow/core';
 
 const $style = useCssModule();
 
-const props = defineProps<{
-	data: CanvasElementData;
-	label: string;
-	selected: boolean;
-}>();
+const props = defineProps<NodeProps<CanvasElementData>>();
 
 const inputs = computed(() => props.data.inputs);
 const outputs = computed(() => props.data.outputs);
@@ -84,10 +81,12 @@ const mapEndpointWithPosition =
  */
 
 const data = toRef(props, 'data');
+const label = toRef(props, 'label');
 const selected = toRef(props, 'selected');
 
 provide(CanvasNodeKey, {
 	data,
+	label,
 	selected,
 	nodeType,
 });
@@ -128,7 +127,6 @@ provide(CanvasNodeKey, {
 			<NodeIcon :node-type="nodeType" :size="40" :shrink="false" />
 			<!--			:color-default="iconColorDefault"-->
 			<!--			:disabled="data.disabled"-->
-			<div :class="$style.canvasNodeLabel">{{ label }}</div>
 		</CanvasNodeRenderer>
 	</div>
 </template>
@@ -143,16 +141,6 @@ provide(CanvasNodeKey, {
 	}
 }
 
-.canvasNodeLabel {
-	top: 100%;
-	position: absolute;
-	font-size: var(--font-size-m);
-	text-align: center;
-	width: 100%;
-	min-width: 200px;
-	margin-top: var(--spacing-2xs);
-}
-
 .canvasNodeToolbar {
 	display: none;
 	position: absolute;
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfigurable.vue b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfigurable.vue
index 26719363ed3a2..2352abf1220b7 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfigurable.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfigurable.vue
@@ -7,6 +7,7 @@ const node = inject(CanvasNodeKey);
 
 const $style = useCssModule();
 
+const label = computed(() => node?.label.value ?? '');
 const inputs = computed(() => node?.data.value.inputs ?? []);
 const outputs = computed(() => node?.data.value.outputs ?? []);
 
@@ -15,8 +16,15 @@ const { nonMainInputs, requiredNonMainInputs } = useNodeConnections({
 	outputs,
 });
 
+const classes = computed(() => {
+	return {
+		[$style.node]: true,
+		[$style.selected]: node?.selected.value,
+	};
+});
+
 const styles = computed(() => {
-	const styles: {
+	const stylesObject: {
 		[key: string]: string | number;
 	} = {};
 
@@ -28,21 +36,22 @@ const styles = computed(() => {
 			spacerCount = requiredNonMainInputsCount > 0 && optionalNonMainInputsCount > 0 ? 1 : 0;
 		}
 
-		styles['--configurable-node-input-count'] = nonMainInputs.value.length + spacerCount;
+		stylesObject['--configurable-node-input-count'] = nonMainInputs.value.length + spacerCount;
 	}
 
-	return styles;
+	return stylesObject;
 });
 </script>
 
 <template>
-	<div :class="$style.canvasNodeConfiguration" :style="styles">
+	<div :class="classes" :style="styles">
 		<slot />
+		<div :class="$style.label">{{ label }}</div>
 	</div>
 </template>
 
 <style lang="scss" module>
-.canvasNodeConfiguration {
+.node {
 	--configurable-node-min-input-count: 4;
 	--configurable-node-input-width: 65px;
 
@@ -58,4 +67,19 @@ const styles = computed(() => {
 	border: 2px solid var(--canvas-node--border-color, var(--color-foreground-xdark));
 	border-radius: var(--border-radius-large);
 }
+
+.label {
+	top: 100%;
+	font-size: var(--font-size-m);
+	text-align: center;
+	margin-left: var(--spacing-s);
+	max-width: calc(
+		var(--node-width) - var(--configurable-node-icon-offset) - var(--configurable-node-icon-size) -
+			2 * var(--spacing-s)
+	);
+}
+
+.selected {
+	box-shadow: 0 0 0 4px var(--color-canvas-selected);
+}
 </style>
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfiguration.vue b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfiguration.vue
index caa61eb62a1d6..6c108c0cbefd7 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfiguration.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfiguration.vue
@@ -1,17 +1,30 @@
 <script lang="ts" setup>
-import { useCssModule } from 'vue';
+import { computed, inject, useCssModule } from 'vue';
+import { CanvasNodeKey } from '@/constants';
+
+const node = inject(CanvasNodeKey);
 
 const $style = useCssModule();
+
+const label = computed(() => node?.label.value ?? '');
+
+const classes = computed(() => {
+	return {
+		[$style.node]: true,
+		[$style.selected]: node?.selected.value,
+	};
+});
 </script>
 
 <template>
-	<div :class="$style.canvasNodeConfiguration">
+	<div :class="classes">
 		<slot />
+		<div v-if="label" :class="$style.label">{{ label }}</div>
 	</div>
 </template>
 
 <style lang="scss" module>
-.canvasNodeConfiguration {
+.node {
 	width: 75px;
 	height: 75px;
 	display: flex;
@@ -21,4 +34,18 @@ const $style = useCssModule();
 	border: 2px solid var(--canvas-node--border-color, var(--color-foreground-dark));
 	border-radius: 50%;
 }
+
+.selected {
+	box-shadow: 0 0 0 4px var(--color-canvas-selected);
+}
+
+.label {
+	top: 100%;
+	position: absolute;
+	font-size: var(--font-size-m);
+	text-align: center;
+	width: 100%;
+	min-width: 200px;
+	margin-top: var(--spacing-2xs);
+}
 </style>
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
index 686711c08b231..21d5cb0cdfb85 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
@@ -7,6 +7,7 @@ const node = inject(CanvasNodeKey);
 
 const $style = useCssModule();
 
+const label = computed(() => node?.label.value ?? '');
 const inputs = computed(() => node?.data.value.inputs ?? []);
 const outputs = computed(() => node?.data.value.outputs ?? []);
 
@@ -17,7 +18,7 @@ const { mainOutputs } = useNodeConnections({
 
 const classes = computed(() => {
 	return {
-		[$style.canvasNode]: true,
+		[$style.node]: true,
 		[$style.selected]: node?.selected.value,
 	};
 });
@@ -30,13 +31,14 @@ const styles = computed(() => {
 </script>
 
 <template>
-	<div :class="classes" :style="styles">
+	<div v-if="node" :class="classes" :style="styles">
 		<slot />
+		<div v-if="label" :class="$style.label">{{ label }}</div>
 	</div>
 </template>
 
 <style lang="scss" module>
-.canvasNode {
+.node {
 	height: calc(100px + max(0, var(--node-main-output-count, 1) - 4) * 50px);
 	width: 100px;
 	display: flex;
@@ -47,6 +49,16 @@ const styles = computed(() => {
 	border-radius: var(--border-radius-large);
 }
 
+.label {
+	top: 100%;
+	position: absolute;
+	font-size: var(--font-size-m);
+	text-align: center;
+	width: 100%;
+	min-width: 200px;
+	margin-top: var(--spacing-2xs);
+}
+
 .selected {
 	box-shadow: 0 0 0 4px var(--color-canvas-selected);
 }
diff --git a/packages/editor-ui/src/router.ts b/packages/editor-ui/src/router.ts
index 1cdca67f96fdc..9934ecd564df3 100644
--- a/packages/editor-ui/src/router.ts
+++ b/packages/editor-ui/src/router.ts
@@ -22,7 +22,6 @@ const ChangePasswordView = async () => await import('./views/ChangePasswordView.
 const ErrorView = async () => await import('./views/ErrorView.vue');
 const ForgotMyPasswordView = async () => await import('./views/ForgotMyPasswordView.vue');
 const MainHeader = async () => await import('@/components/MainHeader/MainHeader.vue');
-const MainHeaderV2 = async () => await import('@/components/MainHeaderV2/MainHeaderV2.vue');
 const MainSidebar = async () => await import('@/components/MainSidebar.vue');
 const NodeView = async () => await import('@/views/NodeView.vue');
 const NodeViewV2 = async () => await import('@/views/NodeView.v2.vue');
@@ -390,11 +389,16 @@ export const routes = [
 		name: VIEWS.WORKFLOW_V2,
 		components: {
 			default: NodeViewV2,
-			header: MainHeaderV2,
+			header: MainHeader,
 			sidebar: MainSidebar,
 		},
 		meta: {
-			middleware: ['authenticated'],
+			middleware: ['authenticated', 'custom'],
+			middlewareOptions: {
+				custom: () => {
+					return !!localStorage.getItem('features.nodeViewV2');
+				},
+			},
 		},
 	},
 	{
diff --git a/packages/editor-ui/src/types/canvas.ts b/packages/editor-ui/src/types/canvas.ts
index e00d67888666e..433a98b951c6d 100644
--- a/packages/editor-ui/src/types/canvas.ts
+++ b/packages/editor-ui/src/types/canvas.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-redundant-type-constituents */
 import type { ConnectionTypes, INodeTypeDescription } from 'n8n-workflow';
 import type { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
-import type { DefaultEdge, Node, Position } from '@vue-flow/core';
+import type { DefaultEdge, Node, NodeProps, Position } from '@vue-flow/core';
 import type { INodeUi } from '@/Interface';
 import type { ComputedRef, Ref } from 'vue';
 
@@ -49,7 +49,8 @@ export interface CanvasPlugin {
 
 export interface CanvasNodeInjectionData {
 	data: Ref<CanvasElementData>;
-	selected: Ref<boolean>;
+	label: Ref<NodeProps['label']>;
+	selected: Ref<NodeProps['selected']>;
 	nodeType: ComputedRef<INodeTypeDescription | null>;
 }
 
diff --git a/packages/editor-ui/src/utils/canvasUtilsV2.ts b/packages/editor-ui/src/utils/canvasUtilsV2.ts
index 260e4c2a32e28..3b14143f7fc18 100644
--- a/packages/editor-ui/src/utils/canvasUtilsV2.ts
+++ b/packages/editor-ui/src/utils/canvasUtilsV2.ts
@@ -1,6 +1,7 @@
 import type { IConnections, INodeTypeDescription } from 'n8n-workflow';
 import type { INodeUi } from '@/Interface';
 import type { CanvasConnection, CanvasConnectionPortType, CanvasConnectionPort } from '@/types';
+import { v4 as uuid } from 'uuid';
 
 export function mapLegacyConnections(
 	legacyConnections: IConnections,
@@ -73,3 +74,18 @@ export function normalizeElementEndpoints(
 		};
 	});
 }
+
+export function getUniqueNodeName(name: string, existingNames: Set<string>): string {
+	if (!existingNames.has(name)) {
+		return name;
+	}
+
+	for (let i = 1; i < 100; i++) {
+		const newName = `${name} ${i}`;
+		if (!existingNames.has(newName)) {
+			return newName;
+		}
+	}
+
+	return `${name} ${uuid()}`;
+}
diff --git a/packages/editor-ui/src/views/NodeView.v2.vue b/packages/editor-ui/src/views/NodeView.v2.vue
index d04f779b34fcf..23f171b261664 100644
--- a/packages/editor-ui/src/views/NodeView.v2.vue
+++ b/packages/editor-ui/src/views/NodeView.v2.vue
@@ -19,12 +19,10 @@ import useWorkflowsEEStore from '@/stores/workflows.ee.store';
 import { useTagsStore } from '@/stores/tags.store';
 import type { Connection } from '@vue-flow/core';
 import type { CanvasElement } from '@/types';
-import CanvasAddButton from '@/views/CanvasAddButton.vue';
 import {
+	EnterpriseEditionFeature,
 	AI_NODE_CREATOR_VIEW,
 	REGULAR_NODE_CREATOR_VIEW,
-	START_NODE_TYPE,
-	STICKY_NODE_TYPE,
 	TRIGGER_NODE_CREATOR_VIEW,
 	VIEWS,
 } from '@/constants';
@@ -33,18 +31,17 @@ import { useNodeCreatorStore } from '@/stores/nodeCreator.store';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { useExternalHooks } from '@/composables/useExternalHooks';
 import * as NodeViewUtils from '@/utils/nodeViewUtils';
-import {
-	type ConnectionTypes,
-	type INodeOutputConfiguration,
-	type INodeTypeDescription,
-	type INodeTypeNameVersion,
-	type ITelemetryTrackProperties,
-	NodeConnectionType,
-	NodeHelpers,
-} from 'n8n-workflow';
+import type { INodeTypeDescription } from 'n8n-workflow';
+import { NodeConnectionType } from 'n8n-workflow';
 import { useToast } from '@/composables/useToast';
 import { v4 as uuid } from 'uuid';
-import { useSegment } from '@/stores/segment.store';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useCredentialsStore } from '@/stores/credentials.store';
+import useEnvironmentsStore from '@/stores/environments.ee.store';
+import { useExternalSecretsStore } from '@/stores/externalSecrets.ee.store';
+import { useRootStore } from '@/stores/n8nRoot.store';
+import { useCollaborationStore } from '@/stores/collaboration.store';
+import { getUniqueNodeName } from '@/utils/canvasUtilsV2';
 
 const NodeCreation = defineAsyncComponent(
 	async () => await import('@/components/Node/NodeCreation.vue'),
@@ -66,6 +63,12 @@ const workflowsEEStore = useWorkflowsEEStore();
 const tagsStore = useTagsStore();
 const sourceControlStore = useSourceControlStore();
 const nodeCreatorStore = useNodeCreatorStore();
+const settingsStore = useSettingsStore();
+const credentialsStore = useCredentialsStore();
+const environmentsStore = useEnvironmentsStore();
+const externalSecretsStore = useExternalSecretsStore();
+const rootStore = useRootStore();
+const collaborationStore = useCollaborationStore();
 
 const { runWorkflow } = useRunWorkflow({ router });
 
@@ -104,15 +107,50 @@ onMounted(() => {
 async function initialize() {
 	isLoading.value = true;
 
-	await nodeTypesStore.getNodeTypes();
-	await workflowsStore.fetchWorkflow(workflowId.value);
+	const loadPromises: Array<Promise<unknown>> = [
+		nodeTypesStore.getNodeTypes(),
+		workflowsStore.fetchWorkflow(workflowId.value),
+	];
+
+	if (!settingsStore.isPreviewMode && !isDemoRoute.value) {
+		loadPromises.push(
+			workflowsStore.fetchActiveWorkflows(),
+			credentialsStore.fetchAllCredentials(),
+			credentialsStore.fetchCredentialTypes(true),
+		);
+
+		if (settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Variables)) {
+			loadPromises.push(environmentsStore.fetchAllVariables());
+		}
+
+		if (settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.ExternalSecrets)) {
+			loadPromises.push(externalSecretsStore.fetchAllSecrets());
+		}
+	}
+
+	try {
+		await Promise.all(loadPromises);
+	} catch (error) {
+		return toast.showError(
+			error,
+			i18n.baseText('nodeView.showError.mounted1.title'),
+			i18n.baseText('nodeView.showError.mounted1.message') + ':',
+		);
+	}
 
 	initializeEditableWorkflow(workflowId.value);
 
+	if (window.parent) {
+		window.parent.postMessage(
+			JSON.stringify({ command: 'n8nReady', version: rootStore.versionCli }),
+			'*',
+		);
+	}
+
 	isLoading.value = false;
 }
 
-// @TODO Move this to the store
+// @TODO Maybe move this to the store
 function initializeEditableWorkflow(id: string) {
 	const targetWorkflow = workflowsStore.workflowsById[id];
 
@@ -148,22 +186,25 @@ function initializeEditableWorkflow(id: string) {
 	workflowsStore.setWorkflowTagIds(tagIds || []);
 	tagsStore.upsertTags(tags);
 
+	// @TODO Figure out a better way to handle this. Maybe show a message on why the state becomes dirty
 	// if (!this.credentialsUpdated) {
 	// 	this.uiStore.stateIsDirty = false;
 	// }
-	// this.canvasStore.zoomToFit();
-	// void this.externalHooks.run('workflow.open', {
-	// 	workflowId: workflow.id,
-	// 	workflowName: workflow.name,
-	// });
+
+	void externalHooks.run('workflow.open', {
+		workflowId: workflow.value.id,
+		workflowName: workflow.value.name,
+	});
+
+	// @TODO Figure out a better way to handle this
 	// if (selectedExecution?.workflowId !== workflow.id) {
 	// 	this.executionsStore.activeExecution = null;
 	// 	workflowsStore.currentWorkflowExecutions = [];
 	// } else {
 	// 	this.executionsStore.activeExecution = selectedExecution;
 	// }
-	// this.canvasStore.stopLoading();
-	// this.collaborationStore.notifyWorkflowOpened(workflow.id);
+
+	collaborationStore.notifyWorkflowOpened(workflow.value.id);
 }
 
 async function onRunWorkflow() {
@@ -187,33 +228,79 @@ function onNodePositionUpdate(id: string, position: CanvasElement['position']) {
  */
 function onCreateNodeConnection(connection: Connection) {
 	// Output
+	const sourceNodeId = connection.source;
+	const sourceNode = workflowsStore.getNodeById(sourceNodeId);
+	const sourceNodeName = sourceNode?.name ?? '';
+	const [, sourceType, sourceIndex] = (connection.sourceHandle ?? '').split('/');
+
+	// Input
 	const targetNodeId = connection.target;
-	const targetNodeName = workflowsStore.getNodeById(targetNodeId)?.name ?? '';
+	const targetNode = workflowsStore.getNodeById(targetNodeId);
+	const targetNodeName = targetNode?.name ?? '';
 	const [, targetType, targetIndex] = (connection.targetHandle ?? '').split('/');
 
-	// Input
-	const sourceNodeId = connection.source;
-	const sourceNodeName = workflowsStore.getNodeById(sourceNodeId)?.name ?? '';
-	const [, sourceType, sourceIndex] = (connection.sourceHandle ?? '').split('/');
+	if (sourceNode && targetNode && !checkIfNodeConnectionIsAllowed(sourceNode, targetNode)) {
+		return;
+	}
 
 	workflowsStore.addConnection({
 		connection: [
-			{
-				node: targetNodeName,
-				type: targetType,
-				index: parseInt(targetIndex, 10),
-			},
 			{
 				node: sourceNodeName,
 				type: sourceType,
 				index: parseInt(sourceIndex, 10),
 			},
+			{
+				node: targetNodeName,
+				type: targetType,
+				index: parseInt(targetIndex, 10),
+			},
 		],
 	});
 
 	uiStore.stateIsDirty = true;
 }
 
+// @TODO Figure out a way to improve this
+function checkIfNodeConnectionIsAllowed(sourceNode: INodeUi, targetNode: INodeUi): boolean {
+	// const targetNodeType = nodeTypesStore.getNodeType(
+	// 	targetNode.type,
+	// 	targetNode.typeVersion,
+	// );
+	//
+	// if (targetNodeType?.inputs?.length) {
+	// 	const workflow = this.workflowHelpers.getCurrentWorkflow();
+	// 	const workflowNode = workflow.getNode(targetNode.name);
+	// 	let inputs: Array<ConnectionTypes | INodeInputConfiguration> = [];
+	// 	if (targetNodeType) {
+	// 		inputs = NodeHelpers.getNodeInputs(workflow, workflowNode, targetNodeType);
+	// 	}
+	//
+	// 	for (const input of inputs || []) {
+	// 		if (typeof input === 'string' || input.type !== targetInfoType || !input.filter) {
+	// 			// No filters defined or wrong connection type
+	// 			continue;
+	// 		}
+	//
+	// 		if (input.filter.nodes.length) {
+	// 			if (!input.filter.nodes.includes(sourceNode.type)) {
+	// 				this.dropPrevented = true;
+	// 				this.showToast({
+	// 					title: this.$locale.baseText('nodeView.showError.nodeNodeCompatible.title'),
+	// 					message: this.$locale.baseText('nodeView.showError.nodeNodeCompatible.message', {
+	// 						interpolate: { sourceNodeName: sourceNode.name, targetNodeName: targetNode.name },
+	// 					}),
+	// 					type: 'error',
+	// 					duration: 5000,
+	// 				});
+	// 				return false;
+	// 			}
+	// 		}
+	// 	}
+	// }
+	return true;
+}
+
 function onToggleNodeCreator({
 	source,
 	createNodeActive,
@@ -268,7 +355,7 @@ async function onAddNodes(
 ) {
 	let currentPosition = position;
 	for (const { type, name, position: nodePosition, isAutoAdd, openDetail } of nodes) {
-		await addNode(
+		const node = await addNode(
 			{
 				name,
 				type,
@@ -282,27 +369,27 @@ async function onAddNodes(
 			},
 		);
 
-		// 	const lastAddedNode = editableWorkflow.value.nodes[editableWorkflow.value.nodes.length - 1];
-		// 	currentPosition = [
-		// 		lastAddedNode.position[0] + NodeViewUtils.NODE_SIZE * 2 + NodeViewUtils.GRID_SIZE,
-		// 		lastAddedNode.position[1],
-		// 	];
-		// }
-		//
-		// const newNodesOffset = editableWorkflow.value.nodes.length - nodes.length;
-		// for (const { from, to } of connections) {
-		// 	const fromNode = editableWorkflow.value.nodes[newNodesOffset + from.nodeIndex];
-		// 	const toNode = editableWorkflow.value.nodes[newNodesOffset + to.nodeIndex];
-		//
-		// 	// this.connectTwoNodes(
-		// 	// 	fromNode.name,
-		// 	// 	from.outputIndex ?? 0,
-		// 	// 	toNode.name,
-		// 	// 	to.inputIndex ?? 0,
-		// 	// 	NodeConnectionType.Main,
-		// 	// );
+		const lastAddedNode = editableWorkflow.value.nodes[editableWorkflow.value.nodes.length - 1];
+		currentPosition = [
+			lastAddedNode.position[0] + NodeViewUtils.NODE_SIZE * 2 + NodeViewUtils.GRID_SIZE,
+			lastAddedNode.position[1],
+		];
+	}
+
+	const newNodesOffset = editableWorkflow.value.nodes.length - nodes.length;
+	for (const { from, to } of connections) {
+		const fromNode = editableWorkflow.value.nodes[newNodesOffset + from.nodeIndex];
+		const toNode = editableWorkflow.value.nodes[newNodesOffset + to.nodeIndex];
+
+		onCreateNodeConnection({
+			source: fromNode.id,
+			sourceHandle: `outputs/${NodeConnectionType.Main}/${from.outputIndex ?? 0}`,
+			target: toNode.id,
+			targetHandle: `inputs/${NodeConnectionType.Main}/${to.inputIndex ?? 0}`,
+		});
 	}
 
+	// @TODO Implement this
 	// const lastAddedNode = editableWorkflow.value.nodes[editableWorkflow.value.nodes.length - 1];
 	// const workflow = editableWorkflowObject.value;
 	// const lastNodeInputs = workflow.getParentNodesByDepth(lastAddedNode.name, 1);
@@ -334,7 +421,7 @@ type AddNodeOptions = {
 	isAutoAdd?: boolean;
 };
 
-async function addNode(node: AddNodeData, options: AddNodeOptions) {
+async function addNode(node: AddNodeData, options: AddNodeOptions): Promise<INodeUi | undefined> {
 	if (!checkIfEditingIsAllowed()) {
 		return;
 	}
@@ -344,8 +431,17 @@ async function addNode(node: AddNodeData, options: AddNodeOptions) {
 		return;
 	}
 
+	/**
+	 * @TODO Check if maximum node type limit reached
+	 */
+
+	newNodeData.name = getUniqueNodeName(newNodeData.name, workflowsStore.canvasNames);
+
 	workflowsStore.addNode(newNodeData);
 
+	// @TODO Figure out why this is needed and if we can do better...
+	// this.matchCredentials(node);
+
 	// const lastSelectedNode = uiStore.getLastSelectedNode;
 	// const lastSelectedNodeOutputIndex = uiStore.lastSelectedNodeOutputIndex;
 	// const lastSelectedNodeEndpointUuid = uiStore.lastSelectedNodeEndpointUuid;
@@ -424,6 +520,8 @@ async function addNode(node: AddNodeData, options: AddNodeOptions) {
 	// 	);
 	// }
 	// this.historyStore.stopRecordingUndo();
+
+	return newNodeData;
 }
 
 async function createNodeWithDefaultCredentials(node: Partial<INodeUi>) {
@@ -443,10 +541,43 @@ async function createNodeWithDefaultCredentials(node: Partial<INodeUi>) {
 		name: node.name ?? (nodeTypeDescription.defaults.name as string),
 		type: nodeTypeDescription.name,
 		typeVersion: nodeVersion,
-		position: [0, 0],
+		position: node.position ?? [0, 0],
 		parameters: {},
 	};
 
+	/**
+	 * @TODO Implement this
+	 */
+
+	// // 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,
+	// 			node.parameters,
+	// 			true,
+	// 			false,
+	// 			node,
+	// 		);
+	// 	} catch (e) {
+	// 		console.error(
+	// 			this.$locale.baseText('nodeView.thereWasAProblemLoadingTheNodeParametersOfNode') +
+	// 			`: "${node.name}"`,
+	// 		);
+	// 		console.error(e);
+	// 	}
+	// 	node.parameters = nodeParameters !== null ? 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(node.type) &&
+	// 		node.parameters.path === ''
+	// 	) {
+	// 		node.parameters.path = node.webhookId as string;
+	// 	}
+	// }
 	// const credentialPerType = nodeTypeData.credentials
 	// 	?.map((type) => credentialsStore.getUsableCredentialByType(type.name))
 	// 	.flat();
@@ -514,6 +645,9 @@ async function createNodeWithDefaultCredentials(node: Partial<INodeUi>) {
 	return newNodeData;
 }
 
+/**
+ * @TODO Implement if needed
+ */
 // async loadNodesProperties(nodeInfos: INodeTypeNameVersion[]): Promise<void> {
 // 	const allNodes: INodeTypeDescription[] = this.nodeTypesStore.allNodeTypes;
 //
@@ -539,6 +673,9 @@ async function createNodeWithDefaultCredentials(node: Partial<INodeUi>) {
 // }
 // }
 
+/**
+ * @TODO Probably not needed and can be merged into addNode
+ */
 async function injectNode(
 	nodeTypeName: string,
 	options: AddNodeOptions = {},

From bd0bdbab784f80dd6a31dbe3bf3b39be8f9249f7 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Thu, 9 May 2024 15:30:31 +0300
Subject: [PATCH 17/22] chore: remove workflows.store.v2

---
 .../src/stores/workflows.store.v2.ts          | 206 ------------------
 1 file changed, 206 deletions(-)
 delete mode 100644 packages/editor-ui/src/stores/workflows.store.v2.ts

diff --git a/packages/editor-ui/src/stores/workflows.store.v2.ts b/packages/editor-ui/src/stores/workflows.store.v2.ts
deleted file mode 100644
index f41e9ebc6066d..0000000000000
--- a/packages/editor-ui/src/stores/workflows.store.v2.ts
+++ /dev/null
@@ -1,206 +0,0 @@
-import { defineStore } from 'pinia';
-import {
-	ERROR_TRIGGER_NODE_TYPE,
-	PLACEHOLDER_EMPTY_WORKFLOW_ID,
-	START_NODE_TYPE,
-	STORES,
-} from '@/constants';
-import { computed, ref } from 'vue';
-import type {
-	IPushDataExecutionFinished,
-	IPushDataUnsavedExecutionFinished,
-	IWorkflowDb,
-} from '@/Interface';
-import { useRootStore } from '@/stores/n8nRoot.store';
-import * as workflowsApi from '@/api/workflows';
-import type { INodeType, INodeTypes, ITaskData } from 'n8n-workflow';
-import { deepCopy, Workflow } from 'n8n-workflow';
-import { useNodeTypesStore } from '@/stores/nodeTypes.store';
-
-const defaultWorkflowSettings: Omit<IWorkflowDb, 'id'> & {
-	settings: NonNullable<IWorkflowDb['settings']>;
-} = {
-	name: '',
-	active: false,
-	createdAt: -1,
-	updatedAt: -1,
-	connections: {},
-	nodes: [],
-	settings: {
-		executionOrder: 'v1',
-	},
-	tags: [],
-	pinData: {},
-	versionId: '',
-	usedCredentials: [],
-};
-
-export const useWorkflowsStoreV2 = defineStore(STORES.WORKFLOWS_V2, () => {
-	const workflowsById = ref<Record<string, IWorkflowDb>>({});
-	const workflows = computed(() => Object.values(workflowsById.value));
-
-	const workflowInstancesCacheById = ref<
-		Record<
-			string,
-			{
-				key: string;
-				workflow: Workflow;
-			}
-		>
-	>({});
-
-	function addWorkflow(workflow: IWorkflowDb) {
-		workflowsById.value[workflow.id] = workflow;
-	}
-
-	function removeWorkflow(id: string) {
-		delete workflowsById.value[id];
-	}
-
-	async function fetchWorkflow(id: string) {
-		const rootStore = useRootStore();
-		const workflow = await workflowsApi.getWorkflow(rootStore.getRestApiContext, id);
-
-		addWorkflow(workflow);
-	}
-
-	function createNodeTypesForWorkflowObject(): INodeTypes {
-		return {
-			nodeTypes: {},
-			init: async (): Promise<void> => {},
-			getByNameAndVersion: (nodeType: string, version?: number): INodeType | undefined => {
-				const description = useNodeTypesStore().getNodeType(nodeType, version);
-				if (description === null) {
-					return undefined;
-				}
-
-				// As we do not have the trigger/poll functions available in the frontend
-				// we use the information available to figure out what are trigger nodes
-				const trigger = ((![ERROR_TRIGGER_NODE_TYPE, START_NODE_TYPE].includes(nodeType) &&
-					description.inputs.length === 0 &&
-					!description.webhooks) ||
-					undefined) as INodeType['trigger'];
-
-				return {
-					description,
-					trigger,
-				};
-			},
-		} as unknown as INodeTypes;
-	}
-
-	function createWorkflowInstance(
-		id: IWorkflowDb['id'],
-		name: IWorkflowDb['name'],
-		nodes: IWorkflowDb['nodes'],
-		connections: IWorkflowDb['connections'],
-		settings: IWorkflowDb['settings'],
-		pinData: IWorkflowDb['pinData'],
-		copyData?: boolean,
-	): Workflow {
-		const nodeTypes = createNodeTypesForWorkflowObject();
-		let workflowId: string | undefined = id;
-		if (workflowId && workflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID) {
-			workflowId = undefined;
-		}
-
-		return new Workflow({
-			id: workflowId,
-			name,
-			nodes: copyData ? deepCopy(nodes) : nodes,
-			connections: copyData ? deepCopy(connections) : connections,
-			active: false,
-			nodeTypes,
-			settings,
-			pinData,
-		});
-	}
-
-	function getWorkflowInstance(id: string, copyData?: boolean): Workflow {
-		const nodes = getWorkflowNodes(id);
-		const connections = getWorkflowConnections(id);
-		const cacheKey = JSON.stringify({ nodes, connections });
-
-		const cacheEntry = workflowInstancesCacheById.value[id];
-		if (!copyData && cacheEntry && cacheKey === cacheEntry.key) {
-			return cacheEntry.workflow;
-		}
-
-		const name = getWorkflowName(id);
-		const settings = getWorkflowSettings(id);
-		const pinData = getWorkflowPinData(id);
-		const workflowObject = createWorkflowInstance(
-			id,
-			name,
-			nodes,
-			connections,
-			settings,
-			pinData,
-			copyData,
-		);
-		workflowInstancesCacheById.value[id] = { key: cacheKey, workflow: workflowObject };
-		return workflowObject;
-	}
-
-	// Returns a shallow copy of the nodes which means that all the data on the lower
-	// levels still only gets referenced but the top level object is a different one.
-	// This has the advantage that it is very fast and does not cause problems with vuex
-	// when the workflow replaces the node-parameters.
-	function getWorkflowNodes(id: string): IWorkflowDb['nodes'] {
-		return workflowsById.value[id].nodes.map((node) => ({ ...node }));
-	}
-
-	function getWorkflowConnections(id: string): IWorkflowDb['connections'] {
-		return { ...workflowsById.value[id].connections };
-	}
-
-	function getWorkflowSettings(id: string): IWorkflowDb['settings'] {
-		return workflowsById.value[id].settings ?? { ...defaultWorkflowSettings.settings };
-	}
-
-	function getWorkflowName(id: string): IWorkflowDb['name'] {
-		return workflowsById.value[id].name;
-	}
-
-	function getWorkflowPinData(id: string): IWorkflowDb['pinData'] {
-		return workflowsById.value[id].pinData;
-	}
-
-	async function runWorkflow(
-		workflowId: string,
-		options: {
-			destinationNode?: string;
-			triggerNode?: string;
-			nodeData?: ITaskData;
-			source?: string;
-		},
-	) {
-		const workflow = workflowsById.value[workflowId];
-		console.log('runWorkflow', workflow);
-		console.log('options', options);
-		// TODO: Implement behavior from 'runWorkflow' in useRunWorkflow.ts using the new workflow store
-	}
-
-	function finishActiveExecution(
-		workflowId: string,
-		finishedActiveExecution: IPushDataExecutionFinished | IPushDataUnsavedExecutionFinished,
-	) {
-		const workflow = workflowsById.value[workflowId];
-		console.log('workflow', workflow);
-		console.log('finishedActiveExecution', finishedActiveExecution);
-		// TODO: Implement behavior from old workflows store
-		// Execution data should be stored in the executions store and not in the workflows store
-		// The workflow store should only be responsible for the workflow data itself
-	}
-
-	return {
-		workflowsById,
-		workflows,
-		addWorkflow,
-		removeWorkflow,
-		fetchWorkflow,
-		getWorkflowObject: getWorkflowInstance,
-		runWorkflow,
-		finishActiveExecution,
-	};
-});

From 92a373f1db891eb556ba7234d751ba8ec2544e8d Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Thu, 9 May 2024 15:34:06 +0300
Subject: [PATCH 18/22] chore: fix linting issues

---
 .../elements/handles/render-types/CanvasHandleMainOutput.vue  | 3 +--
 packages/editor-ui/src/constants.ts                           | 4 ++--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue
index b3101210208d8..0a43e7c9835b8 100644
--- a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { computed, inject, useCssModule } from 'vue';
-import { svg } from '@jsplumb/browser-ui';
 import { CanvasNodeHandleKey } from '@/constants';
 
 const handle = inject(CanvasNodeHandleKey);
@@ -36,7 +35,7 @@ const label = computed(() => handle?.label.value ?? '');
 	<div :class="$style.handle">
 		<div :class="$style.label">{{ label }}</div>
 		<div :class="$style.circle" />
-		<!-- @TODO Determine whether handle is connected -->
+		<!-- @TODO Determine whether handle is connected and find a way to make it work without pointer-events: none -->
 		<!--		<svg :class="$style.plus" viewBox="0 0 70 24">-->
 		<!--			<line x1="0" y1="12" x2="46" y2="12" stroke="var(&#45;&#45;color-foreground-xdark)" />-->
 		<!--			<rect-->
diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts
index d1bbad125d63a..9e47b9d4e0bff 100644
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@@ -1,7 +1,7 @@
 import type { NodeCreatorOpenSource } from './Interface';
 import { NodeConnectionType } from 'n8n-workflow';
-import { CanvasNodeHandleInjectionData, CanvasNodeInjectionData } from '@/types';
-import { InjectionKey } from 'vue';
+import type { CanvasNodeHandleInjectionData, CanvasNodeInjectionData } from '@/types';
+import type { InjectionKey } from 'vue';
 
 export const MAX_WORKFLOW_SIZE = 1024 * 1024 * 16; // Workflow size limit in bytes
 export const MAX_EXPECTED_REQUEST_SIZE = 2048; // Expected maximum workflow request metadata (i.e. headers) size in bytes

From defde02a04b373213800c418bcccfad2a2c581e5 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Thu, 9 May 2024 16:12:19 +0300
Subject: [PATCH 19/22] fix: update feature flag name

---
 packages/editor-ui/src/router.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/router.ts b/packages/editor-ui/src/router.ts
index 9934ecd564df3..b2651ae745d6c 100644
--- a/packages/editor-ui/src/router.ts
+++ b/packages/editor-ui/src/router.ts
@@ -396,7 +396,7 @@ export const routes = [
 			middleware: ['authenticated', 'custom'],
 			middlewareOptions: {
 				custom: () => {
-					return !!localStorage.getItem('features.nodeViewV2');
+					return !!localStorage.getItem('features.NodeViewV2');
 				},
 			},
 		},

From f5511c884bc84eb896e0d1e6ec5436a7cfc3e98f Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Thu, 16 May 2024 15:04:50 +0300
Subject: [PATCH 20/22] test: add unit tests for canvas components and utils

---
 .../editor-ui/src/__tests__/data/canvas.ts    |  87 +++
 .../editor-ui/src/__tests__/data/index.ts     |   1 +
 packages/editor-ui/src/__tests__/defaults.ts  |  14 +-
 packages/editor-ui/src/__tests__/mocks.ts     |  14 +-
 packages/editor-ui/src/__tests__/render.ts    |   3 +-
 packages/editor-ui/src/__tests__/utils.ts     |   5 +-
 .../src/components/canvas/Canvas.spec.ts      | 112 ++++
 .../src/components/canvas/Canvas.vue          |  11 +-
 .../src/components/canvas/WorkflowCanvas.vue  | 133 +----
 .../elements/handles/HandleRenderer.spec.ts   | 100 ++++
 .../CanvasHandleMainInput.spec.ts             |  22 +
 .../render-types/CanvasHandleMainInput.vue    |   2 +-
 .../CanvasHandleMainOutput.spec.ts            |  22 +
 .../render-types/CanvasHandleMainOutput.vue   |   2 +-
 .../render-types/CanvasHandleNonMain.spec.ts  |  22 +
 .../render-types/CanvasHandleNonMain.vue      |   2 +-
 .../canvas/elements/nodes/CanvasNode.spec.ts  |  93 +++
 .../canvas/elements/nodes/CanvasNode.vue      |  11 +-
 .../elements/nodes/CanvasNodeRenderer.spec.ts |  51 ++
 .../elements/nodes/CanvasNodeToolbar.spec.ts  | 108 ++++
 .../elements/nodes/CanvasNodeToolbar.vue      |  12 +-
 .../CanvasNodeConfigurable.spec.ts            |  70 +++
 .../render-types/CanvasNodeConfigurable.vue   |   2 +-
 .../CanvasNodeConfiguration.spec.ts           |  43 ++
 .../render-types/CanvasNodeConfiguration.vue  |   2 +-
 .../render-types/CanvasNodeDefault.spec.ts    |  84 +++
 .../nodes/render-types/CanvasNodeDefault.vue  |   2 +-
 .../src/composables/useCanvasMapping.spec.ts  | 213 +++++++
 .../src/composables/useCanvasMapping.ts       | 150 +++++
 .../composables/useNodeConnections.spec.ts    |  88 +++
 .../codemirror/completions/__tests__/mock.ts  |  12 +-
 packages/editor-ui/src/types/canvas.ts        |   2 +
 .../editor-ui/src/utils/canvasUtilsV2.spec.ts | 531 ++++++++++++++++++
 packages/editor-ui/src/utils/canvasUtilsV2.ts |   4 +-
 34 files changed, 1864 insertions(+), 166 deletions(-)
 create mode 100644 packages/editor-ui/src/__tests__/data/canvas.ts
 create mode 100644 packages/editor-ui/src/__tests__/data/index.ts
 create mode 100644 packages/editor-ui/src/components/canvas/Canvas.spec.ts
 create mode 100644 packages/editor-ui/src/components/canvas/elements/handles/HandleRenderer.spec.ts
 create mode 100644 packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainInput.spec.ts
 create mode 100644 packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.spec.ts
 create mode 100644 packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMain.spec.ts
 create mode 100644 packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.spec.ts
 create mode 100644 packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeRenderer.spec.ts
 create mode 100644 packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.spec.ts
 create mode 100644 packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfigurable.spec.ts
 create mode 100644 packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfiguration.spec.ts
 create mode 100644 packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.spec.ts
 create mode 100644 packages/editor-ui/src/composables/useCanvasMapping.spec.ts
 create mode 100644 packages/editor-ui/src/composables/useCanvasMapping.ts
 create mode 100644 packages/editor-ui/src/composables/useNodeConnections.spec.ts
 create mode 100644 packages/editor-ui/src/utils/canvasUtilsV2.spec.ts

diff --git a/packages/editor-ui/src/__tests__/data/canvas.ts b/packages/editor-ui/src/__tests__/data/canvas.ts
new file mode 100644
index 0000000000000..2c8e7fad6f956
--- /dev/null
+++ b/packages/editor-ui/src/__tests__/data/canvas.ts
@@ -0,0 +1,87 @@
+import { CanvasNodeKey } from '@/constants';
+import { ref } from 'vue';
+import { CanvasConnection, CanvasConnectionPort, CanvasElement, CanvasElementData } from '@/types';
+
+export function createCanvasNodeData({
+	id = 'node',
+	type = 'test',
+	typeVersion = 1,
+	inputs = [],
+	outputs = [],
+	renderType = 'default',
+}: Partial<CanvasElementData> = {}): CanvasElementData {
+	return {
+		id,
+		type,
+		typeVersion,
+		inputs,
+		outputs,
+		renderType,
+	};
+}
+
+export function createCanvasNodeElement({
+	id = '1',
+	type = 'node',
+	label = 'Node',
+	position = { x: 100, y: 100 },
+	data,
+}: Partial<
+	Omit<CanvasElement, 'data'> & { data: Partial<CanvasElementData> }
+> = {}): CanvasElement {
+	return {
+		id,
+		type,
+		label,
+		position,
+		data: createCanvasNodeData({ id, type, ...data }),
+	};
+}
+
+export function createCanvasNodeProps({
+	id = 'node',
+	label = 'Test Node',
+	selected = false,
+	data = {},
+} = {}) {
+	return {
+		id,
+		label,
+		selected,
+		data: createCanvasNodeData(data),
+	};
+}
+
+export function createCanvasNodeProvide({
+	id = 'node',
+	label = 'Test Node',
+	selected = false,
+	data = {},
+} = {}) {
+	const props = createCanvasNodeProps({ id, label, selected, data });
+	return {
+		[`${CanvasNodeKey}`]: {
+			id: ref(props.id),
+			label: ref(props.label),
+			selected: ref(props.selected),
+			data: ref(props.data),
+		},
+	};
+}
+
+export function createCanvasConnection(
+	nodeA: CanvasElement,
+	nodeB: CanvasElement,
+	{ sourceIndex = 0, targetIndex = 0 } = {},
+) {
+	const nodeAOutput = nodeA.data?.outputs[sourceIndex];
+	const nodeBInput = nodeA.data?.inputs[targetIndex];
+
+	return {
+		id: `${nodeA.id}-${nodeB.id}`,
+		source: nodeA.id,
+		target: nodeB.id,
+		...(nodeAOutput ? { sourceHandle: `outputs/${nodeAOutput.type}/${nodeAOutput.index}` } : {}),
+		...(nodeBInput ? { targetHandle: `inputs/${nodeBInput.type}/${nodeBInput.index}` } : {}),
+	};
+}
diff --git a/packages/editor-ui/src/__tests__/data/index.ts b/packages/editor-ui/src/__tests__/data/index.ts
new file mode 100644
index 0000000000000..baba675788f93
--- /dev/null
+++ b/packages/editor-ui/src/__tests__/data/index.ts
@@ -0,0 +1 @@
+export * from './canvas';
diff --git a/packages/editor-ui/src/__tests__/defaults.ts b/packages/editor-ui/src/__tests__/defaults.ts
index d448637c33c65..db862c5700cad 100644
--- a/packages/editor-ui/src/__tests__/defaults.ts
+++ b/packages/editor-ui/src/__tests__/defaults.ts
@@ -1,5 +1,10 @@
 import type { INodeTypeData, INodeTypeDescription, IN8nUISettings } from 'n8n-workflow';
-import { AGENT_NODE_TYPE, CHAT_TRIGGER_NODE_TYPE, MANUAL_TRIGGER_NODE_TYPE } from '@/constants';
+import {
+	AGENT_NODE_TYPE,
+	SET_NODE_TYPE,
+	CHAT_TRIGGER_NODE_TYPE,
+	MANUAL_TRIGGER_NODE_TYPE,
+} from '@/constants';
 import nodeTypesJson from '../../../nodes-base/dist/types/nodes.json';
 import aiNodeTypesJson from '../../../@n8n/nodes-langchain/dist/types/nodes.json';
 
@@ -16,6 +21,12 @@ export const testingNodeTypes: INodeTypeData = {
 			description: findNodeWithName(MANUAL_TRIGGER_NODE_TYPE),
 		},
 	},
+	[SET_NODE_TYPE]: {
+		sourcePath: '',
+		type: {
+			description: findNodeWithName(SET_NODE_TYPE),
+		},
+	},
 	[CHAT_TRIGGER_NODE_TYPE]: {
 		sourcePath: '',
 		type: {
@@ -32,6 +43,7 @@ export const testingNodeTypes: INodeTypeData = {
 
 export const defaultMockNodeTypes: INodeTypeData = {
 	[MANUAL_TRIGGER_NODE_TYPE]: testingNodeTypes[MANUAL_TRIGGER_NODE_TYPE],
+	[SET_NODE_TYPE]: testingNodeTypes[SET_NODE_TYPE],
 };
 
 export function mockNodeTypesToArray(nodeTypes: INodeTypeData): INodeTypeDescription[] {
diff --git a/packages/editor-ui/src/__tests__/mocks.ts b/packages/editor-ui/src/__tests__/mocks.ts
index 3c1bc84a22ea7..fd2e5589cf143 100644
--- a/packages/editor-ui/src/__tests__/mocks.ts
+++ b/packages/editor-ui/src/__tests__/mocks.ts
@@ -22,22 +22,21 @@ import type {
 } from '@/Interface';
 
 export function createTestNodeTypes(data: INodeTypeData = {}): INodeTypes {
-	const getResolvedKey = (key: string) => {
-		const resolvedKeyParts = key.split(/[\/.]/);
-		return resolvedKeyParts[resolvedKeyParts.length - 1];
-	};
-
 	const nodeTypes = {
 		...defaultMockNodeTypes,
 		...Object.keys(data).reduce<INodeTypeData>((acc, key) => {
-			acc[getResolvedKey(key)] = data[key];
+			acc[key] = data[key];
 
 			return acc;
 		}, {}),
 	};
 
+	function getKnownTypes(): IDataObject {
+		return {};
+	}
+
 	function getByName(nodeType: string): INodeType | IVersionedNodeType {
-		return nodeTypes[getResolvedKey(nodeType)].type;
+		return nodeTypes[nodeType].type;
 	}
 
 	function getByNameAndVersion(nodeType: string, version?: number): INodeType {
@@ -45,6 +44,7 @@ export function createTestNodeTypes(data: INodeTypeData = {}): INodeTypes {
 	}
 
 	return {
+		getKnownTypes,
 		getByName,
 		getByNameAndVersion,
 	};
diff --git a/packages/editor-ui/src/__tests__/render.ts b/packages/editor-ui/src/__tests__/render.ts
index 6561dae4bcdea..e46b615993499 100644
--- a/packages/editor-ui/src/__tests__/render.ts
+++ b/packages/editor-ui/src/__tests__/render.ts
@@ -19,7 +19,8 @@ export type RenderOptions = Parameters<typeof render>[1] & {
 const TelemetryPlugin: Plugin<{}> = {
 	install(app) {
 		app.config.globalProperties.$telemetry = {
-			track(event: string, properties?: object) {},
+			// eslint-disable-next-line @typescript-eslint/no-unused-vars
+			track(..._: unknown[]) {},
 		} as Telemetry;
 	},
 };
diff --git a/packages/editor-ui/src/__tests__/utils.ts b/packages/editor-ui/src/__tests__/utils.ts
index 3e62559f74cb2..7109c69e102d8 100644
--- a/packages/editor-ui/src/__tests__/utils.ts
+++ b/packages/editor-ui/src/__tests__/utils.ts
@@ -26,6 +26,7 @@ export const retry = async (
 export const waitAllPromises = async () => await new Promise((resolve) => setTimeout(resolve));
 
 export const SETTINGS_STORE_DEFAULT_STATE: ISettingsState = {
+	initialized: true,
 	settings: defaultSettings,
 	promptsData: {
 		message: '',
@@ -56,9 +57,11 @@ export const SETTINGS_STORE_DEFAULT_STATE: ISettingsState = {
 		loginLabel: '',
 		loginEnabled: false,
 	},
+	mfa: {
+		enabled: false,
+	},
 	onboardingCallPromptEnabled: false,
 	saveDataErrorExecution: 'all',
 	saveDataSuccessExecution: 'all',
 	saveManualExecutions: false,
-	binaryDataMode: 'default',
 };
diff --git a/packages/editor-ui/src/components/canvas/Canvas.spec.ts b/packages/editor-ui/src/components/canvas/Canvas.spec.ts
new file mode 100644
index 0000000000000..8c98f03f88ccf
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/Canvas.spec.ts
@@ -0,0 +1,112 @@
+// @vitest-environment jsdom
+
+import { fireEvent, waitFor } from '@testing-library/vue';
+import { createComponentRenderer } from '@/__tests__/render';
+import Canvas from '@/components/canvas/Canvas.vue';
+import { createPinia, setActivePinia } from 'pinia';
+import type { CanvasConnection, CanvasElement } from '@/types';
+import { createCanvasConnection, createCanvasNodeElement } from '@/__tests__/data';
+import { NodeConnectionType } from 'n8n-workflow';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+global.window = jsdom.window as unknown as Window & typeof globalThis;
+
+vi.mock('@/stores/nodeTypes.store', () => ({
+	useNodeTypesStore: vi.fn(() => ({
+		getNodeType: vi.fn(() => ({
+			name: 'test',
+			description: 'Test Node Description',
+		})),
+	})),
+}));
+
+let renderComponent: ReturnType<typeof createComponentRenderer>;
+beforeEach(() => {
+	const pinia = createPinia();
+	setActivePinia(pinia);
+
+	renderComponent = createComponentRenderer(Canvas, { pinia });
+});
+
+afterEach(() => {
+	vi.clearAllMocks();
+});
+
+describe('Canvas', () => {
+	it('should initialize with default props', () => {
+		const { getByTestId } = renderComponent();
+
+		expect(getByTestId('canvas')).toBeVisible();
+		expect(getByTestId('canvas-background')).toBeVisible();
+		expect(getByTestId('canvas-minimap')).toBeVisible();
+		expect(getByTestId('canvas-controls')).toBeVisible();
+	});
+
+	it('should render nodes and edges', async () => {
+		const elements: CanvasElement[] = [
+			createCanvasNodeElement({
+				id: '1',
+				label: 'Node 1',
+				data: {
+					outputs: [
+						{
+							type: NodeConnectionType.Main,
+							index: 0,
+						},
+					],
+				},
+			}),
+			createCanvasNodeElement({
+				id: '2',
+				label: 'Node 2',
+				position: { x: 200, y: 200 },
+				data: {
+					inputs: [
+						{
+							type: NodeConnectionType.Main,
+							index: 0,
+						},
+					],
+				},
+			}),
+		];
+
+		const connections: CanvasConnection[] = [createCanvasConnection(elements[0], elements[1])];
+
+		const { container } = renderComponent({
+			props: {
+				elements,
+				connections,
+			},
+		});
+
+		await waitFor(() => expect(container.querySelectorAll('.vue-flow__node')).toHaveLength(2));
+
+		expect(container.querySelector(`[data-id="${elements[0].id}"]`)).toBeInTheDocument();
+		expect(container.querySelector(`[data-id="${elements[1].id}"]`)).toBeInTheDocument();
+		expect(container.querySelector(`[data-id="${connections[0].id}"]`)).toBeInTheDocument();
+	});
+
+	it('should handle node drag stop event', async () => {
+		const elements = [createCanvasNodeElement()];
+		const { container, emitted } = renderComponent({
+			props: {
+				elements,
+			},
+		});
+
+		await waitFor(() => expect(container.querySelectorAll('.vue-flow__node')).toHaveLength(1));
+
+		const node = container.querySelector(`[data-id="${elements[0].id}"]`) as Element;
+		await fireEvent.mouseDown(node, { view: window });
+		await fireEvent.mouseMove(node, {
+			view: window,
+			clientX: 100,
+			clientY: 100,
+		});
+		await fireEvent.mouseUp(node, { view: window });
+
+		expect(emitted()['update:node:position']).toEqual([['1', { x: 100, y: 100 }]]);
+	});
+});
diff --git a/packages/editor-ui/src/components/canvas/Canvas.vue b/packages/editor-ui/src/components/canvas/Canvas.vue
index cdfd274dab3e6..83f61b93e3e9a 100644
--- a/packages/editor-ui/src/components/canvas/Canvas.vue
+++ b/packages/editor-ui/src/components/canvas/Canvas.vue
@@ -55,6 +55,7 @@ function onConnect(...args: unknown[]) {
 		pan-on-scroll
 		:min-zoom="0.2"
 		:max-zoom="2"
+		data-test-id="canvas"
 		@node-drag-stop="onNodeDragStop"
 		@connect="onConnect"
 	>
@@ -66,11 +67,15 @@ function onConnect(...args: unknown[]) {
 			<CanvasEdge v-bind="canvasEdgeProps" />
 		</template>
 
-		<Background pattern-color="#aaa" :gap="16" />
+		<Background data-test-id="canvas-background" pattern-color="#aaa" :gap="16" />
 
-		<MiniMap pannable />
+		<MiniMap data-test-id="canvas-minimap" pannable />
 
-		<Controls :class="$style.canvasControls" :position="controlsPosition"></Controls>
+		<Controls
+			data-test-id="canvas-controls"
+			:class="$style.canvasControls"
+			:position="controlsPosition"
+		></Controls>
 	</VueFlow>
 </template>
 
diff --git a/packages/editor-ui/src/components/canvas/WorkflowCanvas.vue b/packages/editor-ui/src/components/canvas/WorkflowCanvas.vue
index c88a030e0e2f3..f5dad78e349e9 100644
--- a/packages/editor-ui/src/components/canvas/WorkflowCanvas.vue
+++ b/packages/editor-ui/src/components/canvas/WorkflowCanvas.vue
@@ -1,18 +1,9 @@
 <script setup lang="ts">
 import Canvas from '@/components/canvas/Canvas.vue';
-import { computed, useCssModule } from 'vue';
-import type {
-	CanvasConnection,
-	CanvasConnectionPort,
-	CanvasElement,
-	CanvasElementData,
-} from '@/types';
-import { mapLegacyConnections, normalizeElementEndpoints } from '@/utils/canvasUtilsV2';
-import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+import { toRef, useCssModule } from 'vue';
 import type { Workflow } from 'n8n-workflow';
-import { NodeHelpers } from 'n8n-workflow';
-import { useI18n } from '@/composables/useI18n';
 import type { IWorkflowDb } from '@/Interface';
+import { useCanvasMapping } from '@/composables/useCanvasMapping';
 
 const props = defineProps<{
 	id?: string;
@@ -22,124 +13,10 @@ const props = defineProps<{
 
 const $style = useCssModule();
 
-const locale = useI18n();
-const nodeTypesStore = useNodeTypesStore();
+const workflow = toRef(props, 'workflow');
+const workflowObject = toRef(props, 'workflowObject');
 
-const renderTypeByNodeType = computed(
-	() =>
-		props.workflow.nodes.reduce<Record<string, CanvasElementData['renderType']>>((acc, node) => {
-			let renderType: CanvasElementData['renderType'] = 'default';
-			switch (true) {
-				case nodeTypesStore.isTriggerNode(node.type):
-					renderType = 'trigger';
-					break;
-				case nodeTypesStore.isConfigNode(props.workflowObject, node, node.type):
-					renderType = 'configuration';
-					break;
-				case nodeTypesStore.isConfigurableNode(props.workflowObject, node, node.type):
-					renderType = 'configurable';
-					break;
-			}
-
-			acc[node.type] = renderType;
-			return acc;
-		}, {}) ?? {},
-);
-
-const nodeInputsById = computed(() =>
-	props.workflow.nodes.reduce<Record<string, CanvasConnectionPort[]>>((acc, node) => {
-		const nodeTypeDescription = nodeTypesStore.getNodeType(node.type);
-		const workflowObjectNode = props.workflowObject.getNode(node.name);
-
-		acc[node.id] =
-			workflowObjectNode && nodeTypeDescription
-				? normalizeElementEndpoints(
-						NodeHelpers.getNodeInputs(
-							props.workflowObject,
-							workflowObjectNode,
-							nodeTypeDescription,
-						),
-					)
-				: [];
-
-		return acc;
-	}, {}),
-);
-
-const nodeOutputsById = computed(() =>
-	props.workflow.nodes.reduce<Record<string, CanvasConnectionPort[]>>((acc, node) => {
-		const nodeTypeDescription = nodeTypesStore.getNodeType(node.type);
-		const workflowObjectNode = props.workflowObject.getNode(node.name);
-
-		acc[node.id] =
-			workflowObjectNode && nodeTypeDescription
-				? normalizeElementEndpoints(
-						NodeHelpers.getNodeOutputs(
-							props.workflowObject,
-							workflowObjectNode,
-							nodeTypeDescription,
-						),
-					)
-				: [];
-
-		return acc;
-	}, {}),
-);
-
-const elements = computed<CanvasElement[]>(() => [
-	...props.workflow.nodes.map<CanvasElement>((node) => {
-		const data: CanvasElementData = {
-			type: node.type,
-			typeVersion: node.typeVersion,
-			inputs: nodeInputsById.value[node.id] ?? [],
-			outputs: nodeOutputsById.value[node.id] ?? [],
-			renderType: renderTypeByNodeType.value[node.type] ?? 'default',
-		};
-
-		return {
-			id: node.id,
-			label: node.name,
-			type: 'canvas-node',
-			position: { x: node.position[0], y: node.position[1] },
-			data,
-		};
-	}),
-]);
-
-const connections = computed<CanvasConnection[]>(() => {
-	const mappedConnections = mapLegacyConnections(
-		props.workflow.connections ?? [],
-		props.workflow.nodes ?? [],
-	);
-
-	return mappedConnections.map((connection) => {
-		const type = getConnectionType(connection);
-		const label = getConnectionLabel(connection);
-
-		return {
-			...connection,
-			type,
-			label,
-		};
-	});
-});
-
-function getConnectionType(_: CanvasConnection): string {
-	return 'canvas-edge';
-}
-
-function getConnectionLabel(connection: CanvasConnection): string {
-	const pinData = props.workflow.pinData?.[connection.data?.fromNodeName ?? ''];
-
-	if (pinData?.length) {
-		return locale.baseText('ndv.output.items', {
-			adjustToNumber: pinData.length,
-			interpolate: { count: String(pinData.length) },
-		});
-	}
-
-	return '';
-}
+const { elements, connections } = useCanvasMapping({ workflow, workflowObject });
 </script>
 
 <template>
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/HandleRenderer.spec.ts b/packages/editor-ui/src/components/canvas/elements/handles/HandleRenderer.spec.ts
new file mode 100644
index 0000000000000..3117fbe581bc8
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/handles/HandleRenderer.spec.ts
@@ -0,0 +1,100 @@
+import HandleRenderer from '@/components/canvas/elements/handles/HandleRenderer.vue';
+import { NodeConnectionType } from 'n8n-workflow';
+import { createComponentRenderer } from '@/__tests__/render';
+import { CanvasNodeHandleKey, CanvasNodeKey } from '@/constants';
+import { ref } from 'vue';
+
+const renderComponent = createComponentRenderer(HandleRenderer);
+
+const Handle = {
+	template: '<div><slot /></div>',
+};
+
+describe('HandleRenderer', () => {
+	it('should render the main input handle correctly', async () => {
+		const { container } = renderComponent({
+			props: {
+				mode: 'input',
+				type: NodeConnectionType.Main,
+				index: 0,
+				position: 'left',
+				offset: { left: '10px', top: '10px' },
+				label: 'Main Input',
+			},
+			global: {
+				stubs: {
+					Handle,
+				},
+			},
+		});
+
+		expect(container.querySelector('.handle')).toBeInTheDocument();
+		expect(container.querySelector('.canvas-node-handle-main-input')).toBeInTheDocument();
+	});
+
+	it('should render the main output handle correctly', async () => {
+		const { container } = renderComponent({
+			props: {
+				mode: 'output',
+				type: NodeConnectionType.Main,
+				index: 0,
+				position: 'right',
+				offset: { right: '10px', bottom: '10px' },
+				label: 'Main Output',
+			},
+			global: {
+				stubs: {
+					Handle,
+				},
+			},
+		});
+
+		expect(container.querySelector('.handle')).toBeInTheDocument();
+		expect(container.querySelector('.canvas-node-handle-main-output')).toBeInTheDocument();
+	});
+
+	it('should render the non-main handle correctly', async () => {
+		const { container } = renderComponent({
+			props: {
+				mode: 'input',
+				type: NodeConnectionType.AiTool,
+				index: 0,
+				position: 'top',
+				offset: { top: '10px', left: '5px' },
+				label: 'AI Tool Input',
+			},
+			global: {
+				stubs: {
+					Handle,
+				},
+			},
+		});
+
+		expect(container.querySelector('.handle')).toBeInTheDocument();
+		expect(container.querySelector('.canvas-node-handle-non-main')).toBeInTheDocument();
+	});
+
+	it('should provide the label correctly', async () => {
+		const label = 'Test Label';
+		const { getByText } = renderComponent({
+			props: {
+				mode: 'input',
+				type: NodeConnectionType.AiTool,
+				index: 0,
+				position: 'top',
+				offset: { top: '10px', left: '5px' },
+				label,
+			},
+			global: {
+				provide: {
+					[`${CanvasNodeHandleKey}`]: { label: ref(label) },
+				},
+				stubs: {
+					Handle,
+				},
+			},
+		});
+
+		expect(getByText(label)).toBeInTheDocument();
+	});
+});
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainInput.spec.ts b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainInput.spec.ts
new file mode 100644
index 0000000000000..1cc06fc74c9fe
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainInput.spec.ts
@@ -0,0 +1,22 @@
+import CanvasHandleMainInput from '@/components/canvas/elements/handles/render-types/CanvasHandleMainInput.vue';
+import { createComponentRenderer } from '@/__tests__/render';
+import { CanvasNodeHandleKey } from '@/constants';
+import { ref } from 'vue';
+
+const renderComponent = createComponentRenderer(CanvasHandleMainInput);
+
+describe('CanvasHandleMainInput', () => {
+	it('should render correctly', async () => {
+		const label = 'Test Label';
+		const { container, getByText } = renderComponent({
+			global: {
+				provide: {
+					[`${CanvasNodeHandleKey}`]: { label: ref(label) },
+				},
+			},
+		});
+
+		expect(container.querySelector('.canvas-node-handle-main-input')).toBeInTheDocument();
+		expect(getByText(label)).toBeInTheDocument();
+	});
+});
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainInput.vue b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainInput.vue
index 1e72f3c020b99..dd9bdec44ddca 100644
--- a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainInput.vue
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainInput.vue
@@ -9,7 +9,7 @@ const $style = useCssModule();
 const label = computed(() => handle?.label.value ?? '');
 </script>
 <template>
-	<div :class="$style.handle">
+	<div :class="['canvas-node-handle-main-input', $style.handle]">
 		<div :class="$style.label">{{ label }}</div>
 	</div>
 </template>
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.spec.ts b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.spec.ts
new file mode 100644
index 0000000000000..c324e3a2e7c1d
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.spec.ts
@@ -0,0 +1,22 @@
+import CanvasHandleMainOutput from '@/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue';
+import { createComponentRenderer } from '@/__tests__/render';
+import { CanvasNodeHandleKey } from '@/constants';
+import { ref } from 'vue';
+
+const renderComponent = createComponentRenderer(CanvasHandleMainOutput);
+
+describe('CanvasHandleMainOutput', () => {
+	it('should render correctly', async () => {
+		const label = 'Test Label';
+		const { container, getByText } = renderComponent({
+			global: {
+				provide: {
+					[`${CanvasNodeHandleKey}`]: { label: ref(label) },
+				},
+			},
+		});
+
+		expect(container.querySelector('.canvas-node-handle-main-output')).toBeInTheDocument();
+		expect(getByText(label)).toBeInTheDocument();
+	});
+});
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue
index 0a43e7c9835b8..c0d016cbf149a 100644
--- a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue
@@ -32,7 +32,7 @@ const $style = useCssModule();
 const label = computed(() => handle?.label.value ?? '');
 </script>
 <template>
-	<div :class="$style.handle">
+	<div :class="['canvas-node-handle-main-output', $style.handle]">
 		<div :class="$style.label">{{ label }}</div>
 		<div :class="$style.circle" />
 		<!-- @TODO Determine whether handle is connected and find a way to make it work without pointer-events: none -->
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMain.spec.ts b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMain.spec.ts
new file mode 100644
index 0000000000000..7544c7587a19b
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMain.spec.ts
@@ -0,0 +1,22 @@
+import CanvasHandleNonMain from '@/components/canvas/elements/handles/render-types/CanvasHandleNonMain.vue';
+import { createComponentRenderer } from '@/__tests__/render';
+import { CanvasNodeHandleKey } from '@/constants';
+import { ref } from 'vue';
+
+const renderComponent = createComponentRenderer(CanvasHandleNonMain);
+
+describe('CanvasHandleNonMain', () => {
+	it('should render correctly', async () => {
+		const label = 'Test Label';
+		const { container, getByText } = renderComponent({
+			global: {
+				provide: {
+					[`${CanvasNodeHandleKey}`]: { label: ref(label) },
+				},
+			},
+		});
+
+		expect(container.querySelector('.canvas-node-handle-non-main')).toBeInTheDocument();
+		expect(getByText(label)).toBeInTheDocument();
+	});
+});
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMain.vue b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMain.vue
index bca95a6fe1beb..32e3ee9c98b01 100644
--- a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMain.vue
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMain.vue
@@ -9,7 +9,7 @@ const $style = useCssModule();
 const label = computed(() => handle?.label.value ?? '');
 </script>
 <template>
-	<div :class="$style.handle">
+	<div :class="['canvas-node-handle-non-main', $style.handle]">
 		<div :class="$style.diamond" />
 		<div :class="$style.label">{{ label }}</div>
 	</div>
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.spec.ts b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.spec.ts
new file mode 100644
index 0000000000000..35fd858470952
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.spec.ts
@@ -0,0 +1,93 @@
+import CanvasNode from '@/components/canvas/elements/nodes/CanvasNode.vue';
+import { createComponentRenderer } from '@/__tests__/render';
+import { createPinia, setActivePinia } from 'pinia';
+import { NodeConnectionType } from 'n8n-workflow';
+import { fireEvent } from '@testing-library/vue';
+import { createCanvasNodeProps } from '@/__tests__/data';
+
+vi.mock('@/stores/nodeTypes.store', () => ({
+	useNodeTypesStore: vi.fn(() => ({
+		getNodeType: vi.fn(() => ({
+			name: 'test',
+			description: 'Test Node Description',
+		})),
+	})),
+}));
+
+let renderComponent: ReturnType<typeof createComponentRenderer>;
+beforeEach(() => {
+	const pinia = createPinia();
+	setActivePinia(pinia);
+
+	renderComponent = createComponentRenderer(CanvasNode, { pinia });
+});
+
+describe('CanvasNode', () => {
+	it('should render node correctly', async () => {
+		const { getByTestId, getByText } = renderComponent({
+			props: {
+				...createCanvasNodeProps(),
+			},
+		});
+
+		expect(getByText('Test Node')).toBeInTheDocument();
+		expect(getByTestId('canvas-node')).toBeInTheDocument();
+	});
+
+	describe('classes', () => {
+		it('should apply selected class when node is selected', async () => {
+			const { getByText } = renderComponent({
+				props: {
+					...createCanvasNodeProps({ selected: true }),
+				},
+			});
+
+			expect(getByText('Test Node').closest('.node')).toHaveClass('selected');
+		});
+	});
+
+	describe('handles', () => {
+		it('should render correct number of input and output handles', async () => {
+			const { getAllByTestId } = renderComponent({
+				props: {
+					...createCanvasNodeProps({
+						data: {
+							inputs: [
+								{ type: NodeConnectionType.Main },
+								{ type: NodeConnectionType.Main },
+								{ type: NodeConnectionType.Main },
+							],
+							outputs: [{ type: NodeConnectionType.Main }, { type: NodeConnectionType.Main }],
+						},
+					}),
+				},
+				global: {
+					stubs: {
+						HandleRenderer: true,
+					},
+				},
+			});
+
+			const inputHandles = getAllByTestId('canvas-node-input-handle');
+			const outputHandles = getAllByTestId('canvas-node-output-handle');
+
+			expect(inputHandles.length).toBe(3);
+			expect(outputHandles.length).toBe(2);
+		});
+	});
+
+	describe('toolbar', () => {
+		it('should render toolbar when node is hovered', async () => {
+			const { getByTestId, container } = renderComponent({
+				props: {
+					...createCanvasNodeProps(),
+				},
+			});
+
+			const node = getByTestId('canvas-node');
+			await fireEvent.mouseOver(node);
+
+			expect(getByTestId('canvas-node-toolbar')).toBeInTheDocument();
+		});
+	});
+});
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
index 3127ac16d5043..b65c0f98dca60 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
@@ -15,8 +15,6 @@ import { useNodeConnections } from '@/composables/useNodeConnections';
 import { CanvasNodeKey } from '@/constants';
 import type { NodeProps } from '@vue-flow/core';
 
-const $style = useCssModule();
-
 const props = defineProps<NodeProps<CanvasElementData>>();
 
 const inputs = computed(() => props.data.inputs);
@@ -80,11 +78,13 @@ const mapEndpointWithPosition =
  * Provide
  */
 
+const id = toRef(props, 'id');
 const data = toRef(props, 'data');
 const label = toRef(props, 'label');
 const selected = toRef(props, 'selected');
 
 provide(CanvasNodeKey, {
+	id,
 	data,
 	label,
 	selected,
@@ -93,10 +93,11 @@ provide(CanvasNodeKey, {
 </script>
 
 <template>
-	<div :class="$style.canvasNode">
+	<div :class="$style.canvasNode" data-test-id="canvas-node">
 		<template v-for="source in outputsWithPosition" :key="`${source.type}/${source.index}`">
 			<HandleRenderer
 				mode="output"
+				data-test-id="canvas-node-output-handle"
 				:type="source.type"
 				:label="source.label"
 				:index="source.index"
@@ -108,6 +109,7 @@ provide(CanvasNodeKey, {
 		<template v-for="target in inputsWithPosition" :key="`${target.type}/${target.index}`">
 			<HandleRenderer
 				mode="input"
+				data-test-id="canvas-node-input-handle"
 				:type="target.type"
 				:label="target.label"
 				:index="target.index"
@@ -118,9 +120,8 @@ provide(CanvasNodeKey, {
 
 		<CanvasNodeToolbar
 			v-if="nodeType"
+			data-test-id="canvas-node-toolbar"
 			:class="$style.canvasNodeToolbar"
-			:node-type="nodeType"
-			:data="data"
 		/>
 
 		<CanvasNodeRenderer v-if="nodeType">
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeRenderer.spec.ts b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeRenderer.spec.ts
new file mode 100644
index 0000000000000..09a304f35ce1a
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeRenderer.spec.ts
@@ -0,0 +1,51 @@
+import CanvasNodeRenderer from '@/components/canvas/elements/nodes/CanvasNodeRenderer.vue';
+import { createComponentRenderer } from '@/__tests__/render';
+import { createCanvasNodeProvide } from '@/__tests__/data';
+
+const renderComponent = createComponentRenderer(CanvasNodeRenderer);
+
+describe('CanvasNodeRenderer', () => {
+	it('should render default node correctly', async () => {
+		const { getByTestId } = renderComponent({
+			global: {
+				provide: {
+					...createCanvasNodeProvide(),
+				},
+			},
+		});
+
+		expect(getByTestId('canvas-node-default')).toBeInTheDocument();
+	});
+
+	it('should render configuration node correctly', async () => {
+		const { getByTestId } = renderComponent({
+			global: {
+				provide: {
+					...createCanvasNodeProvide({
+						data: {
+							renderType: 'configuration',
+						},
+					}),
+				},
+			},
+		});
+
+		expect(getByTestId('canvas-node-configuration')).toBeInTheDocument();
+	});
+
+	it('should render configurable node correctly', async () => {
+		const { getByTestId } = renderComponent({
+			global: {
+				provide: {
+					...createCanvasNodeProvide({
+						data: {
+							renderType: 'configurable',
+						},
+					}),
+				},
+			},
+		});
+
+		expect(getByTestId('canvas-node-configurable')).toBeInTheDocument();
+	});
+});
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.spec.ts b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.spec.ts
new file mode 100644
index 0000000000000..2b6432df3448a
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.spec.ts
@@ -0,0 +1,108 @@
+import { fireEvent } from '@testing-library/vue';
+import CanvasNodeToolbar from '@/components/canvas/elements/nodes/CanvasNodeToolbar.vue';
+import { createComponentRenderer } from '@/__tests__/render';
+import { createCanvasNodeProvide } from '@/__tests__/data';
+
+const renderComponent = createComponentRenderer(CanvasNodeToolbar);
+
+describe('CanvasNodeToolbar', () => {
+	it('should render execute node button when renderType is not configuration', async () => {
+		const { getByTestId } = renderComponent({
+			global: {
+				provide: {
+					...createCanvasNodeProvide(),
+				},
+			},
+		});
+
+		expect(getByTestId('execute-node-button')).toBeInTheDocument();
+	});
+
+	it('should not render execute node button when renderType is configuration', async () => {
+		const { queryByTestId } = renderComponent({
+			global: {
+				provide: {
+					...createCanvasNodeProvide({
+						data: {
+							renderType: 'configuration',
+						},
+					}),
+				},
+			},
+		});
+
+		expect(queryByTestId('execute-node-button')).not.toBeInTheDocument();
+	});
+
+	it('should call executeNode function when execute node button is clicked', async () => {
+		const executeNode = vi.fn();
+		const { getByTestId } = renderComponent({
+			global: {
+				provide: {
+					...createCanvasNodeProvide(),
+				},
+				mocks: {
+					executeNode,
+				},
+			},
+		});
+
+		await fireEvent.click(getByTestId('execute-node-button'));
+
+		expect(executeNode).toHaveBeenCalled();
+	});
+
+	it('should call toggleDisableNode function when disable node button is clicked', async () => {
+		const toggleDisableNode = vi.fn();
+		const { getByTestId } = renderComponent({
+			global: {
+				provide: {
+					...createCanvasNodeProvide(),
+				},
+				mocks: {
+					toggleDisableNode,
+				},
+			},
+		});
+
+		await fireEvent.click(getByTestId('disable-node-button'));
+
+		expect(toggleDisableNode).toHaveBeenCalled();
+	});
+
+	it('should call deleteNode function when delete node button is clicked', async () => {
+		const deleteNode = vi.fn();
+		const { getByTestId } = renderComponent({
+			global: {
+				provide: {
+					...createCanvasNodeProvide(),
+				},
+				mocks: {
+					deleteNode,
+				},
+			},
+		});
+
+		await fireEvent.click(getByTestId('delete-node-button'));
+
+		expect(deleteNode).toHaveBeenCalled();
+	});
+
+	it('should call openContextMenu function when overflow node button is clicked', async () => {
+		const openContextMenu = vi.fn();
+		const { getByTestId } = renderComponent({
+			global: {
+				provide: {
+					...createCanvasNodeProvide(),
+				},
+				mocks: {
+					openContextMenu,
+				},
+			},
+		});
+
+		await fireEvent.click(getByTestId('overflow-node-button'));
+
+		expect(openContextMenu).toHaveBeenCalled();
+	});
+});
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.vue b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.vue
index 20c3f0f066eb1..a2f02b97f94a9 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { useCssModule } from 'vue';
+import { computed, inject, useCssModule } from 'vue';
 import type { INodeTypeDescription } from 'n8n-workflow';
 import type { CanvasElementData } from '@/types';
+import { CanvasNodeKey } from '@/constants';
 
-const props = defineProps<{
-	nodeType: INodeTypeDescription;
-	data: CanvasElementData;
-}>();
+const node = inject(CanvasNodeKey);
+
+const data = computed(() => node?.data.value);
 
 const $style = useCssModule();
 
@@ -33,7 +33,7 @@ function openContextMenu(e: MouseEvent, type: string) {}
 	<div :class="$style.canvasNodeToolbar">
 		<div :class="$style.canvasNodeToolbarItems">
 			<N8nIconButton
-				v-if="data.renderType !== 'configuration'"
+				v-if="data?.renderType !== 'configuration'"
 				data-test-id="execute-node-button"
 				type="tertiary"
 				text
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfigurable.spec.ts b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfigurable.spec.ts
new file mode 100644
index 0000000000000..c3c233b9e591d
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfigurable.spec.ts
@@ -0,0 +1,70 @@
+import CanvasNodeConfigurable from '@/components/canvas/elements/nodes/render-types/CanvasNodeConfigurable.vue';
+import { createComponentRenderer } from '@/__tests__/render';
+import { NodeConnectionType } from 'n8n-workflow';
+import { createCanvasNodeProvide } from '@/__tests__/data';
+
+const renderComponent = createComponentRenderer(CanvasNodeConfigurable);
+
+describe('CanvasNodeConfigurable', () => {
+	it('should render node correctly', () => {
+		const { getByText } = renderComponent({
+			global: {
+				provide: {
+					...createCanvasNodeProvide(),
+				},
+			},
+		});
+
+		expect(getByText('Test Node')).toBeInTheDocument();
+	});
+
+	describe('selected', () => {
+		it('should apply selected class when node is selected', () => {
+			const { getByText } = renderComponent({
+				global: {
+					provide: {
+						...createCanvasNodeProvide({
+							selected: true,
+						}),
+					},
+				},
+			});
+			expect(getByText('Test Node').closest('.node')).toHaveClass('selected');
+		});
+
+		it('should not apply selected class when node is not selected', () => {
+			const { getByText } = renderComponent({
+				global: {
+					provide: {
+						...createCanvasNodeProvide(),
+					},
+				},
+			});
+			expect(getByText('Test Node').closest('.node')).not.toHaveClass('selected');
+		});
+	});
+
+	describe('inputs', () => {
+		it('should adjust width css variable based on the number of non-main inputs', () => {
+			const { getByText } = renderComponent({
+				global: {
+					provide: {
+						...createCanvasNodeProvide({
+							data: {
+								inputs: [
+									{ type: NodeConnectionType.Main },
+									{ type: NodeConnectionType.AiTool },
+									{ type: NodeConnectionType.AiDocument, required: true },
+									{ type: NodeConnectionType.AiMemory, required: true },
+								],
+							},
+						}),
+					},
+				},
+			});
+
+			const nodeElement = getByText('Test Node').closest('.node');
+			expect(nodeElement).toHaveStyle({ '--configurable-node-input-count': '3' });
+		});
+	});
+});
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfigurable.vue b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfigurable.vue
index 2352abf1220b7..6a8a5d4facc05 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfigurable.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfigurable.vue
@@ -44,7 +44,7 @@ const styles = computed(() => {
 </script>
 
 <template>
-	<div :class="classes" :style="styles">
+	<div :class="classes" :style="styles" data-test-id="canvas-node-configurable">
 		<slot />
 		<div :class="$style.label">{{ label }}</div>
 	</div>
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfiguration.spec.ts b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfiguration.spec.ts
new file mode 100644
index 0000000000000..378c87b96be73
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfiguration.spec.ts
@@ -0,0 +1,43 @@
+import CanvasNodeConfiguration from '@/components/canvas/elements/nodes/render-types/CanvasNodeConfiguration.vue';
+import { createComponentRenderer } from '@/__tests__/render';
+import { createCanvasNodeProvide } from '@/__tests__/data';
+
+const renderComponent = createComponentRenderer(CanvasNodeConfiguration);
+
+describe('CanvasNodeConfiguration', () => {
+	it('should render node correctly', () => {
+		const { getByText } = renderComponent({
+			global: {
+				provide: {
+					...createCanvasNodeProvide(),
+				},
+			},
+		});
+
+		expect(getByText('Test Node')).toBeInTheDocument();
+	});
+
+	describe('selected', () => {
+		it('should apply selected class when node is selected', () => {
+			const { getByText } = renderComponent({
+				global: {
+					provide: {
+						...createCanvasNodeProvide({ selected: true }),
+					},
+				},
+			});
+			expect(getByText('Test Node').closest('.node')).toHaveClass('selected');
+		});
+
+		it('should not apply selected class when node is not selected', () => {
+			const { getByText } = renderComponent({
+				global: {
+					provide: {
+						...createCanvasNodeProvide(),
+					},
+				},
+			});
+			expect(getByText('Test Node').closest('.node')).not.toHaveClass('selected');
+		});
+	});
+});
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfiguration.vue b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfiguration.vue
index 6c108c0cbefd7..f98d4ff747d0b 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfiguration.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfiguration.vue
@@ -17,7 +17,7 @@ const classes = computed(() => {
 </script>
 
 <template>
-	<div :class="classes">
+	<div :class="classes" data-test-id="canvas-node-configuration">
 		<slot />
 		<div v-if="label" :class="$style.label">{{ label }}</div>
 	</div>
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.spec.ts b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.spec.ts
new file mode 100644
index 0000000000000..37e2415b5ba7e
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.spec.ts
@@ -0,0 +1,84 @@
+import CanvasNodeDefault from '@/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue';
+import { createComponentRenderer } from '@/__tests__/render';
+import { NodeConnectionType } from 'n8n-workflow';
+import { createCanvasNodeProvide } from '@/__tests__/data';
+
+const renderComponent = createComponentRenderer(CanvasNodeDefault);
+
+describe('CanvasNodeDefault', () => {
+	it('should render node correctly', () => {
+		const { getByText } = renderComponent({
+			global: {
+				provide: {
+					...createCanvasNodeProvide(),
+				},
+			},
+		});
+
+		expect(getByText('Test Node')).toBeInTheDocument();
+	});
+
+	describe('outputs', () => {
+		it('should adjust height css variable based on the number of outputs (1 output)', () => {
+			const { getByText } = renderComponent({
+				global: {
+					provide: {
+						...createCanvasNodeProvide({
+							data: {
+								outputs: [{ type: NodeConnectionType.Main }],
+							},
+						}),
+					},
+				},
+			});
+
+			const nodeElement = getByText('Test Node').closest('.node');
+			expect(nodeElement).toHaveStyle({ '--node-main-output-count': '1' }); // height calculation based on the number of outputs
+		});
+
+		it('should adjust height css variable based on the number of outputs (multiple outputs)', () => {
+			const { getByText } = renderComponent({
+				global: {
+					provide: {
+						...createCanvasNodeProvide({
+							data: {
+								outputs: [
+									{ type: NodeConnectionType.Main },
+									{ type: NodeConnectionType.Main },
+									{ type: NodeConnectionType.Main },
+								],
+							},
+						}),
+					},
+				},
+			});
+
+			const nodeElement = getByText('Test Node').closest('.node');
+			expect(nodeElement).toHaveStyle({ '--node-main-output-count': '3' }); // height calculation based on the number of outputs
+		});
+	});
+
+	describe('selected', () => {
+		it('should apply selected class when node is selected', () => {
+			const { getByText } = renderComponent({
+				global: {
+					provide: {
+						...createCanvasNodeProvide({ selected: true }),
+					},
+				},
+			});
+			expect(getByText('Test Node').closest('.node')).toHaveClass('selected');
+		});
+
+		it('should not apply selected class when node is not selected', () => {
+			const { getByText } = renderComponent({
+				global: {
+					provide: {
+						...createCanvasNodeProvide(),
+					},
+				},
+			});
+			expect(getByText('Test Node').closest('.node')).not.toHaveClass('selected');
+		});
+	});
+});
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
index 21d5cb0cdfb85..0fee29e777f64 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
@@ -31,7 +31,7 @@ const styles = computed(() => {
 </script>
 
 <template>
-	<div v-if="node" :class="classes" :style="styles">
+	<div v-if="node" :class="classes" :style="styles" data-test-id="canvas-node-default">
 		<slot />
 		<div v-if="label" :class="$style.label">{{ label }}</div>
 	</div>
diff --git a/packages/editor-ui/src/composables/useCanvasMapping.spec.ts b/packages/editor-ui/src/composables/useCanvasMapping.spec.ts
new file mode 100644
index 0000000000000..18ab57a19ed77
--- /dev/null
+++ b/packages/editor-ui/src/composables/useCanvasMapping.spec.ts
@@ -0,0 +1,213 @@
+import type { Ref } from 'vue';
+import { ref } from 'vue';
+import { useCanvasMapping } from '@/composables/useCanvasMapping';
+import { createTestNode, createTestWorkflow, createTestWorkflowObject } from '@/__tests__/mocks';
+import type { IConnections, Workflow } from 'n8n-workflow';
+import { createPinia, setActivePinia } from 'pinia';
+import { MANUAL_TRIGGER_NODE_TYPE, SET_NODE_TYPE } from '@/constants';
+import { NodeConnectionType } from 'n8n-workflow';
+
+vi.mock('@/stores/nodeTypes.store', () => ({
+	useNodeTypesStore: vi.fn(() => ({
+		getNodeType: vi.fn(() => ({
+			name: 'test',
+			description: 'Test Node Description',
+		})),
+		isTriggerNode: vi.fn(),
+		isConfigNode: vi.fn(),
+		isConfigurableNode: vi.fn(),
+	})),
+}));
+
+beforeEach(() => {
+	const pinia = createPinia();
+	setActivePinia(pinia);
+});
+
+afterEach(() => {
+	vi.clearAllMocks();
+});
+
+describe('useCanvasMapping', () => {
+	it('should initialize with default props', () => {
+		const workflow = createTestWorkflow({
+			id: '1',
+			name: 'Test Workflow',
+			nodes: [],
+			connections: {},
+		});
+		const workflowObject = createTestWorkflowObject(workflow);
+
+		const { elements, connections } = useCanvasMapping({
+			workflow: ref(workflow),
+			workflowObject: ref(workflowObject) as Ref<Workflow>,
+		});
+
+		expect(elements.value).toEqual([]);
+		expect(connections.value).toEqual([]);
+	});
+
+	describe('elements', () => {
+		it('should map nodes to canvas elements', () => {
+			const node = createTestNode({
+				name: 'Node',
+				type: MANUAL_TRIGGER_NODE_TYPE,
+			});
+			const workflow = createTestWorkflow({
+				name: 'Test Workflow',
+				nodes: [node],
+				connections: {},
+			});
+			const workflowObject = createTestWorkflowObject(workflow);
+
+			const { elements } = useCanvasMapping({
+				workflow: ref(workflow),
+				workflowObject: ref(workflowObject) as Ref<Workflow>,
+			});
+
+			expect(elements.value).toEqual([
+				{
+					id: node.id,
+					label: node.name,
+					type: 'canvas-node',
+					position: { x: 0, y: 0 },
+					data: {
+						id: node.id,
+						type: node.type,
+						typeVersion: 1,
+						inputs: [],
+						outputs: [],
+						renderType: 'default',
+					},
+				},
+			]);
+		});
+	});
+
+	describe('connections', () => {
+		it('should map connections to canvas connections', () => {
+			const nodeA = createTestNode({
+				name: 'Node A',
+				type: MANUAL_TRIGGER_NODE_TYPE,
+			});
+			const nodeB = createTestNode({
+				name: 'Node B',
+				type: SET_NODE_TYPE,
+			});
+			const workflow = createTestWorkflow({
+				name: 'Test Workflow',
+				nodes: [nodeA, nodeB],
+				connections: {
+					[nodeA.name]: {
+						[NodeConnectionType.Main]: [
+							[{ node: nodeB.name, type: NodeConnectionType.Main, index: 0 }],
+						],
+					},
+				} as IConnections,
+			});
+			const workflowObject = createTestWorkflowObject(workflow);
+
+			const { connections } = useCanvasMapping({
+				workflow: ref(workflow),
+				workflowObject: ref(workflowObject) as Ref<Workflow>,
+			});
+
+			expect(connections.value).toEqual([
+				{
+					data: {
+						fromNodeName: nodeA.name,
+						source: {
+							index: 0,
+							type: NodeConnectionType.Main,
+						},
+						target: {
+							index: 0,
+							type: NodeConnectionType.Main,
+						},
+					},
+					id: `[${nodeA.id}/${NodeConnectionType.Main}/0][${nodeB.id}/${NodeConnectionType.Main}/0]`,
+					label: '',
+					source: nodeA.id,
+					sourceHandle: `outputs/${NodeConnectionType.Main}/0`,
+					target: nodeB.id,
+					targetHandle: `inputs/${NodeConnectionType.Main}/0`,
+					type: 'canvas-edge',
+				},
+			]);
+		});
+
+		it('should map multiple input types to canvas connections', () => {
+			const nodeA = createTestNode({
+				name: 'Node A',
+				type: MANUAL_TRIGGER_NODE_TYPE,
+			});
+			const nodeB = createTestNode({
+				name: 'Node B',
+				type: SET_NODE_TYPE,
+			});
+			const workflow = createTestWorkflow({
+				name: 'Test Workflow',
+				nodes: [nodeA, nodeB],
+				connections: {
+					'Node A': {
+						[NodeConnectionType.AiTool]: [
+							[{ node: nodeB.name, type: NodeConnectionType.AiTool, index: 0 }],
+						],
+						[NodeConnectionType.AiDocument]: [
+							[{ node: nodeB.name, type: NodeConnectionType.AiDocument, index: 1 }],
+						],
+					},
+				},
+			});
+			const workflowObject = createTestWorkflowObject(workflow);
+
+			const { connections } = useCanvasMapping({
+				workflow: ref(workflow),
+				workflowObject: ref(workflowObject) as Ref<Workflow>,
+			});
+
+			expect(connections.value).toEqual([
+				{
+					data: {
+						fromNodeName: nodeA.name,
+						source: {
+							index: 0,
+							type: NodeConnectionType.AiTool,
+						},
+						target: {
+							index: 0,
+							type: NodeConnectionType.AiTool,
+						},
+					},
+					id: `[${nodeA.id}/${NodeConnectionType.AiTool}/0][${nodeB.id}/${NodeConnectionType.AiTool}/0]`,
+					label: '',
+					source: nodeA.id,
+					sourceHandle: `outputs/${NodeConnectionType.AiTool}/0`,
+					target: nodeB.id,
+					targetHandle: `inputs/${NodeConnectionType.AiTool}/0`,
+					type: 'canvas-edge',
+				},
+				{
+					data: {
+						fromNodeName: nodeA.name,
+						source: {
+							index: 0,
+							type: NodeConnectionType.AiDocument,
+						},
+						target: {
+							index: 1,
+							type: NodeConnectionType.AiDocument,
+						},
+					},
+					id: `[${nodeA.id}/${NodeConnectionType.AiDocument}/0][${nodeB.id}/${NodeConnectionType.AiDocument}/1]`,
+					label: '',
+					source: nodeA.id,
+					sourceHandle: `outputs/${NodeConnectionType.AiDocument}/0`,
+					target: nodeB.id,
+					targetHandle: `inputs/${NodeConnectionType.AiDocument}/1`,
+					type: 'canvas-edge',
+				},
+			]);
+		});
+	});
+});
diff --git a/packages/editor-ui/src/composables/useCanvasMapping.ts b/packages/editor-ui/src/composables/useCanvasMapping.ts
new file mode 100644
index 0000000000000..41e6e15a61d3f
--- /dev/null
+++ b/packages/editor-ui/src/composables/useCanvasMapping.ts
@@ -0,0 +1,150 @@
+import { useI18n } from '@/composables/useI18n';
+import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+import type { Ref } from 'vue';
+import { computed } from 'vue';
+import type {
+	CanvasConnection,
+	CanvasConnectionPort,
+	CanvasElement,
+	CanvasElementData,
+} from '@/types';
+import {
+	mapLegacyConnectionsToCanvasConnections,
+	mapLegacyEndpointsToCanvasConnectionPort,
+} from '@/utils/canvasUtilsV2';
+import type { Workflow } from 'n8n-workflow';
+import { NodeHelpers } from 'n8n-workflow';
+import type { IWorkflowDb } from '@/Interface';
+
+export function useCanvasMapping({
+	workflow,
+	workflowObject,
+}: {
+	workflow: Ref<IWorkflowDb>;
+	workflowObject: Ref<Workflow>;
+}) {
+	const locale = useI18n();
+	const nodeTypesStore = useNodeTypesStore();
+
+	const renderTypeByNodeType = computed(
+		() =>
+			workflow.value.nodes.reduce<Record<string, CanvasElementData['renderType']>>((acc, node) => {
+				let renderType: CanvasElementData['renderType'] = 'default';
+				switch (true) {
+					case nodeTypesStore.isTriggerNode(node.type):
+						renderType = 'trigger';
+						break;
+					case nodeTypesStore.isConfigNode(workflowObject.value, node, node.type):
+						renderType = 'configuration';
+						break;
+					case nodeTypesStore.isConfigurableNode(workflowObject.value, node, node.type):
+						renderType = 'configurable';
+						break;
+				}
+
+				acc[node.type] = renderType;
+				return acc;
+			}, {}) ?? {},
+	);
+
+	const nodeInputsById = computed(() =>
+		workflow.value.nodes.reduce<Record<string, CanvasConnectionPort[]>>((acc, node) => {
+			const nodeTypeDescription = nodeTypesStore.getNodeType(node.type);
+			const workflowObjectNode = workflowObject.value.getNode(node.name);
+
+			acc[node.id] =
+				workflowObjectNode && nodeTypeDescription
+					? mapLegacyEndpointsToCanvasConnectionPort(
+							NodeHelpers.getNodeInputs(
+								workflowObject.value,
+								workflowObjectNode,
+								nodeTypeDescription,
+							),
+						)
+					: [];
+
+			return acc;
+		}, {}),
+	);
+
+	const nodeOutputsById = computed(() =>
+		workflow.value.nodes.reduce<Record<string, CanvasConnectionPort[]>>((acc, node) => {
+			const nodeTypeDescription = nodeTypesStore.getNodeType(node.type);
+			const workflowObjectNode = workflowObject.value.getNode(node.name);
+
+			acc[node.id] =
+				workflowObjectNode && nodeTypeDescription
+					? mapLegacyEndpointsToCanvasConnectionPort(
+							NodeHelpers.getNodeOutputs(
+								workflowObject.value,
+								workflowObjectNode,
+								nodeTypeDescription,
+							),
+						)
+					: [];
+
+			return acc;
+		}, {}),
+	);
+
+	const elements = computed<CanvasElement[]>(() => [
+		...workflow.value.nodes.map<CanvasElement>((node) => {
+			const data: CanvasElementData = {
+				id: node.id,
+				type: node.type,
+				typeVersion: node.typeVersion,
+				inputs: nodeInputsById.value[node.id] ?? [],
+				outputs: nodeOutputsById.value[node.id] ?? [],
+				renderType: renderTypeByNodeType.value[node.type] ?? 'default',
+			};
+
+			return {
+				id: node.id,
+				label: node.name,
+				type: 'canvas-node',
+				position: { x: node.position[0], y: node.position[1] },
+				data,
+			};
+		}),
+	]);
+
+	const connections = computed<CanvasConnection[]>(() => {
+		const mappedConnections = mapLegacyConnectionsToCanvasConnections(
+			workflow.value.connections ?? [],
+			workflow.value.nodes ?? [],
+		);
+
+		return mappedConnections.map((connection) => {
+			const type = getConnectionType(connection);
+			const label = getConnectionLabel(connection);
+
+			return {
+				...connection,
+				type,
+				label,
+			};
+		});
+	});
+
+	function getConnectionType(_: CanvasConnection): string {
+		return 'canvas-edge';
+	}
+
+	function getConnectionLabel(connection: CanvasConnection): string {
+		const pinData = workflow.value.pinData?.[connection.data?.fromNodeName ?? ''];
+
+		if (pinData?.length) {
+			return locale.baseText('ndv.output.items', {
+				adjustToNumber: pinData.length,
+				interpolate: { count: String(pinData.length) },
+			});
+		}
+
+		return '';
+	}
+
+	return {
+		connections,
+		elements,
+	};
+}
diff --git a/packages/editor-ui/src/composables/useNodeConnections.spec.ts b/packages/editor-ui/src/composables/useNodeConnections.spec.ts
new file mode 100644
index 0000000000000..5201df4b739c6
--- /dev/null
+++ b/packages/editor-ui/src/composables/useNodeConnections.spec.ts
@@ -0,0 +1,88 @@
+import { ref } from 'vue';
+import { NodeConnectionType } from 'n8n-workflow';
+import { useNodeConnections } from '@/composables/useNodeConnections';
+import type { CanvasElementData } from '@/types';
+
+describe('useNodeConnections', () => {
+	describe('mainInputs', () => {
+		it('should return main inputs when provided with main inputs', () => {
+			const inputs = ref<CanvasElementData['inputs']>([
+				{ type: NodeConnectionType.Main, index: 0 },
+				{ type: NodeConnectionType.Main, index: 1 },
+				{ type: NodeConnectionType.Main, index: 2 },
+				{ type: NodeConnectionType.AiAgent, index: 0 },
+			]);
+			const outputs = ref<CanvasElementData['outputs']>([]);
+
+			const { mainInputs } = useNodeConnections({ inputs, outputs });
+
+			expect(mainInputs.value.length).toBe(3);
+			expect(mainInputs.value).toEqual(inputs.value.slice(0, 3));
+		});
+	});
+
+	describe('nonMainInputs', () => {
+		it('should return non-main inputs when provided with non-main inputs', () => {
+			const inputs = ref<CanvasElementData['inputs']>([
+				{ type: NodeConnectionType.Main, index: 0 },
+				{ type: NodeConnectionType.AiAgent, index: 0 },
+				{ type: NodeConnectionType.AiAgent, index: 1 },
+			]);
+			const outputs = ref<CanvasElementData['outputs']>([]);
+
+			const { nonMainInputs } = useNodeConnections({ inputs, outputs });
+
+			expect(nonMainInputs.value.length).toBe(2);
+			expect(nonMainInputs.value).toEqual(inputs.value.slice(1));
+		});
+	});
+
+	describe('requiredNonMainInputs', () => {
+		it('should return required non-main inputs when provided with required non-main inputs', () => {
+			const inputs = ref<CanvasElementData['inputs']>([
+				{ type: NodeConnectionType.Main, index: 0 },
+				{ type: NodeConnectionType.AiAgent, required: true, index: 0 },
+				{ type: NodeConnectionType.AiAgent, required: false, index: 1 },
+			]);
+			const outputs = ref<CanvasElementData['outputs']>([]);
+
+			const { requiredNonMainInputs } = useNodeConnections({ inputs, outputs });
+
+			expect(requiredNonMainInputs.value.length).toBe(1);
+			expect(requiredNonMainInputs.value).toEqual([inputs.value[1]]);
+		});
+	});
+
+	describe('mainOutputs', () => {
+		it('should return main outputs when provided with main outputs', () => {
+			const inputs = ref<CanvasElementData['inputs']>([]);
+			const outputs = ref<CanvasElementData['outputs']>([
+				{ type: NodeConnectionType.Main, index: 0 },
+				{ type: NodeConnectionType.Main, index: 1 },
+				{ type: NodeConnectionType.Main, index: 2 },
+				{ type: NodeConnectionType.AiAgent, index: 0 },
+			]);
+
+			const { mainOutputs } = useNodeConnections({ inputs, outputs });
+
+			expect(mainOutputs.value.length).toBe(3);
+			expect(mainOutputs.value).toEqual(outputs.value.slice(0, 3));
+		});
+	});
+
+	describe('nonMainOutputs', () => {
+		it('should return non-main outputs when provided with non-main outputs', () => {
+			const inputs = ref<CanvasElementData['inputs']>([]);
+			const outputs = ref<CanvasElementData['outputs']>([
+				{ type: NodeConnectionType.Main, index: 0 },
+				{ type: NodeConnectionType.AiAgent, index: 0 },
+				{ type: NodeConnectionType.AiAgent, index: 1 },
+			]);
+
+			const { nonMainOutputs } = useNodeConnections({ inputs, outputs });
+
+			expect(nonMainOutputs.value.length).toBe(2);
+			expect(nonMainOutputs.value).toEqual(outputs.value.slice(1));
+		});
+	});
+});
diff --git a/packages/editor-ui/src/plugins/codemirror/completions/__tests__/mock.ts b/packages/editor-ui/src/plugins/codemirror/completions/__tests__/mock.ts
index 9e9b371b9a239..5218ea2c3a8db 100644
--- a/packages/editor-ui/src/plugins/codemirror/completions/__tests__/mock.ts
+++ b/packages/editor-ui/src/plugins/codemirror/completions/__tests__/mock.ts
@@ -10,12 +10,12 @@ import { WorkflowDataProxy } from 'n8n-workflow';
 import { createTestWorkflowObject } from '@/__tests__/mocks';
 
 const nodeTypes: INodeTypeData = {
-	'test.set': {
+	'n8n-nodes-base.set': {
 		sourcePath: '',
 		type: {
 			description: {
 				displayName: 'Set',
-				name: 'set',
+				name: 'n8n-nodes-base.set',
 				group: ['input'],
 				version: 1,
 				description: 'Sets a value',
@@ -47,7 +47,7 @@ const nodeTypes: INodeTypeData = {
 const nodes: INode[] = [
 	{
 		name: 'Start',
-		type: 'test.set',
+		type: 'n8n-nodes-base.set',
 		parameters: {},
 		typeVersion: 1,
 		id: 'uuid-1',
@@ -55,7 +55,7 @@ const nodes: INode[] = [
 	},
 	{
 		name: 'Function',
-		type: 'test.set',
+		type: 'n8n-nodes-base.set',
 		parameters: {
 			functionCode:
 				'// Code here will run only once, no matter how many input items there are.\n// More info and help: https://docs.n8n.io/integrations/builtin/core-nodes/n8n-nodes-base.function/\nconst { DateTime, Duration, Interval } = require("luxon");\n\nconst data = [\n  {\n  "length": 105\n  },\n  {\n  "length": 160\n  },\n  {\n  "length": 121\n  },\n  {\n  "length": 275\n  },\n  {\n  "length": 950\n  },\n];\n\nreturn data.map(fact => ({json: fact}));',
@@ -66,7 +66,7 @@ const nodes: INode[] = [
 	},
 	{
 		name: 'Rename',
-		type: 'test.set',
+		type: 'n8n-nodes-base.set',
 		parameters: {
 			value1: 'data',
 			value2: 'initialName',
@@ -77,7 +77,7 @@ const nodes: INode[] = [
 	},
 	{
 		name: 'End',
-		type: 'test.set',
+		type: 'n8n-nodes-base.set',
 		parameters: {},
 		typeVersion: 1,
 		id: 'uuid-4',
diff --git a/packages/editor-ui/src/types/canvas.ts b/packages/editor-ui/src/types/canvas.ts
index 433a98b951c6d..1e11dbc54de82 100644
--- a/packages/editor-ui/src/types/canvas.ts
+++ b/packages/editor-ui/src/types/canvas.ts
@@ -22,6 +22,7 @@ export interface CanvasElementPortWithPosition extends CanvasConnectionPort {
 }
 
 export interface CanvasElementData {
+	id: INodeUi['id'];
 	type: INodeUi['type'];
 	typeVersion: INodeUi['typeVersion'];
 	inputs: CanvasConnectionPort[];
@@ -48,6 +49,7 @@ export interface CanvasPlugin {
 }
 
 export interface CanvasNodeInjectionData {
+	id: Ref<string>;
 	data: Ref<CanvasElementData>;
 	label: Ref<NodeProps['label']>;
 	selected: Ref<NodeProps['selected']>;
diff --git a/packages/editor-ui/src/utils/canvasUtilsV2.spec.ts b/packages/editor-ui/src/utils/canvasUtilsV2.spec.ts
new file mode 100644
index 0000000000000..09a9c89f1535a
--- /dev/null
+++ b/packages/editor-ui/src/utils/canvasUtilsV2.spec.ts
@@ -0,0 +1,531 @@
+import {
+	mapLegacyConnectionsToCanvasConnections,
+	mapLegacyEndpointsToCanvasConnectionPort,
+	getUniqueNodeName,
+} from '@/utils/canvasUtilsV2';
+import type { IConnections, INodeTypeDescription } from 'n8n-workflow';
+import type { CanvasConnection } from '@/types';
+import type { INodeUi } from '@/Interface';
+import { v4 as uuid } from 'uuid';
+
+vi.mock('uuid', () => ({
+	v4: vi.fn(() => 'mock-uuid'),
+}));
+
+describe('mapLegacyConnectionsToCanvasConnections', () => {
+	it('should map legacy connections to canvas connections', () => {
+		const legacyConnections: IConnections = {
+			'Node A': {
+				main: [[{ node: 'Node B', type: 'main', index: 0 }]],
+			},
+		};
+		const nodes: INodeUi[] = [
+			{
+				id: '1',
+				name: 'Node A',
+				type: 'n8n-nodes-base.node',
+				typeVersion: 1,
+				position: [100, 100],
+				parameters: {},
+			},
+			{
+				id: '2',
+				name: 'Node B',
+				type: 'n8n-nodes-base.node',
+				typeVersion: 1,
+				position: [200, 200],
+				parameters: {},
+			},
+		];
+
+		const result: CanvasConnection[] = mapLegacyConnectionsToCanvasConnections(
+			legacyConnections,
+			nodes,
+		);
+
+		expect(result).toEqual([
+			{
+				id: '[1/main/0][2/main/0]',
+				source: '1',
+				target: '2',
+				sourceHandle: 'outputs/main/0',
+				targetHandle: 'inputs/main/0',
+				data: {
+					fromNodeName: 'Node A',
+					source: {
+						index: 0,
+						type: 'main',
+					},
+					target: {
+						index: 0,
+						type: 'main',
+					},
+				},
+			},
+		]);
+	});
+
+	it('should return empty array when no matching nodes found', () => {
+		const legacyConnections: IConnections = {
+			'Node A': {
+				main: [[{ node: 'Node B', type: 'main', index: 0 }]],
+			},
+		};
+		const nodes: INodeUi[] = [];
+
+		const result: CanvasConnection[] = mapLegacyConnectionsToCanvasConnections(
+			legacyConnections,
+			nodes,
+		);
+
+		expect(result).toEqual([]);
+	});
+
+	it('should return empty array when no legacy connections provided', () => {
+		const legacyConnections: IConnections = {};
+		const nodes: INodeUi[] = [
+			{
+				id: '1',
+				name: 'Node A',
+				type: 'n8n-nodes-base.node',
+				typeVersion: 1,
+				position: [100, 100],
+				parameters: {},
+			},
+			{
+				id: '2',
+				name: 'Node B',
+				type: 'n8n-nodes-base.node',
+				typeVersion: 1,
+				position: [200, 200],
+				parameters: {},
+			},
+		];
+
+		const result: CanvasConnection[] = mapLegacyConnectionsToCanvasConnections(
+			legacyConnections,
+			nodes,
+		);
+
+		expect(result).toEqual([]);
+	});
+
+	it('should map multiple connections between the same nodes', () => {
+		const legacyConnections: IConnections = {
+			'Node A': {
+				main: [
+					[{ node: 'Node B', type: 'main', index: 0 }],
+					[{ node: 'Node B', type: 'main', index: 1 }],
+				],
+			},
+		};
+		const nodes: INodeUi[] = [
+			{
+				id: '1',
+				name: 'Node A',
+				type: 'n8n-nodes-base.node',
+				typeVersion: 1,
+				position: [100, 100],
+				parameters: {},
+			},
+			{
+				id: '2',
+				name: 'Node B',
+				type: 'n8n-nodes-base.node',
+				typeVersion: 1,
+				position: [200, 200],
+				parameters: {},
+			},
+		];
+
+		const result: CanvasConnection[] = mapLegacyConnectionsToCanvasConnections(
+			legacyConnections,
+			nodes,
+		);
+
+		expect(result).toEqual([
+			{
+				id: '[1/main/0][2/main/0]',
+				source: '1',
+				target: '2',
+				sourceHandle: 'outputs/main/0',
+				targetHandle: 'inputs/main/0',
+				data: {
+					fromNodeName: 'Node A',
+					source: {
+						index: 0,
+						type: 'main',
+					},
+					target: {
+						index: 0,
+						type: 'main',
+					},
+				},
+			},
+			{
+				id: '[1/main/1][2/main/1]',
+				source: '1',
+				target: '2',
+				sourceHandle: 'outputs/main/1',
+				targetHandle: 'inputs/main/1',
+				data: {
+					fromNodeName: 'Node A',
+					source: {
+						index: 1,
+						type: 'main',
+					},
+					target: {
+						index: 1,
+						type: 'main',
+					},
+				},
+			},
+		]);
+	});
+
+	it('should map multiple connections from one node to different nodes', () => {
+		const legacyConnections: IConnections = {
+			'Node A': {
+				main: [
+					[{ node: 'Node B', type: 'main', index: 0 }],
+					[{ node: 'Node C', type: 'main', index: 0 }],
+				],
+			},
+		};
+		const nodes: INodeUi[] = [
+			{
+				id: '1',
+				name: 'Node A',
+				type: 'n8n-nodes-base.node',
+				typeVersion: 1,
+				position: [100, 100],
+				parameters: {},
+			},
+			{
+				id: '2',
+				name: 'Node B',
+				type: 'n8n-nodes-base.node',
+				typeVersion: 1,
+				position: [200, 200],
+				parameters: {},
+			},
+			{
+				id: '3',
+				name: 'Node C',
+				type: 'n8n-nodes-base.node',
+				typeVersion: 1,
+				position: [300, 300],
+				parameters: {},
+			},
+		];
+
+		const result: CanvasConnection[] = mapLegacyConnectionsToCanvasConnections(
+			legacyConnections,
+			nodes,
+		);
+
+		expect(result).toEqual([
+			{
+				id: '[1/main/0][2/main/0]',
+				source: '1',
+				target: '2',
+				sourceHandle: 'outputs/main/0',
+				targetHandle: 'inputs/main/0',
+				data: {
+					fromNodeName: 'Node A',
+					source: {
+						index: 0,
+						type: 'main',
+					},
+					target: {
+						index: 0,
+						type: 'main',
+					},
+				},
+			},
+			{
+				id: '[1/main/1][3/main/0]',
+				source: '1',
+				target: '3',
+				sourceHandle: 'outputs/main/1',
+				targetHandle: 'inputs/main/0',
+				data: {
+					fromNodeName: 'Node A',
+					source: {
+						index: 1,
+						type: 'main',
+					},
+					target: {
+						index: 0,
+						type: 'main',
+					},
+				},
+			},
+		]);
+	});
+
+	it('should map complex node setup with mixed inputs and outputs', () => {
+		const legacyConnections: IConnections = {
+			'Node A': {
+				main: [[{ node: 'Node B', type: 'main', index: 0 }]],
+				other: [[{ node: 'Node C', type: 'other', index: 1 }]],
+			},
+			'Node B': {
+				main: [[{ node: 'Node C', type: 'main', index: 0 }]],
+			},
+		};
+		const nodes: INodeUi[] = [
+			{
+				id: '1',
+				name: 'Node A',
+				typeVersion: 1,
+				type: 'n8n-nodes-base.node',
+				position: [100, 100],
+				parameters: {},
+			},
+			{
+				id: '2',
+				name: 'Node B',
+				typeVersion: 1,
+				type: 'n8n-nodes-base.node',
+				position: [200, 200],
+				parameters: {},
+			},
+			{
+				id: '3',
+				name: 'Node C',
+				typeVersion: 1,
+				type: 'n8n-nodes-base.node',
+				position: [300, 300],
+				parameters: {},
+			},
+		];
+
+		const result: CanvasConnection[] = mapLegacyConnectionsToCanvasConnections(
+			legacyConnections,
+			nodes,
+		);
+
+		expect(result).toEqual([
+			{
+				id: '[1/main/0][2/main/0]',
+				source: '1',
+				target: '2',
+				sourceHandle: 'outputs/main/0',
+				targetHandle: 'inputs/main/0',
+				data: {
+					fromNodeName: 'Node A',
+					source: {
+						index: 0,
+						type: 'main',
+					},
+					target: {
+						index: 0,
+						type: 'main',
+					},
+				},
+			},
+			{
+				id: '[1/other/0][3/other/1]',
+				source: '1',
+				target: '3',
+				sourceHandle: 'outputs/other/0',
+				targetHandle: 'inputs/other/1',
+				data: {
+					fromNodeName: 'Node A',
+					source: {
+						index: 0,
+						type: 'other',
+					},
+					target: {
+						index: 1,
+						type: 'other',
+					},
+				},
+			},
+			{
+				id: '[2/main/0][3/main/0]',
+				source: '2',
+				target: '3',
+				sourceHandle: 'outputs/main/0',
+				targetHandle: 'inputs/main/0',
+				data: {
+					fromNodeName: 'Node B',
+					source: {
+						index: 0,
+						type: 'main',
+					},
+					target: {
+						index: 0,
+						type: 'main',
+					},
+				},
+			},
+		]);
+	});
+
+	it('should handle edge cases with invalid data gracefully', () => {
+		const legacyConnections: IConnections = {
+			'Node A': {
+				main: [
+					[{ node: 'Nonexistent Node', type: 'main', index: 0 }],
+					[{ node: 'Node B', type: 'main', index: 0 }],
+				],
+			},
+		};
+		const nodes: INodeUi[] = [
+			{
+				id: '1',
+				name: 'Node A',
+				type: 'n8n-nodes-base.node',
+				typeVersion: 1,
+				position: [100, 100],
+				parameters: {},
+			},
+			{
+				id: '2',
+				name: 'Node B',
+				type: 'n8n-nodes-base.node',
+				typeVersion: 1,
+				position: [200, 200],
+				parameters: {},
+			},
+		];
+
+		const result: CanvasConnection[] = mapLegacyConnectionsToCanvasConnections(
+			legacyConnections,
+			nodes,
+		);
+
+		expect(result).toEqual([
+			{
+				id: '[1/main/1][2/main/0]',
+				source: '1',
+				target: '2',
+				sourceHandle: 'outputs/main/1',
+				targetHandle: 'inputs/main/0',
+				data: {
+					fromNodeName: 'Node A',
+					source: {
+						index: 1,
+						type: 'main',
+					},
+					target: {
+						index: 0,
+						type: 'main',
+					},
+				},
+			},
+		]);
+	});
+});
+
+describe('mapLegacyEndpointsToCanvasConnectionPort', () => {
+	it('should return an empty array and log a warning when inputs is a string', () => {
+		const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+		const endpoints: INodeTypeDescription['inputs'] = 'some code';
+		const result = mapLegacyEndpointsToCanvasConnectionPort(endpoints);
+
+		expect(result).toEqual([]);
+		expect(consoleWarnSpy).toHaveBeenCalledWith(
+			'Node endpoints have not been evaluated',
+			'some code',
+		);
+
+		consoleWarnSpy.mockRestore();
+	});
+
+	it('should map string endpoints correctly', () => {
+		const endpoints: INodeTypeDescription['inputs'] = ['main', 'ai_tool'];
+		const result = mapLegacyEndpointsToCanvasConnectionPort(endpoints);
+
+		expect(result).toEqual([
+			{ type: 'main', index: 0, label: undefined },
+			{ type: 'ai_tool', index: 0, label: undefined },
+		]);
+	});
+
+	it('should map object endpoints correctly', () => {
+		const endpoints: INodeTypeDescription['inputs'] = [
+			{ type: 'main', displayName: 'Main Input' },
+			{ type: 'ai_tool', displayName: 'AI Tool', required: true },
+		];
+		const result = mapLegacyEndpointsToCanvasConnectionPort(endpoints);
+
+		expect(result).toEqual([
+			{ type: 'main', index: 0, label: 'Main Input' },
+			{ type: 'ai_tool', index: 0, label: 'AI Tool', required: true },
+		]);
+	});
+
+	it('should map mixed string and object endpoints correctly', () => {
+		const endpoints: INodeTypeDescription['inputs'] = [
+			'main',
+			{ type: 'ai_tool', displayName: 'AI Tool' },
+			'main',
+		];
+		const result = mapLegacyEndpointsToCanvasConnectionPort(endpoints);
+
+		expect(result).toEqual([
+			{ type: 'main', index: 0, label: undefined },
+			{ type: 'ai_tool', index: 0, label: 'AI Tool' },
+			{ type: 'main', index: 1, label: undefined },
+		]);
+	});
+
+	it('should handle multiple same type object endpoints', () => {
+		const endpoints: INodeTypeDescription['inputs'] = [
+			{ type: 'main', displayName: 'Main Input' },
+			{ type: 'main', displayName: 'Secondary Main Input' },
+		];
+		const result = mapLegacyEndpointsToCanvasConnectionPort(endpoints);
+
+		expect(result).toEqual([
+			{ type: 'main', index: 0, label: 'Main Input' },
+			{ type: 'main', index: 1, label: 'Secondary Main Input' },
+		]);
+	});
+
+	it('should map required and non-required endpoints correctly', () => {
+		const endpoints: INodeTypeDescription['inputs'] = [
+			{ type: 'main', displayName: 'Main Input', required: true },
+			{ type: 'ai_tool', displayName: 'Optional Tool', required: false },
+		];
+		const result = mapLegacyEndpointsToCanvasConnectionPort(endpoints);
+
+		expect(result).toEqual([
+			{ type: 'main', index: 0, label: 'Main Input', required: true },
+			{ type: 'ai_tool', index: 0, label: 'Optional Tool' },
+		]);
+	});
+});
+
+describe('getUniqueNodeName', () => {
+	it('should return the original name if it is unique', () => {
+		const name = 'Node A';
+		const existingNames = new Set(['Node B', 'Node C']);
+		const result = getUniqueNodeName(name, existingNames);
+		expect(result).toBe(name);
+	});
+
+	it('should append a number to the name if it already exists', () => {
+		const name = 'Node A';
+		const existingNames = new Set(['Node A', 'Node B']);
+		const result = getUniqueNodeName(name, existingNames);
+		expect(result).toBe('Node A 1');
+	});
+
+	it('should find the next available number for the name', () => {
+		const name = 'Node A';
+		const existingNames = new Set(['Node A', 'Node A 1', 'Node A 2']);
+		const result = getUniqueNodeName(name, existingNames);
+		expect(result).toBe('Node A 3');
+	});
+
+	it('should use UUID if more than 99 variations exist', () => {
+		const name = 'Node A';
+		const existingNames = new Set([...Array(100).keys()].map((i) => `Node A ${i}`).concat([name]));
+		const result = getUniqueNodeName(name, existingNames);
+		expect(result).toBe('Node A mock-uuid');
+	});
+});
diff --git a/packages/editor-ui/src/utils/canvasUtilsV2.ts b/packages/editor-ui/src/utils/canvasUtilsV2.ts
index 3b14143f7fc18..4b46d9564bd10 100644
--- a/packages/editor-ui/src/utils/canvasUtilsV2.ts
+++ b/packages/editor-ui/src/utils/canvasUtilsV2.ts
@@ -3,7 +3,7 @@ import type { INodeUi } from '@/Interface';
 import type { CanvasConnection, CanvasConnectionPortType, CanvasConnectionPort } from '@/types';
 import { v4 as uuid } from 'uuid';
 
-export function mapLegacyConnections(
+export function mapLegacyConnectionsToCanvasConnections(
 	legacyConnections: IConnections,
 	nodes: INodeUi[],
 ): CanvasConnection[] {
@@ -49,7 +49,7 @@ export function mapLegacyConnections(
 	return mappedConnections;
 }
 
-export function normalizeElementEndpoints(
+export function mapLegacyEndpointsToCanvasConnectionPort(
 	endpoints: INodeTypeDescription['inputs'],
 ): CanvasConnectionPort[] {
 	if (typeof endpoints === 'string') {

From 1bff51237404592f590707f1a4f77b1a192e1196 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Thu, 16 May 2024 16:09:46 +0300
Subject: [PATCH 21/22] fix: fix linting issues

---
 packages/editor-ui/src/__tests__/data/canvas.ts                 | 2 +-
 .../components/canvas/elements/handles/HandleRenderer.spec.ts   | 2 +-
 .../src/components/canvas/elements/nodes/CanvasNode.vue         | 2 +-
 .../src/components/canvas/elements/nodes/CanvasNodeToolbar.vue  | 2 --
 packages/editor-ui/src/utils/canvasUtilsV2.spec.ts              | 1 -
 5 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/editor-ui/src/__tests__/data/canvas.ts b/packages/editor-ui/src/__tests__/data/canvas.ts
index 2c8e7fad6f956..7ff598996c665 100644
--- a/packages/editor-ui/src/__tests__/data/canvas.ts
+++ b/packages/editor-ui/src/__tests__/data/canvas.ts
@@ -1,6 +1,6 @@
 import { CanvasNodeKey } from '@/constants';
 import { ref } from 'vue';
-import { CanvasConnection, CanvasConnectionPort, CanvasElement, CanvasElementData } from '@/types';
+import type { CanvasElement, CanvasElementData } from '@/types';
 
 export function createCanvasNodeData({
 	id = 'node',
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/HandleRenderer.spec.ts b/packages/editor-ui/src/components/canvas/elements/handles/HandleRenderer.spec.ts
index 3117fbe581bc8..75d4889f8ddae 100644
--- a/packages/editor-ui/src/components/canvas/elements/handles/HandleRenderer.spec.ts
+++ b/packages/editor-ui/src/components/canvas/elements/handles/HandleRenderer.spec.ts
@@ -1,7 +1,7 @@
 import HandleRenderer from '@/components/canvas/elements/handles/HandleRenderer.vue';
 import { NodeConnectionType } from 'n8n-workflow';
 import { createComponentRenderer } from '@/__tests__/render';
-import { CanvasNodeHandleKey, CanvasNodeKey } from '@/constants';
+import { CanvasNodeHandleKey } from '@/constants';
 import { ref } from 'vue';
 
 const renderComponent = createComponentRenderer(HandleRenderer);
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
index b65c0f98dca60..7535c14c4a972 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { Position } from '@vue-flow/core';
-import { computed, provide, toRef, useCssModule } from 'vue';
+import { computed, provide, toRef } from 'vue';
 import type {
 	CanvasElementData,
 	CanvasConnectionPort,
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.vue b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.vue
index a2f02b97f94a9..b86aadedd08a2 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import { computed, inject, useCssModule } from 'vue';
-import type { INodeTypeDescription } from 'n8n-workflow';
-import type { CanvasElementData } from '@/types';
 import { CanvasNodeKey } from '@/constants';
 
 const node = inject(CanvasNodeKey);
diff --git a/packages/editor-ui/src/utils/canvasUtilsV2.spec.ts b/packages/editor-ui/src/utils/canvasUtilsV2.spec.ts
index 09a9c89f1535a..3f4f213f63911 100644
--- a/packages/editor-ui/src/utils/canvasUtilsV2.spec.ts
+++ b/packages/editor-ui/src/utils/canvasUtilsV2.spec.ts
@@ -6,7 +6,6 @@ import {
 import type { IConnections, INodeTypeDescription } from 'n8n-workflow';
 import type { CanvasConnection } from '@/types';
 import type { INodeUi } from '@/Interface';
-import { v4 as uuid } from 'uuid';
 
 vi.mock('uuid', () => ({
 	v4: vi.fn(() => 'mock-uuid'),

From 9f8be0aea5516d9a739d22042465d49e6ad1d56e Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Thu, 23 May 2024 10:57:56 +0300
Subject: [PATCH 22/22] fix: address PR feedback

---
 .../editor-ui/src/components/canvas/Canvas.vue   | 16 +++++++---------
 .../canvas/elements/nodes/CanvasNode.vue         |  9 ++++-----
 packages/editor-ui/src/views/NodeView.v2.vue     | 14 --------------
 3 files changed, 11 insertions(+), 28 deletions(-)

diff --git a/packages/editor-ui/src/components/canvas/Canvas.vue b/packages/editor-ui/src/components/canvas/Canvas.vue
index 83f61b93e3e9a..5fac47bafec02 100644
--- a/packages/editor-ui/src/components/canvas/Canvas.vue
+++ b/packages/editor-ui/src/components/canvas/Canvas.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { CanvasConnection, CanvasElement } from '@/types';
 import type { NodeDragEvent, Connection } from '@vue-flow/core';
-import { useVueFlow, VueFlow, PanelPosition } from '@vue-flow/core';
+import { VueFlow, PanelPosition } from '@vue-flow/core';
 import { Background } from '@vue-flow/background';
 import { Controls } from '@vue-flow/controls';
 import { MiniMap } from '@vue-flow/minimap';
@@ -11,9 +11,13 @@ import { useCssModule } from 'vue';
 
 const $style = useCssModule();
 
-const emit = defineEmits(['update:modelValue', 'update:node:position', 'create:connection']);
+const emit = defineEmits<{
+	'update:modelValue': [elements: CanvasElement[]];
+	'update:node:position': [id: string, position: { x: number; y: number }];
+	'create:connection': [connection: Connection];
+}>();
 
-const props = withDefaults(
+withDefaults(
 	defineProps<{
 		id?: string;
 		elements: CanvasElement[];
@@ -28,12 +32,6 @@ const props = withDefaults(
 	},
 );
 
-const { onInit } = useVueFlow({ id: props.id });
-
-onInit((instance) => {
-	console.log(instance);
-});
-
 function onNodeDragStop(e: NodeDragEvent) {
 	e.nodes.forEach((node) => {
 		emit('update:node:position', node.id, node.position);
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
index 7535c14c4a972..a9e635f253525 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
@@ -22,11 +22,10 @@ const outputs = computed(() => props.data.outputs);
 
 const nodeTypesStore = useNodeTypesStore();
 
-const { mainInputs, nonMainInputs, mainOutputs, nonMainOutputs, requiredNonMainInputs } =
-	useNodeConnections({
-		inputs,
-		outputs,
-	});
+const { mainInputs, nonMainInputs, mainOutputs, nonMainOutputs } = useNodeConnections({
+	inputs,
+	outputs,
+});
 
 const nodeType = computed(() => {
 	return nodeTypesStore.getNodeType(props.data.type, props.data.typeVersion);
diff --git a/packages/editor-ui/src/views/NodeView.v2.vue b/packages/editor-ui/src/views/NodeView.v2.vue
index 23f171b261664..6e30e58e1e5a3 100644
--- a/packages/editor-ui/src/views/NodeView.v2.vue
+++ b/packages/editor-ui/src/views/NodeView.v2.vue
@@ -167,20 +167,6 @@ function initializeEditableWorkflow(id: string) {
 		workflowsStore.setUsedCredentials(targetWorkflow.usedCredentials);
 	}
 
-	if (targetWorkflow.ownedBy) {
-		workflowsEEStore.setWorkflowOwnedBy({
-			workflowId: targetWorkflow.id,
-			ownedBy: targetWorkflow.ownedBy,
-		});
-	}
-
-	if (targetWorkflow.sharedWith) {
-		workflowsEEStore.setWorkflowSharedWith({
-			workflowId: targetWorkflow.id,
-			sharedWith: targetWorkflow.sharedWith,
-		});
-	}
-
 	const tags = (targetWorkflow.tags ?? []) as ITag[];
 	const tagIds = tags.map((tag) => tag.id);
 	workflowsStore.setWorkflowTagIds(tagIds || []);