Imrpove node creator click outside UX, add manual node to regular nod…

…es added from trigger panel

packages/editor-ui/src/components/Node/NodeCreator/ActionItem.vue

@@ -41,7 +41,7 @@ export interface Props {
 const props = defineProps<Props>();
 const instance = getCurrentInstance();
 const telemetry = instance?.proxy.$telemetry;
-const { getActionData, getActionNodeTypes, setAddedNodeActionParameters } = useNodeCreatorStore();
+const { getActionData, getNodeTypesWithManualTrigger, setAddedNodeActionParameters } = useNodeCreatorStore();
 
 const state = reactive({
 	dragging: false,
@@ -82,7 +82,7 @@ function onDragStart(event: DragEvent): void {
 		event.dataTransfer.effectAllowed = "copy";
 		event.dataTransfer.dropEffect = "copy";
 		event.dataTransfer.setDragImage(state.draggableDataTransfer as Element, 0, 0);
-		event.dataTransfer.setData('nodeTypeName', getActionNodeTypes(actionData.value).join(','));
+		event.dataTransfer.setData('nodeTypeName', getNodeTypesWithManualTrigger(actionData.value?.key).join(','));
 
 		state.storeWatcher = setAddedNodeActionParameters(actionData.value, telemetry);
 		document.body.addEventListener("dragend", onDragEnd);

packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue

@@ -10,6 +10,8 @@
 			 	v-click-outside="onClickOutside"
 			 	@dragover="onDragOver"
 			 	@drop="onDrop"
+				@mousedown="onMouseDown"
+				@mouseup="onMouseUp"
 				data-test-id="node-creator"
 			>
 				<main-panel
@@ -29,7 +31,6 @@ import { INodeCreateElement } from '@/Interface';
 import SlideTransition from '@/components/transitions/SlideTransition.vue';
 
 import MainPanel from './MainPanel.vue';
-import { useUIStore } from '@/stores/ui';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
 import { useNodeCreatorStore } from '@/stores/nodeCreator';
 
@@ -46,6 +47,7 @@ const emit = defineEmits<{
 const nodeCreatorStore = useNodeCreatorStore();
 const state = reactive({
 	nodeCreator: null as HTMLElement | null,
+	mousedownInsideEvent: null as MouseEvent | null,
 });
 
 const visibleNodeTypes = computed(() => useNodeTypesStore().visibleNodeTypes);
@@ -71,10 +73,31 @@ const searchItems = computed<INodeCreateElement[]>(() => {
 });
 
 function onClickOutside (event: Event) {
+	// We need to prevent cases where user would click inside the node creator
+	// and try to drag undraggable element. In that case the click event would
+	// be fired and the node creator would be closed. So we stop that if we detect
+	// that the click event originated from inside the node creator. And fire click even on the
+	// original target.
+	if(state.mousedownInsideEvent) {
+		const clickEvent = new MouseEvent('click', {
+			bubbles: true,
+			cancelable: true,
+		});
+		state.mousedownInsideEvent.target?.dispatchEvent(clickEvent);
+		state.mousedownInsideEvent = null;
+		return;
+	};
+
 	if (event.type === 'click') {
 		emit('closeNodeCreator');
 	}
 }
+function onMouseUp() {
+	state.mousedownInsideEvent = null;
+}
+function onMouseDown(event: MouseEvent) {
+	state.mousedownInsideEvent = event;
+}
 function onDragOver(event: DragEvent) {
 	event.preventDefault();
 }

packages/editor-ui/src/components/Node/NodeCreator/SubcategoryItem.vue

@@ -56,6 +56,7 @@ export default Vue.extend({
 .subcategory {
 	display: flex;
 	padding: 11px 16px 11px 30px;
+	user-select: none;
 }
 
 .subcategoryWithIcon {

packages/editor-ui/src/components/Node/NodeCreator/TriggerHelperPanel.vue

@@ -19,7 +19,7 @@
 			ref="categorizedItemsRef"
 			@subcategoryClose="onSubcategoryClose"
 			@onSubcategorySelected="onSubcategorySelected"
-			@nodeTypeSelected="$listeners.nodeTypeSelected"
+			@nodeTypeSelected="onNodeTypeSelected"
 			@actionsOpen="setActiveActionsNodeType"
 			@actionSelected="onActionSelected"
 		>
@@ -175,7 +175,7 @@ const {
 	mergedAppNodes,
 	setShowTabs,
 	getActionData,
-	getActionNodeTypes,
+	getNodeTypesWithManualTrigger,
 	setAddedNodeActionParameters,
 } = useNodeCreatorStore();
 
@@ -263,6 +263,9 @@ const searchItems = computed<INodeCreateElement[]>(() => {
 	}));
 });
 
+function onNodeTypeSelected(nodeTypes: string[]) {
+	emit("nodeTypeSelected", nodeTypes.length === 1 ? getNodeTypesWithManualTrigger(nodeTypes[0]) : nodeTypes);
+}
 function getCustomAPICallHintLocale(key: string) {
 	if(!state.activeNodeActions) return '';
 
@@ -300,7 +303,7 @@ function setActiveActionsNodeType(nodeType: INodeTypeDescription | null) {
 function onActionSelected(actionCreateElement: INodeCreateElement) {
 	const action = (actionCreateElement.properties as IActionItemProps).nodeType;
 	const actionUpdateData = getActionData(action);
-	emit('nodeTypeSelected', getActionNodeTypes(actionUpdateData));
+	emit('nodeTypeSelected', getNodeTypesWithManualTrigger(actionUpdateData.key));
 	setAddedNodeActionParameters(actionUpdateData, telemetry);
 }
 function addHttpNode() {

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -667,7 +667,7 @@
 	"nodeCreator.actionsCategory.recommended": "Recommended",
 	"nodeCreator.actionsCategory.searchActions": "Search {nodeNameTitle} Actions...",
 	"nodeCreator.actionsList.apiCall": "Didn't find the right event? Make a <a data-action='addHttpNode'>custom {nodeNameTitle} API call</a>",
-	"nodeCreator.actionsList.apiCallNoResult": "No actions found — try making a <a data-action='addHttpNode'>custom {nodeNameTitle} API call</a>",
+	"nodeCreator.actionsList.apiCallNoResult": "Nothing found — try making a <a data-action='addHttpNode'>custom {nodeNameTitle} API call</a>",
 	"nodeCreator.categoryNames.analytics": "Analytics",
 	"nodeCreator.categoryNames.communication": "Communication",
 	"nodeCreator.categoryNames.coreNodes": "Core Nodes",

packages/editor-ui/src/stores/nodeCreator.ts

@@ -272,15 +272,16 @@ export const useNodeCreatorStore = defineStore(STORES.NODE_CREATOR, {
 			}, {});
 			return Object.values(mergedNodes);
 		},
-		getActionNodeTypes: () => (action: IUpdateInformation): string[] => {
+		getNodeTypesWithManualTrigger: () => (nodeType?: string): string[] => {
+			if(!nodeType) return [];
+
 			const { workflowTriggerNodes } = useWorkflowsStore();
-			const actionKey = action.key as string;
-			const isTriggerAction = actionKey.toLocaleLowerCase().includes('trigger');
+			const isTriggerAction = nodeType.toLocaleLowerCase().includes('trigger');
 			const workflowContainsTrigger = workflowTriggerNodes.length > 0;
 
 			const nodeTypes = !isTriggerAction && !workflowContainsTrigger
-				? [MANUAL_TRIGGER_NODE_TYPE, actionKey]
-				: [actionKey];
+				? [MANUAL_TRIGGER_NODE_TYPE, nodeType]
+				: [nodeType];
 
 			return nodeTypes;
 		},