fix(editor): Don't show 'Test workflow' button if the canvas is read-only (#13199)

packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.test.ts

@@ -3,7 +3,8 @@ import { createComponentRenderer } from '@/__tests__/render';
 import { createPinia, setActivePinia } from 'pinia';
 import { NodeConnectionType } from 'n8n-workflow';
 import { fireEvent } from '@testing-library/vue';
-import { createCanvasNodeProps, createCanvasProvide } from '@/__tests__/data';
+import { createCanvasNodeData, createCanvasNodeProps, createCanvasProvide } from '@/__tests__/data';
+import { CanvasNodeRenderType } from '@/types';
 
 vi.mock('@/stores/nodeTypes.store', () => ({
 	useNodeTypesStore: vi.fn(() => ({
@@ -150,4 +151,30 @@ describe('CanvasNode', () => {
 			expect(getByTestId('overflow-node-button')).toBeInTheDocument();
 		});
 	});
+
+	describe('execute workflow button', () => {
+		const triggerNodeData = createCanvasNodeData({
+			name: 'foo',
+			render: {
+				type: CanvasNodeRenderType.Default,
+				options: { trigger: true },
+			},
+		});
+
+		it('should render execute workflow button if the node is a trigger node and is not read only', () => {
+			const { queryByTestId } = renderComponent({
+				props: createCanvasNodeProps({ readOnly: false, data: triggerNodeData }),
+			});
+
+			expect(queryByTestId('execute-workflow-button-foo')).toBeInTheDocument();
+		});
+
+		it('should not render execute workflow button if the node is a trigger node and is read only', () => {
+			const { queryByTestId } = renderComponent({
+				props: createCanvasNodeProps({ readOnly: true, data: triggerNodeData }),
+			});
+
+			expect(queryByTestId('execute-workflow-button-foo')).not.toBeInTheDocument();
+		});
+	});
 });

packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue

@@ -417,6 +417,7 @@ onBeforeUnmount(() => {
 			:type="data.type"
 			:hovered="nearbyHovered"
 			:disabled="isDisabled"
+			:read-only="readOnly"
 			:class="$style.trigger"
 		/>
 	</div>

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

@@ -14,12 +14,14 @@ const {
 	type,
 	hovered,
 	disabled,
+	readOnly,
 	class: cls,
 } = defineProps<{
 	name: string;
 	type: string;
 	hovered?: boolean;
 	disabled?: boolean;
+	readOnly?: boolean;
 	class?: string;
 }>();
 
@@ -29,7 +31,7 @@ const style = useCssModule();
 const containerClass = computed(() => ({
 	[cls ?? '']: true,
 	[style.container]: true,
-	[style.interactive]: !disabled,
+	[style.interactive]: !disabled && !readOnly,
 	[style.hovered]: !!hovered,
 	[style.variant1]: variant.value === 1,
 	[style.variant2]: variant.value === 2,
@@ -55,6 +57,7 @@ const testId = computed(() => `execute-workflow-button-${name}`);
 				<FontAwesomeIcon icon="bolt" size="lg" />
 			</div>
 
+			<template v-if="!readOnly">
 				<N8nButton
 					v-if="variant === 1 && type === CHAT_TRIGGER_NODE_TYPE"
 					type="secondary"
@@ -91,6 +94,7 @@ const testId = computed(() => `execute-workflow-button-${name}`);
 					:label="i18n.baseText('nodeView.runButtonText.executeWorkflow')"
 					@click.capture="runEntireWorkflow('node', name)"
 				/>
+			</template>
 		</div>
 	</div>
 </template>
@@ -112,7 +116,7 @@ const testId = computed(() => `execute-workflow-button-${name}`);
 		align-items: center;
 	}
 
-	&.hovered button {
+	&.interactive.hovered button {
 		pointer-events: all;
 	}
 }