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

Github issue / Community forum post (link here to close automatically):
n8n-io · Nov 23, 2023 · 902beff · 902beff
1 parent 865192a
commit 902beff
Show file tree

Hide file tree

Showing 6 changed files with 268 additions and 24 deletions.
diff --git a/packages/editor-ui/src/components/ContextMenu/ContextMenu.vue b/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"

diff --git a/packages/editor-ui/src/components/Sticky.vue b/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

diff --git a/packages/editor-ui/src/composables/__tests__/__snapshots__/useContextMenu.test.ts.snap b/packages/editor-ui/src/composables/__tests__/__snapshots__/useContextMenu.test.ts.snap
@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`useContextMenu > should return the correct actions opening the menu from the button 1`] = `
+exports[`useContextMenu > Read-only mode > should return the correct actions when right clicking a Node 1`] = `
 [
   {
     "id": "open",
@@ -12,6 +12,7 @@ exports[`useContextMenu > should return the correct actions opening the menu fro
     },
   },
   {
+    "disabled": true,
     "id": "execute",
     "label": "Execute node",
   },
@@ -97,7 +98,76 @@ exports[`useContextMenu > should return the correct actions opening the menu fro
 ]
 `;
 
-exports[`useContextMenu > should return the correct actions when right clicking a Node 1`] = `
+exports[`useContextMenu > Read-only mode > should return the correct actions when right clicking a sticky 1`] = `
+[
+  {
+    "disabled": true,
+    "id": "open",
+    "label": "Edit sticky note",
+    "shortcut": {
+      "keys": [
+        "↵",
+      ],
+    },
+  },
+  {
+    "disabled": true,
+    "id": "change_color",
+    "label": "Change color",
+  },
+  {
+    "id": "copy",
+    "label": "Copy sticky note",
+    "shortcut": {
+      "keys": [
+        "C",
+      ],
+      "metaKey": true,
+    },
+  },
+  {
+    "disabled": true,
+    "id": "duplicate",
+    "label": "Duplicate sticky note",
+    "shortcut": {
+      "keys": [
+        "D",
+      ],
+      "metaKey": true,
+    },
+  },
+  {
+    "disabled": false,
+    "divided": true,
+    "id": "select_all",
+    "label": "Select all",
+    "shortcut": {
+      "keys": [
+        "A",
+      ],
+      "metaKey": true,
+    },
+  },
+  {
+    "disabled": false,
+    "id": "deselect_all",
+    "label": "Clear selection",
+  },
+  {
+    "disabled": true,
+    "divided": true,
+    "id": "delete",
+    "label": "Delete sticky note",
+    "shortcut": {
+      "keys": [
+        "Del",
+      ],
+    },
+  },
+]
+`;
+
+exports[`useContextMenu > should return the correct actions opening the menu from the button 1`] = `
 [
   {
     "id": "open",
@@ -109,11 +179,12 @@ exports[`useContextMenu > should return the correct actions when right clicking
     },
   },
   {
+    "disabled": false,
     "id": "execute",
     "label": "Execute node",
   },
   {
-    "disabled": true,
+    "disabled": false,
     "id": "rename",
     "label": "Rename node",
     "shortcut": {
@@ -123,7 +194,7 @@ exports[`useContextMenu > should return the correct actions when right clicking
     },
   },
   {
-    "disabled": true,
+    "disabled": false,
     "id": "toggle_activation",
     "label": "Deactivate node",
     "shortcut": {
@@ -180,8 +251,106 @@ exports[`useContextMenu > should return the correct actions when right clicking
     "id": "deselect_all",
     "label": "Clear selection",
   },
+  {
+    "disabled": false,
+    "divided": true,
+    "id": "delete",
+    "label": "Delete node",
+    "shortcut": {
+      "keys": [
+        "Del",
+      ],
+    },
+  },
+]
+`;
+
+exports[`useContextMenu > should return the correct actions when right clicking a Node 1`] = `
+[
+  {
+    "id": "open",
+    "label": "Open node...",
+    "shortcut": {
+      "keys": [
+        "↵",
+      ],
+    },
+  },
+  {
+    "disabled": false,
+    "id": "execute",
+    "label": "Execute node",
+  },
+  {
+    "disabled": false,
+    "id": "rename",
+    "label": "Rename node",
+    "shortcut": {
+      "keys": [
+        "F2",
+      ],
+    },
+  },
+  {
+    "disabled": false,
+    "id": "toggle_activation",
+    "label": "Deactivate node",
+    "shortcut": {
+      "keys": [
+        "D",
+      ],
+    },
+  },
   {
     "disabled": true,
+    "id": "toggle_pin",
+    "label": "Pin node",
+    "shortcut": {
+      "keys": [
+        "p",
+      ],
+    },
+  },
+  {
+    "id": "copy",
+    "label": "Copy node",
+    "shortcut": {
+      "keys": [
+        "C",
+      ],
+      "metaKey": true,
+    },
+  },
+  {
+    "disabled": true,
+    "id": "duplicate",
+    "label": "Duplicate node",
+    "shortcut": {
+      "keys": [
+        "D",
+      ],
+      "metaKey": true,
+    },
+  },
+  {
+    "disabled": false,
+    "divided": true,
+    "id": "select_all",
+    "label": "Select all",
+    "shortcut": {
+      "keys": [
+        "A",
+      ],
+      "metaKey": true,
+    },
+  },
+  {
+    "disabled": false,
+    "id": "deselect_all",
+    "label": "Clear selection",
+  },
+  {
+    "disabled": false,
     "divided": true,
     "id": "delete",
     "label": "Delete node",
@@ -197,6 +366,7 @@ exports[`useContextMenu > should return the correct actions when right clicking
 exports[`useContextMenu > should return the correct actions when right clicking a sticky 1`] = `
 [
   {
+    "disabled": false,
     "id": "open",
     "label": "Edit sticky note",
     "shortcut": {
@@ -205,6 +375,11 @@ exports[`useContextMenu > should return the correct actions when right clicking
       ],
     },
   },
+  {
+    "disabled": false,
+    "id": "change_color",
+    "label": "Change color",
+  },
   {
     "id": "copy",
     "label": "Copy sticky note",
@@ -244,7 +419,7 @@ exports[`useContextMenu > should return the correct actions when right clicking
     "label": "Clear selection",
   },
   {
-    "disabled": true,
+    "disabled": false,
     "divided": true,
     "id": "delete",
     "label": "Delete sticky note",
@@ -260,7 +435,7 @@ exports[`useContextMenu > should return the correct actions when right clicking
 exports[`useContextMenu > should support opening and closing (default = right click on canvas) 1`] = `
 [
   {
-    "disabled": true,
+    "disabled": false,
     "id": "toggle_activation",
     "label": "Deactivate 2 nodes",
     "shortcut": {
@@ -318,7 +493,7 @@ exports[`useContextMenu > should support opening and closing (default = right cl
     "label": "Clear selection",
   },
   {
-    "disabled": true,
+    "disabled": false,
     "divided": true,
     "id": "delete",
     "label": "Delete 2 nodes",