feat(editor): Indicate dirty nodes with yellow borders/connectors on canvas

cypress/composables/ndv.ts

@@ -206,6 +206,10 @@ export function clickWorkflowCardContent(workflowName: string) {
 	getWorkflowCardContent(workflowName).click();
 }
 
+export function clickAssignmentCollectionAdd() {
+	cy.getByTestId('assignment-collection-drop-area').click();
+}
+
 export function assertNodeOutputHintExists() {
 	getNodeOutputHint().should('exist');
 }

cypress/e2e/40-manual-partial-execution.cy.ts

@@ -1,3 +1,16 @@
+import {
+	clickAssignmentCollectionAdd,
+	clickGetBackToCanvas,
+	getNodeRunInfoStale,
+	getOutputTbodyCell,
+} from '../composables/ndv';
+import {
+	clickExecuteWorkflowButton,
+	getNodeByName,
+	getZoomToFitButton,
+	navigateToNewWorkflowPage,
+	openNode,
+} from '../composables/workflow';
 import { NDV, WorkflowPage } from '../pages';
 
 const canvas = new WorkflowPage();
@@ -26,4 +39,53 @@ describe('Manual partial execution', () => {
 		ndv.getters.nodeRunTooltipIndicator().should('exist');
 		ndv.getters.outputRunSelector().should('not.exist'); // single run
 	});
+
+	describe('partial execution v2', () => {
+		beforeEach(() => {
+			cy.window().then((win) => {
+				win.localStorage.setItem('PartialExecution.version', '2');
+			});
+			navigateToNewWorkflowPage();
+		});
+
+		it('should execute from the first dirty node up to the current node', () => {
+			cy.createFixtureWorkflow('Test_workflow_partial_execution_v2.json');
+
+			getZoomToFitButton().click();
+
+			// First, execute the whole workflow
+			clickExecuteWorkflowButton();
+
+			getNodeByName('A').findChildByTestId('canvas-node-status-success').should('be.visible');
+			getNodeByName('B').findChildByTestId('canvas-node-status-success').should('be.visible');
+			getNodeByName('C').findChildByTestId('canvas-node-status-success').should('be.visible');
+			openNode('A');
+			getOutputTbodyCell(1, 0).invoke('text').as('before', { type: 'static' });
+			clickGetBackToCanvas();
+
+			// Change parameter of the node in the middle
+			openNode('B');
+			clickAssignmentCollectionAdd();
+			getNodeRunInfoStale().should('be.visible');
+			clickGetBackToCanvas();
+
+			getNodeByName('A').findChildByTestId('canvas-node-status-success').should('be.visible');
+			getNodeByName('B').findChildByTestId('canvas-node-status-warning').should('be.visible');
+			getNodeByName('C').findChildByTestId('canvas-node-status-success').should('be.visible');
+
+			// Partial execution
+			getNodeByName('C').findChildByTestId('execute-node-button').click();
+
+			getNodeByName('A').findChildByTestId('canvas-node-status-success').should('be.visible');
+			getNodeByName('B').findChildByTestId('canvas-node-status-success').should('be.visible');
+			getNodeByName('C').findChildByTestId('canvas-node-status-success').should('be.visible');
+			openNode('A');
+			getOutputTbodyCell(1, 0).invoke('text').as('after', { type: 'static' });
+
+			// Assert that 'A' ran only once by comparing its output
+			cy.get('@before').then((before) =>
+				cy.get('@after').then((after) => expect(before).to.equal(after)),
+			);
+		});
+	});
 });

cypress/fixtures/Test_workflow_partial_execution_v2.json

@@ -0,0 +1,74 @@
+{
+	"nodes": [
+		{
+			"parameters": {
+				"rule": {
+					"interval": [{}]
+				}
+			},
+			"type": "n8n-nodes-base.scheduleTrigger",
+			"typeVersion": 1.2,
+			"position": [0, 0],
+			"id": "dcc1c5e1-c6c1-45f8-80d5-65c88d66d56e",
+			"name": "A"
+		},
+		{
+			"parameters": {
+				"assignments": {
+					"assignments": [
+						{
+							"id": "3d8f0810-84f0-41ce-a81b-0e7f04fd88cb",
+							"name": "",
+							"value": "",
+							"type": "string"
+						}
+					]
+				},
+				"options": {}
+			},
+			"type": "n8n-nodes-base.set",
+			"typeVersion": 3.4,
+			"position": [220, 0],
+			"id": "097ffa30-d37b-4de6-bd5c-ccd945f31df1",
+			"name": "B"
+		},
+		{
+			"parameters": {
+				"options": {}
+			},
+			"type": "n8n-nodes-base.set",
+			"typeVersion": 3.4,
+			"position": [440, 0],
+			"id": "dc44e635-916f-4f76-a745-1add5762f730",
+			"name": "C"
+		}
+	],
+	"connections": {
+		"A": {
+			"main": [
+				[
+					{
+						"node": "B",
+						"type": "main",
+						"index": 0
+					}
+				]
+			]
+		},
+		"B": {
+			"main": [
+				[
+					{
+						"node": "C",
+						"type": "main",
+						"index": 0
+					}
+				]
+			]
+		}
+	},
+	"pinData": {},
+	"meta": {
+		"instanceId": "b0d9447cff9c96796e4ac4f00fcd899b03cfac3ab3d4f748ae686d34881eae0c"
+	}
+}

