feat: Run once for each item tooltip (#9486)

Co-authored-by: Elias Meire <elias@meire.dev>

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

@@ -114,6 +114,7 @@
 						:read-only="readOnly"
 						:block-u-i="blockUi && showTriggerPanel"
 						:executable="!readOnly"
+						:input-size="inputSize"
 						@value-changed="valueChanged"
 						@execute="onNodeExecute"
 						@stop-execution="onStopExecution"
@@ -313,6 +314,8 @@ export default defineComponent({
 			return null;
 		});
 
+		const inputSize = computed(() => ndvStore.ndvInputDataWithPinnedData.length);
+
 		const isTriggerNode = computed(
 			() =>
 				!!activeNodeType.value &&
@@ -848,6 +851,7 @@ export default defineComponent({
 			inputRun,
 			linked,
 			inputNodeName,
+			inputSize,
 			hasForeignCredential,
 			outputRun,
 			isOutputPaneActive,

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

@@ -1,20 +1,25 @@
 <template>
 	<div>
-		<n8n-tooltip placement="bottom" :disabled="!disabledHint">
+		<n8n-tooltip placement="right" :disabled="!tooltipText">
 			<template #content>
-				<div>{{ disabledHint }}</div>
+				<div>{{ tooltipText }}</div>
 			</template>
 			<div>
 				<n8n-button
 					v-bind="$attrs"
-					:loading="nodeRunning && !isListeningForEvents && !isListeningForWorkflowEvents"
+					:loading
 					:disabled="disabled || !!disabledHint"
 					:label="buttonLabel"
 					:type="type"
 					:size="size"
 					:icon="!isListeningForEvents && !hideIcon ? 'flask' : undefined"
 					:transparent-background="transparent"
-					:title="!isTriggerNode ? $locale.baseText('ndv.execute.testNode.description') : ''"
+					:title="
+						!isTriggerNode && !tooltipText
+							? $locale.baseText('ndv.execute.testNode.description')
+							: ''
+					"
+					@mouseover="onMouseOver"
 					@click="onClick"
 				/>
 			</div>
@@ -46,6 +51,10 @@ import { useRunWorkflow } from '@/composables/useRunWorkflow';
 import { useUIStore } from '@/stores/ui.store';
 import { useRouter } from 'vue-router';
 
+const NODE_TEST_STEP_POPUP_COUNT_KEY = 'N8N_NODE_TEST_STEP_POPUP_COUNT';
+const MAX_POPUP_COUNT = 10;
+const POPUP_UPDATE_DELAY = 3000;
+
 export default defineComponent({
 	inheritAttrs: false,
 	props: {
@@ -76,6 +85,9 @@ export default defineComponent({
 		hideIcon: {
 			type: Boolean,
 		},
+		tooltip: {
+			type: String,
+		},
 	},
 	emits: ['stopExecution', 'execute'],
 	setup(props) {
@@ -91,6 +103,7 @@ export default defineComponent({
 			pinnedData,
 			runWorkflow,
 			stopCurrentExecution,
+			lastPopupCountUpdate: 0,
 			...useToast(),
 			...useMessage(),
 		};
@@ -193,6 +206,12 @@ export default defineComponent({
 
 			return '';
 		},
+		tooltipText(): string {
+			if (this.disabledHint) return this.disabledHint;
+			if (this.tooltip && !this.loading && this.testStepButtonPopupCount() < MAX_POPUP_COUNT)
+				return this.tooltip;
+			return '';
+		},
 		buttonLabel(): string {
 			if (this.isListeningForEvents || this.isListeningForWorkflowEvents) {
 				return this.$locale.baseText('ndv.execute.stopListening');
@@ -220,6 +239,10 @@ export default defineComponent({
 
 			return this.$locale.baseText('ndv.execute.testNode');
 		},
+
+		loading(): boolean {
+			return this.nodeRunning && !this.isListeningForEvents && !this.isListeningForWorkflowEvents;
+		},
 	},
 	methods: {
 		async stopWaitingForWebhook() {
@@ -231,6 +254,22 @@ export default defineComponent({
 			}
 		},
 
+		testStepButtonPopupCount() {
+			return Number(localStorage.getItem(NODE_TEST_STEP_POPUP_COUNT_KEY));
+		},
+
+		onMouseOver() {
+			const count = this.testStepButtonPopupCount();
+
+			if (count < MAX_POPUP_COUNT && !this.disabledHint && this.tooltipText) {
+				const now = Date.now();
+				if (!this.lastPopupCountUpdate || now - this.lastPopupCountUpdate >= POPUP_UPDATE_DELAY) {
+					localStorage.setItem(NODE_TEST_STEP_POPUP_COUNT_KEY, `${count + 1}`);
+					this.lastPopupCountUpdate = now;
+				}
+			}
+		},
+
 		async onClick() {
 			// Show chat if it's a chat node or a child of a chat node with no input data
 			if (this.isChatNode || (this.isChatChild && this.ndvStore.isNDVDataEmpty('input'))) {

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

@@ -22,6 +22,7 @@
 						data-test-id="node-execute-button"
 						:node-name="node.name"
 						:disabled="outputPanelEditMode.enabled && !isTriggerNode"
+						:tooltip="executeButtonTooltip"
 						size="small"
 						telemetry-source="parameters"
 						@execute="onNodeExecute"
@@ -307,6 +308,19 @@ export default defineComponent({
 		isLatestNodeVersion(): boolean {
 			return !this.node?.typeVersion || this.latestVersion === this.node.typeVersion;
 		},
+		executeButtonTooltip(): string {
+			if (
+				this.node &&
+				this.isLatestNodeVersion &&
+				this.inputSize > 1 &&
+				!NodeHelpers.isSingleExecution(this.node.type, this.node.parameters)
+			) {
+				return this.$locale.baseText('nodeSettings.executeButtonTooltip.times', {
+					interpolate: { inputSize: this.inputSize },
+				});
+			}
+			return '';
+		},
 		nodeVersionTag(): string {
 			if (!this.nodeType || this.nodeType.hidden) {
 				return this.$locale.baseText('nodeSettings.deprecated');
@@ -422,6 +436,10 @@ export default defineComponent({
 			type: Boolean,
 			default: true,
 		},
+		inputSize: {
+			type: Number,
+			default: 0,
+		},
 	},
 	data() {
 		return {

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -1149,6 +1149,7 @@
 	"nodeSettings.onError.options.stopWorkflow.description": "Halt execution and fail workflow",
 	"nodeSettings.onError.options.stopWorkflow.displayName": "Stop Workflow",
 	"nodeSettings.docs": "Docs",
+	"nodeSettings.executeButtonTooltip.times": "Will execute {inputSize} times, once for each input item",
 	"nodeSettings.executeOnce.description": "If active, the node executes only once, with data from the first item it receives",
 	"nodeSettings.executeOnce.displayName": "Execute Once",
 	"nodeSettings.maxTries.description": "Number of times to attempt to execute the node before failing the execution",