fix(editor): Fix Execute workflow button hover state (#15518)

Author: r00gm

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>

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());
+	});
 });

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"