packages/editor-ui/src/Interface.ts

@@ -849,6 +849,8 @@ export interface ITemplatesNode extends IVersionNode {
 
 export interface INodeMetadata {
 	parametersLastUpdatedAt?: number;
+	pinnedDataLastUpdatedAt?: number;
+	pinnedDataLastRemovedAt?: number;
 	pristine: boolean;
 }
 

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

@@ -22,6 +22,7 @@ import InputNodeSelect from './InputNodeSelect.vue';
 import NodeExecuteButton from './NodeExecuteButton.vue';
 import RunData from './RunData.vue';
 import WireMeUp from './WireMeUp.vue';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 type MappingMode = 'debugging' | 'mapping';
 
@@ -464,7 +465,16 @@ function activatePane() {
 					/>
 				</N8nTooltip>
 				<N8nText v-if="!readOnly" tag="div" size="small">
-					{{ i18n.baseText('ndv.input.noOutputData.hint') }}
+					<i18n-t keypath="ndv.input.noOutputData.hint">
+						<template #info>
+							<N8nTooltip placement="bottom">
+								<template #content>
+									{{ i18n.baseText('ndv.input.noOutputData.hint.tooltip') }}
+								</template>
+								<FontAwesomeIcon icon="question-circle" />
+							</N8nTooltip>
+						</template>
+					</i18n-t>
 				</N8nText>
 			</div>
 			<div v-else :class="$style.notConnected">

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

@@ -765,7 +765,7 @@ const credentialSelected = (updateInformation: INodeUpdatePropertiesInformation)
 
 const nameChanged = (name: string) => {
 	if (node.value) {
-		historyStore.pushCommandToUndo(new RenameNodeCommand(node.value.name, name));
+		historyStore.pushCommandToUndo(new RenameNodeCommand(node.value.name, name, Date.now()));
 	}
 	valueChanged({
 		value: name,

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

@@ -21,6 +21,8 @@ import { useTelemetry } from '@/composables/useTelemetry';
 import { useI18n } from '@/composables/useI18n';
 import { waitingNodeTooltip } from '@/utils/executionUtils';
 import { N8nRadioButtons, N8nText } from 'n8n-design-system';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useNodeDirtiness } from '@/composables/useNodeDirtiness';
 
 // Types
 
@@ -75,6 +77,8 @@ const uiStore = useUIStore();
 const telemetry = useTelemetry();
 const i18n = useI18n();
 const { activeNode } = storeToRefs(ndvStore);
+const settings = useSettingsStore();
+const { dirtinessByName } = useNodeDirtiness();
 
 // Composables
 
@@ -201,6 +205,11 @@ const staleData = computed(() => {
 	if (!node.value) {
 		return false;
 	}
+
+	if (settings.partialExecutionVersion === 2) {
+		return dirtinessByName.value[node.value.name] === 'parameters-updated';
+	}
+
 	const updatedAt = workflowsStore.getParametersLastUpdate(node.value.name);
 	if (!updatedAt || !runTaskData.value) {
 		return false;
@@ -352,7 +361,11 @@ const activatePane = () => {
 					{{ i18n.baseText(outputPanelEditMode.enabled ? 'ndv.output.edit' : 'ndv.output') }}
 				</span>
 				<RunInfo
-					v-if="hasNodeRun && !pinnedData.hasData.value && runsCount === 1"
+					v-if="
+						hasNodeRun &&
+						!pinnedData.hasData.value &&
+						(runsCount === 1 || (runsCount > 0 && staleData))
+					"
 					v-show="!outputPanelEditMode.enabled"
 					:task-data="runTaskData"
 					:has-stale-data="staleData"

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

@@ -29,6 +29,7 @@ import { useNDVStore } from '@/stores/ndv.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useDocumentVisibility } from '@/composables/useDocumentVisibility';
 import { N8nButton, N8nCallout, N8nNotice } from 'n8n-design-system';
+import { isEqual } from 'lodash-es';
 
 type Props = {
 	parameter: INodeProperties;
@@ -354,11 +355,14 @@ async function loadAndSetFieldsToMap(): Promise<void> {
 			}
 			return field;
 		});
-		state.paramValue = {
-			...state.paramValue,
-			schema: newSchema,
-		};
-		emitValueChanged();
+
+		if (!isEqual(newSchema, state.paramValue.schema)) {
+			state.paramValue = {
+				...state.paramValue,
+				schema: newSchema,
+			};
+			emitValueChanged();
+		}
 	}
 }
 

packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue

@@ -67,6 +67,8 @@ const edgeColor = computed(() => {
 		return 'var(--node-type-supplemental-color)';
 	} else if (props.selected) {
 		return 'var(--color-background-dark)';
+	} else if (status.value === 'warning') {
+		return 'var(--color-warning)';
 	} else {
 		return 'var(--color-foreground-xdark)';
 	}
@@ -87,7 +89,7 @@ const edgeClasses = computed(() => ({
 
 const edgeLabelStyle = computed(() => ({
 	transform: `translate(0, ${isConnectorStraight.value ? '-100%' : '0%'})`,
-	color: edgeColor.value,
+	color: 'var(--color-text-base)',
 }));
 
 const isConnectorStraight = computed(() => renderData.value.isConnectorStraight);

packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue

@@ -41,7 +41,13 @@ const runDataLabel = computed(() =>
 
 const isHandlePlusVisible = computed(() => !isConnecting.value || isHovered.value);
 
-const plusType = computed(() => (runDataTotal.value > 0 ? 'success' : 'default'));
+const plusType = computed(() =>
+	renderOptions.value.dirtiness !== undefined
+		? 'warning'
+		: runDataTotal.value > 0
+			? 'success'
+			: 'default',
+);
 
 const plusLineSize = computed(
 	() =>
@@ -136,7 +142,7 @@ function onClickAdd() {
 	left: 50%;
 	transform: translate(-50%, -150%);
 	font-size: var(--font-size-xs);
-	color: var(--color-success);
+	color: var(--color-text-base);
 }
 </style>
 

packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandlePlus.vue

@@ -7,7 +7,7 @@ const props = withDefaults(
 		handleClasses?: string;
 		plusSize?: number;
 		lineSize?: number;
-		type?: 'success' | 'secondary' | 'default';
+		type?: 'success' | 'warning' | 'secondary' | 'default';
 	}>(),
 	{
 		position: 'right',
@@ -163,6 +163,12 @@ function onClick(event: MouseEvent) {
 		}
 	}
 
+	&.warning {
+		.line {
+			stroke: var(--color-warning);
+		}
+	}
+
 	.plus {
 		&:hover {
 			cursor: pointer;

packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue

@@ -64,6 +64,7 @@ const classes = computed(() => {
 		[$style.configurable]: renderOptions.value.configurable,
 		[$style.configuration]: renderOptions.value.configuration,
 		[$style.trigger]: renderOptions.value.trigger,
+		[$style.warning]: renderOptions.value.dirtiness !== undefined,
 	};
 });
 
@@ -262,6 +263,10 @@ function openContextMenu(event: MouseEvent) {
 		border-color: var(--color-canvas-node-success-border-color, var(--color-success));
 	}
 
+	&.warning {
+		border-color: var(--color-warning);
+	}
+
 	&.error {
 		border-color: var(--color-canvas-node-error-border-color, var(--color-danger));
 	}

packages/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeDisabledStrikeThrough.vue

@@ -1,15 +1,19 @@
 <script setup lang="ts">
 import { computed, useCssModule } from 'vue';
 import { useCanvasNode } from '@/composables/useCanvasNode';
+import { CanvasNodeRenderType } from '@/types';
 
 const $style = useCssModule();
 
-const { hasRunData } = useCanvasNode();
+const { hasRunData, render } = useCanvasNode();
 
 const classes = computed(() => {
 	return {
 		[$style.disabledStrikeThrough]: true,
 		[$style.success]: hasRunData.value,
+		[$style.warning]:
+			render.value.type === CanvasNodeRenderType.Default &&
+			render.value.options.dirtiness !== undefined,
 	};
 });
 </script>
@@ -31,4 +35,8 @@ const classes = computed(() => {
 .success {
 	border-color: var(--color-success-light);
 }
+
+.warning {
+	border-color: var(--color-warning-tint-1);
+}
 </style>