feat(editor): Add undo/redo support for canvas actions

packages/editor-ui/src/App.vue

@@ -45,11 +45,13 @@ import { useUsersStore } from './stores/users';
 import { useRootStore } from './stores/n8nRootStore';
 import { useTemplatesStore } from './stores/templates';
 import { useNodeTypesStore } from './stores/nodeTypes';
+import { historyHelper } from '@/mixins/history';
 
 export default mixins(
 	showMessage,
 	userHelpers,
 	restApi,
+	historyHelper,
 ).extend({
 	name: 'App',
 	components: {
@@ -191,7 +193,6 @@ export default mixins(
 		this.loading = false;
 
 		this.trackPage();
-		// TODO: Un-comment once front-end hooks are updated to work with pinia store
 		this.$externalHooks().run('app.mount');
 
 		if (this.defaultLocale !== 'en') {

packages/editor-ui/src/Interface.ts

@@ -38,6 +38,7 @@ import {
 	INodeActionTypeDescription,
 } from 'n8n-workflow';
 import { FAKE_DOOR_FEATURES } from './constants';
+import { BulkCommand, Undoable } from '@/models/history';
 
 export * from 'n8n-design-system/src/types';
 
@@ -164,7 +165,7 @@ export interface IUpdateInformation {
 export interface INodeUpdatePropertiesInformation {
 	name: string; // Node-Name
 	properties: {
-		[key: string]: IDataObject;
+		[key: string]: IDataObject | XYPosition;
 	};
 }
 
@@ -1317,6 +1318,12 @@ export interface CurlToJSONResponse {
 	"parameters.sendBody": boolean;
 }
 
+export interface HistoryState {
+	redoStack: Undoable[];
+	undoStack: Undoable[];
+	currentBulkAction: BulkCommand | null;
+	bulkInProgress: boolean;
+}
 export type Basic = string | number | boolean;
 export type Primitives = Basic | bigint | symbol;
 

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

@@ -105,6 +105,7 @@ import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { pinData } from '@/mixins/pinData';
 
 import {
+	IDataObject,
 	INodeTypeDescription,
 	ITaskData,
 	NodeHelpers,
@@ -117,13 +118,14 @@ import mixins from 'vue-typed-mixins';
 
 import { get } from 'lodash';
 import { getStyleTokenValue, getTriggerNodeServiceName } from '@/utils';
-import { IExecutionsSummary, INodeUi, XYPosition } from '@/Interface';
+import { IExecutionsSummary, INodeUi, INodeUpdatePropertiesInformation, XYPosition } from '@/Interface';
 import { debounceHelper } from '@/mixins/debounce';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 import { useWorkflowsStore } from '@/stores/workflows';
 import { useNDVStore } from '@/stores/ndv';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
+import { EnableNodeToggleCommand } from '@/models/history';
 
 export default mixins(
 	externalHooks,
@@ -433,8 +435,11 @@ export default mixins(
 				: nodeSubtitle;
 		},
 		disableNode () {
-			this.disableNodes([this.data]);
-			this.$telemetry.track('User clicked node hover button', { node_type: this.data.type, button_name: 'disable', workflow_id: this.workflowsStore.workflowId });
+			if (this.data !== null) {
+				this.disableNodes([this.data]);
+				this.historyStore.pushCommandToUndo(new EnableNodeToggleCommand(this.data.name, !this.data.disabled, this.data.disabled === true, this));
+				this.$telemetry.track('User clicked node hover button', { node_type: this.data.type, button_name: 'disable', workflow_id: this.workflowsStore.workflowId });
+			}
 		},
 		executeNode () {
 			this.$emit('runWorkflow', this.data.name, 'Node.executeNode');

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

@@ -165,6 +165,8 @@ import { useUIStore } from '@/stores/ui';
 import { useWorkflowsStore } from '@/stores/workflows';
 import { useNDVStore } from '@/stores/ndv';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
+import { useHistoryStore } from '@/stores/history';
+import { RenameNodeCommand } from '@/models/history';
 
 export default mixins(externalHooks, nodeHelpers).extend({
 	name: 'NodeSettings',
@@ -179,6 +181,7 @@ export default mixins(externalHooks, nodeHelpers).extend({
 	},
 	computed: {
 		...mapStores(
+			useHistoryStore,
 			useNodeTypesStore,
 			useNDVStore,
 			useUIStore,
@@ -498,6 +501,9 @@ export default mixins(externalHooks, nodeHelpers).extend({
 			this.$externalHooks().run('nodeSettings.credentialSelected', { updateInformation });
 		},
 		nameChanged(name: string) {
+			if (this.node) {
+				this.historyStore.pushCommandToUndo(new RenameNodeCommand(this.node.name, name, this));
+			}
 			// @ts-ignore
 			this.valueChanged({
 				value: name,

packages/editor-ui/src/constants.ts

@@ -434,4 +434,5 @@ export enum STORES {
 	VERSIONS = 'versions',
 	NODE_CREATOR = 'nodeCreator',
 	WEBHOOKS = 'webhooks',
+	HISTORY = 'history',
 }

packages/editor-ui/src/mixins/history.ts

@@ -0,0 +1,117 @@
+import { MAIN_HEADER_TABS } from './../constants';
+import { useNDVStore } from '@/stores/ndv';
+import { BulkCommand, Undoable } from '@/models/history';
+import { useHistoryStore } from '@/stores/history';
+import { useUIStore } from '@/stores/ui';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { mapStores } from 'pinia';
+import mixins from 'vue-typed-mixins';
+import { Command } from '@/models/history';
+import { debounceHelper } from '@/mixins/debounce';
+import { deviceSupportHelpers } from '@/mixins/deviceSupportHelpers';
+import Vue from 'vue';
+import { getNodeViewTab } from '@/utils';
+
+const UNDO_REDO_DEBOUNCE_INTERVAL = 100;
+
+export const historyHelper = mixins(debounceHelper, deviceSupportHelpers).extend({
+	computed: {
+		...mapStores(
+			useNDVStore,
+			useHistoryStore,
+			useUIStore,
+			useWorkflowsStore,
+		),
+		isNDVOpen(): boolean {
+			return this.ndvStore.activeNodeName !== null;
+		},
+	},
+	mounted() {
+		document.addEventListener('keydown', this.handleKeyDown);
+	},
+	destroyed() {
+		document.removeEventListener('keydown', this.handleKeyDown);
+	},
+	methods: {
+		handleKeyDown(event: KeyboardEvent) {
+			const currentNodeViewTab = getNodeViewTab(this.$route);
+
+			if (event.repeat || currentNodeViewTab !== MAIN_HEADER_TABS.WORKFLOW) return;
+			if (this.isCtrlKeyPressed(event) && event.key === 'z') {
+				event.preventDefault();
+				if (!this.isNDVOpen) {
+					if (event.shiftKey) {
+						this.callDebounced('redo', { debounceTime: UNDO_REDO_DEBOUNCE_INTERVAL, trailing: true  });
+					} else {
+						this.callDebounced('undo', { debounceTime: UNDO_REDO_DEBOUNCE_INTERVAL, trailing: true  });
+					}
+				} else if (!event.shiftKey) {
+					this.trackUndoAttempt(event);
+				}
+			}
+		},
+		async undo() {
+			const command = this.historyStore.popUndoableToUndo();
+			if (!command) {
+				return;
+			}
+			if (command instanceof BulkCommand) {
+				this.historyStore.bulkInProgress = true;
+				const commands = command.commands;
+				const reverseCommands: Command[] = [];
+				for (let i = commands.length - 1; i >= 0; i--) {
+					await commands[i].revert();
+					reverseCommands.push(commands[i].getReverseCommand());
+				}
+				this.historyStore.pushUndoableToRedo(new BulkCommand(reverseCommands));
+				await Vue.nextTick();
+				this.historyStore.bulkInProgress = false;
+			}
+			if (command instanceof Command) {
+				await command.revert();
+				this.historyStore.pushUndoableToRedo(command.getReverseCommand());
+				this.uiStore.stateIsDirty = true;
+			}
+			this.trackCommand(command, 'undo');
+		},
+		async redo() {
+			const command = this.historyStore.popUndoableToRedo();
+			if (!command) {
+				return;
+			}
+			if (command instanceof BulkCommand) {
+				this.historyStore.bulkInProgress = true;
+				const commands = command.commands;
+				const reverseCommands = [];
+				for (let i = commands.length - 1; i >= 0; i--) {
+					await commands[i].revert();
+					reverseCommands.push(commands[i].getReverseCommand());
+				}
+				this.historyStore.pushBulkCommandToUndo(new BulkCommand(reverseCommands), false);
+				await Vue.nextTick();
+				this.historyStore.bulkInProgress = false;
+			}
+			if (command instanceof Command) {
+				await command.revert();
+				this.historyStore.pushCommandToUndo(command.getReverseCommand(), false);
+				this.uiStore.stateIsDirty = true;
+			}
+			this.trackCommand(command, 'redo');
+		},
+		trackCommand(command: Undoable, type: 'undo'|'redo'): void {
+			if (command instanceof Command) {
+				this.$telemetry.track(`User hit ${type}`, { commands_length: 1, commands: [ command.name ] });
+			} else if (command instanceof BulkCommand) {
+				this.$telemetry.track(`User hit ${type}`, { commands_length: command.commands.length, commands: command.commands.map(c => c.name) });
+			}
+		},
+		trackUndoAttempt(event: KeyboardEvent) {
+			if (this.isNDVOpen && !event.shiftKey) {
+				const activeNode = this.ndvStore.activeNode;
+				if (activeNode) {
+					this.$telemetry.track(`User hit undo in NDV`, { node_type: activeNode.type });
+				}
+			}
+		},
+	},
+});

packages/editor-ui/src/mixins/nodeBase.ts

@@ -13,6 +13,8 @@ import { useWorkflowsStore } from "@/stores/workflows";
 import { useNodeTypesStore } from "@/stores/nodeTypes";
 import * as NodeViewUtils from '@/utils/nodeViewUtils';
 import { getStyleTokenValue } from "@/utils";
+import { useHistoryStore } from "@/stores/history";
+import { MoveNodeCommand } from "@/models/history";
 
 export const nodeBase = mixins(
 	deviceSupportHelpers,
@@ -33,6 +35,7 @@ export const nodeBase = mixins(
 			useNodeTypesStore,
 			useUIStore,
 			useWorkflowsStore,
+			useHistoryStore,
 		),
 		data (): INodeUi | null {
 			return this.workflowsStore.getNodeByName(this.name);
@@ -281,6 +284,9 @@ export const nodeBase = mixins(
 							moveNodes.push(this.data);
 						}
 
+						if(moveNodes.length > 1) {
+							this.historyStore.startRecordingUndo();
+						}
 						// This does for some reason just get called once for the node that got clicked
 						// even though "start" and "drag" gets called for all. So lets do for now
 						// some dirty DOM query to get the new positions till I have more time to
@@ -304,11 +310,16 @@ export const nodeBase = mixins(
 									position: newNodePosition,
 								},
 							};
-
-							this.workflowsStore.updateNodeProperties(updateInformation);
+							const oldPosition = node.position;
+							if (oldPosition[0] !== newNodePosition[0] || oldPosition[1] !== newNodePosition[1]) {
+								this.historyStore.pushCommandToUndo(new MoveNodeCommand(node.name, oldPosition, newNodePosition, this));
+								this.workflowsStore.updateNodeProperties(updateInformation);
+								this.$emit('moved', node);
+							}
 						});
-
-						this.$emit('moved', node);
+						if(moveNodes.length > 1) {
+							this.historyStore.stopRecordingUndo();
+						}
 					}
 				},
 				filter: '.node-description, .node-description .node-name, .node-description .node-subtitle',

packages/editor-ui/src/mixins/nodeHelpers.ts

@@ -1,3 +1,5 @@
+import { EnableNodeToggleCommand } from './../models/history';
+import { useHistoryStore } from '@/stores/history';
 import {
 	PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
 	CUSTOM_API_CALL_KEY,
@@ -51,6 +53,7 @@ export const nodeHelpers = mixins(
 		computed: {
 			...mapStores(
 				useCredentialsStore,
+				useHistoryStore,
 				useNodeTypesStore,
 				useSettingsStore,
 				useWorkflowsStore,
@@ -431,13 +434,17 @@ export const nodeHelpers = mixins(
 				return returnData;
 			},
 
-			disableNodes(nodes: INodeUi[]) {
+			disableNodes(nodes: INodeUi[], trackHistory = false) {
+				if (trackHistory) {
+					this.historyStore.startRecordingUndo();
+				}
 				for (const node of nodes) {
+					const oldState = node.disabled;
 					// Toggle disabled flag
 					const updateInformation = {
 						name: node.name,
 						properties: {
-							disabled: !node.disabled,
+							disabled: !oldState,
 						} as IDataObject,
 					} as INodeUpdatePropertiesInformation;
 
@@ -447,6 +454,12 @@ export const nodeHelpers = mixins(
 					this.workflowsStore.clearNodeExecutionData(node.name);
 					this.updateNodeParameterIssues(node);
 					this.updateNodeCredentialIssues(node);
+					if (trackHistory) {
+						this.historyStore.pushCommandToUndo(new EnableNodeToggleCommand(node.name, oldState === true, node.disabled === true, this));
+					}
+				}
+				if (trackHistory) {
+					this.historyStore.stopRecordingUndo();
 				}
 			},
 			// @ts-ignore