From c2dd9f61b4623247e4dccb17318db475f9ac187f Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Fri, 10 Oct 2025 10:53:37 +0300
Subject: [PATCH] refactor(editor): Extract `contextMenu` into features
 (no-changelog) (#20582)

---
 .../editor-ui/src/components/FocusPanel.vue   |    2 +-
 .../src/features/canvas/components/Canvas.vue |    8 +-
 .../canvas/components/WorkflowCanvas.vue      |    2 +-
 .../components/elements/nodes/CanvasNode.vue  |    2 +-
 .../ExperimentalNodeDetailsDrawer.vue         |    5 +-
 .../contextMenu/components}/ContextMenu.vue   |    4 +-
 .../__snapshots__/useContextMenu.test.ts.snap | 1257 +++++++++++++++++
 .../composables/useContextMenu.test.ts        |    2 +-
 .../composables/useContextMenu.ts             |    2 +-
 .../composables/useContextMenuItems.ts        |    4 +-
 .../frontend/editor-ui/src/views/NodeView.vue |    2 +-
 11 files changed, 1275 insertions(+), 15 deletions(-)
 rename packages/frontend/editor-ui/src/{components/ContextMenu => features/ui/contextMenu/components}/ContextMenu.vue (91%)
 create mode 100644 packages/frontend/editor-ui/src/features/ui/contextMenu/composables/__snapshots__/useContextMenu.test.ts.snap
 rename packages/frontend/editor-ui/src/{ => features/ui/contextMenu}/composables/useContextMenu.test.ts (99%)
 rename packages/frontend/editor-ui/src/{ => features/ui/contextMenu}/composables/useContextMenu.ts (96%)
 rename packages/frontend/editor-ui/src/{ => features/ui/contextMenu}/composables/useContextMenuItems.ts (98%)

diff --git a/packages/frontend/editor-ui/src/components/FocusPanel.vue b/packages/frontend/editor-ui/src/components/FocusPanel.vue
index c9ef264df7b..0aaf77fe672 100644
--- a/packages/frontend/editor-ui/src/components/FocusPanel.vue
+++ b/packages/frontend/editor-ui/src/components/FocusPanel.vue
@@ -46,7 +46,7 @@ import { useNDVStore } from '@/stores/ndv.store';
 import { useVueFlow } from '@vue-flow/core';
 import ExperimentalFocusPanelHeader from '@/features/canvas/experimental/components/ExperimentalFocusPanelHeader.vue';
 import { useTelemetryContext } from '@/composables/useTelemetryContext';
-import { type ContextMenuAction } from '@/composables/useContextMenuItems';
+import { type ContextMenuAction } from '@/features/ui/contextMenu/composables/useContextMenuItems';
 import { type CanvasNode, CanvasNodeRenderType } from '@/features/canvas/canvas.types';
 import { useCanvasOperations } from '@/composables/useCanvasOperations';
 
diff --git a/packages/frontend/editor-ui/src/features/canvas/components/Canvas.vue b/packages/frontend/editor-ui/src/features/canvas/components/Canvas.vue
index 0cabae74f31..97c62125deb 100644
--- a/packages/frontend/editor-ui/src/features/canvas/components/Canvas.vue
+++ b/packages/frontend/editor-ui/src/features/canvas/components/Canvas.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import ContextMenu from '@/components/ContextMenu/ContextMenu.vue';
+import ContextMenu from '@/features/ui/contextMenu/components/ContextMenu.vue';
+import type { ContextMenuTarget } from '@/features/ui/contextMenu/composables/useContextMenu';
+import { useContextMenu } from '@/features/ui/contextMenu/composables/useContextMenu';
 import type { CanvasLayoutEvent } from '../composables/useCanvasLayout';
 import { useCanvasLayout } from '../composables/useCanvasLayout';
 import { useCanvasNodeHover } from '../composables/useCanvasNodeHover';
 import { useCanvasTraversal } from '../composables/useCanvasTraversal';
-import type { ContextMenuTarget } from '@/composables/useContextMenu';
-import { useContextMenu } from '@/composables/useContextMenu';
 import { type KeyMap, useKeybindings } from '@/composables/useKeybindings';
 import type { PinDataSource } from '@/composables/usePinnedData';
 import { CanvasKey } from '@/constants';
