Merge remote-tracking branch 'origin/master' into ADO-2728/feature-change-auto-add-of-chattrigger

cypress/e2e/45-ai-assistant.cy.ts

@@ -4,6 +4,7 @@ import { clickCreateNewCredential, openCredentialSelect } from '../composables/n
 import { GMAIL_NODE_NAME, SCHEDULE_TRIGGER_NODE_NAME } from '../constants';
 import { CredentialsModal, CredentialsPage, NDV, WorkflowPage } from '../pages';
 import { AIAssistant } from '../pages/features/ai-assistant';
+import { NodeCreator } from '../pages/features/node-creator';
 import { getVisibleSelect } from '../utils';
 
 const wf = new WorkflowPage();
@@ -11,6 +12,7 @@ const ndv = new NDV();
 const aiAssistant = new AIAssistant();
 const credentialsPage = new CredentialsPage();
 const credentialsModal = new CredentialsModal();
+const nodeCreatorFeature = new NodeCreator();
 
 describe('AI Assistant::disabled', () => {
 	beforeEach(() => {
@@ -280,6 +282,20 @@ describe('AI Assistant::enabled', () => {
 		wf.getters.isWorkflowSaved();
 		aiAssistant.getters.placeholderMessage().should('not.exist');
 	});
+
+	it('should send message via enter even with global NodeCreator panel opened', () => {
+		cy.intercept('POST', '/rest/ai/chat', {
+			statusCode: 200,
+			fixture: 'aiAssistant/responses/simple_message_response.json',
+		}).as('chatRequest');
+
+		wf.actions.addInitialNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME);
+		aiAssistant.actions.openChat();
+		nodeCreatorFeature.actions.openNodeCreator();
+		aiAssistant.getters.chatInput().type('Hello{Enter}');
+
+		aiAssistant.getters.placeholderMessage().should('not.exist');
+	});
 });
 
 describe('AI Assistant Credential Help', () => {

packages/design-system/src/components/AskAssistantChat/AskAssistantChat.vue

@@ -317,6 +317,7 @@ async function onCopyButtonClick(content: string, e: MouseEvent) {
 			<textarea
 				ref="chatInput"
 				v-model="textInputValue"
+				class="ignore-key-press-node-creator ignore-key-press-canvas"
 				:disabled="sessionEnded"
 				:placeholder="t('assistantChat.inputPlaceholder')"
 				rows="1"

packages/design-system/src/components/AskAssistantChat/__snapshots__/AskAssistantChat.test.ts.snap

@@ -156,6 +156,7 @@ exports[`AskAssistantChat > does not render retry button if no error is present
       data-test-id="chat-input-wrapper"
     >
       <textarea
+        class="ignore-key-press-node-creator ignore-key-press-canvas"
         data-test-id="chat-input"
         placeholder="Enter your response..."
         rows="1"
@@ -903,6 +904,7 @@ Testing more code
       data-test-id="chat-input-wrapper"
     >
       <textarea
+        class="ignore-key-press-node-creator ignore-key-press-canvas"
         data-test-id="chat-input"
         placeholder="Enter your response..."
         rows="1"
@@ -1078,6 +1080,7 @@ exports[`AskAssistantChat > renders default placeholder chat correctly 1`] = `
       data-test-id="chat-input-wrapper"
     >
       <textarea
+        class="ignore-key-press-node-creator ignore-key-press-canvas"
         data-test-id="chat-input"
         placeholder="Enter your response..."
         rows="1"
@@ -1323,6 +1326,7 @@ exports[`AskAssistantChat > renders end of session chat correctly 1`] = `
       data-test-id="chat-input-wrapper"
     >
       <textarea
+        class="ignore-key-press-node-creator ignore-key-press-canvas"
         data-test-id="chat-input"
         disabled=""
         placeholder="Enter your response..."
@@ -1493,6 +1497,7 @@ exports[`AskAssistantChat > renders error message correctly with retry button 1`
       data-test-id="chat-input-wrapper"
     >
       <textarea
+        class="ignore-key-press-node-creator ignore-key-press-canvas"
         data-test-id="chat-input"
         placeholder="Enter your response..."
         rows="1"
@@ -1737,6 +1742,7 @@ catch(e) {
       data-test-id="chat-input-wrapper"
     >
       <textarea
+        class="ignore-key-press-node-creator ignore-key-press-canvas"
         data-test-id="chat-input"
         placeholder="Enter your response..."
         rows="1"
@@ -1913,6 +1919,7 @@ exports[`AskAssistantChat > renders streaming chat correctly 1`] = `
       data-test-id="chat-input-wrapper"
     >
       <textarea
+        class="ignore-key-press-node-creator ignore-key-press-canvas"
         data-test-id="chat-input"
         placeholder="Enter your response..."
         rows="1"

packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue

@@ -1,14 +1,14 @@
-<script lang="ts" setup>
+<script lang="ts" setup generic="Value extends string">
 import RadioButton from './RadioButton.vue';
 
 interface RadioOption {
 	label: string;
-	value: string;
+	value: Value;
 	disabled?: boolean;
 }
 
 interface RadioButtonsProps {
-	modelValue?: string;
+	modelValue?: Value;
 	options?: RadioOption[];
 	/** @default medium */
 	size?: 'small' | 'medium';
@@ -22,11 +22,11 @@ const props = withDefaults(defineProps<RadioButtonsProps>(), {
 });
 
 const emit = defineEmits<{
-	'update:modelValue': [value: string, e: MouseEvent];
+	'update:modelValue': [value: Value, e: MouseEvent];
 }>();
 
 const onClick = (
-	option: { label: string; value: string; disabled?: boolean },
+	option: { label: string; value: Value; disabled?: boolean },
 	event: MouseEvent,
 ) => {
 	if (props.disabled || option.disabled) {

packages/design-system/src/components/N8nTabs/Tabs.vue

@@ -1,11 +1,11 @@
-<script lang="ts" setup>
+<script lang="ts" setup generic="Value extends string | number">
 import { onMounted, onUnmounted, ref } from 'vue';
 import type { RouteLocationRaw } from 'vue-router';
 
 import N8nIcon from '../N8nIcon';
 
 interface TabOptions {
-	value: string;
+	value: Value;
 	label?: string;
 	icon?: string;
 	href?: string;
@@ -15,7 +15,7 @@ interface TabOptions {
 }
 
 interface TabsProps {
-	modelValue?: string;
+	modelValue?: Value;
 	options?: TabOptions[];
 }
 
@@ -56,12 +56,12 @@ onUnmounted(() => {
 });
 
 const emit = defineEmits<{
-	tooltipClick: [tab: string, e: MouseEvent];
-	'update:modelValue': [tab: string];
+	tooltipClick: [tab: Value, e: MouseEvent];
+	'update:modelValue': [tab: Value];
 }>();
 
-const handleTooltipClick = (tab: string, event: MouseEvent) => emit('tooltipClick', tab, event);
-const handleTabClick = (tab: string) => emit('update:modelValue', tab);
+const handleTooltipClick = (tab: Value, event: MouseEvent) => emit('tooltipClick', tab, event);
+const handleTabClick = (tab: Value) => emit('update:modelValue', tab);
 
 const scroll = (left: number) => {
 	const container = tabs.value;
@@ -84,7 +84,7 @@ const scrollRight = () => scroll(50);
 		<div ref="tabs" :class="$style.tabs">
 			<div
 				v-for="option in options"
-				:id="option.value"
+				:id="option.value.toString()"
 				:key="option.value"
 				:class="{ [$style.alignRight]: option.align === 'right' }"
 			>

packages/design-system/src/components/N8nTree/Tree.stories.ts

@@ -7,6 +7,7 @@ export default {
 	component: N8nTree,
 };
 
+// @ts-expect-error Storybook incorrect slot types
 export const Default: StoryFn = (args, { argTypes }) => ({
 	setup: () => ({ args }),
 	props: Object.keys(argTypes),

packages/design-system/src/components/N8nTree/Tree.vue

@@ -1,19 +1,16 @@
-<script lang="ts" setup>
+<script lang="ts" setup generic="Value extends unknown = unknown">
 import { computed, useCssModule } from 'vue';
 
 interface TreeProps {
-	value?: Record<string, unknown>;
+	value?: Record<string, Value>;
 	path?: Array<string | number>;
 	depth?: number;
 	nodeClass?: string;
 }
 
 defineSlots<{
-	[key: string]: (props: {
-		label?: string;
-		path?: Array<string | number>;
-		value?: unknown;
-	}) => never;
+	label(props: { label: string; path: Array<string | number> }): never;
+	value(props: { value: Value }): never;
 }>();
 
 defineOptions({ name: 'N8nTree' });
@@ -29,11 +26,11 @@ const classes = computed((): Record<string, boolean> => {
 	return { [props.nodeClass]: !!props.nodeClass, [$style.indent]: props.depth > 0 };
 });
 
-const isObject = (data: unknown): data is Record<string, unknown> => {
+const isObject = (data: unknown): data is Record<string, Value> => {
 	return typeof data === 'object' && data !== null;
 };
 
-const isSimple = (data: unknown): boolean => {
+const isSimple = (data: Value): boolean => {
 	if (data === null || data === undefined) {
 		return true;
 	}
@@ -70,16 +67,21 @@ const getPath = (key: string): Array<string | number> => {
 			<div v-else>
 				<slot v-if="$slots.label" name="label" :label="label" :path="getPath(label)" />
 				<span v-else>{{ label }}</span>
-				<n8n-tree
+				<N8nTree
+					v-if="isObject(value[label])"
 					:path="getPath(label)"
 					:depth="depth + 1"
-					:value="value[label] as Record<string, unknown>"
+					:value="value[label]"
 					:node-class="nodeClass"
 				>
-					<template v-for="(_, name) in $slots" #[name]="data">
-						<slot :name="name" v-bind="data"></slot>
+					<template v-if="$slots.label" #label="data">
+						<slot name="label" v-bind="data" />
 					</template>
-				</n8n-tree>
+
+					<template v-if="$slots.value" #value="data">
+						<slot name="value" v-bind="data" />
+					</template>
+				</N8nTree>
 			</div>
 		</div>
 	</div>

packages/editor-ui/src/Interface.ts

@@ -1129,8 +1129,8 @@ export interface IInviteResponse {
 	error?: string;
 }
 
-export interface ITab {
-	value: string | number;
+export interface ITab<Value extends string | number = string | number> {
+	value: Value;
 	label?: string;
 	href?: string;
 	icon?: string;

packages/editor-ui/src/components/InputPanel.vue

@@ -1,5 +1,5 @@
-<script lang="ts">
-import type { INodeUi } from '@/Interface';
+<script setup lang="ts">
+import { useI18n } from '@/composables/useI18n';
 import {
 	CRON_NODE_TYPE,
 	INTERVAL_NODE_TYPE,
@@ -10,331 +10,326 @@ import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
-import type {
-	IConnectedNode,
-	INodeInputConfiguration,
-	INodeOutputConfiguration,
-	INodeTypeDescription,
-	Workflow,
-} from 'n8n-workflow';
+import { waitingNodeTooltip } from '@/utils/executionUtils';
+import { uniqBy } from 'lodash-es';
+import type { INodeInputConfiguration, INodeOutputConfiguration, Workflow } from 'n8n-workflow';
 import { NodeConnectionType, NodeHelpers } from 'n8n-workflow';
-import { mapStores } from 'pinia';
-import { defineComponent, type PropType } from 'vue';
+import { computed, ref, watch } from 'vue';
 import InputNodeSelect from './InputNodeSelect.vue';
 import NodeExecuteButton from './NodeExecuteButton.vue';
 import RunData from './RunData.vue';
 import WireMeUp from './WireMeUp.vue';
-import { waitingNodeTooltip } from '@/utils/executionUtils';
+import { useTelemetry } from '@/composables/useTelemetry';
+import { N8nRadioButtons, N8nTooltip, N8nText } from 'n8n-design-system';
+import { storeToRefs } from 'pinia';
 
 type MappingMode = 'debugging' | 'mapping';
 
-export default defineComponent({
-	name: 'InputPanel',
-	components: { RunData, NodeExecuteButton, WireMeUp, InputNodeSelect },
-	props: {
-		currentNodeName: {
-			type: String,
-		},
-		runIndex: {
-			type: Number,
-			required: true,
-		},
-		linkedRuns: {
-			type: Boolean,
-		},
-		workflow: {
-			type: Object as PropType<Workflow>,
-			required: true,
-		},
-		canLinkRuns: {
-			type: Boolean,
-		},
-		pushRef: {
-			type: String,
-			required: true,
-		},
-		readOnly: {
-			type: Boolean,
-		},
-		isProductionExecutionPreview: {
-			type: Boolean,
-			default: false,
-		},
-		isPaneActive: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	emits: [
-		'itemHover',
-		'tableMounted',
-		'linkRun',
-		'unlinkRun',
-		'runChange',
-		'search',
-		'changeInputNode',
-		'execute',
-		'activatePane',
-	],
-	data() {
-		return {
-			showDraggableHintWithDelay: false,
-			draggableHintShown: false,
-			inputMode: 'debugging' as MappingMode,
-			mappedNode: null as string | null,
-			inputModes: [
-				{ value: 'mapping', label: this.$locale.baseText('ndv.input.mapping') },
-				{ value: 'debugging', label: this.$locale.baseText('ndv.input.debugging') },
-			],
-		};
-	},
-	computed: {
-		...mapStores(useNodeTypesStore, useNDVStore, useWorkflowsStore, useUIStore),
-		focusedMappableInput(): string {
-			return this.ndvStore.focusedMappableInput;
-		},
-		isUserOnboarded(): boolean {
-			return this.ndvStore.isMappingOnboarded;
-		},
-		isMappingMode(): boolean {
-			return this.isActiveNodeConfig && this.inputMode === 'mapping';
-		},
-		showDraggableHint(): boolean {
-			const toIgnore = [
-				START_NODE_TYPE,
-				MANUAL_TRIGGER_NODE_TYPE,
-				CRON_NODE_TYPE,
-				INTERVAL_NODE_TYPE,
-			];
-			if (!this.currentNode || toIgnore.includes(this.currentNode.type)) {
-				return false;
-			}
+type Props = {
+	runIndex: number;
+	workflow: Workflow;
+	pushRef: string;
+	currentNodeName?: string;
+	canLinkRuns?: boolean;
+	linkedRuns?: boolean;
+	readOnly?: boolean;
+	isProductionExecutionPreview?: boolean;
+	isPaneActive?: boolean;
+};
 
-			return !!this.focusedMappableInput && !this.isUserOnboarded;
-		},
-		isActiveNodeConfig(): boolean {
-			let inputs = this.activeNodeType?.inputs ?? [];
-			let outputs = this.activeNodeType?.outputs ?? [];
-			if (this.activeNode !== null && this.workflow !== null) {
-				const node = this.workflow.getNode(this.activeNode.name);
-				inputs = NodeHelpers.getNodeInputs(this.workflow, node!, this.activeNodeType!);
-				outputs = NodeHelpers.getNodeOutputs(this.workflow, node!, this.activeNodeType!);
-			} else {
-				// If we can not figure out the node type we set no outputs
-				if (!Array.isArray(inputs)) {
-					inputs = [] as NodeConnectionType[];
-				}
-				if (!Array.isArray(outputs)) {
-					outputs = [] as NodeConnectionType[];
-				}
-			}
-
-			if (
-				inputs.length === 0 ||
-				(inputs.every((input) => this.filterOutConnectionType(input, NodeConnectionType.Main)) &&
-					outputs.find((output) => this.filterOutConnectionType(output, NodeConnectionType.Main)))
-			) {
-				return true;
-			}
-
-			return false;
-		},
-		isMappingEnabled(): boolean {
-			if (this.readOnly) return false;
-
-			// Mapping is only enabled in mapping mode for config nodes and if node to map is selected
-			if (this.isActiveNodeConfig) return this.isMappingMode && this.mappedNode !== null;
-
-			return true;
-		},
-		isExecutingPrevious(): boolean {
-			if (!this.workflowRunning) {
-				return false;
-			}
-			const triggeredNode = this.workflowsStore.executedNode;
-			const executingNode = this.workflowsStore.executingNode;
-
-			if (
-				this.activeNode &&
-				triggeredNode === this.activeNode.name &&
-				!this.workflowsStore.isNodeExecuting(this.activeNode.name)
-			) {
-				return true;
-			}
-
-			if (executingNode.length || triggeredNode) {
-				return !!this.parentNodes.find(
-					(node) => this.workflowsStore.isNodeExecuting(node.name) || node.name === triggeredNode,
-				);
-			}
-			return false;
-		},
-		workflowRunning(): boolean {
-			return this.uiStore.isActionActive['workflowRunning'];
-		},
-
-		activeNode(): INodeUi | null {
-			return this.ndvStore.activeNode;
-		},
-
-		rootNode(): string {
-			const workflow = this.workflow;
-			const rootNodes = workflow.getChildNodes(this.activeNode?.name ?? '', 'ALL');
-
-			return rootNodes[0];
-		},
-		rootNodesParents() {
-			const workflow = this.workflow;
-			const parentNodes = [...workflow.getParentNodes(this.rootNode, NodeConnectionType.Main)]
-				.reverse()
-				.map((parent): IConnectedNode => ({ name: parent, depth: 1, indicies: [] }));
-
-			return parentNodes;
-		},
-		currentNode(): INodeUi | null {
-			if (this.isActiveNodeConfig) {
-				// if we're mapping node we want to show the output of the mapped node
-				if (this.mappedNode) {
-					return this.workflowsStore.getNodeByName(this.mappedNode);
-				}
-
-				// in debugging mode data does get set manually and is only for debugging
-				// so we want to force the node to be the active node to make sure we show the correct data
-				return this.activeNode;
-			}
-
-			return this.workflowsStore.getNodeByName(this.currentNodeName ?? '');
-		},
-		connectedCurrentNodeOutputs(): number[] | undefined {
-			const search = this.parentNodes.find(({ name }) => name === this.currentNodeName);
-			if (search) {
-				return search.indicies;
-			}
-			return undefined;
-		},
-		parentNodes(): IConnectedNode[] {
-			if (!this.activeNode) {
-				return [];
-			}
-			const nodes = this.workflow.getParentNodesByDepth(this.activeNode.name);
-
-			return nodes.filter(
-				({ name }, i) =>
-					this.activeNode &&
-					name !== this.activeNode.name &&
-					nodes.findIndex((node) => node.name === name) === i,
-			);
-		},
-		currentNodeDepth(): number {
-			const node = this.parentNodes.find(
-				(parent) => this.currentNode && parent.name === this.currentNode.name,
-			);
-			return node ? node.depth : -1;
-		},
-		activeNodeType(): INodeTypeDescription | null {
-			if (!this.activeNode) return null;
-
-			return this.nodeTypesStore.getNodeType(this.activeNode.type, this.activeNode.typeVersion);
-		},
-		isMultiInputNode(): boolean {
-			return this.activeNodeType !== null && this.activeNodeType.inputs.length > 1;
-		},
-		waitingMessage(): string {
-			return waitingNodeTooltip();
-		},
-	},
-	watch: {
-		inputMode: {
-			handler(val) {
-				this.onRunIndexChange(-1);
-				if (val === 'mapping') {
-					this.onUnlinkRun();
-					this.mappedNode = this.rootNodesParents[0]?.name ?? null;
-				} else {
-					this.mappedNode = null;
-				}
-			},
-			immediate: true,
-		},
-		showDraggableHint(curr: boolean, prev: boolean) {
-			if (curr && !prev) {
-				setTimeout(() => {
-					if (this.draggableHintShown) {
-						return;
-					}
-					this.showDraggableHintWithDelay = this.showDraggableHint;
-					if (this.showDraggableHintWithDelay) {
-						this.draggableHintShown = true;
-
-						this.$telemetry.track('User viewed data mapping tooltip', {
-							type: 'unexecuted input pane',
-						});
-					}
-				}, 1000);
-			} else if (!curr) {
-				this.showDraggableHintWithDelay = false;
-			}
-		},
-	},
-	methods: {
-		filterOutConnectionType(
-			item: NodeConnectionType | INodeOutputConfiguration | INodeInputConfiguration,
-			type: NodeConnectionType,
-		) {
-			if (!item) return false;
-
-			return typeof item === 'string' ? item !== type : item.type !== type;
-		},
-		onInputModeChange(val: MappingMode) {
-			this.inputMode = val;
-		},
-		onMappedNodeSelected(val: string) {
-			this.mappedNode = val;
-
-			this.onRunIndexChange(0);
-			this.onUnlinkRun();
-		},
-		onNodeExecute() {
-			this.$emit('execute');
-			if (this.activeNode) {
-				this.$telemetry.track('User clicked ndv button', {
-					node_type: this.activeNode.type,
-					workflow_id: this.workflowsStore.workflowId,
-					push_ref: this.pushRef,
-					pane: 'input',
-					type: 'executePrevious',
-				});
-			}
-		},
-		onRunIndexChange(run: number) {
-			this.$emit('runChange', run);
-		},
-		onLinkRun() {
-			this.$emit('linkRun');
-		},
-		onUnlinkRun() {
-			this.$emit('unlinkRun');
-		},
-		onInputNodeChange(value: string) {
-			const index = this.parentNodes.findIndex((node) => node.name === value) + 1;
-			this.$emit('changeInputNode', value, index);
-		},
-		onConnectionHelpClick() {
-			if (this.activeNode) {
-				this.$telemetry.track('User clicked ndv link', {
-					node_type: this.activeNode.type,
-					workflow_id: this.workflowsStore.workflowId,
-					push_ref: this.pushRef,
-					pane: 'input',
-					type: 'not-connected-help',
-				});
-			}
-		},
-		activatePane() {
-			this.$emit('activatePane');
-		},
-	},
+const props = withDefaults(defineProps<Props>(), {
+	currentNodeName: '',
+	canLinkRuns: false,
+	readOnly: false,
+	isProductionExecutionPreview: false,
+	isPaneActive: false,
 });
+
+const emit = defineEmits<{
+	itemHover: [
+		{
+			outputIndex: number;
+			itemIndex: number;
+		} | null,
+	];
+	tableMounted: [
+		{
+			avgRowHeight: number;
+		},
+	];
+	linkRun: [];
+	unlinkRun: [];
+	runChange: [runIndex: number];
+	search: [search: string];
+	changeInputNode: [nodeName: string, index: number];
+	execute: [];
+	activatePane: [];
+}>();
+
+const i18n = useI18n();
+const telemetry = useTelemetry();
+
+const showDraggableHintWithDelay = ref(false);
+const draggableHintShown = ref(false);
+const inputMode = ref<MappingMode>('debugging');
+const mappedNode = ref<string | null>(null);
+const inputModes = [
+	{ value: 'mapping', label: i18n.baseText('ndv.input.mapping') },
+	{ value: 'debugging', label: i18n.baseText('ndv.input.debugging') },
+];
+
+const nodeTypesStore = useNodeTypesStore();
+const ndvStore = useNDVStore();
+const workflowsStore = useWorkflowsStore();
+const uiStore = useUIStore();
+
+const {
+	activeNode,
+	focusedMappableInput,
+	isMappingOnboarded: isUserOnboarded,
+} = storeToRefs(ndvStore);
+const isMappingMode = computed(() => isActiveNodeConfig.value && inputMode.value === 'mapping');
+const showDraggableHint = computed(() => {
+	const toIgnore = [START_NODE_TYPE, MANUAL_TRIGGER_NODE_TYPE, CRON_NODE_TYPE, INTERVAL_NODE_TYPE];
+	if (!currentNode.value || toIgnore.includes(currentNode.value.type)) {
+		return false;
+	}
+
+	return !!focusedMappableInput.value && !isUserOnboarded.value;
+});
+
+const isActiveNodeConfig = computed(() => {
+	let inputs = activeNodeType.value?.inputs ?? [];
+	let outputs = activeNodeType.value?.outputs ?? [];
+
+	if (props.workflow && activeNode.value) {
+		const node = props.workflow.getNode(activeNode.value.name);
+
+		if (node && activeNodeType.value) {
+			inputs = NodeHelpers.getNodeInputs(props.workflow, node, activeNodeType.value);
+			outputs = NodeHelpers.getNodeOutputs(props.workflow, node, activeNodeType.value);
+		}
+	}
+
+	// If we can not figure out the node type we set no outputs
+	if (!Array.isArray(inputs)) {
+		inputs = [];
+	}
+
+	if (!Array.isArray(outputs)) {
+		outputs = [];
+	}
+
+	return (
+		inputs.length === 0 ||
+		(inputs.every((input) => filterOutConnectionType(input, NodeConnectionType.Main)) &&
+			outputs.find((output) => filterOutConnectionType(output, NodeConnectionType.Main)))
+	);
+});
+
+const isMappingEnabled = computed(() => {
+	if (props.readOnly) return false;
+
+	// Mapping is only enabled in mapping mode for config nodes and if node to map is selected
+	if (isActiveNodeConfig.value) return isMappingMode.value && mappedNode.value !== null;
+
+	return true;
+});
+const isExecutingPrevious = computed(() => {
+	if (!workflowRunning.value) {
+		return false;
+	}
+	const triggeredNode = workflowsStore.executedNode;
+	const executingNode = workflowsStore.executingNode;
+
+	if (
+		activeNode.value &&
+		triggeredNode === activeNode.value.name &&
+		!workflowsStore.isNodeExecuting(activeNode.value.name)
+	) {
+		return true;
+	}
+
+	if (executingNode.length || triggeredNode) {
+		return !!parentNodes.value.find(
+			(node) => workflowsStore.isNodeExecuting(node.name) || node.name === triggeredNode,
+		);
+	}
+	return false;
+});
+const workflowRunning = computed(() => uiStore.isActionActive.workflowRunning);
+
+const rootNode = computed(() => {
+	if (!activeNode.value) return null;
+
+	return props.workflow.getChildNodes(activeNode.value.name, 'ALL').at(0) ?? null;
+});
+
+const rootNodesParents = computed(() => {
+	if (!rootNode.value) return [];
+	return props.workflow.getParentNodesByDepth(rootNode.value);
+});
+
+const currentNode = computed(() => {
+	if (isActiveNodeConfig.value) {
+		// if we're mapping node we want to show the output of the mapped node
+		if (mappedNode.value) {
+			return workflowsStore.getNodeByName(mappedNode.value);
+		}
+
+		// in debugging mode data does get set manually and is only for debugging
+		// so we want to force the node to be the active node to make sure we show the correct data
+		return activeNode.value;
+	}
+
+	return workflowsStore.getNodeByName(props.currentNodeName ?? '');
+});
+
+const connectedCurrentNodeOutputs = computed(() => {
+	const search = parentNodes.value.find(({ name }) => name === props.currentNodeName);
+	return search?.indicies;
+});
+const parentNodes = computed(() => {
+	if (!activeNode.value) {
+		return [];
+	}
+
+	const parents = props.workflow
+		.getParentNodesByDepth(activeNode.value.name)
+		.filter((parent) => parent.name !== activeNode.value?.name);
+	return uniqBy(parents, (parent) => parent.name);
+});
+
+const currentNodeDepth = computed(() => {
+	const node = parentNodes.value.find(
+		(parent) => currentNode.value && parent.name === currentNode.value.name,
+	);
+	return node?.depth ?? -1;
+});
+
+const activeNodeType = computed(() => {
+	if (!activeNode.value) return null;
+	return nodeTypesStore.getNodeType(activeNode.value.type, activeNode.value.typeVersion);
+});
+
+const waitingMessage = computed(() => waitingNodeTooltip());
+
+watch(
+	inputMode,
+	(mode) => {
+		onRunIndexChange(-1);
+		if (mode === 'mapping') {
+			onUnlinkRun();
+			mappedNode.value = rootNodesParents.value[0]?.name ?? null;
+		} else {
+			mappedNode.value = null;
+		}
+	},
+	{ immediate: true },
+);
+
+watch(showDraggableHint, (curr, prev) => {
+	if (curr && !prev) {
+		setTimeout(() => {
+			if (draggableHintShown.value) {
+				return;
+			}
+			showDraggableHintWithDelay.value = showDraggableHint.value;
+			if (showDraggableHintWithDelay.value) {
+				draggableHintShown.value = true;
+
+				telemetry.track('User viewed data mapping tooltip', {
+					type: 'unexecuted input pane',
+				});
+			}
+		}, 1000);
+	} else if (!curr) {
+		showDraggableHintWithDelay.value = false;
+	}
+});
+
+function filterOutConnectionType(
+	item: NodeConnectionType | INodeOutputConfiguration | INodeInputConfiguration,
+	type: NodeConnectionType,
+) {
+	if (!item) return false;
+
+	return typeof item === 'string' ? item !== type : item.type !== type;
+}
+
+function onInputModeChange(val: string) {
+	inputMode.value = val as MappingMode;
+}
+
+function onMappedNodeSelected(val: string) {
+	mappedNode.value = val;
+
+	onRunIndexChange(0);
+	onUnlinkRun();
+}
+
+function onNodeExecute() {
+	emit('execute');
+	if (activeNode.value) {
+		telemetry.track('User clicked ndv button', {
+			node_type: activeNode.value.type,
+			workflow_id: workflowsStore.workflowId,
+			push_ref: props.pushRef,
+			pane: 'input',
+			type: 'executePrevious',
+		});
+	}
+}
+
+function onRunIndexChange(run: number) {
+	emit('runChange', run);
+}
+
+function onLinkRun() {
+	emit('linkRun');
+}
+
+function onUnlinkRun() {
+	emit('unlinkRun');
+}
+
+function onSearch(search: string) {
+	emit('search', search);
+}
+
+function onItemHover(
+	item: {
+		outputIndex: number;
+		itemIndex: number;
+	} | null,
+) {
+	emit('itemHover', item);
+}
+
+function onTableMounted(event: { avgRowHeight: number }) {
+	emit('tableMounted', event);
+}
+
+function onInputNodeChange(value: string) {
+	const index = parentNodes.value.findIndex((node) => node.name === value) + 1;
+	emit('changeInputNode', value, index);
+}
+
+function onConnectionHelpClick() {
+	if (activeNode.value) {
+		telemetry.track('User clicked ndv link', {
+			node_type: activeNode.value.type,
+			workflow_id: workflowsStore.workflowId,
+			push_ref: props.pushRef,
+			pane: 'input',
+			type: 'not-connected-help',
+		});
+	}
+}
+
+function activatePane() {
+	emit('activatePane');
+}
 </script>
 
 <template>
@@ -358,18 +353,19 @@ export default defineComponent({
 		pane-type="input"
 		data-test-id="ndv-input-panel"
 		@activate-pane="activatePane"
-		@item-hover="$emit('itemHover', $event)"
+		@item-hover="onItemHover"
 		@link-run="onLinkRun"
 		@unlink-run="onUnlinkRun"
 		@run-change="onRunIndexChange"
-		@table-mounted="$emit('tableMounted', $event)"
-		@search="$emit('search', $event)"
+		@table-mounted="onTableMounted"
+		@search="onSearch"
 	>
 		<template #header>
 			<div :class="$style.titleSection">
 				<span :class="$style.title">{{ $locale.baseText('ndv.input') }}</span>
-				<n8n-radio-buttons
+				<N8nRadioButtons
 					v-if="isActiveNodeConfig && !readOnly"
+					data-test-id="input-panel-mode"
 					:options="inputModes"
 					:model-value="inputMode"
 					@update:model-value="onInputModeChange"
@@ -405,10 +401,10 @@ export default defineComponent({
 				v-if="(isActiveNodeConfig && rootNode) || parentNodes.length"
 				:class="$style.noOutputData"
 			>
-				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
+				<N8nText tag="div" :bold="true" color="text-dark" size="large">{{
 					$locale.baseText('ndv.input.noOutputData.title')
-				}}</n8n-text>
-				<n8n-tooltip v-if="!readOnly" :visible="showDraggableHint && showDraggableHintWithDelay">
+				}}</N8nText>
+				<N8nTooltip v-if="!readOnly" :visible="showDraggableHint && showDraggableHintWithDelay">
 					<template #content>
 						<div
 							v-n8n-html="
@@ -422,25 +418,25 @@ export default defineComponent({
 						type="secondary"
 						hide-icon
 						:transparent="true"
-						:node-name="isActiveNodeConfig ? rootNode : (currentNodeName ?? '')"
+						:node-name="(isActiveNodeConfig ? rootNode : currentNodeName) ?? ''"
 						:label="$locale.baseText('ndv.input.noOutputData.executePrevious')"
 						telemetry-source="inputs"
 						data-test-id="execute-previous-node"
 						@execute="onNodeExecute"
 					/>
-				</n8n-tooltip>
-				<n8n-text v-if="!readOnly" tag="div" size="small">
+				</N8nTooltip>
+				<N8nText v-if="!readOnly" tag="div" size="small">
 					{{ $locale.baseText('ndv.input.noOutputData.hint') }}
-				</n8n-text>
+				</N8nText>
 			</div>
 			<div v-else :class="$style.notConnected">
 				<div>
 					<WireMeUp />
 				</div>
-				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
+				<N8nText tag="div" :bold="true" color="text-dark" size="large">{{
 					$locale.baseText('ndv.input.notConnected.title')
-				}}</n8n-text>
-				<n8n-text tag="div">
+				}}</N8nText>
+				<N8nText tag="div">
 					{{ $locale.baseText('ndv.input.notConnected.message') }}
 					<a
 						href="https://docs.n8n.io/workflows/connections/"
@@ -449,29 +445,29 @@ export default defineComponent({
 					>
 						{{ $locale.baseText('ndv.input.notConnected.learnMore') }}
 					</a>
-				</n8n-text>
+				</N8nText>
 			</div>
 		</template>
 
 		<template #node-waiting>
-			<n8n-text :bold="true" color="text-dark" size="large">Waiting for input</n8n-text>
-			<n8n-text v-n8n-html="waitingMessage"></n8n-text>
+			<N8nText :bold="true" color="text-dark" size="large">Waiting for input</N8nText>
+			<N8nText v-n8n-html="waitingMessage"></N8nText>
 		</template>
 
 		<template #no-output-data>
-			<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
+			<N8nText tag="div" :bold="true" color="text-dark" size="large">{{
 				$locale.baseText('ndv.input.noOutputData')
-			}}</n8n-text>
+			}}</N8nText>
 		</template>
 
 		<template #recovered-artificial-output-data>
 			<div :class="$style.recoveredOutputData">
-				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
+				<N8nText tag="div" :bold="true" color="text-dark" size="large">{{
 					$locale.baseText('executionDetails.executionFailed.recoveredNodeTitle')
-				}}</n8n-text>
-				<n8n-text>
+				}}</N8nText>
+				<N8nText>
 					{{ $locale.baseText('executionDetails.executionFailed.recoveredNodeMessage') }}
-				</n8n-text>
+				</N8nText>
 			</div>
 		</template>
 	</RunData>

packages/editor-ui/src/components/Node/NodeCreator/Modes/ActionsMode.vue

@@ -1,16 +1,13 @@
 <script setup lang="ts">
-import { computed, onMounted, defineComponent, h } from 'vue';
-import type { PropType } from 'vue';
+import { computed, onMounted } from 'vue';
 import type {
 	INodeCreateElement,
-	NodeFilterType,
 	IUpdateInformation,
 	ActionCreateElement,
 	NodeCreateElement,
 } from '@/Interface';
 import {
 	HTTP_REQUEST_NODE_TYPE,
-	REGULAR_NODE_CREATOR_VIEW,
 	TRIGGER_NODE_CREATOR_VIEW,
 	CUSTOM_API_CALL_KEY,
 	OPEN_AI_NODE_MESSAGE_ASSISTANT_TYPE,
@@ -30,6 +27,7 @@ import type { IDataObject } from 'n8n-workflow';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { useI18n } from '@/composables/useI18n';
 import { useNodeCreatorStore } from '@/stores/nodeCreator.store';
+import OrderSwitcher from './../OrderSwitcher.vue';
 
 const emit = defineEmits<{
 	nodeTypeSelected: [value: [actionKey: string, nodeName: string] | [nodeName: string]];
@@ -212,26 +210,6 @@ function addHttpNode() {
 	nodeCreatorStore.onActionsCustomAPIClicked({ app_identifier });
 }
 
-// Anonymous component to handle triggers and actions rendering order
-const OrderSwitcher = defineComponent({
-	props: {
-		rootView: {
-			type: String as PropType<NodeFilterType>,
-			required: true,
-		},
-	},
-	setup(props, { slots }) {
-		return () =>
-			h(
-				'div',
-				{},
-				props.rootView === REGULAR_NODE_CREATOR_VIEW
-					? [slots.actions?.(), slots.triggers?.()]
-					: [slots.triggers?.(), slots.actions?.()],
-			);
-	},
-});
-
 onMounted(() => {
 	trackActionsView();
 });

packages/editor-ui/src/components/Node/NodeCreator/OrderSwitcher.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { NodeFilterType } from '@/Interface';
+import { REGULAR_NODE_CREATOR_VIEW } from '@/constants';
+
+defineProps<{
+	rootView: NodeFilterType;
+}>();
+</script>
+
+<template>
+	<div>
+		<template v-if="rootView === REGULAR_NODE_CREATOR_VIEW">
+			<slot name="actions" />
+			<slot name="triggers" />
+		</template>
+		<template v-else>
+			<slot name="triggers" />
+			<slot name="actions" />
+		</template>
+	</div>
+</template>

packages/editor-ui/src/components/Node/NodeCreator/composables/useKeyboardNavigation.ts

@@ -62,6 +62,16 @@ export const useKeyboardNavigation = defineStore('nodeCreatorKeyboardNavigation'
 	}
 
 	async function onKeyDown(e: KeyboardEvent) {
+		// We generally want a global listener across the app
+		// But specific components may overrule this by adopting
+		// the 'ignore-key-press-node-creator' class
+		if (
+			e.target instanceof Element &&
+			e.target.classList.contains('ignore-key-press-node-creator')
+		) {
+			return;
+		}
+
 		const pressedKey = e.key;
 		if (!WATCHED_KEYS.includes(pressedKey)) return;
 		e.preventDefault();

packages/editor-ui/src/components/NodeDetailsView.test.ts

@@ -16,6 +16,14 @@ import { setupServer } from '@/__tests__/server';
 import { defaultNodeDescriptions, mockNodes } from '@/__tests__/mocks';
 import { cleanupAppModals, createAppModals } from '@/__tests__/utils';
 
+vi.mock('vue-router', () => {
+	return {
+		useRouter: () => ({}),
+		useRoute: () => ({ meta: {} }),
+		RouterLink: vi.fn(),
+	};
+});
+
 async function createPiniaWithActiveNode() {
 	const node = mockNodes[0];
 	const workflow = mock<IWorkflowDb>({

packages/editor-ui/src/components/NodeDetailsView.vue

@@ -387,7 +387,7 @@ const onWorkflowActivate = () => {
 	}, 1000);
 };
 
-const onOutputItemHover = (e: { itemIndex: number; outputIndex: number }) => {
+const onOutputItemHover = (e: { itemIndex: number; outputIndex: number } | null) => {
 	if (e === null || !activeNode.value || !isPairedItemHoveringEnabled.value) {
 		ndvStore.setHoveringItem(null);
 		return;

packages/editor-ui/src/components/OutputPanel.vue

@@ -15,10 +15,11 @@ import { usePinnedData } from '@/composables/usePinnedData';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { useI18n } from '@/composables/useI18n';
 import { waitingNodeTooltip } from '@/utils/executionUtils';
+import { N8nRadioButtons, N8nText } from 'n8n-design-system';
 
 // Types
 
-type RunDataRef = InstanceType<typeof RunData> | null;
+type RunDataRef = InstanceType<typeof RunData>;
 
 const OUTPUT_TYPE = {
 	REGULAR: 'regular',
@@ -55,7 +56,7 @@ const emit = defineEmits<{
 	runChange: [number];
 	activatePane: [];
 	tableMounted: [{ avgRowHeight: number }];
-	itemHover: [{ itemIndex: number; outputIndex: number }];
+	itemHover: [item: { itemIndex: number; outputIndex: number } | null];
 	search: [string];
 	openSettings: [];
 }>();
@@ -87,7 +88,7 @@ const outputTypes = ref([
 	{ label: i18n.baseText('ndv.output.outType.regular'), value: OUTPUT_TYPE.REGULAR },
 	{ label: i18n.baseText('ndv.output.outType.logs'), value: OUTPUT_TYPE.LOGS },
 ]);
-const runDataRef = ref<RunDataRef>(null);
+const runDataRef = ref<RunDataRef>();
 
 // Computed
 
@@ -127,9 +128,7 @@ const isNodeRunning = computed(() => {
 	return workflowRunning.value && !!node.value && workflowsStore.isNodeExecuting(node.value.name);
 });
 
-const workflowRunning = computed(() => {
-	return uiStore.isActionActive['workflowRunning'];
-});
+const workflowRunning = computed(() => uiStore.isActionActive.workflowRunning);
 
 const workflowExecution = computed(() => {
 	return workflowsStore.getWorkflowExecution;
@@ -253,8 +252,8 @@ const onRunIndexChange = (run: number) => {
 	emit('runChange', run);
 };
 
-const onUpdateOutputMode = (outputMode: OutputType) => {
-	if (outputMode === OUTPUT_TYPE.LOGS) {
+const onUpdateOutputMode = (newOutputMode: OutputType) => {
+	if (newOutputMode === OUTPUT_TYPE.LOGS) {
 		ndvEventBus.emit('setPositionByName', 'minLeft');
 	} else {
 		ndvEventBus.emit('setPositionByName', 'initial');
@@ -288,10 +287,10 @@ const activatePane = () => {
 		:run-index="runIndex"
 		:linked-runs="linkedRuns"
 		:can-link-runs="canLinkRuns"
-		:too-much-data-title="$locale.baseText('ndv.output.tooMuchData.title')"
-		:no-data-in-branch-message="$locale.baseText('ndv.output.noOutputDataInBranch')"
+		:too-much-data-title="i18n.baseText('ndv.output.tooMuchData.title')"
+		:no-data-in-branch-message="i18n.baseText('ndv.output.noOutputDataInBranch')"
 		:is-executing="isNodeRunning"
-		:executing-message="$locale.baseText('ndv.output.executing')"
+		:executing-message="i18n.baseText('ndv.output.executing')"
 		:push-ref="pushRef"
 		:block-u-i="blockUI"
 		:is-production-execution-preview="isProductionExecutionPreview"
@@ -310,15 +309,15 @@ const activatePane = () => {
 		<template #header>
 			<div :class="$style.titleSection">
 				<template v-if="hasAiMetadata">
-					<n8n-radio-buttons
-						data-test-id="ai-output-mode-select"
+					<N8nRadioButtons
 						v-model="outputMode"
+						data-test-id="ai-output-mode-select"
 						:options="outputTypes"
 						@update:model-value="onUpdateOutputMode"
 					/>
 				</template>
 				<span v-else :class="$style.title">
-					{{ $locale.baseText(outputPanelEditMode.enabled ? 'ndv.output.edit' : 'ndv.output') }}
+					{{ i18n.baseText(outputPanelEditMode.enabled ? 'ndv.output.edit' : 'ndv.output') }}
 				</span>
 				<RunInfo
 					v-if="hasNodeRun && !pinnedData.hasData.value && runsCount === 1"
@@ -331,42 +330,40 @@ const activatePane = () => {
 		</template>
 
 		<template #node-not-run>
-			<n8n-text v-if="workflowRunning && !isTriggerNode" data-test-id="ndv-output-waiting">{{
-				$locale.baseText('ndv.output.waitingToRun')
-			}}</n8n-text>
-			<n8n-text v-if="!workflowRunning" data-test-id="ndv-output-run-node-hint">
+			<N8nText v-if="workflowRunning && !isTriggerNode" data-test-id="ndv-output-waiting">{{
+				i18n.baseText('ndv.output.waitingToRun')
+			}}</N8nText>
+			<N8nText v-if="!workflowRunning" data-test-id="ndv-output-run-node-hint">
 				<template v-if="isSubNodeType">
-					{{ $locale.baseText('ndv.output.runNodeHintSubNode') }}
+					{{ i18n.baseText('ndv.output.runNodeHintSubNode') }}
 				</template>
 				<template v-else>
-					{{ $locale.baseText('ndv.output.runNodeHint') }}
+					{{ i18n.baseText('ndv.output.runNodeHint') }}
 					<span v-if="canPinData" @click="insertTestData">
 						<br />
-						{{ $locale.baseText('generic.or') }}
-						<n8n-text tag="a" size="medium" color="primary">
-							{{ $locale.baseText('ndv.output.insertTestData') }}
-						</n8n-text>
+						{{ i18n.baseText('generic.or') }}
+						<N8nText tag="a" size="medium" color="primary">
+							{{ i18n.baseText('ndv.output.insertTestData') }}
+						</N8nText>
 					</span>
 				</template>
-			</n8n-text>
+			</N8nText>
 		</template>
 
 		<template #node-waiting>
-			<n8n-text :bold="true" color="text-dark" size="large">Waiting for input</n8n-text>
-			<n8n-text v-n8n-html="waitingNodeTooltip()"></n8n-text>
+			<N8nText :bold="true" color="text-dark" size="large">Waiting for input</N8nText>
+			<N8nText v-n8n-html="waitingNodeTooltip()"></N8nText>
 		</template>
 
 		<template #no-output-data>
-			<n8n-text :bold="true" color="text-dark" size="large">{{
-				$locale.baseText('ndv.output.noOutputData.title')
-			}}</n8n-text>
-			<n8n-text>
-				{{ $locale.baseText('ndv.output.noOutputData.message') }}
-				<a @click="openSettings">{{
-					$locale.baseText('ndv.output.noOutputData.message.settings')
-				}}</a>
-				{{ $locale.baseText('ndv.output.noOutputData.message.settingsOption') }}
-			</n8n-text>
+			<N8nText :bold="true" color="text-dark" size="large">{{
+				i18n.baseText('ndv.output.noOutputData.title')
+			}}</N8nText>
+			<N8nText>
+				{{ i18n.baseText('ndv.output.noOutputData.message') }}
+				<a @click="openSettings">{{ i18n.baseText('ndv.output.noOutputData.message.settings') }}</a>
+				{{ i18n.baseText('ndv.output.noOutputData.message.settingsOption') }}
+			</N8nText>
 		</template>
 
 		<template v-if="outputMode === 'logs' && node" #content>
@@ -375,12 +372,12 @@ const activatePane = () => {
 
 		<template #recovered-artificial-output-data>
 			<div :class="$style.recoveredOutputData">
-				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
-					$locale.baseText('executionDetails.executionFailed.recoveredNodeTitle')
-				}}</n8n-text>
-				<n8n-text>
-					{{ $locale.baseText('executionDetails.executionFailed.recoveredNodeMessage') }}
-				</n8n-text>
+				<N8nText tag="div" :bold="true" color="text-dark" size="large">{{
+					i18n.baseText('executionDetails.executionFailed.recoveredNodeTitle')
+				}}</N8nText>
+				<N8nText>
+					{{ i18n.baseText('executionDetails.executionFailed.recoveredNodeMessage') }}
+				</N8nText>
 			</div>
 		</template>
 

packages/editor-ui/src/components/ParameterInput.vue

@@ -1023,7 +1023,7 @@ onUpdated(async () => {
 			@update:model-value="expressionUpdated"
 		></ExpressionEditModal>
 
-		<div class="parameter-input ignore-key-press" :style="parameterInputWrapperStyle">
+		<div class="parameter-input ignore-key-press-canvas" :style="parameterInputWrapperStyle">
 			<ResourceLocator
 				v-if="parameter.type === 'resourceLocator'"
 				ref="resourceLocator"
@@ -1098,7 +1098,10 @@ onUpdated(async () => {
 					:before-close="closeCodeEditDialog"
 					data-test-id="code-editor-fullscreen"
 				>
-					<div :key="codeEditDialogVisible.toString()" class="ignore-key-press code-edit-dialog">
+					<div
+						:key="codeEditDialogVisible.toString()"
+						class="ignore-key-press-canvas code-edit-dialog"
+					>
 						<CodeNodeEditor
 							v-if="editorType === 'codeNodeEditor'"
 							:mode="codeEditorMode"

packages/editor-ui/src/components/RunData.test.ts

@@ -1,16 +1,24 @@
-import { waitFor } from '@testing-library/vue';
-import userEvent from '@testing-library/user-event';
-import { createTestingPinia } from '@pinia/testing';
-import { merge } from 'lodash-es';
-import RunData from '@/components/RunData.vue';
-import { SET_NODE_TYPE, STORES, VIEWS } from '@/constants';
-import { SETTINGS_STORE_DEFAULT_STATE } from '@/__tests__/utils';
+import { createTestWorkflowObject, defaultNodeDescriptions } from '@/__tests__/mocks';
 import { createComponentRenderer } from '@/__tests__/render';
+import { SETTINGS_STORE_DEFAULT_STATE } from '@/__tests__/utils';
+import RunData from '@/components/RunData.vue';
+import { SET_NODE_TYPE, STORES } from '@/constants';
 import type { INodeUi, IRunDataDisplayMode, NodePanelType } from '@/Interface';
 import { useWorkflowsStore } from '@/stores/workflows.store';
-import { setActivePinia } from 'pinia';
-import { defaultNodeTypes } from '@/__tests__/mocks';
+import { createTestingPinia } from '@pinia/testing';
+import userEvent from '@testing-library/user-event';
+import { waitFor } from '@testing-library/vue';
 import type { INodeExecutionData } from 'n8n-workflow';
+import { setActivePinia } from 'pinia';
+import { useNodeTypesStore } from '../stores/nodeTypes.store';
+
+vi.mock('vue-router', () => {
+	return {
+		useRouter: () => ({}),
+		useRoute: () => ({ meta: {} }),
+		RouterLink: vi.fn(),
+	};
+});
 
 const nodes = [
 	{
@@ -112,9 +120,12 @@ describe('RunData', () => {
 			],
 			'binary',
 		);
-		expect(getByTestId('ndv-view-binary-data')).toBeInTheDocument();
-		expect(getByTestId('ndv-download-binary-data')).toBeInTheDocument();
-		expect(getByTestId('ndv-binary-data_0')).toBeInTheDocument();
+
+		await waitFor(() => {
+			expect(getByTestId('ndv-view-binary-data')).toBeInTheDocument();
+			expect(getByTestId('ndv-download-binary-data')).toBeInTheDocument();
+			expect(getByTestId('ndv-binary-data_0')).toBeInTheDocument();
+		});
 	});
 
 	it('should not render a view button for unknown content-type', async () => {
@@ -132,9 +143,12 @@ describe('RunData', () => {
 			],
 			'binary',
 		);
-		expect(queryByTestId('ndv-view-binary-data')).not.toBeInTheDocument();
-		expect(getByTestId('ndv-download-binary-data')).toBeInTheDocument();
-		expect(getByTestId('ndv-binary-data_0')).toBeInTheDocument();
+
+		await waitFor(() => {
+			expect(queryByTestId('ndv-view-binary-data')).not.toBeInTheDocument();
+			expect(getByTestId('ndv-download-binary-data')).toBeInTheDocument();
+			expect(getByTestId('ndv-binary-data_0')).toBeInTheDocument();
+		});
 	});
 
 	it('should not render pin data button when there is no output data', async () => {
@@ -201,10 +215,9 @@ describe('RunData', () => {
 		paneType: NodePanelType = 'output',
 	) => {
 		const pinia = createTestingPinia({
+			stubActions: false,
 			initialState: {
-				[STORES.SETTINGS]: {
-					settings: merge({}, SETTINGS_STORE_DEFAULT_STATE.settings),
-				},
+				[STORES.SETTINGS]: SETTINGS_STORE_DEFAULT_STATE,
 				[STORES.NDV]: {
 					output: {
 						displayMode,
@@ -248,16 +261,17 @@ describe('RunData', () => {
 						},
 					},
 				},
-				[STORES.NODE_TYPES]: {
-					nodeTypes: defaultNodeTypes,
-				},
 			},
 		});
 
 		setActivePinia(pinia);
 
 		const workflowsStore = useWorkflowsStore();
+		const nodeTypesStore = useNodeTypesStore();
+
+		nodeTypesStore.setNodeTypes(defaultNodeDescriptions);
 		vi.mocked(workflowsStore).getNodeByName.mockReturnValue(nodes[0]);
+
 		if (pinnedData) {
 			vi.mocked(workflowsStore).pinDataByNodeName.mockReturnValue(pinnedData);
 		}
@@ -267,31 +281,21 @@ describe('RunData', () => {
 				node: {
 					name: 'Test Node',
 				},
-				workflow: {
+				workflow: createTestWorkflowObject({
 					nodes,
-				},
-			},
-			data() {
-				return {
-					canPinData: true,
-					showData: true,
-				};
+				}),
 			},
 			global: {
 				stubs: {
 					RunDataPinButton: { template: '<button data-test-id="ndv-pin-data"></button>' },
 				},
-				mocks: {
-					$route: {
-						name: VIEWS.WORKFLOW,
-					},
-				},
 			},
 		})({
 			props: {
 				node: {
 					id: '1',
 					name: 'Test Node',
+					type: SET_NODE_TYPE,
 					position: [0, 0],
 				},
 				nodes: [{ name: 'Test Node', indicies: [], depth: 1 }],

packages/editor-ui/src/components/RunDataPinButton.vue

@@ -2,6 +2,7 @@
 import { computed } from 'vue';
 import { useI18n } from '@/composables/useI18n';
 import type { usePinnedData } from '@/composables/usePinnedData';
+import { N8nIconButton, N8nLink, N8nText, N8nTooltip } from 'n8n-design-system';
 
 const locale = useI18n();
 
@@ -27,7 +28,7 @@ const visible = computed(() =>
 </script>
 
 <template>
-	<n8n-tooltip placement="bottom-end" :visible="visible">
+	<N8nTooltip placement="bottom-end" :visible="visible">
 		<template #content>
 			<div v-if="props.tooltipContentsVisibility.binaryDataTooltipContent">
 				{{ locale.baseText('ndv.pinData.pin.binary') }}
@@ -37,16 +38,16 @@ const visible = computed(() =>
 			</div>
 			<div v-else>
 				<strong>{{ locale.baseText('ndv.pinData.pin.title') }}</strong>
-				<n8n-text size="small" tag="p">
+				<N8nText size="small" tag="p">
 					{{ locale.baseText('ndv.pinData.pin.description') }}
 
-					<n8n-link :to="props.dataPinningDocsUrl" size="small">
+					<N8nLink :to="props.dataPinningDocsUrl" size="small">
 						{{ locale.baseText('ndv.pinData.pin.link') }}
-					</n8n-link>
-				</n8n-text>
+					</N8nLink>
+				</N8nText>
 			</div>
 		</template>
-		<n8n-icon-button
+		<N8nIconButton
 			:class="$style.pinDataButton"
 			type="tertiary"
 			:active="props.pinnedData.hasData.value"
@@ -55,7 +56,7 @@ const visible = computed(() =>
 			data-test-id="ndv-pin-data"
 			@click="emit('togglePinData')"
 		/>
-	</n8n-tooltip>
+	</N8nTooltip>
 </template>
 
 <style lang="scss" module>

packages/editor-ui/src/components/RunDataTable.vue

@@ -1,389 +1,387 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-import type { PropType } from 'vue';
-import { mapStores } from 'pinia';
-import type { INodeUi, ITableData, NDVState } from '@/Interface';
-import { shorten } from '@/utils/typesUtils';
-import { getPairedItemId } from '@/utils/pairedItemUtils';
-import type { GenericValue, IDataObject, INodeExecutionData } from 'n8n-workflow';
-import Draggable from './Draggable.vue';
-import { useWorkflowsStore } from '@/stores/workflows.store';
-import { useNDVStore } from '@/stores/ndv.store';
-import MappingPill from './MappingPill.vue';
-import { getMappedExpression } from '@/utils/mappingUtils';
+<script setup lang="ts">
 import { useExternalHooks } from '@/composables/useExternalHooks';
+import type { INodeUi, IRunDataDisplayMode, ITableData } from '@/Interface';
+import { useNDVStore } from '@/stores/ndv.store';
+import { useWorkflowsStore } from '@/stores/workflows.store';
+import { getMappedExpression } from '@/utils/mappingUtils';
+import { getPairedItemId } from '@/utils/pairedItemUtils';
+import { shorten } from '@/utils/typesUtils';
+import type { GenericValue, IDataObject, INodeExecutionData } from 'n8n-workflow';
+import { computed, onMounted, ref, watch } from 'vue';
+import Draggable from './Draggable.vue';
+import MappingPill from './MappingPill.vue';
 import TextWithHighlights from './TextWithHighlights.vue';
+import { useI18n } from '@/composables/useI18n';
+import { useTelemetry } from '@/composables/useTelemetry';
+import { N8nInfoTip, N8nTooltip, N8nTree } from 'n8n-design-system';
+import { storeToRefs } from 'pinia';
 
 const MAX_COLUMNS_LIMIT = 40;
 
 type DraggableRef = InstanceType<typeof Draggable>;
 
-export default defineComponent({
-	name: 'RunDataTable',
-	components: { Draggable, MappingPill, TextWithHighlights },
-	props: {
-		node: {
-			type: Object as PropType<INodeUi>,
-			required: true,
-		},
-		inputData: {
-			type: Array as PropType<INodeExecutionData[]>,
-			required: true,
-		},
-		mappingEnabled: {
-			type: Boolean,
-		},
-		distanceFromActive: {
-			type: Number,
-			required: true,
-		},
-		runIndex: {
-			type: Number,
-		},
-		outputIndex: {
-			type: Number,
-		},
-		totalRuns: {
-			type: Number,
-		},
-		pageOffset: {
-			type: Number,
-			required: true,
-		},
-		hasDefaultHoverState: {
-			type: Boolean,
-		},
-		search: {
-			type: String,
-		},
-	},
-	setup() {
-		const externalHooks = useExternalHooks();
-		return {
-			externalHooks,
-		};
-	},
-	data() {
-		return {
-			activeColumn: -1,
-			forceShowGrip: false,
-			draggedColumn: false,
-			draggingPath: null as null | string,
-			hoveringPath: null as null | string,
-			mappingHintVisible: false,
-			activeRow: null as number | null,
-			columnLimit: MAX_COLUMNS_LIMIT,
-			columnLimitExceeded: false,
-		};
-	},
-	mounted() {
-		if (this.tableData && this.tableData.columns && this.$refs.draggable) {
-			const tbody = (this.$refs.draggable as DraggableRef).$refs.wrapper as HTMLElement;
-			if (tbody) {
-				this.$emit('mounted', {
-					avgRowHeight: tbody.offsetHeight / this.tableData.data.length,
-				});
-			}
+type Props = {
+	node: INodeUi;
+	inputData: INodeExecutionData[];
+	distanceFromActive: number;
+	pageOffset: number;
+	runIndex?: number;
+	outputIndex?: number;
+	totalRuns?: number;
+	mappingEnabled?: boolean;
+	hasDefaultHoverState?: boolean;
+	search?: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+	runIndex: 0,
+	outputIndex: 0,
+	totalRuns: 0,
+	mappingEnabled: false,
+	hasDefaultHoverState: false,
+	search: '',
+});
+const emit = defineEmits<{
+	activeRowChanged: [row: number | null];
+	displayModeChange: [mode: IRunDataDisplayMode];
+	mounted: [data: { avgRowHeight: number }];
+}>();
+
+const externalHooks = useExternalHooks();
+const activeColumn = ref(-1);
+const forceShowGrip = ref(false);
+const draggedColumn = ref(false);
+const draggingPath = ref<string | null>(null);
+const hoveringPath = ref<string | null>(null);
+const activeRow = ref<number | null>(null);
+const columnLimit = ref(MAX_COLUMNS_LIMIT);
+const columnLimitExceeded = ref(false);
+const draggableRef = ref<DraggableRef>();
+
+const ndvStore = useNDVStore();
+const workflowsStore = useWorkflowsStore();
+
+const i18n = useI18n();
+const telemetry = useTelemetry();
+
+const {
+	hoveringItem,
+	focusedMappableInput,
+	highlightDraggables: highlight,
+} = storeToRefs(ndvStore);
+const pairedItemMappings = computed(() => workflowsStore.workflowExecutionPairedItemMappings);
+const tableData = computed(() => convertToTable(props.inputData));
+
+onMounted(() => {
+	if (tableData.value?.columns && draggableRef.value) {
+		const tbody = draggableRef.value.$refs.wrapper as HTMLElement;
+		if (tbody) {
+			emit('mounted', {
+				avgRowHeight: tbody.offsetHeight / tableData.value.data.length,
+			});
 		}
-	},
-	computed: {
-		...mapStores(useNDVStore, useWorkflowsStore),
-		hoveringItem(): NDVState['hoveringItem'] {
-			return this.ndvStore.hoveringItem;
-		},
-		pairedItemMappings(): { [itemId: string]: Set<string> } {
-			return this.workflowsStore.workflowExecutionPairedItemMappings;
-		},
-		tableData(): ITableData {
-			return this.convertToTable(this.inputData);
-		},
-		focusedMappableInput(): string {
-			return this.ndvStore.focusedMappableInput;
-		},
-		highlight(): boolean {
-			return this.ndvStore.highlightDraggables;
-		},
-	},
-	methods: {
-		shorten,
-		isHoveringRow(row: number): boolean {
-			if (row === this.activeRow) {
-				return true;
-			}
+	}
+});
 
-			const itemIndex = this.pageOffset + row;
-			if (
-				itemIndex === 0 &&
-				!this.hoveringItem &&
-				this.hasDefaultHoverState &&
-				this.distanceFromActive === 1
-			) {
-				return true;
-			}
-			const itemNodeId = getPairedItemId(
-				this.node?.name ?? '',
-				this.runIndex || 0,
-				this.outputIndex || 0,
-				itemIndex,
-			);
-			if (!this.hoveringItem || !this.pairedItemMappings[itemNodeId]) {
-				return false;
-			}
+function isHoveringRow(row: number): boolean {
+	if (row === activeRow.value) {
+		return true;
+	}
 
-			const hoveringItemId = getPairedItemId(
-				this.hoveringItem.nodeName,
-				this.hoveringItem.runIndex,
-				this.hoveringItem.outputIndex,
-				this.hoveringItem.itemIndex,
-			);
-			return this.pairedItemMappings[itemNodeId].has(hoveringItemId);
-		},
-		onMouseEnterCell(e: MouseEvent) {
-			const target = e.target;
-			if (target && this.mappingEnabled) {
-				const col = (target as HTMLElement).dataset.col;
-				if (col && !isNaN(parseInt(col, 10))) {
-					this.activeColumn = parseInt(col, 10);
-				}
+	const itemIndex = props.pageOffset + row;
+	if (
+		itemIndex === 0 &&
+		!hoveringItem.value &&
+		props.hasDefaultHoverState &&
+		props.distanceFromActive === 1
+	) {
+		return true;
+	}
+	const itemNodeId = getPairedItemId(
+		props.node?.name ?? '',
+		props.runIndex || 0,
+		props.outputIndex || 0,
+		itemIndex,
+	);
+	if (!hoveringItem.value || !pairedItemMappings.value[itemNodeId]) {
+		return false;
+	}
+
+	const hoveringItemId = getPairedItemId(
+		hoveringItem.value.nodeName,
+		hoveringItem.value.runIndex,
+		hoveringItem.value.outputIndex,
+		hoveringItem.value.itemIndex,
+	);
+	return pairedItemMappings.value[itemNodeId].has(hoveringItemId);
+}
+
+function onMouseEnterCell(e: MouseEvent) {
+	const target = e.target;
+	if (target && props.mappingEnabled) {
+		const col = (target as HTMLElement).dataset.col;
+		if (col && !isNaN(parseInt(col, 10))) {
+			activeColumn.value = parseInt(col, 10);
+		}
+	}
+
+	if (target) {
+		const row = (target as HTMLElement).dataset.row;
+		if (row && !isNaN(parseInt(row, 10))) {
+			activeRow.value = parseInt(row, 10);
+			emit('activeRowChanged', props.pageOffset + activeRow.value);
+		}
+	}
+}
+
+function onMouseLeaveCell() {
+	activeColumn.value = -1;
+	activeRow.value = null;
+	emit('activeRowChanged', null);
+}
+
+function onMouseEnterKey(path: Array<string | number>, colIndex: number) {
+	hoveringPath.value = getCellExpression(path, colIndex);
+}
+
+function onMouseLeaveKey() {
+	hoveringPath.value = null;
+}
+
+function isHovering(path: Array<string | number>, colIndex: number) {
+	const expr = getCellExpression(path, colIndex);
+
+	return hoveringPath.value === expr;
+}
+
+function getExpression(column: string) {
+	if (!props.node) {
+		return '';
+	}
+
+	return getMappedExpression({
+		nodeName: props.node.name,
+		distanceFromActive: props.distanceFromActive,
+		path: [column],
+	});
+}
+
+function getPathNameFromTarget(el?: HTMLElement) {
+	if (!el) {
+		return '';
+	}
+	return el.dataset.name;
+}
+
+function getCellPathName(path: Array<string | number>, colIndex: number) {
+	const lastKey = path[path.length - 1];
+	if (typeof lastKey === 'string') {
+		return lastKey;
+	}
+	if (path.length > 1) {
+		const prevKey = path[path.length - 2];
+		return `${prevKey}[${lastKey}]`;
+	}
+	const column = tableData.value.columns[colIndex];
+	return `${column}[${lastKey}]`;
+}
+
+function getCellExpression(path: Array<string | number>, colIndex: number) {
+	if (!props.node) {
+		return '';
+	}
+	const column = tableData.value.columns[colIndex];
+	return getMappedExpression({
+		nodeName: props.node.name,
+		distanceFromActive: props.distanceFromActive,
+		path: [column, ...path],
+	});
+}
+
+function isEmpty(value: unknown): boolean {
+	return (
+		value === '' ||
+		(Array.isArray(value) && value.length === 0) ||
+		(typeof value === 'object' && value !== null && Object.keys(value).length === 0) ||
+		value === null ||
+		value === undefined
+	);
+}
+
+function getValueToRender(value: unknown): string {
+	if (value === '') {
+		return i18n.baseText('runData.emptyString');
+	}
+	if (typeof value === 'string') {
+		return value;
+	}
+	if (Array.isArray(value) && value.length === 0) {
+		return i18n.baseText('runData.emptyArray');
+	}
+	if (typeof value === 'object' && value !== null && Object.keys(value).length === 0) {
+		return i18n.baseText('runData.emptyObject');
+	}
+	if (value === null || value === undefined) {
+		return `[${value}]`;
+	}
+	if (value === true || value === false || typeof value === 'number') {
+		return value.toString();
+	}
+	return JSON.stringify(value);
+}
+
+function onDragStart() {
+	draggedColumn.value = true;
+	ndvStore.resetMappingTelemetry();
+}
+
+function onCellDragStart(el: HTMLElement) {
+	if (el?.dataset.value) {
+		draggingPath.value = el.dataset.value;
+	}
+
+	onDragStart();
+}
+
+function onCellDragEnd(el: HTMLElement) {
+	draggingPath.value = null;
+
+	onDragEnd(el.dataset.name ?? '', 'tree', el.dataset.depth ?? '0');
+}
+
+function isDraggingKey(path: Array<string | number>, colIndex: number) {
+	if (!draggingPath.value) {
+		return;
+	}
+
+	return draggingPath.value === getCellExpression(path, colIndex);
+}
+
+function onDragEnd(column: string, src: string, depth = '0') {
+	setTimeout(() => {
+		const mappingTelemetry = ndvStore.mappingTelemetry;
+		const telemetryPayload = {
+			src_node_type: props.node.type,
+			src_field_name: column,
+			src_nodes_back: props.distanceFromActive,
+			src_run_index: props.runIndex,
+			src_runs_total: props.totalRuns,
+			src_field_nest_level: parseInt(depth, 10),
+			src_view: 'table',
+			src_element: src,
+			success: false,
+			...mappingTelemetry,
+		};
+
+		void externalHooks.run('runDataTable.onDragEnd', telemetryPayload);
+
+		telemetry.track('User dragged data for mapping', telemetryPayload, {
+			withPostHog: true,
+		});
+	}, 1000); // ensure dest data gets set if drop
+}
+
+function isSimple(data: GenericValue): data is string | number | boolean | null | undefined {
+	return (
+		typeof data !== 'object' ||
+		data === null ||
+		(Array.isArray(data) && data.length === 0) ||
+		(typeof data === 'object' && Object.keys(data).length === 0)
+	);
+}
+
+function isObject(data: GenericValue): data is Record<string, unknown> {
+	return !isSimple(data);
+}
+
+function hasJsonInColumn(colIndex: number): boolean {
+	return tableData.value.hasJson[tableData.value.columns[colIndex]];
+}
+
+function convertToTable(inputData: INodeExecutionData[]): ITableData {
+	const resultTableData: GenericValue[][] = [];
+	const tableColumns: string[] = [];
+	let leftEntryColumns: string[], entryRows: GenericValue[];
+	// Go over all entries
+	let entry: IDataObject;
+	const hasJson: { [key: string]: boolean } = {};
+	inputData.forEach((data) => {
+		if (!data.hasOwnProperty('json')) {
+			return;
+		}
+		entry = data.json;
+
+		// Go over all keys of entry
+		entryRows = [];
+		const entryColumns = Object.keys(entry || {});
+
+		if (entryColumns.length > MAX_COLUMNS_LIMIT) {
+			columnLimitExceeded.value = true;
+			leftEntryColumns = entryColumns.slice(0, MAX_COLUMNS_LIMIT);
+		} else {
+			leftEntryColumns = entryColumns;
+		}
+
+		// Go over all the already existing column-keys
+		tableColumns.forEach((key) => {
+			if (entry.hasOwnProperty(key)) {
+				// Entry does have key so add its value
+				entryRows.push(entry[key]);
+				// Remove key so that we know that it got added
+				leftEntryColumns.splice(leftEntryColumns.indexOf(key), 1);
+
+				hasJson[key] =
+					hasJson[key] ||
+					(typeof entry[key] === 'object' && Object.keys(entry[key] ?? {}).length > 0) ||
+					false;
+			} else {
+				// Entry does not have key so add undefined
+				entryRows.push(undefined);
 			}
+		});
 
-			if (target) {
-				const row = (target as HTMLElement).dataset.row;
-				if (row && !isNaN(parseInt(row, 10))) {
-					this.activeRow = parseInt(row, 10);
-					this.$emit('activeRowChanged', this.pageOffset + this.activeRow);
-				}
-			}
-		},
-		onMouseLeaveCell() {
-			this.activeColumn = -1;
-			this.activeRow = null;
-			this.$emit('activeRowChanged', null);
-		},
-		onMouseEnterKey(path: string[], colIndex: number) {
-			this.hoveringPath = this.getCellExpression(path, colIndex);
-		},
-		onMouseLeaveKey() {
-			this.hoveringPath = null;
-		},
-		isHovering(path: string[], colIndex: number) {
-			const expr = this.getCellExpression(path, colIndex);
+		// Go over all the columns the entry has but did not exist yet
+		leftEntryColumns.forEach((key) => {
+			// Add the key for all runs in the future
+			tableColumns.push(key);
+			// Add the value
+			entryRows.push(entry[key]);
+			hasJson[key] =
+				hasJson[key] ||
+				(typeof entry[key] === 'object' && Object.keys(entry[key] ?? {}).length > 0) ||
+				false;
+		});
 
-			return this.hoveringPath === expr;
-		},
-		getExpression(column: string) {
-			if (!this.node) {
-				return '';
-			}
+		// Add the data of the entry
+		resultTableData.push(entryRows);
+	});
 
-			return getMappedExpression({
-				nodeName: this.node.name,
-				distanceFromActive: this.distanceFromActive,
-				path: [column],
-			});
-		},
-		getPathNameFromTarget(el?: HTMLElement) {
-			if (!el) {
-				return '';
-			}
-			return el.dataset.name;
-		},
-		getCellPathName(path: Array<string | number>, colIndex: number) {
-			const lastKey = path[path.length - 1];
-			if (typeof lastKey === 'string') {
-				return lastKey;
-			}
-			if (path.length > 1) {
-				const prevKey = path[path.length - 2];
-				return `${prevKey}[${lastKey}]`;
-			}
-			const column = this.tableData.columns[colIndex];
-			return `${column}[${lastKey}]`;
-		},
-		getCellExpression(path: Array<string | number>, colIndex: number) {
-			if (!this.node) {
-				return '';
-			}
-			const column = this.tableData.columns[colIndex];
-			return getMappedExpression({
-				nodeName: this.node.name,
-				distanceFromActive: this.distanceFromActive,
-				path: [column, ...path],
-			});
-		},
-		isEmpty(value: unknown): boolean {
-			return (
-				value === '' ||
-				(Array.isArray(value) && value.length === 0) ||
-				(typeof value === 'object' && value !== null && Object.keys(value).length === 0) ||
-				value === null ||
-				value === undefined
-			);
-		},
-		getValueToRender(value: unknown): string {
-			if (value === '') {
-				return this.$locale.baseText('runData.emptyString');
-			}
-			if (typeof value === 'string') {
-				return value;
-			}
-			if (Array.isArray(value) && value.length === 0) {
-				return this.$locale.baseText('runData.emptyArray');
-			}
-			if (typeof value === 'object' && value !== null && Object.keys(value).length === 0) {
-				return this.$locale.baseText('runData.emptyObject');
-			}
-			if (value === null || value === undefined) {
-				return `[${value}]`;
-			}
-			if (value === true || value === false || typeof value === 'number') {
-				return value.toString();
-			}
-			return JSON.stringify(value);
-		},
-		onDragStart() {
-			this.draggedColumn = true;
-			this.ndvStore.resetMappingTelemetry();
-		},
-		onCellDragStart(el: HTMLElement) {
-			if (el?.dataset.value) {
-				this.draggingPath = el.dataset.value;
-			}
+	// Make sure that all entry-rows have the same length
+	resultTableData.forEach((rows) => {
+		if (tableColumns.length > rows.length) {
+			// Has fewer entries so add the missing ones
+			rows.push(...new Array(tableColumns.length - rows.length));
+		}
+	});
 
-			this.onDragStart();
+	return {
+		hasJson,
+		columns: tableColumns,
+		data: resultTableData,
+	};
+}
+
+function switchToJsonView() {
+	emit('displayModeChange', 'json');
+}
+
+watch(focusedMappableInput, (curr) => {
+	setTimeout(
+		() => {
+			forceShowGrip.value = !!focusedMappableInput.value;
 		},
-		onCellDragEnd(el: HTMLElement) {
-			this.draggingPath = null;
-
-			this.onDragEnd(el.dataset.name || '', 'tree', el.dataset.depth || '0');
-		},
-		isDraggingKey(path: Array<string | number>, colIndex: number) {
-			if (!this.draggingPath) {
-				return;
-			}
-
-			return this.draggingPath === this.getCellExpression(path, colIndex);
-		},
-		onDragEnd(column: string, src: string, depth = '0') {
-			setTimeout(() => {
-				const mappingTelemetry = this.ndvStore.mappingTelemetry;
-				const telemetryPayload = {
-					src_node_type: this.node.type,
-					src_field_name: column,
-					src_nodes_back: this.distanceFromActive,
-					src_run_index: this.runIndex,
-					src_runs_total: this.totalRuns,
-					src_field_nest_level: parseInt(depth, 10),
-					src_view: 'table',
-					src_element: src,
-					success: false,
-					...mappingTelemetry,
-				};
-
-				void this.externalHooks.run('runDataTable.onDragEnd', telemetryPayload);
-
-				this.$telemetry.track('User dragged data for mapping', telemetryPayload, {
-					withPostHog: true,
-				});
-			}, 1000); // ensure dest data gets set if drop
-		},
-		isSimple(data: unknown): boolean {
-			return (
-				typeof data !== 'object' ||
-				data === null ||
-				(Array.isArray(data) && data.length === 0) ||
-				(typeof data === 'object' && Object.keys(data).length === 0)
-			);
-		},
-		hasJsonInColumn(colIndex: number): boolean {
-			return this.tableData.hasJson[this.tableData.columns[colIndex]];
-		},
-		convertToTable(inputData: INodeExecutionData[]): ITableData {
-			const tableData: GenericValue[][] = [];
-			const tableColumns: string[] = [];
-			let leftEntryColumns: string[], entryRows: GenericValue[];
-			// Go over all entries
-			let entry: IDataObject;
-			const hasJson: { [key: string]: boolean } = {};
-			inputData.forEach((data) => {
-				if (!data.hasOwnProperty('json')) {
-					return;
-				}
-				entry = data.json;
-
-				// Go over all keys of entry
-				entryRows = [];
-				const entryColumns = Object.keys(entry || {});
-
-				if (entryColumns.length > MAX_COLUMNS_LIMIT) {
-					this.columnLimitExceeded = true;
-					leftEntryColumns = entryColumns.slice(0, MAX_COLUMNS_LIMIT);
-				} else {
-					leftEntryColumns = entryColumns;
-				}
-
-				// Go over all the already existing column-keys
-				tableColumns.forEach((key) => {
-					if (entry.hasOwnProperty(key)) {
-						// Entry does have key so add its value
-						entryRows.push(entry[key]);
-						// Remove key so that we know that it got added
-						leftEntryColumns.splice(leftEntryColumns.indexOf(key), 1);
-
-						hasJson[key] =
-							hasJson[key] ||
-							(typeof entry[key] === 'object' && Object.keys(entry[key] || {}).length > 0) ||
-							false;
-					} else {
-						// Entry does not have key so add undefined
-						entryRows.push(undefined);
-					}
-				});
-
-				// Go over all the columns the entry has but did not exist yet
-				leftEntryColumns.forEach((key) => {
-					// Add the key for all runs in the future
-					tableColumns.push(key);
-					// Add the value
-					entryRows.push(entry[key]);
-					hasJson[key] =
-						hasJson[key] ||
-						(typeof entry[key] === 'object' && Object.keys(entry[key] || {}).length > 0) ||
-						false;
-				});
-
-				// Add the data of the entry
-				tableData.push(entryRows);
-			});
-
-			// Make sure that all entry-rows have the same length
-			tableData.forEach((entryRows) => {
-				if (tableColumns.length > entryRows.length) {
-					// Has fewer entries so add the missing ones
-					entryRows.push(...new Array(tableColumns.length - entryRows.length));
-				}
-			});
-
-			return {
-				hasJson,
-				columns: tableColumns,
-				data: tableData,
-			};
-		},
-		switchToJsonView() {
-			this.$emit('displayModeChange', 'json');
-		},
-	},
-	watch: {
-		focusedMappableInput(curr: boolean) {
-			setTimeout(
-				() => {
-					this.forceShowGrip = !!this.focusedMappableInput;
-				},
-				curr ? 300 : 150,
-			);
-		},
-	},
+		curr ? 300 : 150,
+	);
 });
 </script>
 
@@ -408,7 +406,7 @@ export default defineComponent({
 						@mouseenter="onMouseEnterCell"
 						@mouseleave="onMouseLeaveCell"
 					>
-						<n8n-info-tip>{{ $locale.baseText('runData.emptyItemHint') }}</n8n-info-tip>
+						<N8nInfoTip>{{ i18n.baseText('runData.emptyItemHint') }}</N8nInfoTip>
 					</td>
 					<td :class="$style.tableRightMargin"></td>
 				</tr>
@@ -418,11 +416,11 @@ export default defineComponent({
 			<thead>
 				<tr>
 					<th v-for="(column, i) in tableData.columns || []" :key="column">
-						<n8n-tooltip placement="bottom-start" :disabled="!mappingEnabled" :show-after="1000">
+						<N8nTooltip placement="bottom-start" :disabled="!mappingEnabled" :show-after="1000">
 							<template #content>
 								<div>
 									<img src="/static/data-mapping-gif.gif" />
-									{{ $locale.baseText('dataMapping.dragColumnToFieldHint') }}
+									{{ i18n.baseText('dataMapping.dragColumnToFieldHint') }}
 								</div>
 							</template>
 							<Draggable
@@ -455,17 +453,17 @@ export default defineComponent({
 									</div>
 								</template>
 							</Draggable>
-						</n8n-tooltip>
+						</N8nTooltip>
 					</th>
 					<th v-if="columnLimitExceeded" :class="$style.header">
-						<n8n-tooltip placement="bottom-end">
+						<N8nTooltip placement="bottom-end">
 							<template #content>
 								<div>
 									<i18n-t tag="span" keypath="dataMapping.tableView.tableColumnsExceeded.tooltip">
 										<template #columnLimit>{{ columnLimit }}</template>
 										<template #link>
 											<a @click="switchToJsonView">{{
-												$locale.baseText('dataMapping.tableView.tableColumnsExceeded.tooltip.link')
+												i18n.baseText('dataMapping.tableView.tableColumnsExceeded.tooltip.link')
 											}}</a>
 										</template>
 									</i18n-t>
@@ -476,15 +474,15 @@ export default defineComponent({
 									:class="$style['warningTooltip']"
 									icon="exclamation-triangle"
 								></font-awesome-icon>
-								{{ $locale.baseText('dataMapping.tableView.tableColumnsExceeded') }}
+								{{ i18n.baseText('dataMapping.tableView.tableColumnsExceeded') }}
 							</span>
-						</n8n-tooltip>
+						</N8nTooltip>
 					</th>
 					<th :class="$style.tableRightMargin"></th>
 				</tr>
 			</thead>
 			<Draggable
-				ref="draggable"
+				ref="draggableRef"
 				tag="tbody"
 				type="mapping"
 				target-data-key="mappable"
@@ -519,7 +517,7 @@ export default defineComponent({
 							:search="search"
 							:class="{ [$style.value]: true, [$style.empty]: isEmpty(data) }"
 						/>
-						<n8n-tree v-else :node-class="$style.nodeClass" :value="data">
+						<N8nTree v-else-if="isObject(data)" :node-class="$style.nodeClass" :value="data">
 							<template #label="{ label, path }">
 								<span
 									:class="{
@@ -534,9 +532,10 @@ export default defineComponent({
 									:data-depth="path.length"
 									@mouseenter="() => onMouseEnterKey(path, index2)"
 									@mouseleave="onMouseLeaveKey"
-									>{{ label || $locale.baseText('runData.unnamedField') }}</span
+									>{{ label || i18n.baseText('runData.unnamedField') }}</span
 								>
 							</template>
+
 							<template #value="{ value }">
 								<TextWithHighlights
 									:content="getValueToRender(value)"
@@ -544,7 +543,7 @@ export default defineComponent({
 									:class="{ [$style.nestedValue]: true, [$style.empty]: isEmpty(value) }"
 								/>
 							</template>
-						</n8n-tree>
+						</N8nTree>
 					</td>
 					<td v-if="columnLimitExceeded"></td>
 					<td :class="$style.tableRightMargin"></td>

packages/editor-ui/src/components/TextEdit.vue

@@ -68,7 +68,7 @@ const closeDialog = () => {
 				.inputLabelDisplayName(parameter, path)}`"
 			:before-close="closeDialog"
 		>
-			<div class="ignore-key-press">
+			<div class="ignore-key-press-canvas">
 				<n8n-input-label :label="$locale.nodeText().inputLabelDisplayName(parameter, path)">
 					<div @keydown.stop @keydown.esc="onKeyDownEsc">
 						<n8n-input

packages/editor-ui/src/components/WorkflowLMChat/WorkflowLMChat.vue

@@ -536,7 +536,7 @@ onMounted(() => {
 				data-test-id="workflow-lm-chat-dialog"
 				:style="messageVars"
 			>
-				<MessagesList :messages="messages" :class="[$style.messages, 'ignore-key-press']">
+				<MessagesList :messages="messages" :class="[$style.messages, 'ignore-key-press-canvas']">
 					<template #beforeMessage="{ message }">
 						<MessageOptionTooltip
 							v-if="message.sender === 'bot' && !message.id.includes('preload')"

packages/editor-ui/src/components/WorkflowSettings.vue

@@ -486,7 +486,7 @@ onMounted(async () => {
 					<el-col :span="10" class="setting-name">
 						{{ $locale.baseText('workflowSettings.executionOrder') + ':' }}
 					</el-col>
-					<el-col :span="14" class="ignore-key-press">
+					<el-col :span="14" class="ignore-key-press-canvas">
 						<n8n-select
 							v-model="workflowSettings.executionOrder"
 							placeholder="Select Execution Order"
@@ -517,7 +517,7 @@ onMounted(async () => {
 							<font-awesome-icon icon="question-circle" />
 						</n8n-tooltip>
 					</el-col>
-					<el-col :span="14" class="ignore-key-press">
+					<el-col :span="14" class="ignore-key-press-canvas">
 						<n8n-select
 							v-model="workflowSettings.errorWorkflow"
 							placeholder="Select Workflow"
@@ -548,7 +548,7 @@ onMounted(async () => {
 							</n8n-tooltip>
 						</el-col>
 
-						<el-col :span="14" class="ignore-key-press">
+						<el-col :span="14" class="ignore-key-press-canvas">
 							<n8n-select
 								v-model="workflowSettings.callerPolicy"
 								:disabled="readOnlyEnv || !workflowPermissions.update"
@@ -598,7 +598,7 @@ onMounted(async () => {
 							<font-awesome-icon icon="question-circle" />
 						</n8n-tooltip>
 					</el-col>
-					<el-col :span="14" class="ignore-key-press">
+					<el-col :span="14" class="ignore-key-press-canvas">
 						<n8n-select
 							v-model="workflowSettings.timezone"
 							placeholder="Select Timezone"
@@ -627,7 +627,7 @@ onMounted(async () => {
 							<font-awesome-icon icon="question-circle" />
 						</n8n-tooltip>
 					</el-col>
-					<el-col :span="14" class="ignore-key-press">
+					<el-col :span="14" class="ignore-key-press-canvas">
 						<n8n-select
 							v-model="workflowSettings.saveDataErrorExecution"
 							:placeholder="$locale.baseText('workflowSettings.selectOption')"
@@ -656,7 +656,7 @@ onMounted(async () => {
 							<font-awesome-icon icon="question-circle" />
 						</n8n-tooltip>
 					</el-col>
-					<el-col :span="14" class="ignore-key-press">
+					<el-col :span="14" class="ignore-key-press-canvas">
 						<n8n-select
 							v-model="workflowSettings.saveDataSuccessExecution"
 							:placeholder="$locale.baseText('workflowSettings.selectOption')"
@@ -685,7 +685,7 @@ onMounted(async () => {
 							<font-awesome-icon icon="question-circle" />
 						</n8n-tooltip>
 					</el-col>
-					<el-col :span="14" class="ignore-key-press">
+					<el-col :span="14" class="ignore-key-press-canvas">
 						<n8n-select
 							v-model="workflowSettings.saveManualExecutions"
 							:placeholder="$locale.baseText('workflowSettings.selectOption')"
@@ -714,7 +714,7 @@ onMounted(async () => {
 							<font-awesome-icon icon="question-circle" />
 						</n8n-tooltip>
 					</el-col>
-					<el-col :span="14" class="ignore-key-press">
+					<el-col :span="14" class="ignore-key-press-canvas">
 						<n8n-select
 							v-model="workflowSettings.saveExecutionProgress"
 							:placeholder="$locale.baseText('workflowSettings.selectOption')"

packages/editor-ui/src/composables/useClipboard.ts

@@ -14,7 +14,7 @@ export function useClipboard(
 	const { debounce } = useDebounce();
 	const { copy, copied, isSupported, text } = useClipboardCore({ legacy: true });
 
-	const ignoreClasses = ['el-messsage-box', 'ignore-key-press'];
+	const ignoreClasses = ['el-messsage-box', 'ignore-key-press-canvas'];
 	const initialized = ref(false);
 
 	const onPasteCallback = ref<ClipboardEventFn | null>(options.onPaste || null);

packages/editor-ui/src/composables/useKeybindings.ts

@@ -22,7 +22,7 @@ export const useKeybindings = (
 		const active = activeElement.value;
 		const isInput = ['INPUT', 'TEXTAREA'].includes(active.tagName);
 		const isContentEditable = active.closest('[contenteditable]') !== null;
-		const isIgnoreClass = active.closest('.ignore-key-press') !== null;
+		const isIgnoreClass = active.closest('.ignore-key-press-canvas') !== null;
 
 		return isInput || isContentEditable || isIgnoreClass;
 	});

packages/editor-ui/src/constants.ts

@@ -221,6 +221,8 @@ export const NODES_USING_CODE_NODE_EDITOR = [
 	AI_TRANSFORM_NODE_TYPE,
 ];
 
+export const NODE_POSITION_CONFLICT_ALLOWLIST = [STICKY_NODE_TYPE];
+
 export const PIN_DATA_NODE_TYPES_DENYLIST = [SPLIT_IN_BATCHES_NODE_TYPE, STICKY_NODE_TYPE];
 
 export const OPEN_URL_PANEL_TRIGGER_NODE_TYPES = [

packages/editor-ui/src/utils/nodeViewUtils.test.ts

@@ -1,10 +1,12 @@
-import { generateOffsets, getGenericHints } from './nodeViewUtils';
+import { generateOffsets, getGenericHints, getNewNodePosition } from './nodeViewUtils';
 import type { INode, INodeTypeDescription, INodeExecutionData, Workflow } from 'n8n-workflow';
-import type { INodeUi } from '@/Interface';
+import type { INodeUi, XYPosition } from '@/Interface';
 import { NodeHelpers } from 'n8n-workflow';
 
 import { describe, it, expect, beforeEach } from 'vitest';
 import { mock, type MockProxy } from 'vitest-mock-extended';
+import { SET_NODE_TYPE, STICKY_NODE_TYPE } from '@/constants';
+import { createTestNode } from '@/__tests__/mocks';
 
 describe('getGenericHints', () => {
 	let mockWorkflowNode: MockProxy<INode>;
@@ -169,3 +171,57 @@ describe('generateOffsets', () => {
 		expect(result).toEqual([-580, -460, -340, -220, -100, 100, 220, 340, 460, 580]);
 	});
 });
+
+describe('getNewNodePosition', () => {
+	it('should return the new position when there are no conflicts', () => {
+		const nodes: INodeUi[] = [];
+		const newPosition: XYPosition = [100, 100];
+		const result = getNewNodePosition(nodes, newPosition);
+		expect(result).toEqual([100, 100]);
+	});
+
+	it('should adjust the position to the closest grid size', () => {
+		const nodes: INodeUi[] = [];
+		const newPosition: XYPosition = [105, 115];
+		const result = getNewNodePosition(nodes, newPosition);
+		expect(result).toEqual([120, 120]);
+	});
+
+	it('should move the position to avoid conflicts', () => {
+		const nodes: INodeUi[] = [
+			createTestNode({ id: '1', position: [100, 100], type: SET_NODE_TYPE }),
+		];
+		const newPosition: XYPosition = [100, 100];
+		const result = getNewNodePosition(nodes, newPosition);
+		expect(result).toEqual([180, 180]);
+	});
+
+	it('should skip nodes in the conflict allowlist', () => {
+		const nodes: INodeUi[] = [
+			createTestNode({ id: '1', position: [100, 100], type: STICKY_NODE_TYPE }),
+		];
+		const newPosition: XYPosition = [100, 100];
+		const result = getNewNodePosition(nodes, newPosition);
+		expect(result).toEqual([100, 100]);
+	});
+
+	it('should use the provided move position to resolve conflicts', () => {
+		const nodes: INodeUi[] = [
+			createTestNode({ id: '1', position: [100, 100], type: SET_NODE_TYPE }),
+		];
+		const newPosition: XYPosition = [100, 100];
+		const movePosition: XYPosition = [50, 50];
+		const result = getNewNodePosition(nodes, newPosition, movePosition);
+		expect(result).toEqual([200, 200]);
+	});
+
+	it('should handle multiple conflicts correctly', () => {
+		const nodes: INodeUi[] = [
+			createTestNode({ id: '1', position: [100, 100], type: SET_NODE_TYPE }),
+			createTestNode({ id: '2', position: [140, 140], type: SET_NODE_TYPE }),
+		];
+		const newPosition: XYPosition = [100, 100];
+		const result = getNewNodePosition(nodes, newPosition);
+		expect(result).toEqual([220, 220]);
+	});
+});

packages/editor-ui/src/utils/nodeViewUtils.ts

@@ -2,6 +2,7 @@ import { isNumber, isValidNodeConnectionType } from '@/utils/typeGuards';
 import {
 	LIST_LIKE_NODE_OPERATIONS,
 	NODE_OUTPUT_DEFAULT_KEY,
+	NODE_POSITION_CONFLICT_ALLOWLIST,
 	SET_NODE_TYPE,
 	SPLIT_IN_BATCHES_NODE_TYPE,
 	STICKY_NODE_TYPE,
@@ -582,6 +583,11 @@ export const getNewNodePosition = (
 		conflictFound = false;
 		for (i = 0; i < nodes.length; i++) {
 			node = nodes[i];
+
+			if (NODE_POSITION_CONFLICT_ALLOWLIST.includes(node.type)) {
+				continue;
+			}
+
 			if (!canUsePosition(node.position, targetPosition)) {
 				conflictFound = true;
 				break;

packages/editor-ui/src/views/NodeView.vue

@@ -1268,7 +1268,7 @@ export default defineComponent({
 					element instanceof HTMLElement &&
 					element.className &&
 					typeof element.className === 'string' &&
-					element.className.includes('ignore-key-press')
+					element.className.includes('ignore-key-press-canvas')
 				) {
 					return;
 				}