feat(editor): Add undo/redo creating a node in new canvas (no-changelog) (#10142)

packages/editor-ui/src/composables/__tests__/useCanvasOperations.spec.ts

@@ -333,6 +333,19 @@ describe('useCanvasOperations', () => {
 		});
 	});
 
+	describe('revertAddNode', () => {
+		it('deletes node if it exists', async () => {
+			const node = createTestNode();
+			vi.spyOn(workflowsStore, 'getNodeByName').mockReturnValueOnce(node);
+			vi.spyOn(workflowsStore, 'getNodeById').mockReturnValueOnce(node);
+			const removeNodeByIdSpy = vi.spyOn(workflowsStore, 'removeNodeById');
+
+			await canvasOperations.revertAddNode(node.name);
+
+			expect(removeNodeByIdSpy).toHaveBeenCalledWith(node.id);
+		});
+	});
+
 	describe('deleteNode', () => {
 		it('should delete node and track history', () => {
 			const removeNodeByIdSpy = vi

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

@@ -395,11 +395,17 @@ export function useCanvasOperations({
 		options: {
 			dragAndDrop?: boolean;
 			position?: XYPosition;
+			trackHistory?: boolean;
+			trackBulk?: boolean;
 		} = {},
 	) {
 		let insertPosition = options.position;
 		let lastAddedNode: INodeUi | undefined;
 
+		if (options.trackBulk) {
+			historyStore.startRecordingUndo();
+		}
+
 		for (const nodeAddData of nodes) {
 			const { isAutoAdd, openDetail: openNDV, ...node } = nodeAddData;
 			const position = node.position ?? insertPosition;
@@ -414,7 +420,7 @@ export function useCanvasOperations({
 						...options,
 						openNDV,
 						isAutoAdd,
-						trackHistory: true,
+						trackHistory: options.trackHistory,
 					},
 				);
 			} catch (error) {
@@ -433,6 +439,10 @@ export function useCanvasOperations({
 			// @TODO Figure out what this does and why it's needed
 			updatePositionForNodeWithMultipleInputs(lastAddedNode);
 		}
+
+		if (options.trackBulk) {
+			historyStore.stopRecordingUndo();
+		}
 	}
 
 	function updatePositionForNodeWithMultipleInputs(node: INodeUi) {
@@ -507,6 +517,15 @@ export function useCanvasOperations({
 		return nodeData;
 	}
 
+	async function revertAddNode(nodeName: string) {
+		const node = workflowsStore.getNodeByName(nodeName);
+		if (!node) {
+			return;
+		}
+
+		deleteNode(node.id);
+	}
+
 	function createConnectionToLastInteractedWithNode(node: INodeUi, options: AddNodeOptions = {}) {
 		const lastInteractedWithNode = uiStore.lastInteractedWithNode;
 		if (!lastInteractedWithNode) {
@@ -1628,6 +1647,7 @@ export function useCanvasOperations({
 		triggerNodes,
 		addNodes,
 		addNode,
+		revertAddNode,
 		updateNodePosition,
 		setNodeActive,
 		setNodeActiveByName,

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

@@ -149,6 +149,7 @@ const {
 	duplicateNodes,
 	revertDeleteNode,
 	addNodes,
+	revertAddNode,
 	createConnection,
 	revertCreateConnection,
 	deleteConnection,
@@ -784,7 +785,7 @@ async function onAddNodesAndConnections(
 		return;
 	}
 
-	await addNodes(nodes, { dragAndDrop, position });
+	await addNodes(nodes, { dragAndDrop, position, trackHistory: true });
 
 	const offsetIndex = editableWorkflow.value.nodes.length - nodes.length;
 	const mappedConnections: CanvasConnectionCreateData[] = connections.map(({ from, to }) => {
@@ -812,6 +813,10 @@ async function onAddNodesAndConnections(
 	uiStore.resetLastInteractedWith();
 }
 
+async function onRevertAddNode({ node }: { node: INodeUi }) {
+	await revertAddNode(node.name);
+}
+
 async function onSwitchActiveNode(nodeName: string) {
 	setNodeActiveByName(nodeName);
 }
@@ -982,7 +987,7 @@ const chatTriggerNodePinnedData = computed(() => {
 
 function addUndoRedoEventBindings() {
 	// historyBus.on('nodeMove', onMoveNode);
-	// historyBus.on('revertAddNode', onRevertAddNode);
+	historyBus.on('revertAddNode', onRevertAddNode);
 	historyBus.on('revertRemoveNode', onRevertDeleteNode);
 	historyBus.on('revertAddConnection', onRevertCreateConnection);
 	historyBus.on('revertRemoveConnection', onRevertDeleteConnection);
@@ -992,7 +997,7 @@ function addUndoRedoEventBindings() {
 
 function removeUndoRedoEventBindings() {
 	// historyBus.off('nodeMove', onMoveNode);
-	// historyBus.off('revertAddNode', onRevertAddNode);
+	historyBus.off('revertAddNode', onRevertAddNode);
 	historyBus.off('revertRemoveNode', onRevertDeleteNode);
 	historyBus.off('revertAddConnection', onRevertCreateConnection);
 	historyBus.off('revertRemoveConnection', onRevertDeleteConnection);