feat(Loop Over Items (Split in Batches) Node): Automatically add a loop + rename (#7228)

Github issue / Community forum post (link here to close automatically): --------- Co-authored-by: Michael Kret <michael.k@radency.com>
2023-10-06 15:31:18 +02:00
parent afa683a06f
commit 7b773cc5cc
18 changed files with 584 additions and 221 deletions
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1652,3 +1652,27 @@ export type N8nBanners = {
 		component: Component;
 	};
 };
+
+export type AddedNode = {
+	type: string;
+	openDetail?: boolean;
+	isAutoAdd?: boolean;
+	name?: string;
+	position?: XYPosition;
+};
+
+export type AddedNodeConnection = {
+	from: { nodeIndex: number; outputIndex?: number };
+	to: { nodeIndex: number; inputIndex?: number };
+};
+
+export type AddedNodesAndConnections = {
+	nodes: AddedNode[];
+	connections: AddedNodeConnection[];
+};
+
+export type ToggleNodeCreatorOptions = {
+	createNodeActive: boolean;
+	source?: NodeCreatorOpenSource;
+	nodeCreatorView?: string;
+};
--- a/packages/editor-ui/src/components/Node/NodeCreation.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreation.vue
@@ -1,8 +1,107 @@
+<script setup lang="ts">
+import { defineAsyncComponent, reactive } from 'vue';
+import { getMidCanvasPosition } from '@/utils/nodeViewUtils';
+import {
+	DEFAULT_STICKY_HEIGHT,
+	DEFAULT_STICKY_WIDTH,
+	NODE_CREATOR_OPEN_SOURCES,
+	STICKY_NODE_TYPE,
+} from '@/constants';
+import { useUIStore } from '@/stores/ui.store';
+import type { AddedNodesAndConnections, ToggleNodeCreatorOptions } from '@/Interface';
+import { useActions } from './NodeCreator/composables/useActions';
+
+type Props = {
+	nodeViewScale: number;
+	createNodeActive?: boolean;
+};
+
+// eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/no-unsafe-assignment
+const NodeCreator = defineAsyncComponent(
+	async () => import('@/components/Node/NodeCreator/NodeCreator.vue'),
+);
+
+const props = withDefaults(defineProps<Props>(), {
+	createNodeActive: false,
+});
+
+const emit = defineEmits<{
+	(event: 'addNodes', value: AddedNodesAndConnections): void;
+	(event: 'toggleNodeCreator', value: ToggleNodeCreatorOptions): void;
+}>();
+
+const state = reactive({
+	showStickyButton: false,
+});
+
+const uiStore = useUIStore();
+
+const { getAddedNodesAndConnections } = useActions();
+
+function onCreateMenuHoverIn(mouseinEvent: MouseEvent) {
+	const buttonsWrapper = mouseinEvent.target as Element;
+
+	// Once the popup menu is hovered, it's pointer events are disabled so it's not interfering with element underneath it.
+	state.showStickyButton = true;
+	const moveCallback = (mousemoveEvent: MouseEvent) => {
+		if (buttonsWrapper) {
+			const wrapperBounds = buttonsWrapper.getBoundingClientRect();
+			const wrapperH = wrapperBounds.height;
+			const wrapperW = wrapperBounds.width;
+			const wrapperLeftNear = wrapperBounds.left;
+			const wrapperLeftFar = wrapperLeftNear + wrapperW;
+			const wrapperTopNear = wrapperBounds.top;
+			const wrapperTopFar = wrapperTopNear + wrapperH;
+			const inside =
+				mousemoveEvent.pageX > wrapperLeftNear &&
+				mousemoveEvent.pageX < wrapperLeftFar &&
+				mousemoveEvent.pageY > wrapperTopNear &&
+				mousemoveEvent.pageY < wrapperTopFar;
+			if (!inside) {
+				state.showStickyButton = false;
+				document.removeEventListener('mousemove', moveCallback, false);
+			}
+		}
+	};
+	document.addEventListener('mousemove', moveCallback, false);
+}
+
+function openNodeCreator() {
+	emit('toggleNodeCreator', {
+		source: NODE_CREATOR_OPEN_SOURCES.ADD_NODE_BUTTON,
+		createNodeActive: true,
+	});
+}
+
+function addStickyNote() {
+	if (document.activeElement) {
+		(document.activeElement as HTMLElement).blur();
+	}
+
+	const offset: [number, number] = [...uiStore.nodeViewOffsetPosition];
+
+	const position = getMidCanvasPosition(props.nodeViewScale, offset);
+	position[0] -= DEFAULT_STICKY_WIDTH / 2;
+	position[1] -= DEFAULT_STICKY_HEIGHT / 2;
+
+	emit('addNodes', getAddedNodesAndConnections([{ type: STICKY_NODE_TYPE, position }]));
+}
+
+function closeNodeCreator() {
+	emit('toggleNodeCreator', { createNodeActive: false });
+}
+
+function nodeTypeSelected(nodeTypes: string[]) {
+	emit('addNodes', getAddedNodesAndConnections(nodeTypes.map((type) => ({ type }))));
+	closeNodeCreator();
+}
+</script>
+
 <template>
 	<div>
 		<div
 			v-if="!createNodeActive"
