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

packages/editor-ui/src/App.vue

@@ -45,12 +45,14 @@ 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,
 	globalLinkActions,
+	historyHelper,
 ).extend({
 	name: 'App',
 	components: {
@@ -185,7 +187,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

@@ -35,8 +35,11 @@ import {
 	INodeCredentials,
 	INodeListSearchItems,
 	NodeParameterValueType,
+	IConnection,
 } from 'n8n-workflow';
 import { FAKE_DOOR_FEATURES } from './constants';
+import {ICredentialsDb} from "n8n";
+import { BulkCommand, Undoable } from '@/models/history';
 
 export * from 'n8n-design-system/src/types';
 
@@ -163,7 +166,7 @@ export interface IUpdateInformation {
 export interface INodeUpdatePropertiesInformation {
 	name: string; // Node-Name
 	properties: {
-		[key: string]: IDataObject;
+		[key: string]: IDataObject | XYPosition;
 	};
 }
 
@@ -1290,6 +1293,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,
@@ -399,13 +401,17 @@ export default mixins(
 		}
 	},
 	mounted() {
+		this.$root.$on('enableNodeToggle', this.onRevertEnableToggle);
 		this.setSubtitle();
 		if (this.nodeRunData) {
 			setTimeout(() => {
 				this.$emit('run', {name: this.data && this.data.name, data: this.nodeRunData, waiting: !!this.waiting});
 			}, 0);
 		}
 	},
+	destroyed() {
+		this.$root.$off('enableNodeToggle', this.onRevertEnableToggle);
+	},
 	data () {
 		return {
 			isTouchActive: false,
@@ -417,6 +423,22 @@ export default mixins(
 		};
 	},
 	methods: {
+		onRevertEnableToggle({ nodeName, isDisabled }: { nodeName: string, isDisabled: boolean }) {
+			const node: INodeUi|null = this.data;
+			if (node && nodeName === node.name) {
+				const updateInformation = {
+					name: node.name,
+					properties: {
+						disabled: isDisabled,
+					} as IDataObject,
+				} as INodeUpdatePropertiesInformation;
+
+				this.workflowsStore.updateNodeProperties(updateInformation);
+				this.workflowsStore.clearNodeExecutionData(node.name);
+				this.updateNodeParameterIssues(node);
+				this.updateNodeCredentialIssues(node);
+			}
+		},
 		showPinDataDiscoveryTooltip(dataItemsCount: number): void {
 			if (!this.isTriggerNode || this.isManualTypeNode || this.isScheduledGroup || dataItemsCount === 0) return;
 
@@ -433,7 +455,9 @@ export default mixins(
 				: nodeSubtitle;
 		},
 		disableNode () {
-			this.disableNodes([this.data]);
+			const nodeData = this.data as INodeUi;
+			this.disableNodes([nodeData]);
+			this.historyStore.pushCommandToUndo(new EnableNodeToggleCommand(nodeData.name, !nodeData.disabled, nodeData.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 () {

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,
@@ -615,7 +621,7 @@ export default mixins(externalHooks, nodeHelpers).extend({
 					const updateInformation: IUpdateInformation = {
 						name: node.name,
 						value: nodeParameters,
-					};
+					} as IUpdateInformation;
 
 					this.workflowsStore.setNodeParameters(updateInformation);
 

packages/editor-ui/src/constants.ts

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

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

@@ -0,0 +1,113 @@
+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';
+
+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) {
+			if (event.repeat) 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);
@@ -286,6 +289,7 @@ export const nodeBase = mixins(
 						// some dirty DOM query to get the new positions till I have more time to
 						// create a proper solution
 						let newNodePosition: XYPosition;
+						this.historyStore.startRecordingUndo();
 						moveNodes.forEach((node: INodeUi) => {
 							const element = document.getElementById(node.id);
 							if (element === null) {
@@ -304,9 +308,13 @@ export const nodeBase = mixins(
 									position: newNodePosition,
 								},
 							};
-
+							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.historyStore.stopRecordingUndo();
 
 						this.$emit('moved', node);
 					}

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,
@@ -432,12 +435,14 @@ export const nodeHelpers = mixins(
 			},
 
 			disableNodes(nodes: INodeUi[]) {
+				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,7 +452,9 @@ export const nodeHelpers = mixins(
 					this.workflowsStore.clearNodeExecutionData(node.name);
 					this.updateNodeParameterIssues(node);
 					this.updateNodeCredentialIssues(node);
+					this.historyStore.pushCommandToUndo(new EnableNodeToggleCommand(node.name, oldState === true, node.disabled === true, this));
 				}
+				this.historyStore.stopRecordingUndo();
 			},
 			// @ts-ignore
 			getNodeSubtitle (data, nodeType, workflow): string | undefined {