feat(editor): Add undo/redo enabling/disabling a node in new canvas (no-changelog) (#10143)

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

@@ -569,6 +569,47 @@ describe('useCanvasOperations', () => {
 		});
 	});
 
+	describe('toggleNodesDisabled', () => {
+		it('disables nodes based on provided ids', async () => {
+			const nodes = [
+				createTestNode({ id: '1', name: 'A' }),
+				createTestNode({ id: '2', name: 'B' }),
+			];
+			vi.spyOn(workflowsStore, 'getNodesByIds').mockReturnValue(nodes);
+			const updateNodePropertiesSpy = vi.spyOn(workflowsStore, 'updateNodeProperties');
+
+			canvasOperations.toggleNodesDisabled([nodes[0].id, nodes[1].id], {
+				trackHistory: true,
+				trackBulk: true,
+			});
+
+			expect(updateNodePropertiesSpy).toHaveBeenCalledWith({
+				name: nodes[0].name,
+				properties: {
+					disabled: true,
+				},
+			});
+		});
+	});
+
+	describe('revertToggleNodeDisabled', () => {
+		it('re-enables a previously disabled node', () => {
+			const nodeName = 'testNode';
+			const node = createTestNode({ name: nodeName });
+			vi.spyOn(workflowsStore, 'getNodeByName').mockReturnValue(node);
+			const updateNodePropertiesSpy = vi.spyOn(workflowsStore, 'updateNodeProperties');
+
+			canvasOperations.revertToggleNodeDisabled(nodeName);
+
+			expect(updateNodePropertiesSpy).toHaveBeenCalledWith({
+				name: nodeName,
+				properties: {
+					disabled: true,
+				},
+			});
+		});
+	});
+
 	describe('addConnections', () => {
 		it('should create connections between nodes', async () => {
 			const nodeTypeName = 'type';

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

@@ -348,10 +348,25 @@ export function useCanvasOperations({
 
 	function toggleNodesDisabled(
 		ids: string[],
-		{ trackHistory = true }: { trackHistory?: boolean } = {},
+		{ trackHistory = true, trackBulk = true }: { trackHistory?: boolean; trackBulk?: boolean } = {},
 	) {
+		if (trackBulk) {
+			historyStore.startRecordingUndo();
+		}
+
 		const nodes = workflowsStore.getNodesByIds(ids);
 		nodeHelpers.disableNodes(nodes, trackHistory);
+
+		if (trackBulk) {
+			historyStore.stopRecordingUndo();
+		}
+	}
+
+	function revertToggleNodeDisabled(nodeName: string) {
+		const node = workflowsStore.getNodeByName(nodeName);
+		if (node) {
+			nodeHelpers.disableNodes([node]);
+		}
 	}
 
 	function toggleNodesPinned(ids: string[], source: PinDataSource) {
@@ -1618,6 +1633,7 @@ export function useCanvasOperations({
 		setNodeActiveByName,
 		setNodeSelected,
 		toggleNodesDisabled,
+		revertToggleNodeDisabled,
 		toggleNodesPinned,
 		setNodeParameters,
 		renameNode,

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

@@ -139,6 +139,7 @@ const {
 	setNodeActive,
 	setNodeSelected,
 	toggleNodesDisabled,
+	revertToggleNodeDisabled,
 	toggleNodesPinned,
 	setNodeParameters,
 	deleteNode,
@@ -466,6 +467,10 @@ function onToggleNodeDisabled(id: string) {
 	toggleNodesDisabled([id]);
 }
 
+function onRevertToggleNodeDisabled({ nodeName }: { nodeName: string }) {
+	revertToggleNodeDisabled(nodeName);
+}
+
 function onToggleNodesDisabled(ids: string[]) {
 	if (!checkIfEditingIsAllowed()) {
 		return;
@@ -982,7 +987,7 @@ function addUndoRedoEventBindings() {
 	historyBus.on('revertAddConnection', onRevertCreateConnection);
 	historyBus.on('revertRemoveConnection', onRevertDeleteConnection);
 	historyBus.on('revertRenameNode', onRevertRenameNode);
-	// historyBus.on('enableNodeToggle', onRevertEnableToggle);
+	historyBus.on('enableNodeToggle', onRevertToggleNodeDisabled);
 }
 
 function removeUndoRedoEventBindings() {
@@ -992,7 +997,7 @@ function removeUndoRedoEventBindings() {
 	historyBus.off('revertAddConnection', onRevertCreateConnection);
 	historyBus.off('revertRemoveConnection', onRevertDeleteConnection);
 	historyBus.off('revertRenameNode', onRevertRenameNode);
-	// historyBus.off('enableNodeToggle', onRevertEnableToggle);
+	historyBus.off('enableNodeToggle', onRevertToggleNodeDisabled);
 }
 
 /**