From 90a5fcc541d43a167a667dfb6b498e855dfc3656 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Fri, 16 Aug 2024 10:45:12 +0300
Subject: [PATCH] feat(editor): Add `registerCustomAction` to new canvas
 (no-changelog) (#10359)

---
 packages/editor-ui/src/App.vue                |  2 +-
 .../src/composables/useGlobalLinkActions.ts   |  4 +-
 packages/editor-ui/src/views/NodeView.v2.vue  | 59 +++++++++++--------
 packages/editor-ui/src/views/NodeView.vue     |  2 +-
 4 files changed, 40 insertions(+), 27 deletions(-)

diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index 835ddd11c0..cc9c141500 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -47,7 +47,7 @@ import AskAssistantFloatingButton from '@/components/AskAssistant/AskAssistantFl
 import { HIRING_BANNER, VIEWS } from '@/constants';
 
 import { loadLanguage } from '@/plugins/i18n';
-import useGlobalLinkActions from '@/composables/useGlobalLinkActions';
+import { useGlobalLinkActions } from '@/composables/useGlobalLinkActions';
 import { useExternalHooks } from '@/composables/useExternalHooks';
 import { useToast } from '@/composables/useToast';
 import { useCloudPlanStore } from '@/stores/cloudPlan.store';
diff --git a/packages/editor-ui/src/composables/useGlobalLinkActions.ts b/packages/editor-ui/src/composables/useGlobalLinkActions.ts
index 801fe1f71b..8e493f0cb7 100644
--- a/packages/editor-ui/src/composables/useGlobalLinkActions.ts
+++ b/packages/editor-ui/src/composables/useGlobalLinkActions.ts
@@ -10,7 +10,7 @@ const state = reactive({
 	delegatedClickHandler: null as null | ((e: MouseEvent) => void),
 });
 
-export default () => {
+export function useGlobalLinkActions() {
 	function registerCustomAction({ key, action }: { key: string; action: Function }) {
 		state.customActions[key] = action;
 	}
@@ -76,4 +76,4 @@ export default () => {
 		registerCustomAction,
 		unregisterCustomAction,
 	};
-};
+}
diff --git a/packages/editor-ui/src/views/NodeView.v2.vue b/packages/editor-ui/src/views/NodeView.v2.vue
index 465505cc43..3a8e2411cd 100644
--- a/packages/editor-ui/src/views/NodeView.v2.vue
+++ b/packages/editor-ui/src/views/NodeView.v2.vue
@@ -18,6 +18,7 @@ import CanvasRunWorkflowButton from '@/components/canvas/elements/buttons/Canvas
 import { useI18n } from '@/composables/useI18n';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useRunWorkflow } from '@/composables/useRunWorkflow';
+import { useGlobalLinkActions } from '@/composables/useGlobalLinkActions';
 import type {
 	AddedNodesAndConnections,
 	IExecutionResponse,
@@ -135,6 +136,7 @@ const templatesStore = useTemplatesStore();
 
 const canvasEventBus = createEventBus();
 
+const { registerCustomAction } = useGlobalLinkActions();
 const { runWorkflow, stopCurrentExecution, stopWaitingForWebhook } = useRunWorkflow({ router });
 const {
 	updateNodePosition,
@@ -844,6 +846,10 @@ async function onOpenSelectiveNodeCreator(node: string, connectionType: NodeConn
 	nodeCreatorStore.openSelectiveNodeCreator({ node, connectionType });
 }
 
+async function onOpenNodeCreatorForTriggerNodes(source: NodeCreatorOpenSource) {
+	nodeCreatorStore.openNodeCreatorForTriggerNodes(source);
+}
+
 function onOpenNodeCreatorFromCanvas(source: NodeCreatorOpenSource) {
 	onOpenNodeCreator({ createNodeActive: true, source });
 }
@@ -1347,29 +1353,36 @@ function onClickPane(position: CanvasNode['position']) {
  */
 
 function registerCustomActions() {
-	// @TODO Implement these
-	// this.registerCustomAction({
-	// 	key: 'openNodeDetail',
-	// 	action: ({ node }: { node: string }) => {
-	// 		this.nodeSelectedByName(node, true);
-	// 	},
-	// });
-	//
-	// this.registerCustomAction({
-	// 	key: 'openSelectiveNodeCreator',
-	// 	action: this.openSelectiveNodeCreator,
-	// });
-	//
-	// this.registerCustomAction({
-	// 	key: 'showNodeCreator',
-	// 	action: () => {
-	// 		this.ndvStore.activeNodeName = null;
-	//
-	// 		void this.$nextTick(() => {
-	// 			this.showTriggerCreator(NODE_CREATOR_OPEN_SOURCES.TAB);
-	// 		});
-	// 	},
-	// });
+	registerCustomAction({
+		key: 'openNodeDetail',
+		action: ({ node }: { node: string }) => {
+			setNodeActiveByName(node);
+		},
+	});
+
+	registerCustomAction({
+		key: 'openSelectiveNodeCreator',
+		action: ({
+			connectiontype: connectionType,
+			node,
+		}: {
+			connectiontype: NodeConnectionType;
+			node: string;
+		}) => {
+			void onOpenSelectiveNodeCreator(node, connectionType);
+		},
+	});
+
+	registerCustomAction({
+		key: 'showNodeCreator',
+		action: () => {
+			ndvStore.activeNodeName = null;
+
+			void nextTick(() => {
+				void onOpenNodeCreatorForTriggerNodes(NODE_CREATOR_OPEN_SOURCES.TAB);
+			});
+		},
+	});
 }
 
 /**
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 4ef91b2b1a..23fb4e0346 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -261,7 +261,7 @@ import {
 	VALID_WORKFLOW_IMPORT_URL_REGEX,
 } from '@/constants';
 
-import useGlobalLinkActions from '@/composables/useGlobalLinkActions';
+import { useGlobalLinkActions } from '@/composables/useGlobalLinkActions';
 import { useNodeHelpers } from '@/composables/useNodeHelpers';
 import useCanvasMouseSelect from '@/composables/useCanvasMouseSelect';
 import { useExecutionDebugging } from '@/composables/useExecutionDebugging';