-			:class="[$style.nodeButtonsWrapper, showStickyButton ? $style.noEvents : '']"
+			:class="[$style.nodeButtonsWrapper, state.showStickyButton ? $style.noEvents : '']"
 			@mouseenter="onCreateMenuHoverIn"
 		>
 			<div :class="$style.nodeCreatorButton" data-test-id="node-creator-plus-button">
@@ -15,7 +114,7 @@
 					:title="$locale.baseText('nodeView.addNode')"
 				/>
 				<div
-					:class="[$style.addStickyButton, showStickyButton ? $style.visibleButton : '']"
+					:class="[$style.addStickyButton, state.showStickyButton ? $style.visibleButton : '']"
 					@click="addStickyNote"
 					data-test-id="add-sticky-button"
 				>
@@ -37,111 +136,6 @@
 	</div>
 </template>

-<script lang="ts">
-import { defineAsyncComponent, defineComponent } from 'vue';
-import { getMidCanvasPosition } from '@/utils/nodeViewUtils';
-import {
-	DEFAULT_STICKY_HEIGHT,
-	DEFAULT_STICKY_WIDTH,
-	NODE_CREATOR_OPEN_SOURCES,
-	STICKY_NODE_TYPE,
-} from '@/constants';
-import { mapStores } from 'pinia';
-import { useUIStore } from '@/stores/ui.store';
-
-const NodeCreator = defineAsyncComponent(
-	async () => import('@/components/Node/NodeCreator/NodeCreator.vue'),
-);
-
-export default defineComponent({
-	name: 'node-creation',
-	components: {
-		NodeCreator,
-	},
-	props: {
-		nodeViewScale: {
-			type: Number,
-			required: true,
-		},
-		createNodeActive: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	data() {
-		return {
-			showStickyButton: false,
-		};
-	},
-	computed: {
-		...mapStores(useUIStore),
-	},
-	methods: {
-		onCreateMenuHoverIn(mouseinEvent: MouseEvent) {
-			const buttonsWrapper = mouseinEvent.target as Element;
-
-			// Once the popup menu is hovered, it's pointer events are disabled so it's not interfering with element underneath it.
-			this.showStickyButton = true;
-			const moveCallback = (mousemoveEvent: MouseEvent) => {
-				if (buttonsWrapper) {
-					const wrapperBounds = buttonsWrapper.getBoundingClientRect();
-					const wrapperH = wrapperBounds.height;
-					const wrapperW = wrapperBounds.width;
-					const wrapperLeftNear = wrapperBounds.left;
-					const wrapperLeftFar = wrapperLeftNear + wrapperW;
-					const wrapperTopNear = wrapperBounds.top;
-					const wrapperTopFar = wrapperTopNear + wrapperH;
-					const inside =
-						mousemoveEvent.pageX > wrapperLeftNear &&
-						mousemoveEvent.pageX < wrapperLeftFar &&
-						mousemoveEvent.pageY > wrapperTopNear &&
-						mousemoveEvent.pageY < wrapperTopFar;
-					if (!inside) {
-						this.showStickyButton = false;
-						document.removeEventListener('mousemove', moveCallback, false);
-					}
-				}
-			};
-			document.addEventListener('mousemove', moveCallback, false);
-		},
-		openNodeCreator() {
-			this.$emit('toggleNodeCreator', {
-				source: NODE_CREATOR_OPEN_SOURCES.ADD_NODE_BUTTON,
-				createNodeActive: true,
-			});
-		},
-		addStickyNote() {
-			if (document.activeElement) {
-				(document.activeElement as HTMLElement).blur();
-			}
-
-			const offset: [number, number] = [...this.uiStore.nodeViewOffsetPosition];
-
-			const position = getMidCanvasPosition(this.nodeViewScale, offset);
-			position[0] -= DEFAULT_STICKY_WIDTH / 2;
-			position[1] -= DEFAULT_STICKY_HEIGHT / 2;
-
-			this.$emit('addNode', [
-				{
-					nodeTypeName: STICKY_NODE_TYPE,
-					position,
-				},
-			]);
-		},
-		closeNodeCreator() {
-			this.$emit('toggleNodeCreator', { createNodeActive: false });
-		},
-		nodeTypeSelected(nodeTypeNames: string[]) {
-			this.$emit(
-				'addNode',
-				nodeTypeNames.map((nodeTypeName) => ({ nodeTypeName })),
-			);
-			this.closeNodeCreator();
-		},
-	},
-});
-</script>
-
 <style lang="scss" module>
 .nodeButtonsWrapper {
 	position: absolute;
--- a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/ActionItem.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/ActionItem.vue
@@ -23,7 +23,7 @@
 <script setup lang="ts">
 import { reactive, computed, toRefs, getCurrentInstance } from 'vue';
 import type { ActionTypeDescription, SimplifiedNodeType } from '@/Interface';
-import { WEBHOOK_NODE_TYPE } from '@/constants';
+import { WEBHOOK_NODE_TYPE, DRAG_EVENT_DATA_KEY } from '@/constants';

 import { getNewNodePosition, NODE_SIZE } from '@/utils/nodeViewUtils';
 import NodeIcon from '@/components/NodeIcon.vue';
@@ -41,7 +41,7 @@ const props = defineProps<Props>();
 const instance = getCurrentInstance();
 const telemetry = instance?.proxy.$telemetry;

-const { getActionData, getNodeTypesWithManualTrigger, setAddedNodeActionParameters } = useActions();
+const { getActionData, getAddedNodesAndConnections, setAddedNodeActionParameters } = useActions();
 const { activeViewStack } = useViewStacks();

 const state = reactive({
@@ -72,13 +72,13 @@ function onDragStart(event: DragEvent): void {
 	 */
 	document.body.addEventListener('dragover', onDragOver);
 	const { pageX: x, pageY: y } = event;
-	if (event.dataTransfer) {
+	if (event.dataTransfer && actionData.value.key) {
 		event.dataTransfer.effectAllowed = 'copy';
 		event.dataTransfer.dropEffect = 'copy';
 		event.dataTransfer.setDragImage(state.draggableDataTransfer as Element, 0, 0);
 		event.dataTransfer.setData(
-			'nodeTypeName',
-			getNodeTypesWithManualTrigger(actionData.value?.key).join(','),
+			DRAG_EVENT_DATA_KEY,
+			JSON.stringify(getAddedNodesAndConnections([{ type: actionData.value.key }])),
 		);
 		if (telemetry) {
 			state.storeWatcher = setAddedNodeActionParameters(
--- a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/NodeItem.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/NodeItem.vue
@@ -42,7 +42,11 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import type { SimplifiedNodeType } from '@/Interface';
-import { COMMUNITY_NODES_INSTALLATION_DOCS_URL, DEFAULT_SUBCATEGORY } from '@/constants';
+import {
+	COMMUNITY_NODES_INSTALLATION_DOCS_URL,
+	DEFAULT_SUBCATEGORY,
+	DRAG_EVENT_DATA_KEY,
+} from '@/constants';

 import { isCommunityPackageName } from '@/utils';
 import { getNewNodePosition, NODE_SIZE } from '@/utils/nodeViewUtils';
@@ -67,7 +71,7 @@ const i18n = useI18n();
 const telemetry = useTelemetry();

 const { actions } = useNodeCreatorStore();
-const { getNodeTypesWithManualTrigger } = useActions();
+const { getAddedNodesAndConnections } = useActions();

 const dragging = ref(false);
 const draggablePosition = ref({ x: -100, y: -100 });
@@ -140,8 +144,8 @@ function onDragStart(event: DragEvent): void {
 		event.dataTransfer.dropEffect = 'copy';
 		event.dataTransfer.setDragImage(draggableDataTransfer.value as Element, 0, 0);
 		event.dataTransfer.setData(
-			'nodeTypeName',
-			getNodeTypesWithManualTrigger(props.nodeType.name).join(','),
+			DRAG_EVENT_DATA_KEY,
+			JSON.stringify(getAddedNodesAndConnections([{ type: props.nodeType.name }])),
 		);
 	}

--- a/packages/editor-ui/src/components/Node/NodeCreator/Modes/ActionsMode.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/Modes/ActionsMode.vue
@@ -147,7 +147,7 @@ function onSelected(actionCreateElement: INodeCreateElement) {

 		emit('nodeTypeSelected', [actionData.key as string, actionNode]);
 	} else {
-		emit('nodeTypeSelected', getNodeTypesWithManualTrigger(actionData.key));
+		emit('nodeTypeSelected', [actionData.key as string]);
 	}

 	if (telemetry) setAddedNodeActionParameters(actionData, telemetry, rootView.value);
--- a/packages/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue
@@ -18,7 +18,6 @@ import { useNodeCreatorStore } from '@/stores/nodeCreator.store';
 import { TriggerView, RegularView, AIView, AINodesView } from '../viewsData';
 import { transformNodeType } from '../utils';
 import { useViewStacks } from '../composables/useViewStacks';
-import { useActions } from '../composables/useActions';
 import { useKeyboardNavigation } from '../composables/useKeyboardNavigation';
 import ItemsRenderer from '../Renderers/ItemsRenderer.vue';
 import CategorizedItemsRenderer from '../Renderers/CategorizedItemsRenderer.vue';
@@ -38,7 +37,6 @@ const telemetry = useTelemetry();

 const { mergedNodes, actions } = useNodeCreatorStore();
 const { baseUrl } = useRootStore();
-const { getNodeTypesWithManualTrigger } = useActions();
 const { pushViewStack, popViewStack } = useViewStacks();

 const { registerKeyHook } = useKeyboardNavigation();
@@ -47,10 +45,7 @@ const activeViewStack = computed(() => useViewStacks().activeViewStack);
 const globalSearchItemsDiff = computed(() => useViewStacks().globalSearchItemsDiff);

 function selectNodeType(nodeTypes: string[]) {
-	emit(
-		'nodeTypeSelected',
-		nodeTypes.length === 1 ? getNodeTypesWithManualTrigger(nodeTypes[0]) : nodeTypes,
-	);
+	emit('nodeTypeSelected', nodeTypes);
 }

 function onSelected(item: INodeCreateElement) {
--- a/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
@@ -31,10 +31,11 @@ import { useKeyboardNavigation } from './composables/useKeyboardNavigation';
 import { useActionsGenerator } from './composables/useActionsGeneration';
 import NodesListPanel from './Panel/NodesListPanel.vue';
 import { useUIStore } from '@/stores';
+import { DRAG_EVENT_DATA_KEY } from '@/constants';

 export interface Props {
 	active?: boolean;
-	onNodeTypeSelected?: (nodeType: string) => void;
+	onNodeTypeSelected?: (nodeType: string[]) => void;
 }

 const props = defineProps<Props>();
@@ -93,12 +94,12 @@ function onDrop(event: DragEvent) {
 		return;
 	}

-	const nodeTypeName = event.dataTransfer.getData('nodeTypeName');
+	const dragData = event.dataTransfer.getData(DRAG_EVENT_DATA_KEY);
 	const nodeCreatorBoundingRect = (state.nodeCreator as Element).getBoundingClientRect();

 	// Abort drag end event propagation if dropped inside nodes panel
 	if (
-		nodeTypeName &&
+		dragData &&
 		event.pageX >= nodeCreatorBoundingRect.x &&
 		event.pageY >= nodeCreatorBoundingRect.y
 	) {
--- a/packages/editor-ui/src/components/Node/NodeCreator/tests/useActions.test.ts
+++ b/packages/editor-ui/src/components/Node/NodeCreator/tests/useActions.test.ts
@@ -0,0 +1,93 @@
+import { setActivePinia } from 'pinia';
+import { createTestingPinia } from '@pinia/testing';
+import { useNodeCreatorStore } from '@/stores/nodeCreator.store';
+import { useWorkflowsStore } from '@/stores/workflows.store';
+import { useActions } from '../composables/useActions';
+import {
+	HTTP_REQUEST_NODE_TYPE,
+	MANUAL_TRIGGER_NODE_TYPE,
+	NODE_CREATOR_OPEN_SOURCES,
+	NO_OP_NODE_TYPE,
+	SCHEDULE_TRIGGER_NODE_TYPE,
+	SPLIT_IN_BATCHES_NODE_TYPE,
+	TRIGGER_NODE_CREATOR_VIEW,
+} from '@/constants';
+
+describe('useActions', () => {
+	beforeAll(() => {
+		setActivePinia(createTestingPinia());
+	});
+
+	afterEach(() => {
+		vi.clearAllMocks();
+	});
+
+	describe('getAddedNodesAndConnections', () => {
+		test('should insert a manual trigger node when there are no triggers', () => {
+			const workflowsStore = useWorkflowsStore();
+			const nodeCreatorStore = useNodeCreatorStore();
+
+			vi.spyOn(workflowsStore, 'workflowTriggerNodes', 'get').mockReturnValue([]);
+			vi.spyOn(nodeCreatorStore, 'openSource', 'get').mockReturnValue(
+				NODE_CREATOR_OPEN_SOURCES.ADD_NODE_BUTTON,
+			);
+			vi.spyOn(nodeCreatorStore, 'selectedView', 'get').mockReturnValue(TRIGGER_NODE_CREATOR_VIEW);
+
+			const { getAddedNodesAndConnections } = useActions();
+
+			expect(getAddedNodesAndConnections([{ type: HTTP_REQUEST_NODE_TYPE }])).toEqual({
+				connections: [{ from: { nodeIndex: 0 }, to: { nodeIndex: 1 } }],
+				nodes: [
+					{ type: MANUAL_TRIGGER_NODE_TYPE, isAutoAdd: true },
+					{ type: HTTP_REQUEST_NODE_TYPE, openDetail: true },
+				],
+			});
+		});
+
+		test('should not insert a manual trigger node when there is a trigger in the workflow', () => {
+			const workflowsStore = useWorkflowsStore();
+			const nodeCreatorStore = useNodeCreatorStore();
+
+			vi.spyOn(workflowsStore, 'workflowTriggerNodes', 'get').mockReturnValue([
+				{ type: SCHEDULE_TRIGGER_NODE_TYPE } as never,
+			]);
+			vi.spyOn(nodeCreatorStore, 'openSource', 'get').mockReturnValue(
+				NODE_CREATOR_OPEN_SOURCES.ADD_NODE_BUTTON,
+			);
+			vi.spyOn(nodeCreatorStore, 'selectedView', 'get').mockReturnValue(TRIGGER_NODE_CREATOR_VIEW);
+
+			const { getAddedNodesAndConnections } = useActions();
+
+			expect(getAddedNodesAndConnections([{ type: HTTP_REQUEST_NODE_TYPE }])).toEqual({
+				connections: [],
+				nodes: [{ type: HTTP_REQUEST_NODE_TYPE, openDetail: true }],
+			});
+		});
+
+		test('should insert a No Op node when a Loop Over Items Node is added', () => {
+			const workflowsStore = useWorkflowsStore();
+			const nodeCreatorStore = useNodeCreatorStore();
+
+			vi.spyOn(workflowsStore, 'workflowTriggerNodes', 'get').mockReturnValue([]);
+			vi.spyOn(nodeCreatorStore, 'openSource', 'get').mockReturnValue(
+				NODE_CREATOR_OPEN_SOURCES.ADD_NODE_BUTTON,
+			);
+			vi.spyOn(nodeCreatorStore, 'selectedView', 'get').mockReturnValue(TRIGGER_NODE_CREATOR_VIEW);
+
+			const { getAddedNodesAndConnections } = useActions();
+
+			expect(getAddedNodesAndConnections([{ type: SPLIT_IN_BATCHES_NODE_TYPE }])).toEqual({
+				connections: [
+					{ from: { nodeIndex: 0 }, to: { nodeIndex: 1 } },
+					{ from: { nodeIndex: 1, outputIndex: 1 }, to: { nodeIndex: 2 } },
+					{ from: { nodeIndex: 2 }, to: { nodeIndex: 1 } },
+				],
+				nodes: [
+					{ isAutoAdd: true, type: MANUAL_TRIGGER_NODE_TYPE },
+					{ openDetail: true, type: SPLIT_IN_BATCHES_NODE_TYPE },
+					{ isAutoAdd: true, name: 'Replace Me', type: NO_OP_NODE_TYPE },
+				],
+			});
+		});
+	});
+});
--- a/packages/editor-ui/src/components/Node/NodeCreator/composables/useActions.ts
+++ b/packages/editor-ui/src/components/Node/NodeCreator/composables/useActions.ts
@@ -2,6 +2,9 @@ import { getCurrentInstance, computed } from 'vue';
 import type { IDataObject, INodeParameters } from 'n8n-workflow';
 import type {
 	ActionTypeDescription,
+	AddedNode,
+	AddedNodeConnection,
+	AddedNodesAndConnections,
 	INodeCreateElement,
 	IUpdateInformation,
 	LabelCreateElement,
@@ -9,11 +12,14 @@ import type {
 import {
 	MANUAL_TRIGGER_NODE_TYPE,
 	NODE_CREATOR_OPEN_SOURCES,
+	NO_OP_NODE_TYPE,
 	SCHEDULE_TRIGGER_NODE_TYPE,
+	SPLIT_IN_BATCHES_NODE_TYPE,
 	STICKY_NODE_TYPE,
 	TRIGGER_NODE_CREATOR_VIEW,
 	WEBHOOK_NODE_TYPE,
 } from '@/constants';
+import { i18n } from '@/plugins/i18n';

 import type { BaseTextKey } from '@/plugins/i18n';
 import type { Telemetry } from '@/plugins/telemetry';
@@ -144,15 +150,13 @@ export const useActions = () => {
 		};
 	}

-	function getNodeTypesWithManualTrigger(nodeType?: string): string[] {
-		if (!nodeType) return [];
-
+	function shouldPrependManualTrigger(addedNodes: AddedNode[]): boolean {
 		const { selectedView, openSource } = useNodeCreatorStore();
 		const { workflowTriggerNodes } = useWorkflowsStore();
-		const isTrigger = useNodeTypesStore().isTriggerNode(nodeType);
+		const hasTrigger = addedNodes.some((node) => useNodeTypesStore().isTriggerNode(node.type));
 		const workflowContainsTrigger = workflowTriggerNodes.length > 0;
 		const isTriggerPanel = selectedView === TRIGGER_NODE_CREATOR_VIEW;
-		const isStickyNode = nodeType === STICKY_NODE_TYPE;
+		const onlyStickyNodes = addedNodes.every((node) => node.type === STICKY_NODE_TYPE);
 		const singleNodeOpenSources = [
 			NODE_CREATOR_OPEN_SOURCES.PLUS_ENDPOINT,
 			NODE_CREATOR_OPEN_SOURCES.NODE_CONNECTION_ACTION,
@@ -162,16 +166,65 @@ export const useActions = () => {
 		// If the node creator was opened from the plus endpoint, node connection action, or node connection drop
 		// then we do not want to append the manual trigger
 		const isSingleNodeOpenSource = singleNodeOpenSources.includes(openSource);
-		const shouldAppendManualTrigger =
+		return (
 			!isSingleNodeOpenSource &&
-			!isTrigger &&
+			!hasTrigger &&
 			!workflowContainsTrigger &&
 			isTriggerPanel &&
-			!isStickyNode;
+			!onlyStickyNodes
+		);
+	}

-		const nodeTypes = shouldAppendManualTrigger ? [MANUAL_TRIGGER_NODE_TYPE, nodeType] : [nodeType];
+	function getAddedNodesAndConnections(addedNodes: AddedNode[]): AddedNodesAndConnections {
+		if (addedNodes.length === 0) {
+			return { nodes: [], connections: [] };
+		}

-		return nodeTypes;
+		const nodes: AddedNode[] = [];
+		const connections: AddedNodeConnection[] = [];
+
+		const nodeToAutoOpen = addedNodes.find((node) => node.type !== MANUAL_TRIGGER_NODE_TYPE);
+
+		if (nodeToAutoOpen) {
+			nodeToAutoOpen.openDetail = true;
+		}
+
+		if (shouldPrependManualTrigger(addedNodes)) {
+			addedNodes.unshift({ type: MANUAL_TRIGGER_NODE_TYPE, isAutoAdd: true });
+			connections.push({
+				from: { nodeIndex: 0 },
+				to: { nodeIndex: 1 },
+			});
+		}
+
+		addedNodes.forEach((node, index) => {
+			nodes.push(node);
+
+			switch (node.type) {
+				case SPLIT_IN_BATCHES_NODE_TYPE: {
+					const splitInBatchesIndex = index;
+					const noOpIndex = splitInBatchesIndex + 1;
+					nodes.push({
+						type: NO_OP_NODE_TYPE,
+						isAutoAdd: true,
+						name: i18n.baseText('nodeView.replaceMe'),
+					});
+					connections.push(
+						{
+							from: { nodeIndex: splitInBatchesIndex, outputIndex: 1 },
+							to: { nodeIndex: noOpIndex },
+						},
+						{
+							from: { nodeIndex: noOpIndex },
+							to: { nodeIndex: splitInBatchesIndex },
+						},
+					);
+					break;
+				}
+			}
+		});
+
+		return { nodes, connections };
 	}

 	// Hook into addNode action to set the last node parameters & track the action selected
@@ -211,7 +264,7 @@ export const useActions = () => {
 		actionsCategoryLocales,
 		getPlaceholderTriggerActions,
 		parseCategoryActions,
-		getNodeTypesWithManualTrigger,
+		getAddedNodesAndConnections,
 		getActionData,
 		setAddedNodeActionParameters,
 	};
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@@ -628,3 +628,5 @@ export const ASK_AI_MIN_PROMPT_LENGTH = 15;
 export const ASK_AI_LOADING_DURATION_MS = 12000;

 export const APPEND_ATTRIBUTION_DEFAULT_PATH = 'parameters.options.appendAttribution';
+
+export const DRAG_EVENT_DATA_KEY = 'nodesAndConnections';
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -1039,6 +1039,7 @@
 	"nodeView.zoomIn": "Zoom In",
 	"nodeView.zoomOut": "Zoom Out",
 	"nodeView.zoomToFit": "Zoom to Fit",
+	"nodeView.replaceMe": "Replace Me",
 	"nodeWebhooks.clickToCopyWebhookUrls": "Click to copy webhook URLs",
 	"nodeWebhooks.clickToDisplayWebhookUrls": "Click to display webhook URLs",
 	"nodeWebhooks.clickToHideWebhookUrls": "Click to hide webhook URLs",
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -97,7 +97,7 @@
 					:create-node-active="createNodeActive"
 					:node-view-scale="nodeViewScale"
 					@toggleNodeCreator="onToggleNodeCreator"
-					@addNode="onAddNode"
+					@addNodes="onAddNodes"
 				/>
 			</Suspense>
 			<Suspense>
@@ -217,11 +217,11 @@ import {
 	TRIGGER_NODE_CREATOR_VIEW,
 	EnterpriseEditionFeature,
 	REGULAR_NODE_CREATOR_VIEW,
-	MANUAL_TRIGGER_NODE_TYPE,
 	NODE_CREATOR_OPEN_SOURCES,
 	MANUAL_CHAT_TRIGGER_NODE_TYPE,
 	WORKFLOW_LM_CHAT_MODAL_KEY,
 	AI_NODE_CREATOR_VIEW,
+	DRAG_EVENT_DATA_KEY,
 } from '@/constants';
 import { copyPaste } from '@/mixins/copyPaste';
 import { externalHooks } from '@/mixins/externalHooks';
@@ -264,7 +264,13 @@ import type {
 	Workflow,
 	ConnectionTypes,
 } from 'n8n-workflow';
-import { deepCopy, NodeConnectionType, NodeHelpers, TelemetryHelpers } from 'n8n-workflow';
+import {
+	deepCopy,
+	jsonParse,
+	NodeConnectionType,
+	NodeHelpers,
+	TelemetryHelpers,
+} from 'n8n-workflow';
 import type {
 	ICredentialsResponse,
 	IExecutionResponse,
@@ -282,6 +288,7 @@ import type {
 	IUser,
 	INodeUpdatePropertiesInformation,
 	NodeCreatorOpenSource,
+	AddedNodesAndConnections,
 } from '@/Interface';

 import { debounceHelper } from '@/mixins/debounce';
@@ -341,6 +348,7 @@ import { useViewStacks } from '@/components/Node/NodeCreator/composables/useView
 interface AddNodeOptions {
 	position?: XYPosition;
 	dragAndDrop?: boolean;
+	name?: string;
 }

 const NodeCreation = defineAsyncComponent(async () => import('@/components/Node/NodeCreation.vue'));
@@ -1741,32 +1749,22 @@ export default defineComponent({
 			event.preventDefault();
 		},

-		onDrop(event: DragEvent) {
+		async onDrop(event: DragEvent) {
 			if (!event.dataTransfer) {
 				return;
 			}

-			const nodeTypeNames = event.dataTransfer.getData('nodeTypeName').split(',');
-
-			if (nodeTypeNames) {
+			const dropData = jsonParse<AddedNodesAndConnections>(
+				event.dataTransfer.getData(DRAG_EVENT_DATA_KEY),
+			);
+			if (dropData) {
 				const mousePosition = this.getMousePositionWithinNodeView(event);
+				const insertNodePosition = [
+					mousePosition[0] - NodeViewUtils.NODE_SIZE / 2 + NodeViewUtils.GRID_SIZE,
+					mousePosition[1] - NodeViewUtils.NODE_SIZE / 2,
+				] as XYPosition;

-				const nodesToAdd = nodeTypeNames.map((nodeTypeName: string, index: number) => {
-					return {
-						nodeTypeName,
-						position: [
-							// If adding more than one node, offset the X position
-							mousePosition[0] -
-								NodeViewUtils.NODE_SIZE / 2 +
-								NodeViewUtils.NODE_SIZE * index * 2 +
-								NodeViewUtils.GRID_SIZE,
-							mousePosition[1] - NodeViewUtils.NODE_SIZE / 2,
-						] as XYPosition,
-						dragAndDrop: true,
-					};
-				});
-
-				this.onAddNode(nodesToAdd, true);
+				await this.onAddNodes(dropData, true, insertNodePosition);
 				this.createNodeActive = false;
 			}
 		},
@@ -1810,7 +1808,10 @@ export default defineComponent({
 			});
 		},

-		async getNewNodeWithDefaultCredential(nodeTypeData: INodeTypeDescription) {
+		async getNewNodeWithDefaultCredential(
+			nodeTypeData: INodeTypeDescription,
+			overrides: Partial<INodeUi>,
+		) {
 			let nodeVersion = nodeTypeData.defaultVersion;

 			if (nodeVersion === undefined) {
@@ -1821,7 +1822,7 @@ export default defineComponent({

 			const newNodeData: INodeUi = {
 				id: uuid(),
-				name: nodeTypeData.defaults.name as string,
+				name: overrides.name ?? (nodeTypeData.defaults.name as string),
 				type: nodeTypeData.name,
 				typeVersion: nodeVersion,
 				position: [0, 0],
@@ -1922,7 +1923,9 @@ export default defineComponent({
 				return;
 			}

-			const newNodeData = await this.getNewNodeWithDefaultCredential(nodeTypeData);
+			const newNodeData = await this.getNewNodeWithDefaultCredential(nodeTypeData, {
+				name: options.name,
+			});

 			// when pulling new connection from node or injecting into a connection
 			const lastSelectedNode = this.lastSelectedNode;
@@ -2193,7 +2196,7 @@ export default defineComponent({
 			const targetEndpoint = lastSelectedNodeEndpointUuid || '';

 			// Handle connection of scoped_endpoint types
-			if (lastSelectedNodeEndpointUuid) {
+			if (lastSelectedNodeEndpointUuid && !isAutoAdd) {
 				const lastSelectedEndpoint = this.instance.getEndpoint(lastSelectedNodeEndpointUuid);
 				if (
 					this.checkNodeConnectionAllowed(
@@ -2221,7 +2224,7 @@ export default defineComponent({
 				}
 			}
 			// If a node is last selected then connect between the active and its child ones
-			if (lastSelectedNode) {
+			if (lastSelectedNode && !isAutoAdd) {
 				await this.$nextTick();

 				if (lastSelectedConnection?.__meta) {
@@ -4153,15 +4156,7 @@ export default defineComponent({
 				this.instance.setSuspendDrawing(false, true);
 			});
 		},
-		onToggleNodeCreator({
-			source,
-			createNodeActive,
-			nodeCreatorView,
-		}: {
-			source?: NodeCreatorOpenSource;
-			createNodeActive: boolean;
-			nodeCreatorView?: string;
-		}) {
+		onToggleNodeCreator({ source, createNodeActive, nodeCreatorView }: ToggleNodeCreatorOptions) {
 			if (createNodeActive === this.createNodeActive) return;

 			if (!nodeCreatorView) {
@@ -4200,52 +4195,43 @@ export default defineComponent({
 				workflow_id: this.workflowsStore.workflowId,
 			});
 		},
-		onAddNode(
-			nodeTypes: Array<{ nodeTypeName: string; position: XYPosition }>,
-			dragAndDrop: boolean,
+		async onAddNodes(
+			{ nodes, connections }: AddedNodesAndConnections,
+			dragAndDrop = false,
+			position?: XYPosition,
 		) {
-			nodeTypes.forEach(({ nodeTypeName, position }, index) => {
-				const isManualTrigger = nodeTypeName === MANUAL_TRIGGER_NODE_TYPE;
-				const openNDV = !isManualTrigger && (nodeTypes.length === 1 || index > 0);
-				void this.addNode(
-					nodeTypeName,
-					{ position, dragAndDrop },
-					openNDV,
+			let currentPosition = position;
+			for (const { type, isAutoAdd, name, openDetail, position: nodePosition } of nodes) {
+				await this.addNode(
+					type,
+					{ position: nodePosition ?? currentPosition, dragAndDrop, name },
+					openDetail ?? false,
 					true,
-					nodeTypes.length > 1 && index < 1,
+					isAutoAdd,
 				);
-				if (index === 0) return;
-				// If there's more than one node, we want to connect them
-				// this has to be done in mutation subscriber to make sure both nodes already
-				// exist
-				const actionWatcher = this.workflowsStore.$onAction(({ name, after, args }) => {
-					if (name === 'addNode' && args[0].type === nodeTypeName) {
-						after(async () => {
-							const lastAddedNode = this.nodes[this.nodes.length - 1];
-							const previouslyAddedNode = this.nodes[this.nodes.length - 2];

-							// Position the added node to the right side of the previously added one
-							lastAddedNode.position = [
-								previouslyAddedNode.position[0] +
-									NodeViewUtils.NODE_SIZE * 2 +
-									NodeViewUtils.GRID_SIZE,
-								previouslyAddedNode.position[1],
-							];
-							await this.$nextTick();
-							this.connectTwoNodes(
-								previouslyAddedNode.name,
-								0,
-								lastAddedNode.name,
-								0,
-								NodeConnectionType.Main,
-							);
+				const lastAddedNode = this.nodes[this.nodes.length - 1];
+				currentPosition = [
+					lastAddedNode.position[0] + NodeViewUtils.NODE_SIZE * 2 + NodeViewUtils.GRID_SIZE,
+					lastAddedNode.position[1],
+				];
+			}

-							actionWatcher();
-						});
-					}
-				});
-			});
+			const newNodesOffset = this.nodes.length - nodes.length;
+			for (const { from, to } of connections) {
+				const fromNode = this.nodes[newNodesOffset + from.nodeIndex];
+				const toNode = this.nodes[newNodesOffset + to.nodeIndex];
+
+				this.connectTwoNodes(
+					fromNode.name,
+					from.outputIndex ?? 0,
+					toNode.name,
+					to.inputIndex ?? 0,
+					NodeConnectionType.Main,
+				);
+			}
 		},
+
 		async saveCurrentWorkflowExternal(callback: () => void) {
 			await this.saveCurrentWorkflow();
 			callback?.();