mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-17 18:12:04 +00:00
refactor(editor): RunData components to composition API (no-changelog) (#11545)
This commit is contained in:
Elias Meire
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import type { INodeUi } from '@/Interface';
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from '@/composables/useI18n';
|
||||
import {
|
||||
CRON_NODE_TYPE,
|
||||
INTERVAL_NODE_TYPE,
|
||||
@@ -10,331 +10,326 @@ import { useNDVStore } from '@/stores/ndv.store';
|
||||
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
|
||||
import { useUIStore } from '@/stores/ui.store';
|
||||
import { useWorkflowsStore } from '@/stores/workflows.store';
|
||||
import type {
|
||||
IConnectedNode,
|
||||
INodeInputConfiguration,
|
||||
INodeOutputConfiguration,
|
||||
INodeTypeDescription,
|
||||
Workflow,
|
||||
} from 'n8n-workflow';
|
||||
import { waitingNodeTooltip } from '@/utils/executionUtils';
|
||||
import { uniqBy } from 'lodash-es';
|
||||
import type { INodeInputConfiguration, INodeOutputConfiguration, Workflow } from 'n8n-workflow';
|
||||
import { NodeConnectionType, NodeHelpers } from 'n8n-workflow';
|
||||
import { mapStores } from 'pinia';
|
||||
import { defineComponent, type PropType } from 'vue';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import InputNodeSelect from './InputNodeSelect.vue';
|
||||
import NodeExecuteButton from './NodeExecuteButton.vue';
|
||||
import RunData from './RunData.vue';
|
||||
import WireMeUp from './WireMeUp.vue';
|
||||
import { waitingNodeTooltip } from '@/utils/executionUtils';
|
||||
import { useTelemetry } from '@/composables/useTelemetry';
|
||||
import { N8nRadioButtons, N8nTooltip, N8nText } from 'n8n-design-system';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
type MappingMode = 'debugging' | 'mapping';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'InputPanel',
|
||||
components: { RunData, NodeExecuteButton, WireMeUp, InputNodeSelect },
|
||||
props: {
|
||||
currentNodeName: {
|
||||
type: String,
|
||||
},
|
||||
runIndex: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
linkedRuns: {
|
||||
type: Boolean,
|
||||
},
|
||||
workflow: {
|
||||
type: Object as PropType<Workflow>,
|
||||
required: true,
|
||||
},
|
||||
canLinkRuns: {
|
||||
type: Boolean,
|
||||
},
|
||||
pushRef: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
readOnly: {
|
||||
type: Boolean,
|
||||
},
|
||||
isProductionExecutionPreview: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isPaneActive: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: [
|
||||
'itemHover',
|
||||
'tableMounted',
|
||||
'linkRun',
|
||||
'unlinkRun',
|
||||
'runChange',
|
||||
'search',
|
||||
'changeInputNode',
|
||||
'execute',
|
||||
'activatePane',
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
showDraggableHintWithDelay: false,
|
||||
draggableHintShown: false,
|
||||
inputMode: 'debugging' as MappingMode,
|
||||
mappedNode: null as string | null,
|
||||
inputModes: [
|
||||
{ value: 'mapping', label: this.$locale.baseText('ndv.input.mapping') },
|
||||
{ value: 'debugging', label: this.$locale.baseText('ndv.input.debugging') },
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useNodeTypesStore, useNDVStore, useWorkflowsStore, useUIStore),
|
||||
focusedMappableInput(): string {
|
||||
return this.ndvStore.focusedMappableInput;
|
||||
},
|
||||
isUserOnboarded(): boolean {
|
||||
return this.ndvStore.isMappingOnboarded;
|
||||
},
|
||||
isMappingMode(): boolean {
|
||||
return this.isActiveNodeConfig && this.inputMode === 'mapping';
|
||||
},
|
||||
showDraggableHint(): boolean {
|
||||
const toIgnore = [
|
||||
START_NODE_TYPE,
|
||||
MANUAL_TRIGGER_NODE_TYPE,
|
||||
CRON_NODE_TYPE,
|
||||
INTERVAL_NODE_TYPE,
|
||||
];
|
||||
if (!this.currentNode || toIgnore.includes(this.currentNode.type)) {
|
||||
return false;
|
||||
}
|
||||
type Props = {
|
||||
runIndex: number;
|
||||
workflow: Workflow;
|
||||
pushRef: string;
|
||||
currentNodeName?: string;
|
||||
canLinkRuns?: boolean;
|
||||
linkedRuns?: boolean;
|
||||
readOnly?: boolean;
|
||||
isProductionExecutionPreview?: boolean;
|
||||
isPaneActive?: boolean;
|
||||
};
|
||||
|
||||
return !!this.focusedMappableInput && !this.isUserOnboarded;
|
||||
},
|
||||
isActiveNodeConfig(): boolean {
|
||||
let inputs = this.activeNodeType?.inputs ?? [];
|
||||
let outputs = this.activeNodeType?.outputs ?? [];
|
||||
if (this.activeNode !== null && this.workflow !== null) {
|
||||
const node = this.workflow.getNode(this.activeNode.name);
|
||||
inputs = NodeHelpers.getNodeInputs(this.workflow, node!, this.activeNodeType!);
|
||||
outputs = NodeHelpers.getNodeOutputs(this.workflow, node!, this.activeNodeType!);
|
||||
} else {
|
||||
// If we can not figure out the node type we set no outputs
|
||||
if (!Array.isArray(inputs)) {
|
||||
inputs = [] as NodeConnectionType[];
|
||||
}
|
||||
if (!Array.isArray(outputs)) {
|
||||
outputs = [] as NodeConnectionType[];
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
inputs.length === 0 ||
|
||||
(inputs.every((input) => this.filterOutConnectionType(input, NodeConnectionType.Main)) &&
|
||||
outputs.find((output) => this.filterOutConnectionType(output, NodeConnectionType.Main)))
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
isMappingEnabled(): boolean {
|
||||
if (this.readOnly) return false;
|
||||
|
||||
// Mapping is only enabled in mapping mode for config nodes and if node to map is selected
|
||||
if (this.isActiveNodeConfig) return this.isMappingMode && this.mappedNode !== null;
|
||||
|
||||
return true;
|
||||
},
|
||||
isExecutingPrevious(): boolean {
|
||||
if (!this.workflowRunning) {
|
||||
return false;
|
||||
}
|
||||
const triggeredNode = this.workflowsStore.executedNode;
|
||||
const executingNode = this.workflowsStore.executingNode;
|
||||
|
||||
if (
|
||||
this.activeNode &&
|
||||
triggeredNode === this.activeNode.name &&
|
||||
!this.workflowsStore.isNodeExecuting(this.activeNode.name)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (executingNode.length || triggeredNode) {
|
||||
return !!this.parentNodes.find(
|
||||
(node) => this.workflowsStore.isNodeExecuting(node.name) || node.name === triggeredNode,
|
||||
);
|
||||
}
|
||||
return false;
|
||||
},
|
||||
workflowRunning(): boolean {
|
||||
return this.uiStore.isActionActive['workflowRunning'];
|
||||
},
|
||||
|
||||
activeNode(): INodeUi | null {
|
||||
return this.ndvStore.activeNode;
|
||||
},
|
||||
|
||||
rootNode(): string {
|
||||
const workflow = this.workflow;
|
||||
const rootNodes = workflow.getChildNodes(this.activeNode?.name ?? '', 'ALL');
|
||||
|
||||
return rootNodes[0];
|
||||
},
|
||||
rootNodesParents() {
|
||||
const workflow = this.workflow;
|
||||
const parentNodes = [...workflow.getParentNodes(this.rootNode, NodeConnectionType.Main)]
|
||||
.reverse()
|
||||
.map((parent): IConnectedNode => ({ name: parent, depth: 1, indicies: [] }));
|
||||
|
||||
return parentNodes;
|
||||
},
|
||||
currentNode(): INodeUi | null {
|
||||
if (this.isActiveNodeConfig) {
|
||||
// if we're mapping node we want to show the output of the mapped node
|
||||
if (this.mappedNode) {
|
||||
return this.workflowsStore.getNodeByName(this.mappedNode);
|
||||
}
|
||||
|
||||
// in debugging mode data does get set manually and is only for debugging
|
||||
// so we want to force the node to be the active node to make sure we show the correct data
|
||||
return this.activeNode;
|
||||
}
|
||||
|
||||
return this.workflowsStore.getNodeByName(this.currentNodeName ?? '');
|
||||
},
|
||||
connectedCurrentNodeOutputs(): number[] | undefined {
|
||||
const search = this.parentNodes.find(({ name }) => name === this.currentNodeName);
|
||||
if (search) {
|
||||
return search.indicies;
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
parentNodes(): IConnectedNode[] {
|
||||
if (!this.activeNode) {
|
||||
return [];
|
||||
}
|
||||
const nodes = this.workflow.getParentNodesByDepth(this.activeNode.name);
|
||||
|
||||
return nodes.filter(
|
||||
({ name }, i) =>
|
||||
this.activeNode &&
|
||||
name !== this.activeNode.name &&
|
||||
nodes.findIndex((node) => node.name === name) === i,
|
||||
);
|
||||
},
|
||||
currentNodeDepth(): number {
|
||||
const node = this.parentNodes.find(
|
||||
(parent) => this.currentNode && parent.name === this.currentNode.name,
|
||||
);
|
||||
return node ? node.depth : -1;
|
||||
},
|
||||
activeNodeType(): INodeTypeDescription | null {
|
||||
if (!this.activeNode) return null;
|
||||
|
||||
return this.nodeTypesStore.getNodeType(this.activeNode.type, this.activeNode.typeVersion);
|
||||
},
|
||||
isMultiInputNode(): boolean {
|
||||
return this.activeNodeType !== null && this.activeNodeType.inputs.length > 1;
|
||||
},
|
||||
waitingMessage(): string {
|
||||
return waitingNodeTooltip();
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
inputMode: {
|
||||
handler(val) {
|
||||
this.onRunIndexChange(-1);
|
||||
if (val === 'mapping') {
|
||||
this.onUnlinkRun();
|
||||
this.mappedNode = this.rootNodesParents[0]?.name ?? null;
|
||||
} else {
|
||||
this.mappedNode = null;
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
showDraggableHint(curr: boolean, prev: boolean) {
|
||||
if (curr && !prev) {
|
||||
setTimeout(() => {
|
||||
if (this.draggableHintShown) {
|
||||
return;
|
||||
}
|
||||
this.showDraggableHintWithDelay = this.showDraggableHint;
|
||||
if (this.showDraggableHintWithDelay) {
|
||||
this.draggableHintShown = true;
|
||||
|
||||
this.$telemetry.track('User viewed data mapping tooltip', {
|
||||
type: 'unexecuted input pane',
|
||||
});
|
||||
}
|
||||
}, 1000);
|
||||
} else if (!curr) {
|
||||
this.showDraggableHintWithDelay = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
filterOutConnectionType(
|
||||
item: NodeConnectionType | INodeOutputConfiguration | INodeInputConfiguration,
|
||||
type: NodeConnectionType,
|
||||
) {
|
||||
if (!item) return false;
|
||||
|
||||
return typeof item === 'string' ? item !== type : item.type !== type;
|
||||
},
|
||||
onInputModeChange(val: MappingMode) {
|
||||
this.inputMode = val;
|
||||
},
|
||||
onMappedNodeSelected(val: string) {
|
||||
this.mappedNode = val;
|
||||
|
||||
this.onRunIndexChange(0);
|
||||
this.onUnlinkRun();
|
||||
},
|
||||
onNodeExecute() {
|
||||
this.$emit('execute');
|
||||
if (this.activeNode) {
|
||||
this.$telemetry.track('User clicked ndv button', {
|
||||
node_type: this.activeNode.type,
|
||||
workflow_id: this.workflowsStore.workflowId,
|
||||
push_ref: this.pushRef,
|
||||
pane: 'input',
|
||||
type: 'executePrevious',
|
||||
});
|
||||
}
|
||||
},
|
||||
onRunIndexChange(run: number) {
|
||||
this.$emit('runChange', run);
|
||||
},
|
||||
onLinkRun() {
|
||||
this.$emit('linkRun');
|
||||
},
|
||||
onUnlinkRun() {
|
||||
this.$emit('unlinkRun');
|
||||
},
|
||||
onInputNodeChange(value: string) {
|
||||
const index = this.parentNodes.findIndex((node) => node.name === value) + 1;
|
||||
this.$emit('changeInputNode', value, index);
|
||||
},
|
||||
onConnectionHelpClick() {
|
||||
if (this.activeNode) {
|
||||
this.$telemetry.track('User clicked ndv link', {
|
||||
node_type: this.activeNode.type,
|
||||
workflow_id: this.workflowsStore.workflowId,
|
||||
push_ref: this.pushRef,
|
||||
pane: 'input',
|
||||
type: 'not-connected-help',
|
||||
});
|
||||
}
|
||||
},
|
||||
activatePane() {
|
||||
this.$emit('activatePane');
|
||||
},
|
||||
},
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
currentNodeName: '',
|
||||
canLinkRuns: false,
|
||||
readOnly: false,
|
||||
isProductionExecutionPreview: false,
|
||||
isPaneActive: false,
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
itemHover: [
|
||||
{
|
||||
outputIndex: number;
|
||||
itemIndex: number;
|
||||
} | null,
|
||||
];
|
||||
tableMounted: [
|
||||
{
|
||||
avgRowHeight: number;
|
||||
},
|
||||
];
|
||||
linkRun: [];
|
||||
unlinkRun: [];
|
||||
runChange: [runIndex: number];
|
||||
search: [search: string];
|
||||
changeInputNode: [nodeName: string, index: number];
|
||||
execute: [];
|
||||
activatePane: [];
|
||||
}>();
|
||||
|
||||
const i18n = useI18n();
|
||||
const telemetry = useTelemetry();
|
||||
|
||||
const showDraggableHintWithDelay = ref(false);
|
||||
const draggableHintShown = ref(false);
|
||||
const inputMode = ref<MappingMode>('debugging');
|
||||
const mappedNode = ref<string | null>(null);
|
||||
const inputModes = [
|
||||
{ value: 'mapping', label: i18n.baseText('ndv.input.mapping') },
|
||||
{ value: 'debugging', label: i18n.baseText('ndv.input.debugging') },
|
||||
];
|
||||
|
||||
const nodeTypesStore = useNodeTypesStore();
|
||||
const ndvStore = useNDVStore();
|
||||
const workflowsStore = useWorkflowsStore();
|
||||
const uiStore = useUIStore();
|
||||
|
||||
const {
|
||||
activeNode,
|
||||
focusedMappableInput,
|
||||
isMappingOnboarded: isUserOnboarded,
|
||||
} = storeToRefs(ndvStore);
|
||||
const isMappingMode = computed(() => isActiveNodeConfig.value && inputMode.value === 'mapping');
|
||||
const showDraggableHint = computed(() => {
|
||||
const toIgnore = [START_NODE_TYPE, MANUAL_TRIGGER_NODE_TYPE, CRON_NODE_TYPE, INTERVAL_NODE_TYPE];
|
||||
if (!currentNode.value || toIgnore.includes(currentNode.value.type)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return !!focusedMappableInput.value && !isUserOnboarded.value;
|
||||
});
|
||||
|
||||
const isActiveNodeConfig = computed(() => {
|
||||
let inputs = activeNodeType.value?.inputs ?? [];
|
||||
let outputs = activeNodeType.value?.outputs ?? [];
|
||||
|
||||
if (props.workflow && activeNode.value) {
|
||||
const node = props.workflow.getNode(activeNode.value.name);
|
||||
|
||||
if (node && activeNodeType.value) {
|
||||
inputs = NodeHelpers.getNodeInputs(props.workflow, node, activeNodeType.value);
|
||||
outputs = NodeHelpers.getNodeOutputs(props.workflow, node, activeNodeType.value);
|
||||
}
|
||||
}
|
||||
|
||||
// If we can not figure out the node type we set no outputs
|
||||
if (!Array.isArray(inputs)) {
|
||||
inputs = [];
|
||||
}
|
||||
|
||||
if (!Array.isArray(outputs)) {
|
||||
outputs = [];
|
||||
}
|
||||
|
||||
return (
|
||||
inputs.length === 0 ||
|
||||
(inputs.every((input) => filterOutConnectionType(input, NodeConnectionType.Main)) &&
|
||||
outputs.find((output) => filterOutConnectionType(output, NodeConnectionType.Main)))
|
||||
);
|
||||
});
|
||||
|
||||
const isMappingEnabled = computed(() => {
|
||||
if (props.readOnly) return false;
|
||||
|
||||
// Mapping is only enabled in mapping mode for config nodes and if node to map is selected
|
||||
if (isActiveNodeConfig.value) return isMappingMode.value && mappedNode.value !== null;
|
||||
|
||||
return true;
|
||||
});
|
||||
const isExecutingPrevious = computed(() => {
|
||||
if (!workflowRunning.value) {
|
||||
return false;
|
||||
}
|
||||
const triggeredNode = workflowsStore.executedNode;
|
||||
const executingNode = workflowsStore.executingNode;
|
||||
|
||||
if (
|
||||
activeNode.value &&
|
||||
triggeredNode === activeNode.value.name &&
|
||||
!workflowsStore.isNodeExecuting(activeNode.value.name)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (executingNode.length || triggeredNode) {
|
||||
return !!parentNodes.value.find(
|
||||
(node) => workflowsStore.isNodeExecuting(node.name) || node.name === triggeredNode,
|
||||
);
|
||||
}
|
||||
return false;
|
||||
});
|
||||
const workflowRunning = computed(() => uiStore.isActionActive.workflowRunning);
|
||||
|
||||
const rootNode = computed(() => {
|
||||
if (!activeNode.value) return null;
|
||||
|
||||
return props.workflow.getChildNodes(activeNode.value.name, 'ALL').at(0) ?? null;
|
||||
});
|
||||
|
||||
const rootNodesParents = computed(() => {
|
||||
if (!rootNode.value) return [];
|
||||
return props.workflow.getParentNodesByDepth(rootNode.value);
|
||||
});
|
||||
|
||||
const currentNode = computed(() => {
|
||||
if (isActiveNodeConfig.value) {
|
||||
// if we're mapping node we want to show the output of the mapped node
|
||||
if (mappedNode.value) {
|
||||
return workflowsStore.getNodeByName(mappedNode.value);
|
||||
}
|
||||
|
||||
// in debugging mode data does get set manually and is only for debugging
|
||||
// so we want to force the node to be the active node to make sure we show the correct data
|
||||
return activeNode.value;
|
||||
}
|
||||
|
||||
return workflowsStore.getNodeByName(props.currentNodeName ?? '');
|
||||
});
|
||||
|
||||
const connectedCurrentNodeOutputs = computed(() => {
|
||||
const search = parentNodes.value.find(({ name }) => name === props.currentNodeName);
|
||||
return search?.indicies;
|
||||
});
|
||||
const parentNodes = computed(() => {
|
||||
if (!activeNode.value) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const parents = props.workflow
|
||||
.getParentNodesByDepth(activeNode.value.name)
|
||||
.filter((parent) => parent.name !== activeNode.value?.name);
|
||||
return uniqBy(parents, (parent) => parent.name);
|
||||
});
|
||||
|
||||
const currentNodeDepth = computed(() => {
|
||||
const node = parentNodes.value.find(
|
||||
(parent) => currentNode.value && parent.name === currentNode.value.name,
|
||||
);
|
||||
return node?.depth ?? -1;
|
||||
});
|
||||
|
||||
const activeNodeType = computed(() => {
|
||||
if (!activeNode.value) return null;
|
||||
return nodeTypesStore.getNodeType(activeNode.value.type, activeNode.value.typeVersion);
|
||||
});
|
||||
|
||||
const waitingMessage = computed(() => waitingNodeTooltip());
|
||||
|
||||
watch(
|
||||
inputMode,
|
||||
(mode) => {
|
||||
onRunIndexChange(-1);
|
||||
if (mode === 'mapping') {
|
||||
onUnlinkRun();
|
||||
mappedNode.value = rootNodesParents.value[0]?.name ?? null;
|
||||
} else {
|
||||
mappedNode.value = null;
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
watch(showDraggableHint, (curr, prev) => {
|
||||
if (curr && !prev) {
|
||||
setTimeout(() => {
|
||||
if (draggableHintShown.value) {
|
||||
return;
|
||||
}
|
||||
showDraggableHintWithDelay.value = showDraggableHint.value;
|
||||
if (showDraggableHintWithDelay.value) {
|
||||
draggableHintShown.value = true;
|
||||
|
||||
telemetry.track('User viewed data mapping tooltip', {
|
||||
type: 'unexecuted input pane',
|
||||
});
|
||||
}
|
||||
}, 1000);
|
||||
} else if (!curr) {
|
||||
showDraggableHintWithDelay.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
function filterOutConnectionType(
|
||||
item: NodeConnectionType | INodeOutputConfiguration | INodeInputConfiguration,
|
||||
type: NodeConnectionType,
|
||||
) {
|
||||
if (!item) return false;
|
||||
|
||||
return typeof item === 'string' ? item !== type : item.type !== type;
|
||||
}
|
||||
|
||||
function onInputModeChange(val: string) {
|
||||
inputMode.value = val as MappingMode;
|
||||
}
|
||||
|
||||
function onMappedNodeSelected(val: string) {
|
||||
mappedNode.value = val;
|
||||
|
||||
onRunIndexChange(0);
|
||||
onUnlinkRun();
|
||||
}
|
||||
|
||||
function onNodeExecute() {
|
||||
emit('execute');
|
||||
if (activeNode.value) {
|
||||
telemetry.track('User clicked ndv button', {
|
||||
node_type: activeNode.value.type,
|
||||
workflow_id: workflowsStore.workflowId,
|
||||
push_ref: props.pushRef,
|
||||
pane: 'input',
|
||||
type: 'executePrevious',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function onRunIndexChange(run: number) {
|
||||
emit('runChange', run);
|
||||
}
|
||||
|
||||
function onLinkRun() {
|
||||
emit('linkRun');
|
||||
}
|
||||
|
||||
function onUnlinkRun() {
|
||||
emit('unlinkRun');
|
||||
}
|
||||
|
||||
function onSearch(search: string) {
|
||||
emit('search', search);
|
||||
}
|
||||
|
||||
function onItemHover(
|
||||
item: {
|
||||
outputIndex: number;
|
||||
itemIndex: number;
|
||||
} | null,
|
||||
) {
|
||||
emit('itemHover', item);
|
||||
}
|
||||
|
||||
function onTableMounted(event: { avgRowHeight: number }) {
|
||||
emit('tableMounted', event);
|
||||
}
|
||||
|
||||
function onInputNodeChange(value: string) {
|
||||
const index = parentNodes.value.findIndex((node) => node.name === value) + 1;
|
||||
emit('changeInputNode', value, index);
|
||||
}
|
||||
|
||||
function onConnectionHelpClick() {
|
||||
if (activeNode.value) {
|
||||
telemetry.track('User clicked ndv link', {
|
||||
node_type: activeNode.value.type,
|
||||
workflow_id: workflowsStore.workflowId,
|
||||
push_ref: props.pushRef,
|
||||
pane: 'input',
|
||||
type: 'not-connected-help',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function activatePane() {
|
||||
emit('activatePane');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -358,18 +353,19 @@ export default defineComponent({
|
||||
pane-type="input"
|
||||
data-test-id="ndv-input-panel"
|
||||
@activate-pane="activatePane"
|
||||
@item-hover="$emit('itemHover', $event)"
|
||||
@item-hover="onItemHover"
|
||||
@link-run="onLinkRun"
|
||||
@unlink-run="onUnlinkRun"
|
||||
@run-change="onRunIndexChange"
|
||||
@table-mounted="$emit('tableMounted', $event)"
|
||||
@search="$emit('search', $event)"
|
||||
@table-mounted="onTableMounted"
|
||||
@search="onSearch"
|
||||
>
|
||||
<template #header>
|
||||
<div :class="$style.titleSection">
|
||||
<span :class="$style.title">{{ $locale.baseText('ndv.input') }}</span>
|
||||
<n8n-radio-buttons
|
||||
<N8nRadioButtons
|
||||
v-if="isActiveNodeConfig && !readOnly"
|
||||
data-test-id="input-panel-mode"
|
||||
:options="inputModes"
|
||||
:model-value="inputMode"
|
||||
@update:model-value="onInputModeChange"
|
||||
@@ -405,10 +401,10 @@ export default defineComponent({
|
||||
v-if="(isActiveNodeConfig && rootNode) || parentNodes.length"
|
||||
:class="$style.noOutputData"
|
||||
>
|
||||
<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
|
||||
<N8nText tag="div" :bold="true" color="text-dark" size="large">{{
|
||||
$locale.baseText('ndv.input.noOutputData.title')
|
||||
}}</n8n-text>
|
||||
<n8n-tooltip v-if="!readOnly" :visible="showDraggableHint && showDraggableHintWithDelay">
|
||||
}}</N8nText>
|
||||
<N8nTooltip v-if="!readOnly" :visible="showDraggableHint && showDraggableHintWithDelay">
|
||||
<template #content>
|
||||
<div
|
||||
v-n8n-html="
|
||||
@@ -422,25 +418,25 @@ export default defineComponent({
|
||||
type="secondary"
|
||||
hide-icon
|
||||
:transparent="true"
|
||||
:node-name="isActiveNodeConfig ? rootNode : (currentNodeName ?? '')"
|
||||
:node-name="(isActiveNodeConfig ? rootNode : currentNodeName) ?? ''"
|
||||
:label="$locale.baseText('ndv.input.noOutputData.executePrevious')"
|
||||
telemetry-source="inputs"
|
||||
data-test-id="execute-previous-node"
|
||||
@execute="onNodeExecute"
|
||||
/>
|
||||
</n8n-tooltip>
|
||||
<n8n-text v-if="!readOnly" tag="div" size="small">
|
||||
</N8nTooltip>
|
||||
<N8nText v-if="!readOnly" tag="div" size="small">
|
||||
{{ $locale.baseText('ndv.input.noOutputData.hint') }}
|
||||
</n8n-text>
|
||||
</N8nText>
|
||||
</div>
|
||||
<div v-else :class="$style.notConnected">
|
||||
<div>
|
||||
<WireMeUp />
|
||||
</div>
|
||||
<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
|
||||
<N8nText tag="div" :bold="true" color="text-dark" size="large">{{
|
||||
$locale.baseText('ndv.input.notConnected.title')
|
||||
}}</n8n-text>
|
||||
<n8n-text tag="div">
|
||||
}}</N8nText>
|
||||
<N8nText tag="div">
|
||||
{{ $locale.baseText('ndv.input.notConnected.message') }}
|
||||
<a
|
||||
href="https://docs.n8n.io/workflows/connections/"
|
||||
@@ -449,29 +445,29 @@ export default defineComponent({
|
||||
>
|
||||
{{ $locale.baseText('ndv.input.notConnected.learnMore') }}
|
||||
</a>
|
||||
</n8n-text>
|
||||
</N8nText>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #node-waiting>
|
||||
<n8n-text :bold="true" color="text-dark" size="large">Waiting for input</n8n-text>
|
||||
<n8n-text v-n8n-html="waitingMessage"></n8n-text>
|
||||
<N8nText :bold="true" color="text-dark" size="large">Waiting for input</N8nText>
|
||||
<N8nText v-n8n-html="waitingMessage"></N8nText>
|
||||
</template>
|
||||
|
||||
<template #no-output-data>
|
||||
<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
|
||||
<N8nText tag="div" :bold="true" color="text-dark" size="large">{{
|
||||
$locale.baseText('ndv.input.noOutputData')
|
||||
}}</n8n-text>
|
||||
}}</N8nText>
|
||||
</template>
|
||||
|
||||
<template #recovered-artificial-output-data>
|
||||
<div :class="$style.recoveredOutputData">
|
||||
<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
|
||||
<N8nText tag="div" :bold="true" color="text-dark" size="large">{{
|
||||
$locale.baseText('executionDetails.executionFailed.recoveredNodeTitle')
|
||||
}}</n8n-text>
|
||||
<n8n-text>
|
||||
}}</N8nText>
|
||||
<N8nText>
|
||||
{{ $locale.baseText('executionDetails.executionFailed.recoveredNodeMessage') }}
|
||||
</n8n-text>
|
||||
</N8nText>
|
||||
</div>
|
||||
</template>
|
||||
</RunData>
|
||||
|
||||
Reference in New Issue
Block a user