From 57d7b5e35edac78caffd27e29108272f0e995969 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ra=C3=BAl=20G=C3=B3mez=20Morales?= <raul00gm@gmail.com>
Date: Wed, 28 May 2025 15:42:48 +0200
Subject: [PATCH] fix(editor): Fix Execute workflow button hover state 
 (#15518)

---
 .../components/KeyboardShortcutTooltip.vue    |  3 ++-
 .../buttons/CanvasRunWorkflowButton.test.ts   | 20 +++++++++++++++++++
 .../buttons/CanvasRunWorkflowButton.vue       |  8 ++++++--
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/editor-ui/src/components/KeyboardShortcutTooltip.vue b/packages/frontend/editor-ui/src/components/KeyboardShortcutTooltip.vue
index fef80d5d13..2e6020df45 100644
--- a/packages/frontend/editor-ui/src/components/KeyboardShortcutTooltip.vue
+++ b/packages/frontend/editor-ui/src/components/KeyboardShortcutTooltip.vue
@@ -7,12 +7,13 @@ interface Props {
 	label: string;
 	shortcut?: KeyboardShortcut;
 	placement?: Placement;
+	disabled?: boolean;
 }
 withDefaults(defineProps<Props>(), { placement: 'top', shortcut: undefined });
 </script>
 
 <template>
-	<N8nTooltip :placement="placement" :show-after="500">
+	<N8nTooltip :placement="placement" :show-after="500" :disabled>
 		<template #content>
 			<div :class="$style.shortcut">
 				<div :class="$style.label">{{ label }}</div>
diff --git a/packages/frontend/editor-ui/src/components/canvas/elements/buttons/CanvasRunWorkflowButton.test.ts b/packages/frontend/editor-ui/src/components/canvas/elements/buttons/CanvasRunWorkflowButton.test.ts
index 080e511b3a..6712b57082 100644
--- a/packages/frontend/editor-ui/src/components/canvas/elements/buttons/CanvasRunWorkflowButton.test.ts
+++ b/packages/frontend/editor-ui/src/components/canvas/elements/buttons/CanvasRunWorkflowButton.test.ts
@@ -1,5 +1,7 @@
 import { createComponentRenderer } from '@/__tests__/render';
 import CanvasRunWorkflowButton from './CanvasRunWorkflowButton.vue';
+import userEvent from '@testing-library/user-event';
+import { waitFor } from '@testing-library/vue';
 
 const renderComponent = createComponentRenderer(CanvasRunWorkflowButton);
 
@@ -30,4 +32,22 @@ describe('CanvasRunWorkflowButton', () => {
 
 		expect(wrapper.getAllByText('Waiting for trigger event')).toHaveLength(2);
 	});
+
+	it("should only show the tooltip when it's not executing", async () => {
+		const wrapper = renderComponent({ props: { executing: false } });
+		await userEvent.hover(wrapper.getByRole('button'));
+
+		function isTooltipVisible(isVisible: boolean) {
+			return wrapper.baseElement.querySelector(
+				`[id^="el-popper-container"] div[aria-hidden="${!isVisible}"]`,
+			);
+		}
+
+		await waitFor(() => expect(isTooltipVisible(true)).toBeTruthy());
+
+		await wrapper.rerender({ executing: true });
+		await userEvent.hover(wrapper.getByRole('button'));
+
+		await waitFor(() => expect(isTooltipVisible(false)).toBeTruthy());
+	});
 });
diff --git a/packages/frontend/editor-ui/src/components/canvas/elements/buttons/CanvasRunWorkflowButton.vue b/packages/frontend/editor-ui/src/components/canvas/elements/buttons/CanvasRunWorkflowButton.vue
index 8f05b5a2b4..3c3b30805b 100644
--- a/packages/frontend/editor-ui/src/components/canvas/elements/buttons/CanvasRunWorkflowButton.vue
+++ b/packages/frontend/editor-ui/src/components/canvas/elements/buttons/CanvasRunWorkflowButton.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import KeyboardShortcutTooltip from '@/components/KeyboardShortcutTooltip.vue';
-import { computed } from 'vue';
 import { useI18n } from '@/composables/useI18n';
+import { computed } from 'vue';
 
 defineEmits<{
 	mouseenter: [event: MouseEvent];
@@ -31,7 +31,11 @@ const label = computed(() => {
 </script>
 
 <template>
-	<KeyboardShortcutTooltip :label="label" :shortcut="{ metaKey: true, keys: ['↵'] }">
+	<KeyboardShortcutTooltip
+		:label="label"
+		:shortcut="{ metaKey: true, keys: ['↵'] }"
+		:disabled="executing"
+	>
 		<N8nButton
 			:loading="executing"
 			:label="label"