@@ -58,7 +58,7 @@ import CanvasControlButtons from './elements/buttons/CanvasControlButtons.vue';
 import Edge from './elements/edges/CanvasEdge.vue';
 import Node from './elements/nodes/CanvasNode.vue';
 import { useExperimentalNdvStore } from '../experimental/experimentalNdv.store';
-import { type ContextMenuAction } from '@/composables/useContextMenuItems';
+import { type ContextMenuAction } from '@/features/ui/contextMenu/composables/useContextMenuItems';
 
 const $style = useCssModule();
 
diff --git a/packages/frontend/editor-ui/src/features/canvas/components/WorkflowCanvas.vue b/packages/frontend/editor-ui/src/features/canvas/components/WorkflowCanvas.vue
index ff72f04b325..31aa87798d5 100644
--- a/packages/frontend/editor-ui/src/features/canvas/components/WorkflowCanvas.vue
+++ b/packages/frontend/editor-ui/src/features/canvas/components/WorkflowCanvas.vue
@@ -9,7 +9,7 @@ import { createEventBus } from '@n8n/utils/event-bus';
 import type { CanvasEventBusEvents } from '../canvas.types';
 import { useVueFlow } from '@vue-flow/core';
 import { throttledRef } from '@vueuse/core';
-import type { ContextMenuAction } from '@/composables/useContextMenuItems';
+import type { ContextMenuAction } from '@/features/ui/contextMenu/composables/useContextMenuItems';
 
 defineOptions({
 	inheritAttrs: false,
diff --git a/packages/frontend/editor-ui/src/features/canvas/components/elements/nodes/CanvasNode.vue b/packages/frontend/editor-ui/src/features/canvas/components/elements/nodes/CanvasNode.vue
index 535d05f45dd..a5e403f132f 100644
--- a/packages/frontend/editor-ui/src/features/canvas/components/elements/nodes/CanvasNode.vue
+++ b/packages/frontend/editor-ui/src/features/canvas/components/elements/nodes/CanvasNode.vue
@@ -22,7 +22,7 @@ import CanvasNodeRenderer from './CanvasNodeRenderer.vue';
 import CanvasHandleRenderer from '../handles/CanvasHandleRenderer.vue';
 import { useNodeConnections } from '@/composables/useNodeConnections';
 import { CanvasNodeKey } from '@/constants';
-import { useContextMenu } from '@/composables/useContextMenu';
+import { useContextMenu } from '@/features/ui/contextMenu/composables/useContextMenu';
 import type { NodeProps, XYPosition } from '@vue-flow/core';
 import { Position } from '@vue-flow/core';
 import { useCanvas } from '../../../composables/useCanvas';
diff --git a/packages/frontend/editor-ui/src/features/canvas/experimental/components/ExperimentalNodeDetailsDrawer.vue b/packages/frontend/editor-ui/src/features/canvas/experimental/components/ExperimentalNodeDetailsDrawer.vue
index 182e43234ae..b370c67b0a8 100644
--- a/packages/frontend/editor-ui/src/features/canvas/experimental/components/ExperimentalNodeDetailsDrawer.vue
+++ b/packages/frontend/editor-ui/src/features/canvas/experimental/components/ExperimentalNodeDetailsDrawer.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { useExpressionResolveCtx } from '@/features/canvas/experimental/composables/useExpressionResolveCtx';
-import { type ContextMenuAction, useContextMenuItems } from '@/composables/useContextMenuItems';
+import {
+	type ContextMenuAction,
+	useContextMenuItems,
+} from '@/features/ui/contextMenu/composables/useContextMenuItems';
 import { ExpressionLocalResolveContextSymbol } from '@/constants';
 import { type INodeUi } from '@/Interface';
 import { computed, provide, ref, watch } from 'vue';
diff --git a/packages/frontend/editor-ui/src/components/ContextMenu/ContextMenu.vue b/packages/frontend/editor-ui/src/features/ui/contextMenu/components/ContextMenu.vue
similarity index 91%
rename from packages/frontend/editor-ui/src/components/ContextMenu/ContextMenu.vue
rename to packages/frontend/editor-ui/src/features/ui/contextMenu/components/ContextMenu.vue
index 5997718dfd7..bd8bc182be8 100644
--- a/packages/frontend/editor-ui/src/components/ContextMenu/ContextMenu.vue
+++ b/packages/frontend/editor-ui/src/features/ui/contextMenu/components/ContextMenu.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { useContextMenu } from '@/composables/useContextMenu';
-import { type ContextMenuAction } from '@/composables/useContextMenuItems';
+import { useContextMenu } from '../composables/useContextMenu';
+import { type ContextMenuAction } from '../composables/useContextMenuItems';
 import { useStyles } from '@/composables/useStyles';
 import { ref, watch } from 'vue';
 import { type ComponentExposed } from 'vue-component-type-helpers';
diff --git a/packages/frontend/editor-ui/src/features/ui/contextMenu/composables/__snapshots__/useContextMenu.test.ts.snap b/packages/frontend/editor-ui/src/features/ui/contextMenu/composables/__snapshots__/useContextMenu.test.ts.snap
new file mode 100644
index 00000000000..4f1d77f1292
--- /dev/null
+++ b/packages/frontend/editor-ui/src/features/ui/contextMenu/composables/__snapshots__/useContextMenu.test.ts.snap
@@ -0,0 +1,1257 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`useContextMenu > Read-only mode > should return the correct actions when right clicking a Node 1`] = `
+[
+  {
+    "id": "open",
+    "label": "Open...",
+    "shortcut": {
+      "keys": [
+        "↵",
+      ],
+    },
+  },
+  {
+    "disabled": true,
+    "id": "execute",
+    "label": "Execute step",
+  },
+  {
+    "disabled": true,
+    "id": "rename",
+    "label": "Rename",
+    "shortcut": {
+      "keys": [
+        "Space",
+      ],
+    },
+  },
+  {
+    "disabled": true,
+    "id": "replace",
+    "label": "Replace",
+    "shortcut": {
+      "keys": [
+        "R",
+      ],
+    },
+  },
+  {
+    "disabled": true,
+    "id": "toggle_activation",
+    "label": "Deactivate",
+    "shortcut": {
+      "keys": [
+        "D",
+      ],
+    },
+  },
+  {
+    "disabled": true,
+    "id": "toggle_pin",
+    "label": "Pin",
+    "shortcut": {
+      "keys": [
+        "p",
+      ],
+    },
+  },
+  {
+    "id": "copy",
+    "label": "Copy",
+    "shortcut": {
+      "keys": [
+        "C",
+      ],
+      "metaKey": true,
+    },
+  },
+  {
+    "disabled": true,
+    "id": "duplicate",
+    "label": "Duplicate",
+    "shortcut": {
+      "keys": [
+        "D",
+      ],
+      "metaKey": true,
+    },
+  },
+  {
+    "divided": true,
+    "id": "tidy_up",
+    "label": "Tidy up workflow",
+    "shortcut": {
+      "altKey": true,
+      "keys": [
+        "T",
+      ],
+      "shiftKey": true,
+    },
+  },
+  {
+    "disabled": true,
+    "divided": true,
+    "id": "extract_sub_workflow",
+    "label": "Convert node to sub-workflow",
+    "shortcut": {
+      "altKey": true,
+      "keys": [
+        "X",
+      ],
+    },
+  },
+  {
+    "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",
+    "shortcut": {
+      "keys": [
+        "Del",
+      ],
+    },
+  },
+]
+`;
+
+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",
+    "shortcut": {
+      "keys": [
+        "C",
+      ],
+      "metaKey": true,
+    },
+  },
+  {
+    "disabled": true,
+    "id": "duplicate",
+    "label": "Duplicate",
+    "shortcut": {
+      "keys": [
+        "D",
+      ],
+      "metaKey": true,
+    },
+  },
+  {
+    "divided": true,
+    "id": "tidy_up",
+    "label": "Tidy up workflow",
+    "shortcut": {
+      "altKey": true,
+      "keys": [
+        "T",
+      ],
+      "shiftKey": true,
+    },
+  },
+  {
+    "disabled": true,
+    "divided": true,
+    "id": "extract_sub_workflow",
+    "label": "Convert node to sub-workflow",
+    "shortcut": {
+      "altKey": true,
+      "keys": [
+        "X",
+      ],
+    },
+  },
+  {
+    "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",
+    "shortcut": {
+      "keys": [
+        "Del",
+      ],
+    },
+  },
+]
+`;
+
+exports[`useContextMenu > should return the correct actions opening the menu from the button 1`] = `
+[
+  {
+    "id": "open",
+    "label": "Open...",
+    "shortcut": {
+      "keys": [
+        "↵",
+      ],
+    },
+  },
+  {
+    "disabled": false,
+    "id": "execute",
+    "label": "Execute step",
+  },
+  {
+    "disabled": false,
+    "id": "rename",
+    "label": "Rename",
+    "shortcut": {
+      "keys": [
+        "Space",
+      ],
+    },
+  },
+  {
+    "disabled": false,
+    "id": "replace",
+    "label": "Replace",
+    "shortcut": {
+      "keys": [
+        "R",
+      ],
+    },
+  },
+  {
+    "disabled": false,
+    "id": "toggle_activation",
+    "label": "Deactivate",
+    "shortcut": {
+      "keys": [
+        "D",
+      ],
+    },
+  },
+  {
+    "disabled": true,
+    "id": "toggle_pin",
+    "label": "Pin",
+    "shortcut": {
+      "keys": [
+        "p",
+      ],
+    },
+  },
+  {
+    "id": "copy",
+    "label": "Copy",
+    "shortcut": {
+      "keys": [
+        "C",
+      ],
+      "metaKey": true,
+    },
+  },
+  {
+    "disabled": true,
+    "id": "duplicate",
+    "label": "Duplicate",
+    "shortcut": {
+      "keys": [
+        "D",
+      ],
+      "metaKey": true,
+    },
+  },
+  {
+    "divided": true,
+    "id": "tidy_up",
+    "label": "Tidy up workflow",
+    "shortcut": {
+      "altKey": true,
+      "keys": [
+        "T",
+      ],
+      "shiftKey": true,
+    },
+  },
+  {
+    "disabled": false,
+    "divided": true,
+    "id": "extract_sub_workflow",
+    "label": "Convert node to sub-workflow",
+    "shortcut": {
+      "altKey": true,
+      "keys": [
+        "X",
+      ],
+    },
+  },
+  {
+    "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",
+    "shortcut": {
+      "keys": [
+        "Del",
+      ],
+    },
+  },
+]
+`;
+
+exports[`useContextMenu > should return the correct actions when right clicking a Node 1`] = `
+[
+  {
+    "id": "open",
+    "label": "Open...",
+    "shortcut": {
+      "keys": [
+        "↵",
+      ],
+    },
+  },
+  {
+    "disabled": false,
+    "id": "execute",
+    "label": "Execute step",
+  },
+  {
+    "disabled": false,
+    "id": "rename",
+    "label": "Rename",
+    "shortcut": {
+      "keys": [
+        "Space",
+      ],
+    },
+  },
+  {
+    "disabled": false,
+    "id": "replace",
+    "label": "Replace",
+    "shortcut": {
+      "keys": [
+        "R",
+      ],
+    },
+  },
+  {
+    "disabled": false,
+    "id": "toggle_activation",
+    "label": "Deactivate",
+    "shortcut": {
+      "keys": [
+        "D",
+      ],
+    },
+  },
+  {
+    "disabled": true,
+    "id": "toggle_pin",
+    "label": "Pin",
+    "shortcut": {
+      "keys": [
+        "p",
+      ],
+    },
+  },
+  {
+    "id": "copy",
+    "label": "Copy",
+    "shortcut": {
+      "keys": [
+        "C",
+      ],
+      "metaKey": true,
+    },
+  },
+  {
+    "disabled": true,
+    "id": "duplicate",
+    "label": "Duplicate",
+    "shortcut": {
+      "keys": [
+        "D",
+      ],
+      "metaKey": true,
+    },
+  },
+  {
+    "divided": true,
+    "id": "tidy_up",
+    "label": "Tidy up workflow",
+    "shortcut": {
+      "altKey": true,
+      "keys": [
+        "T",
+      ],
+      "shiftKey": true,
+    },
+  },
+  {
+    "disabled": false,
+    "divided": true,
+    "id": "extract_sub_workflow",
+    "label": "Convert node to sub-workflow",
+    "shortcut": {
+      "altKey": true,
+      "keys": [
+        "X",
+      ],
+    },
+  },
+  {
+    "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",
+    "shortcut": {
+      "keys": [
+        "Del",
+      ],
+    },
+  },
+]
+`;
+
+exports[`useContextMenu > should return the correct actions when right clicking a sticky 1`] = `
+[
+  {
+    "disabled": false,
+    "id": "open",
+    "label": "Edit sticky note",
+    "shortcut": {
+      "keys": [
+        "↵",
+      ],
+    },
+  },
+  {
+    "disabled": false,
+    "id": "change_color",
+    "label": "Change color",
+  },
+  {
+    "id": "copy",
+    "label": "Copy",
+    "shortcut": {
+      "keys": [
+        "C",
+      ],
+      "metaKey": true,
+    },
+  },
+  {
+    "disabled": true,
+    "id": "duplicate",
+    "label": "Duplicate",
+    "shortcut": {
+      "keys": [
+        "D",
+      ],
+      "metaKey": true,
+    },
+  },
+  {
+    "divided": true,
+    "id": "tidy_up",
+    "label": "Tidy up workflow",
+    "shortcut": {
+      "altKey": true,
+      "keys": [
+        "T",
+      ],
+      "shiftKey": true,
+    },
+  },
+  {
+    "disabled": false,
+    "divided": true,
+    "id": "extract_sub_workflow",
+    "label": "Convert node to sub-workflow",
+    "shortcut": {
+      "altKey": true,
+      "keys": [
+        "X",
+      ],
+    },
+  },
+  {
+    "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",
+    "shortcut": {
+      "keys": [
+        "Del",
+      ],
+    },
+  },
+]
+`;
+
+exports[`useContextMenu > should show "Go to Sub-workflow" action (disabled) when node is "Execute Workflow" without a set workflow 1`] = `
+[
+  {
+    "id": "open",
+    "label": "Open...",
+    "shortcut": {
+      "keys": [
+        "↵",
+      ],
+    },
+  },
+  {
+    "disabled": false,
+    "id": "execute",
+    "label": "Execute step",
+  },
+  {
+    "disabled": false,
+    "id": "rename",
+    "label": "Rename",
+    "shortcut": {
+      "keys": [
+        "Space",
+      ],
+    },
+  },
+  {
+    "disabled": false,
+    "id": "replace",
+    "label": "Replace",
+    "shortcut": {
+      "keys": [
+        "R",
+      ],
+    },
+  },
+  {
+    "disabled": true,
+    "id": "open_sub_workflow",
+    "label": "Go to Sub-workflow",
+    "shortcut": {
+      "keys": [
+        "O",
+      ],
+      "metaKey": true,
+      "shiftKey": true,
+    },
+  },
+  {
+    "disabled": false,
+    "id": "toggle_activation",
+    "label": "Deactivate",
+    "shortcut": {
+      "keys": [
+        "D",
+      ],
+    },
+  },
+  {
+    "disabled": true,
+    "id": "toggle_pin",
+    "label": "Pin",
+    "shortcut": {
+      "keys": [
+        "p",
+      ],
+    },
+  },
+  {
+    "id": "copy",
+    "label": "Copy",
+    "shortcut": {
+      "keys": [
+        "C",
+      ],
+      "metaKey": true,
+    },
+  },
+  {
+    "disabled": true,
+    "id": "duplicate",
+    "label": "Duplicate",
+    "shortcut": {
+      "keys": [
+        "D",
+      ],
+      "metaKey": true,
+    },
+  },
+  {
+    "divided": true,
+    "id": "tidy_up",
+    "label": "Tidy up workflow",
+    "shortcut": {
+      "altKey": true,
+      "keys": [
+        "T",
+      ],
+      "shiftKey": true,
+    },
+  },
+  {
+    "disabled": false,
+    "divided": true,
+    "id": "extract_sub_workflow",
+    "label": "Convert node to sub-workflow",
+    "shortcut": {
+      "altKey": true,
+      "keys": [
+        "X",
+      ],
+    },
+  },
+  {
+    "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",
+    "shortcut": {
+      "keys": [
+        "Del",
+      ],
+    },
+  },
+]
+`;
+
+exports[`useContextMenu > should show "Go to Sub-workflow" action (disabled) when node is "Workflow Tool" without a set workflow 1`] = `
+[
+  {
+    "id": "open",
+    "label": "Open...",
+    "shortcut": {
+      "keys": [
+        "↵",
+      ],
+    },
+  },
+  {
+    "disabled": false,
+    "id": "execute",
+    "label": "Execute step",
+  },
+  {
+    "disabled": false,
+    "id": "rename",
+    "label": "Rename",
+    "shortcut": {
+      "keys": [
+        "Space",
+      ],
+    },
+  },
+  {
+    "disabled": false,
+    "id": "replace",
+    "label": "Replace",
+    "shortcut": {
+      "keys": [
+        "R",
+      ],
+    },
+  },
+  {
+    "disabled": true,
+    "id": "open_sub_workflow",
+    "label": "Go to Sub-workflow",
+    "shortcut": {
+      "keys": [
+        "O",
+      ],
+      "metaKey": true,
+      "shiftKey": true,
+    },
+  },
+  {
+    "disabled": false,
+    "id": "toggle_activation",
+    "label": "Deactivate",
+    "shortcut": {
+      "keys": [
+        "D",
+      ],
+    },
+  },
+  {
+    "disabled": true,
+    "id": "toggle_pin",
+    "label": "Pin",
+    "shortcut": {
+      "keys": [
+        "p",
+      ],
+    },
+  },
+  {
+    "id": "copy",
+    "label": "Copy",
+    "shortcut": {
+      "keys": [
+        "C",
+      ],
+      "metaKey": true,
+    },
+  },
+  {
+    "disabled": true,
+    "id": "duplicate",
+    "label": "Duplicate",
+    "shortcut": {
+      "keys": [
+        "D",
+      ],
+      "metaKey": true,
+    },
+  },
+  {
+    "divided": true,
+    "id": "tidy_up",
+    "label": "Tidy up workflow",
+    "shortcut": {
+      "altKey": true,
+      "keys": [
+        "T",
+      ],
+      "shiftKey": true,
+    },
+  },
+  {
+    "disabled": false,
+    "divided": true,
+    "id": "extract_sub_workflow",
+    "label": "Convert node to sub-workflow",
+    "shortcut": {
+      "altKey": true,
+      "keys": [
+        "X",
+      ],
+    },
+  },
+  {
+    "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",
+    "shortcut": {
+      "keys": [
+        "Del",
+      ],
+    },
+  },
+]
+`;
+
+exports[`useContextMenu > should show "Go to Sub-workflow" action (enabled) when node is "Execute Workflow" with a set workflow 1`] = `
+[
+  {
+    "id": "open",
+    "label": "Open...",
+    "shortcut": {
+      "keys": [
+        "↵",
+      ],
+    },
+  },
+  {
+    "disabled": false,
+    "id": "execute",
+    "label": "Execute step",
+  },
+  {
+    "disabled": false,
+    "id": "rename",
+    "label": "Rename",
+    "shortcut": {
+      "keys": [
+        "Space",
+      ],
+    },
+  },
+  {
+    "disabled": false,
+    "id": "replace",
+    "label": "Replace",
+    "shortcut": {
+      "keys": [
+        "R",
+      ],
+    },
+  },
+  {
+    "disabled": false,
+    "id": "open_sub_workflow",
+    "label": "Go to Sub-workflow",
+    "shortcut": {
+      "keys": [
+        "O",
+      ],
+      "metaKey": true,
+      "shiftKey": true,
+    },
+  },
+  {
+    "disabled": false,
+    "id": "toggle_activation",
+    "label": "Deactivate",
+    "shortcut": {
+      "keys": [
+        "D",
+      ],
+    },
+  },
+  {
+    "disabled": true,
+    "id": "toggle_pin",
+    "label": "Pin",
+    "shortcut": {
+      "keys": [
+        "p",
+      ],
+    },
+  },
+  {
+    "id": "copy",
+    "label": "Copy",
+    "shortcut": {
+      "keys": [
+        "C",
+      ],
+      "metaKey": true,
+    },
+  },
+  {
+    "disabled": true,
+    "id": "duplicate",
+    "label": "Duplicate",
+    "shortcut": {
+      "keys": [
+        "D",
+      ],
+      "metaKey": true,
+    },
+  },
+  {
+    "divided": true,
+    "id": "tidy_up",
+    "label": "Tidy up workflow",
+    "shortcut": {
+      "altKey": true,
+      "keys": [
+        "T",
+      ],
+      "shiftKey": true,
+    },
+  },
+  {
+    "disabled": false,
+    "divided": true,
+    "id": "extract_sub_workflow",
+    "label": "Convert node to sub-workflow",
+    "shortcut": {
+      "altKey": true,
+      "keys": [
+        "X",
+      ],
+    },
+  },
+  {
+    "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",
+    "shortcut": {
+      "keys": [
+        "Del",
+      ],
+    },
+  },
+]
+`;
+
+exports[`useContextMenu > should show "Go to Sub-workflow" action (enabled) when node is "Workflow Tool" with a set workflow 1`] = `
+[
+  {
+    "id": "open",
+    "label": "Open...",
+    "shortcut": {
+      "keys": [
+        "↵",
+      ],
+    },
+  },
+  {
+    "disabled": false,
+    "id": "execute",
+    "label": "Execute step",
+  },
+  {
+    "disabled": false,
+    "id": "rename",
+    "label": "Rename",
+    "shortcut": {
+      "keys": [
+        "Space",
+      ],
+    },
+  },
+  {
+    "disabled": false,
+    "id": "replace",
+    "label": "Replace",
+    "shortcut": {
+      "keys": [
+        "R",
+      ],
+    },
+  },
+  {
+    "disabled": false,
+    "id": "open_sub_workflow",
+    "label": "Go to Sub-workflow",
+    "shortcut": {
+      "keys": [
+        "O",
+      ],
+      "metaKey": true,
+      "shiftKey": true,
+    },
+  },
+  {
+    "disabled": false,
+    "id": "toggle_activation",
+    "label": "Deactivate",
+    "shortcut": {
+      "keys": [
+        "D",
+      ],
+    },
+  },
+  {
+    "disabled": true,
+    "id": "toggle_pin",
+    "label": "Pin",
+    "shortcut": {
+      "keys": [
+        "p",
+      ],
+    },
+  },
+  {
+    "id": "copy",
+    "label": "Copy",
+    "shortcut": {
+      "keys": [
+        "C",
+      ],
+      "metaKey": true,
+    },
+  },
+  {
+    "disabled": true,
+    "id": "duplicate",
+    "label": "Duplicate",
+    "shortcut": {
+      "keys": [
+        "D",
+      ],
+      "metaKey": true,
+    },
+  },
+  {
+    "divided": true,
+    "id": "tidy_up",
+    "label": "Tidy up workflow",
+    "shortcut": {
+      "altKey": true,
+      "keys": [
+        "T",
+      ],
+      "shiftKey": true,
+    },
+  },
+  {
+    "disabled": false,
+    "divided": true,
+    "id": "extract_sub_workflow",
+    "label": "Convert node to sub-workflow",
+    "shortcut": {
+      "altKey": true,
+      "keys": [
+        "X",
+      ],
+    },
+  },
+  {
+    "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",
+    "shortcut": {
+      "keys": [
+        "Del",
+      ],
+    },
+  },
+]
+`;
+
+exports[`useContextMenu > should support opening and closing (default = right click on canvas) 1`] = `
+[
+  {
+    "disabled": false,
+    "id": "toggle_activation",
+    "label": "Deactivate 2 nodes",
+    "shortcut": {
+      "keys": [
+        "D",
+      ],
+    },
+  },
+  {
+    "disabled": true,
+    "id": "toggle_pin",
+    "label": "Pin 2 nodes",
+    "shortcut": {
+      "keys": [
+        "p",
+      ],
+    },
+  },
+  {
+    "id": "copy",
+    "label": "Copy 2 nodes",
+    "shortcut": {
+      "keys": [
+        "C",
+      ],
+      "metaKey": true,
+    },
+  },
+  {
+    "disabled": true,
+    "id": "duplicate",
+    "label": "Duplicate 2 nodes",
+    "shortcut": {
+      "keys": [
+        "D",
+      ],
+      "metaKey": true,
+    },
+  },
+  {
+    "divided": true,
+    "id": "tidy_up",
+    "label": "Tidy up selection",
+    "shortcut": {
+      "altKey": true,
+      "keys": [
+        "T",
+      ],
+      "shiftKey": true,
+    },
+  },
+  {
+    "disabled": false,
+    "divided": true,
+    "id": "extract_sub_workflow",
+    "label": "Convert 2 nodes to sub-workflow",
+    "shortcut": {
+      "altKey": true,
+      "keys": [
+        "X",
+      ],
+    },
+  },
+  {
+    "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 2 nodes",
+    "shortcut": {
+      "keys": [
+        "Del",
+      ],
+    },
+  },
+]
+`;
diff --git a/packages/frontend/editor-ui/src/composables/useContextMenu.test.ts b/packages/frontend/editor-ui/src/features/ui/contextMenu/composables/useContextMenu.test.ts
similarity index 99%
rename from packages/frontend/editor-ui/src/composables/useContextMenu.test.ts
rename to packages/frontend/editor-ui/src/features/ui/contextMenu/composables/useContextMenu.test.ts
index 215fdb6dd81..d5bcf5a3dc1 100644
--- a/packages/frontend/editor-ui/src/composables/useContextMenu.test.ts
+++ b/packages/frontend/editor-ui/src/features/ui/contextMenu/composables/useContextMenu.test.ts
@@ -1,5 +1,5 @@
 import type { INodeUi } from '@/Interface';
-import { useContextMenu } from '@/composables/useContextMenu';
+import { useContextMenu } from './useContextMenu';
 import { BASIC_CHAIN_NODE_TYPE, NO_OP_NODE_TYPE, STICKY_NODE_TYPE } from '@/constants';
 import { faker } from '@faker-js/faker';
 import { createPinia, setActivePinia } from 'pinia';
diff --git a/packages/frontend/editor-ui/src/composables/useContextMenu.ts b/packages/frontend/editor-ui/src/features/ui/contextMenu/composables/useContextMenu.ts
similarity index 96%
rename from packages/frontend/editor-ui/src/composables/useContextMenu.ts
rename to packages/frontend/editor-ui/src/features/ui/contextMenu/composables/useContextMenu.ts
index 8c2d458ef23..706949a8a84 100644
--- a/packages/frontend/editor-ui/src/composables/useContextMenu.ts
+++ b/packages/frontend/editor-ui/src/features/ui/contextMenu/composables/useContextMenu.ts
@@ -1,7 +1,7 @@
 import type { XYPosition } from '@/Interface';
 import { useUIStore } from '@/stores/ui.store';
 import { computed, ref, watch } from 'vue';
-import { getMousePosition } from '../utils/nodeViewUtils';
+import { getMousePosition } from '@/utils/nodeViewUtils';
 import { useContextMenuItems, type ContextMenuAction } from './useContextMenuItems';
 
 export type ContextMenuTarget =
diff --git a/packages/frontend/editor-ui/src/composables/useContextMenuItems.ts b/packages/frontend/editor-ui/src/features/ui/contextMenu/composables/useContextMenuItems.ts
similarity index 98%
rename from packages/frontend/editor-ui/src/composables/useContextMenuItems.ts
rename to packages/frontend/editor-ui/src/features/ui/contextMenu/composables/useContextMenuItems.ts
index df3bd39bba6..30a02cf1389 100644
--- a/packages/frontend/editor-ui/src/composables/useContextMenuItems.ts
+++ b/packages/frontend/editor-ui/src/features/ui/contextMenu/composables/useContextMenuItems.ts
@@ -9,8 +9,8 @@ import { getResourcePermissions } from '@n8n/permissions';
 import type { INode, INodeTypeDescription, Workflow } from 'n8n-workflow';
 import { NodeHelpers } from 'n8n-workflow';
 import { computed, type ComputedRef } from 'vue';
-import { isPresent } from '../utils/typesUtils';
-import { usePinnedData } from './usePinnedData';
+import { isPresent } from '@/utils/typesUtils';
+import { usePinnedData } from '@/composables/usePinnedData';
 
 export type ContextMenuAction =
 	| 'open'
diff --git a/packages/frontend/editor-ui/src/views/NodeView.vue b/packages/frontend/editor-ui/src/views/NodeView.vue
index bd6faa708e4..7e9aee1bc96 100644
--- a/packages/frontend/editor-ui/src/views/NodeView.vue
+++ b/packages/frontend/editor-ui/src/views/NodeView.vue
@@ -135,7 +135,7 @@ import { useFocusPanelStore } from '@/stores/focusPanel.store';
 import { useAITemplatesStarterCollectionStore } from '@/experiments/aiTemplatesStarterCollection/stores/aiTemplatesStarterCollection.store';
 import { useReadyToRunWorkflowsStore } from '@/experiments/readyToRunWorkflows/stores/readyToRunWorkflows.store';
 import { useKeybindings } from '@/composables/useKeybindings';
-import { type ContextMenuAction } from '@/composables/useContextMenuItems';
+import { type ContextMenuAction } from '@/features/ui/contextMenu/composables/useContextMenuItems';
 import { useExperimentalNdvStore } from '@/features/canvas/experimental/experimentalNdv.store';
 import { useWorkflowState } from '@/composables/useWorkflowState';
 import { useParentFolder } from '@/features/folders/composables/useParentFolder';