feat(editor): Add data pinning functionality (#3511)

* feat: Design system color improvements and button component redesign.

* feat: Added button focus state and unit tests.

* refactor: Aligned n8n-button usage inside of editor-ui.

* test: Updated snapshots.

* refactor: Extracted focus outline width into scss variable.

* fix: Fixed select input border-radius.

* refactor: Removed element-ui references in button.

* fix: Fixed scss variable imports.

* feat: Added color-neutral variable story.

* fix: Fixed color-secondary variable definition.

* feat: Added color-white story.

* test: Updated button snapshot.

* feat: Replaced zoom buttons with new n8n-icon-button.

* feat: Added stories for float utilities.

* chore: Updated color shades generation code for later use.

* chore: Removed color-white code.

* chore: Updated story properties for button components.

* fix: Added el-button fallback for places where el-button is not replaceable (messagebox).

* feat: Reverted to css modules. Replaced el-button with n8n-button at application level.

* test: Updated button snapshot.

* fix: Fixed element-ui locally referenced buttons (via components: {}).

* fix: Updated colors. Removed irrelevant validation. Added ElButton override component.

* test: Updated button override snapshot.

* fix: Various button adjustments and fixes.

* fix: Updated button disabled state.

* test: Updated snapshots.

* fix: Consolidated css variables changes.

* Data pinning (#3512)

* refactor: Aligned n8n-button usage inside of editor-ui.

* feat: Added edit data button on json hover.

* feat: Extracted code editor into separate form component.

* feat: Added edit data button on json hover.

* feat: Added pinData and edit mode methods.

* 🔥 Remove conflict markers

* ✏️ Update i18n keys

* ⚡ Add JSON validation

* 🗃️ Add `pinData` column to `workflow_entity`

* 📘 Tighten type

* ⚡ Make `pinData` column nullable

* ⚡ Adjust workflow endpoints for pin data

* 📘 Improve types

* ✏️ Improve wording

* Inject pindata into items flow (#3420)

* ⚡ Inject pin data - Second approach

* 🔥 Remove unneeded lint exception

* feat: Added edit data button on json hover.

* feat: Extracted code editor into separate form component.

* feat: Added edit data button on json hover.

* fix: Fixed rebase conflicts.

* ⏪ Undo button change

* 🐛 Fix runNode call

Adjust per update in bdb84130d6

* 🧪 Fix workflow tests

* 🐛 More merge conflict fixes

* feat: Added pin/unpin button and store mutations.

* feat: Size check. Various design and ux improvements.

* ⚡ Add transformer

* ⚡ Hoist pin data

* ⚡ Adjust endpoints for hoisted pin data

* 📘 Expand interface

* 🐛 Fix stray array

* 👕 Fix build

* 👕 Add lint exception

* 👕 Fix header

* 🎨 Add color secondary tints

* ✨ Create `HeaderMessage` component

* ⚡ Adjust `InfoTip` component

* ✨ Add `HeaderMessage` to `RunData`

* 🐛 Fix console error

* 👕 Fix lint

* ⚡ Consolidate `HeaderMessage` and `Callout`

* ⏪ Undo `InfoTip` changes

* 🔥 Remove duplicate icons

* ⚡ Simplify template

* 🎨 Change cursor for action text

* 👕 Fix lint

* ⚡ Add URL

* 🐛 Fix handler name

* ⚡ Use constant

* ♻️ Refactor per feedback

* fix: Various fixes after data pinning relocation.

* fix: Added store mutation for setting pinned data.

* feat: Added pinned state for workflow canvas node.

* fix: Fixed workflow saving.

* fix: Removed pinData hoisting (no longer necessary).

* feat: Added canPinData flag to hide for input pane and binary data. Fixed unpin and execute flow.

* ⚡ Fixes for canvas pin data (#3587)

* ⚡ Fixes for canvas pin data

* 📘 Rename type

* 🧪 Fix unrelated Public API test

* 🔥 Remove logging

* feat: Updated pinData mixin to no longer include extra fields.

* ⚡ Output same pindata for every run

* 🎨 Fix cropping

* 🔥 Remove unrelated logging

* feat: Moved edit button next to pin button.

* feat: Changed data to be inserted for empty state.

* chore: Changed invalid editor output translation.

* feat: Added error line reporting on JSON Validation.

* feat: Migrated pinData edit mode to store.

* chore: Merged duplicate node border color condition.

* feat: Moved pin data validation to mixin. Added check before closing ndv modal.

* fix: Changed pinned data size calculation to discard active node pin data.

* feat: Added support for rename and delete node with pin data.

* feat: Simplified editing state. Fixed edit mode in input panel after store migration.

* feat: Various data pinning improvements.

* fix: Fixed callout link underline.

* refactor: Added support for both string and objects for data size check.

* feat: Added disabled node check for input panel. Fixed monaco editor resizing.

* fix: Fixed edit mode footer size.

* ⚡ Fix pindata items per run

* 👕 Remove unneeded exception

* refactor: Added isValidPinData() helper method.

* refactor: Changed how string size in bytes in calculated.g

* refactor: Updated pinData mixin interface.

* refactor: Merged filter and reduce in pinDataSize calculation.

* fix: Changed code-editor to correct type.

* fix: Added insert test data message to trigger nodes.

* feat: Disabled data pinning for multiple output nodes.

* refactor: Updated ndv.input.disabled translation to include node name.

* refactor: Aligned n8n-button usage inside of editor-ui.

* feat: Added edit data button on json hover.

* feat: Extracted code editor into separate form component.

* feat: Added edit data button on json hover.

* feat: Added pinData and edit mode methods.

* 🔥 Remove conflict markers

* ✏️ Update i18n keys

* ⚡ Add JSON validation

* 🗃️ Add `pinData` column to `workflow_entity`

* 📘 Tighten type

* ⚡ Make `pinData` column nullable

* ⚡ Adjust workflow endpoints for pin data

* 📘 Improve types

* ✏️ Improve wording

* Inject pindata into items flow (#3420)

* ⚡ Inject pin data - Second approach

* 🔥 Remove unneeded lint exception

* feat: Added edit data button on json hover.

* feat: Extracted code editor into separate form component.

* feat: Added edit data button on json hover.

* fix: Fixed rebase conflicts.

* ⏪ Undo button change

* 🐛 Fix runNode call

Adjust per update in bdb84130d6

* 🧪 Fix workflow tests

* 🐛 More merge conflict fixes

* feat: Added pin/unpin button and store mutations.

* feat: Size check. Various design and ux improvements.

* ⚡ Add transformer

* ⚡ Hoist pin data

* ⚡ Adjust endpoints for hoisted pin data

* 📘 Expand interface

* 🐛 Fix stray array

* 👕 Fix build

* 🎨 Add color secondary tints

* ✨ Create `HeaderMessage` component

* ⚡ Adjust `InfoTip` component

* ✨ Add `HeaderMessage` to `RunData`

* 🐛 Fix console error

* 👕 Fix lint

* ⚡ Consolidate `HeaderMessage` and `Callout`

* ⏪ Undo `InfoTip` changes

* 🔥 Remove duplicate icons

* ⚡ Simplify template

* 🎨 Change cursor for action text

* 👕 Fix lint

* ⚡ Add URL

* 🐛 Fix handler name

* ⚡ Use constant

* ♻️ Refactor per feedback

* fix: Various fixes after data pinning relocation.

* fix: Added store mutation for setting pinned data.

* feat: Added pinned state for workflow canvas node.

* ⚡ Fixes for canvas pin data (#3587)

* ⚡ Fixes for canvas pin data

* 📘 Rename type

* 🧪 Fix unrelated Public API test

* 🔥 Remove logging

* feat: Updated pinData mixin to no longer include extra fields.

* fix: Removed pinData hoisting (no longer necessary).

* chore: Merged duplicate node border color condition.

* ⚡ Output same pindata for every run

* 🎨 Fix cropping

* 🐛 Fix excess closing template tag

* fix: Removed rogue template tag after merge.

* fix: Fixed code-editor resizing when moving ndv panel.

* feat: Added node duplication pin data.

* ⚡ Implement telemetry

* ♻️ Add clarifications from call

* fix: Fixed run data header height.

* feat: Removed border from pin data callout.

* feat: Added line-break before 'or insert pin data'.

* feat: Changed enterEditMode to always insert test data if there's no execution data.

* feat: Removed copy output tooltip.

* feat: Removed unpin tooltip.

* fix: Removed thumbtack icon rotation.

* fix: Removed run info from Edit Output title.

* feat: Hid edit and pin buttons when editing.

* feat: Updated monaco code-editor padding and borders.

* feat: Progress on pinData error message format

* feat: Updated copy feature to work without any selected value.

* feat: Moved save and cancel buttons. Cleared notifications on save.

* feat: Changed pin data beforeClosing confirm text.

* feat: Closing ndv when discarding or saving pindata on close.

* feat: Added split in batches node to pin data denylist.

* fix: Added missing margin-bottom to webhook node.

* feat: Moved thumbtack icon to the right, replacing the checkmark.

* fix: Hid pagination while editing.

* feat: Added pin data discovery flow.

* feat: Changed pin data discovery flow to avoid tooltip glitching.

* fix: Changed copy selection to copy all input data.

* feat: Updated pin data validation error message for unexpected single quotes.

* fix: Replaced :manual='true' prop with manual shorthand.

* fix: Removed unused variable.

* chore: Renamed translation key to node.discovery.pinData.

* refactor: Extracted isPinDataNodeType to pinData mixin.

* fix: Updated watch condition to improve performance.

* refactor: Renamed some pin data variables and methods as per review.

* fix: Added partial translation for JSON.parse pin data error messages.

* chore: Temporarily disabled failing unit test.

* 🧪 Fix data pinning workflow retrieval test

* 🔥 Remove unused imports

* 🔥 Remove leftover line

* ⚡ Skip pindata node issues on BE

* ⚡ Skip pindata node issues on FE

* ⚡ Hide `RunInfo` for pindata node

* ⚡ Hide purple banner in edit output mode

* feat: Updated data pinning discoverability flow.

* fix: Fixed paginated data pinning.

* fix: Disabled pin data in read only mode.

* 🐛 Fix runtime error with non-array

* fix: Loading pin data when opening execution.

* ⚡ Adjust stale data warning for pinned data

* ⚡ Skip auth in endpoint

* ⚡ Mark start node for pinned trigger

* ✏️ Comment on passthrough

* 🔥 Remove comment

* Final pindata metrics changes (#3673)

* 🐛 Fix `pinData` tracked as `0`

* ⚡ Add `is_pinned` to `nodesGraph`

* 📘 Extend `IWorkflowBase`

* ⚡ Handle `pinData` being `undefined`

* ⚡ Add `data_pinning_tooltip_presented`

* ♻️ Refactor to remove circular dependency

* fix: Added pin data handling when importing workflow. (#3698)

* 🔥 Remove helper from WorkflowExecute

* ⚡ Add logic for single pinned trigger

* 👕 Remove lint exception

* fix: Added pin data handling in importWorkflowExact.

* N8N-4077 data pinning discoverability part 2 (#3701)

* fix: Fixed pin data discovery tooltip position when moving canvas.

* feat: Updated data pinning discovery tooltip copy.

* Fix data pinning build (#3702)

* ⚡ Disable edit button for disabled node

* ⚡ Ensure disabled pinned nodes are passthrough

* 🐛 Fix JSON key unfurling in edit mode

* ⚡ Improve implementation

* 🐛 Fix console error

* fix: Fixed copying pinned output data. (#3715)

* Fix pinning for webhook responding with output from last node (#3719)

* fix: Fixed entering edit mode after refresh.

* fix: Fixed type error during build.

* fix: RunData import formatting.

* chore: Updated pin data types.

* fix: Added missing type to stringSizeInBytes.

Co-authored-by: Iván Ovejero <ivov.src@gmail.com>

* fix: Showing pin data without executing the node only in output pane.

* fix: Updated no data message when previous node not executed.

* feat: Added expression input and evaluation for pin data nodes without execution.

* chore: Fixed linting issues and removed remnant console.log().

* chore: Undone package-lock changes.

* fix: Removed pin data store changes.

* fix: Created a new object using vuex runExecutionData.

* fix: Fixed bug appearing when adding a new node after executing.

* fix: Fix editor-ui build

* feat: Added green node connectors when having pin data output.

* chore: Fixed linting errors.

* fix: Added pin data eventBus unsubscribe.

* fix: Added pin data color check after adding a connection.

* 🎨 Add pindata styles

Co-authored-by: Iván Ovejero <ivov.src@gmail.com>

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

@@ -16,6 +16,10 @@
 							<font-awesome-icon icon="clock" />
 						</n8n-tooltip>
 					</div>
+					<span v-else-if="hasPinData" class="node-pin-data-icon">
+						<font-awesome-icon icon="thumbtack" />
+						<span v-if="workflowDataItems > 1" class="items-count"> {{ workflowDataItems }}</span>
+					</span>
 					<span v-else-if="workflowDataItems" class="data-count">
 						<font-awesome-icon icon="check" />
 						<span v-if="workflowDataItems > 1" class="items-count"> {{ workflowDataItems }}</span>
@@ -27,10 +31,22 @@
 				</div>
 
 				<div class="node-trigger-tooltip__wrapper">
-					<n8n-tooltip placement="top" :manual="true" :value="showTriggerNodeTooltip" popper-class="node-trigger-tooltip__wrapper--item">
+					<n8n-tooltip placement="top" manual :value="showTriggerNodeTooltip" popper-class="node-trigger-tooltip__wrapper--item">
 						<div slot="content" v-text="getTriggerNodeTooltip"></div>
 						<span />
 					</n8n-tooltip>
+					<n8n-tooltip
+						v-if="isTriggerNode"
+						placement="top"
+						manual
+						:value="pinDataDiscoveryTooltipVisible"
+						popper-class="node-trigger-tooltip__wrapper--item"
+					>
+						<template #content>
+							{{ $locale.baseText('node.discovery.pinData.canvas') }}
+						</template>
+						<span />
+					</n8n-tooltip>
 				</div>
 
 				<NodeIcon class="node-icon" :nodeType="nodeType" :size="40" :shrink="false" :disabled="this.data.disabled"/>
@@ -75,11 +91,12 @@
 <script lang="ts">
 
 import Vue from 'vue';
-import { CUSTOM_API_CALL_KEY, WAIT_TIME_UNLIMITED } from '@/constants';
+import {CUSTOM_API_CALL_KEY, LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG, WAIT_TIME_UNLIMITED} from '@/constants';
 import { externalHooks } from '@/components/mixins/externalHooks';
 import { nodeBase } from '@/components/mixins/nodeBase';
 import { nodeHelpers } from '@/components/mixins/nodeHelpers';
 import { workflowHelpers } from '@/components/mixins/workflowHelpers';
+import { pinData } from '@/components/mixins/pinData';
 
 import {
 	INodeTypeDescription,
@@ -95,7 +112,13 @@ import { get } from 'lodash';
 import { getStyleTokenValue, getTriggerNodeServiceName } from './helpers';
 import { INodeUi, XYPosition } from '@/Interface';
 
-export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).extend({
+export default mixins(
+	externalHooks,
+	nodeBase,
+	nodeHelpers,
+	workflowHelpers,
+	pinData,
+).extend({
 	name: 'Node',
 	components: {
 		NodeIcon,
@@ -105,6 +128,7 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 			return this.$store.getters.getWorkflowResultDataByNodeName(this.data.name);
 		},
 		hasIssues (): boolean {
+			if (this.hasPinData) return false;
 			if (this.data.issues !== undefined && Object.keys(this.data.issues).length) {
 				return true;
 			}
@@ -257,11 +281,9 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 			else if (!this.isExecuting) {
 				if (this.hasIssues) {
 					borderColor = getStyleTokenValue('--color-danger');
-				}
-				else if (this.waiting) {
+				} else if (this.waiting || this.hasPinData) {
 					borderColor = getStyleTokenValue('--color-secondary');
-				}
-				else if (this.workflowDataItems) {
+				} else if (this.workflowDataItems) {
 					borderColor = getStyleTokenValue('--color-success');
 				}
 			}
@@ -286,7 +308,7 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 				!this.isPollingTypeNode &&
 				!this.isNodeDisabled &&
 				this.workflowRunning &&
-				this.workflowDataItems === 0  &&
+				this.workflowDataItems === 0 &&
 				this.isSingleActiveTriggerNode &&
 				!this.isTriggerNodeTooltipEmpty &&
 				!this.hasIssues &&
@@ -306,6 +328,13 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 					this.showTriggerNodeTooltip = this.shouldShowTriggerTooltip;
 				}, 200);
 			}
+
+			if (this.pinDataDiscoveryTooltipVisible) {
+				this.pinDataDiscoveryTooltipVisible = false;
+				setTimeout(() => {
+					this.pinDataDiscoveryTooltipVisible = true;
+				}, 200);
+			}
 		},
 		shouldShowTriggerTooltip(shouldShowTriggerTooltip) {
 			if (shouldShowTriggerTooltip) {
@@ -320,6 +349,14 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 			this.$emit('run', {name: this.data.name, data: newValue, waiting: !!this.waiting});
 		},
 	},
+	created() {
+		const hasSeenPinDataTooltip = localStorage.getItem(LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG);
+		if (!hasSeenPinDataTooltip) {
+			this.unwatchWorkflowDataItems = this.$watch('workflowDataItems', (dataItemsCount: number) => {
+				this.showPinDataDiscoveryTooltip(dataItemsCount);
+			});
+		}
+	},
 	mounted() {
 		this.setSubtitle();
 		setTimeout(() => {
@@ -331,10 +368,22 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 			isTouchActive: false,
 			nodeSubtitle: '',
 			showTriggerNodeTooltip: false,
+			pinDataDiscoveryTooltipVisible: false,
 			dragging: false,
+			unwatchWorkflowDataItems: () => {},
 		};
 	},
 	methods: {
+		showPinDataDiscoveryTooltip(dataItemsCount: number): void {
+			if (!this.isTriggerNode) { return; }
+
+			if (dataItemsCount > 0) {
+				localStorage.setItem(LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG, 'true');
+
+				this.pinDataDiscoveryTooltipVisible = true;
+				this.unwatchWorkflowDataItems();
+			}
+		},
 		setSubtitle() {
 			const nodeSubtitle = this.getNodeSubtitle(this.data, this.nodeType, this.getWorkflow()) || '';
 
@@ -368,6 +417,7 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 
 		setNodeActive () {
 			this.$store.commit('setActiveNode', this.data.name);
+			this.pinDataDiscoveryTooltipVisible = false;
 		},
 		touchStart () {
 			if (this.isTouchDevice === true && this.isMacOs === false && this.isTouchActive === false) {
@@ -497,6 +547,15 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 			}
 		}
 
+		.node-pin-data-icon {
+			color: var(--color-secondary);
+			margin-right: 2px;
+
+			svg {
+				height: 0.85rem;
+			}
+		}
+
 		.waiting {
 			color: var(--color-secondary);
 		}