diff --git a/packages/editor-ui/src/components/NodeDetailsView.vue b/packages/editor-ui/src/components/NodeDetailsView.vue index 54a0336aec975..17a2195a8c05d 100644 --- a/packages/editor-ui/src/components/NodeDetailsView.vue +++ b/packages/editor-ui/src/components/NodeDetailsView.vue @@ -160,6 +160,7 @@ import { STICKY_NODE_TYPE, } from '@/constants'; import { useWorkflowActivate } from '@/composables/useWorkflowActivate'; +import type { DataPinningDiscoveryEvent } from '@/event-bus'; import { dataPinningEventBus } from '@/event-bus'; import { useWorkflowsStore } from '@/stores/workflows.store'; import { useNDVStore } from '@/stores/ndv.store'; @@ -238,7 +239,7 @@ const activeNodeType = computed(() => { return null; }); -const workflowRunning = computed(() => uiStore.isActionActive['workflowRunning']); +const workflowRunning = computed(() => uiStore.isActionActive.workflowRunning); const showTriggerWaitingWarning = computed( () => @@ -428,7 +429,7 @@ const featureRequestUrl = computed(() => { const outputPanelEditMode = computed(() => ndvStore.outputPanelEditMode); -const isWorkflowRunning = computed(() => uiStore.isActionActive['workflowRunning']); +const isWorkflowRunning = computed(() => uiStore.isActionActive.workflowRunning); const isExecutionWaitingForWebhook = computed(() => workflowsStore.executionWaitingForWebhook); @@ -458,7 +459,7 @@ const hasForeignCredential = computed(() => foreignCredentials.value.length > 0) //methods -const setIsTooltipVisible = ({ isTooltipVisible }: { isTooltipVisible: boolean }) => { +const setIsTooltipVisible = ({ isTooltipVisible }: DataPinningDiscoveryEvent) => { pinDataDiscoveryTooltipVisible.value = isTooltipVisible; }; diff --git a/packages/editor-ui/src/composables/useNodeHelpers.ts b/packages/editor-ui/src/composables/useNodeHelpers.ts index a8c763b11f5a2..fd2fb50a81279 100644 --- a/packages/editor-ui/src/composables/useNodeHelpers.ts +++ b/packages/editor-ui/src/composables/useNodeHelpers.ts @@ -63,6 +63,7 @@ import { useCanvasStore } from '@/stores/canvas.store'; import { getEndpointScope } from '@/utils/nodeViewUtils'; import { useSourceControlStore } from '@/stores/sourceControl.store'; import { getConnectionInfo } from '@/utils/canvasUtils'; +import type { UnpinNodeDataEvent } from '@/event-bus/data-pinning'; declare namespace HttpRequestNode { namespace V2 { @@ -992,8 +993,8 @@ export function useNodeHelpers() { }); } - function removePinDataConnections(pinData: IPinData) { - Object.keys(pinData).forEach((nodeName) => { + function removePinDataConnections(event: UnpinNodeDataEvent) { + for (const nodeName of event.nodeNames) { const node = workflowsStore.getNodeByName(nodeName); if (!node) { return; @@ -1015,7 +1016,7 @@ export function useNodeHelpers() { canvasStore.jsPlumbInstance.setSuspendDrawing(true); connectionsArray.forEach(NodeViewUtils.resetConnection); canvasStore.jsPlumbInstance.setSuspendDrawing(false, true); - }); + } } function getOutputEndpointUUID( diff --git a/packages/editor-ui/src/event-bus/data-pinning.ts b/packages/editor-ui/src/event-bus/data-pinning.ts index aa6548741f10a..4f29fdc77226f 100644 --- a/packages/editor-ui/src/event-bus/data-pinning.ts +++ b/packages/editor-ui/src/event-bus/data-pinning.ts @@ -1,3 +1,23 @@ import { createEventBus } from 'n8n-design-system/utils'; +import type { IPinData } from 'n8n-workflow'; -export const dataPinningEventBus = createEventBus(); +export type DataPinningDiscoveryEvent = { + isTooltipVisible: boolean; +}; + +export type UnpinNodeDataEvent = { + nodeNames: string[]; +}; + +export interface DataPinningEventBusEvents { + /** Command to show or hide the data pinning discovery tooltip */ + 'data-pinning-discovery': DataPinningDiscoveryEvent; + + /** Event that data has been pinned for workflow */ + 'pin-data': IPinData; + + /** Event that data has been unpinned for specific nodes */ + 'unpin-data': UnpinNodeDataEvent; +} + +export const dataPinningEventBus = createEventBus(); diff --git a/packages/editor-ui/src/stores/workflows.store.ts b/packages/editor-ui/src/stores/workflows.store.ts index d60e7db763728..45f8a4c658b45 100644 --- a/packages/editor-ui/src/stores/workflows.store.ts +++ b/packages/editor-ui/src/stores/workflows.store.ts @@ -669,14 +669,14 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => { }; } - function setWorkflowPinData(pinData: IPinData) { + function setWorkflowPinData(pinData?: IPinData) { workflow.value = { ...workflow.value, - pinData: pinData || {}, + pinData: pinData ?? {}, }; updateCachedWorkflow(); - dataPinningEventBus.emit('pin-data', pinData || {}); + dataPinningEventBus.emit('pin-data', pinData ?? {}); } function setWorkflowTagIds(tags: string[]) { @@ -768,7 +768,9 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => { uiStore.stateIsDirty = true; updateCachedWorkflow(); - dataPinningEventBus.emit('unpin-data', { [payload.node.name]: undefined }); + dataPinningEventBus.emit('unpin-data', { + nodeNames: [payload.node.name], + }); } function addConnection(data: { connection: IConnection[] }): void {