diff --git a/packages/editor-ui/src/components/Node/NodeCreator/ActionItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/ActionItem.vue index 04f7b85375a2b..b4a06cfba1eaa 100644 --- a/packages/editor-ui/src/components/Node/NodeCreator/ActionItem.vue +++ b/packages/editor-ui/src/components/Node/NodeCreator/ActionItem.vue @@ -41,7 +41,7 @@ export interface Props { const props = defineProps(); 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); diff --git a/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue b/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue index 6d226680819a5..ce546916a2a5c 100644 --- a/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue +++ b/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" > useNodeTypesStore().visibleNodeTypes); @@ -71,10 +73,31 @@ const searchItems = computed(() => { }); 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(); } diff --git a/packages/editor-ui/src/components/Node/NodeCreator/SubcategoryItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/SubcategoryItem.vue index 6467b7ac3eaef..feaaeb381b89b 100644 --- a/packages/editor-ui/src/components/Node/NodeCreator/SubcategoryItem.vue +++ b/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 { diff --git a/packages/editor-ui/src/components/Node/NodeCreator/TriggerHelperPanel.vue b/packages/editor-ui/src/components/Node/NodeCreator/TriggerHelperPanel.vue index c01daf4597e79..9a80d318859e6 100644 --- a/packages/editor-ui/src/components/Node/NodeCreator/TriggerHelperPanel.vue +++ b/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(() => { })); }); +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() { diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json index 3e92422634450..92044d2291820 100644 --- a/packages/editor-ui/src/plugins/i18n/locales/en.json +++ b/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 custom {nodeNameTitle} API call", - "nodeCreator.actionsList.apiCallNoResult": "No actions found — try making a custom {nodeNameTitle} API call", + "nodeCreator.actionsList.apiCallNoResult": "Nothing found — try making a custom {nodeNameTitle} API call", "nodeCreator.categoryNames.analytics": "Analytics", "nodeCreator.categoryNames.communication": "Communication", "nodeCreator.categoryNames.coreNodes": "Core Nodes", diff --git a/packages/editor-ui/src/stores/nodeCreator.ts b/packages/editor-ui/src/stores/nodeCreator.ts index ba3fa88a0a5c5..2f9711243fa01 100644 --- a/packages/editor-ui/src/stores/nodeCreator.ts +++ b/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; },