fix(editor): Disable context menu actions in read-only mode (#7789)

Github issue / Community forum post (link here to close automatically):

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

@@ -4,38 +4,47 @@ import { N8nActionDropdown } from 'n8n-design-system';
 import type { INode } from 'n8n-workflow';
 import { watch, ref } from 'vue';
 
-const { isOpen, actions, position, targetNodes, target, close } = useContextMenu();
-const contextMenu = ref<InstanceType<typeof N8nActionDropdown>>();
+const contextMenu = useContextMenu();
+const { position, isOpen, actions, target } = contextMenu;
+const dropdown = ref<InstanceType<typeof N8nActionDropdown>>();
 const emit = defineEmits<{ (event: 'action', action: ContextMenuAction, nodes: INode[]): void }>();
 
 watch(
 	isOpen,
 	() => {
 		if (isOpen) {
-			contextMenu.value?.open();
+			dropdown.value?.open();
 		} else {
-			contextMenu.value?.close();
+			dropdown.value?.close();
 		}
 	},
 	{ flush: 'post' },
 );
 
 function onActionSelect(item: string) {
-	emit('action', item as ContextMenuAction, targetNodes.value);
+	const action = item as ContextMenuAction;
+	contextMenu._dispatchAction(action);
+	emit('action', action, contextMenu.targetNodes.value);
 }
 
 function onVisibleChange(open: boolean) {
 	if (!open) {
-		close();
+		contextMenu.close();
 	}
 }
 </script>
 
 <template>
 	<Teleport v-if="isOpen" to="body">
-		<div :class="$style.contextMenu" :style="{ top: `${position[1]}px`, left: `${position[0]}px` }">
+		<div
+			:class="$style.contextMenu"
+			:style="{
+				left: `${position[0]}px`,
+				top: `${position[1]}px`,
+			}"
+		>
 			<n8n-action-dropdown
-				ref="contextMenu"
+				ref="dropdown"
 				:items="actions"
 				placement="bottom-start"
 				data-test-id="context-menu"

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

@@ -65,6 +65,7 @@
 				>
 					<template #reference>
 						<div
+							ref="colorPopoverTrigger"
 							class="option"
 							data-test-id="change-sticky-color"
 							:title="$locale.baseText('node.changeColor')"
@@ -100,7 +101,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, ref } from 'vue';
 import { mapStores } from 'pinia';
 
 import { externalHooks } from '@/mixins/externalHooks';
@@ -127,8 +128,18 @@ export default defineComponent({
 	name: 'Sticky',
 	mixins: [externalHooks, nodeBase, nodeHelpers, workflowHelpers],
 	setup() {
-		const contextMenu = useContextMenu();
-		return { contextMenu };
+		const colorPopoverTrigger = ref<HTMLDivElement>();
+		const forceActions = ref(false);
+		const setForceActions = (value: boolean) => {
+			forceActions.value = value;
+		};
+		const contextMenu = useContextMenu((action) => {
+			if (action === 'change_color') {
+				setForceActions(true);
+				colorPopoverTrigger.value?.click();
+			}
+		});
+		return { colorPopoverTrigger, contextMenu, forceActions, setForceActions };
 	},
 	props: {
 		nodeViewScale: {
@@ -208,17 +219,16 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			forceActions: false,
 			isResizing: false,
 			isTouchActive: false,
 		};
 	},
 	methods: {
 		onShowPopover() {
-			this.forceActions = true;
+			this.setForceActions(true);
 		},
 		onHidePopover() {
-			this.forceActions = false;
+			this.setForceActions(false);
 		},
 		async deleteNode() {
 			// Wait a tick else vue causes problems because the data is gone