admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-17 18:12:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(editor): Overhaul input selector in NDV (#9520)

Browse Source
This commit is contained in:
Elias Meire
2024-05-31 18:04:57 +02:00
committed by GitHub
parent 2e9bd6739b
commit c0ec990f4c
9 changed files with 428 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
packages/editor-ui/src/components/InputPanel.vue
View File

@@ -1,6 +1,7 @@
<template>
<RunData
:node="currentNode"
:workflow="workflow"
:run-index="runIndex"
:linked-runs="linkedRuns"
:can-link-runs="!mappedNode && canLinkRuns"
@@ -26,38 +27,7 @@
>
<template #header>
<div :class="$style.titleSection">
<n8n-select
v-if="parentNodes.length"
teleported
size="small"
:model-value="currentNodeName"
:no-data-text="$locale.baseText('ndv.input.noNodesFound')"
:placeholder="$locale.baseText('ndv.input.parentNodes')"
filterable
data-test-id="ndv-input-select"
@update:model-value="onInputNodeChange"
>
<template #prepend>
<span :class="$style.title">{{ $locale.baseText('ndv.input') }}</span>
</template>
<n8n-option
v-for="node of parentNodes"
:key="node.name"
:value="node.name"
class="node-option"
:label="`${truncate(node.name)} ${getMultipleNodesText(node.name)}`"
data-test-id="ndv-input-option"
>
<span>{{ truncate(node.name) }}&nbsp;</span>
<span v-if="getMultipleNodesText(node.name)">{{
getMultipleNodesText(node.name)
}}</span>
<span v-else>{{
$locale.baseText('ndv.input.nodeDistance', { adjustToNumber: node.depth })
}}</span>
</n8n-option>
</n8n-select>
<span v-else :class="$style.title">{{ $locale.baseText('ndv.input') }}</span>
<span :class="$style.title">{{ $locale.baseText('ndv.input') }}</span>
<n8n-radio-buttons
v-if="isActiveNodeConfig && !readOnly"
:options="inputModes"
@@ -66,6 +36,15 @@
/>
</div>
</template>
<template #input-select>
<InputNodeSelect
v-if="parentNodes.length && currentNodeName"
:model-value="currentNodeName"
:workflow="workflow"
:nodes="parentNodes"
@update:model-value="onInputNodeChange"
/>
</template>
<template v-if="isMappingMode" #before-data>
<!--
Hide the run linking buttons for both input and ouput panels when in 'Mapping Mode' because the run indices wouldn't match.
@@ -73,21 +52,12 @@
-->
<component :is="'style'">button.linkRun { display: none }</component>
<div :class="$style.mappedNode">
<n8n-select
<InputNodeSelect
:model-value="mappedNode"
size="small"
teleported
:workflow="workflow"
:nodes="rootNodesParents"
@update:model-value="onMappedNodeSelected"
@click.stop
>
<template #prepend>{{ $locale.baseText('ndv.input.previousNode') }}</template>
<n8n-option
v-for="nodeName in rootNodesParents"
:key="nodeName"
:label="nodeName"
:value="nodeName"
/>
</n8n-select>
/>
</div>
</template>
<template #node-not-run>
@@ -163,10 +133,17 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { mapStores } from 'pinia';
import type { INodeUi } from '@/Interface';
import { NodeHelpers, NodeConnectionType } from 'n8n-workflow';
import {
CRON_NODE_TYPE,
INTERVAL_NODE_TYPE,
MANUAL_TRIGGER_NODE_TYPE,
START_NODE_TYPE,
} from '@/constants';
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 {
ConnectionTypes,
IConnectedNode,
@@ -174,25 +151,19 @@ import type {
INodeTypeDescription,
Workflow,
} from 'n8n-workflow';
import RunData from './RunData.vue';
import { NodeConnectionType, NodeHelpers } from 'n8n-workflow';
import { mapStores } from 'pinia';
import { defineComponent, type PropType } from 'vue';
import InputNodeSelect from './InputNodeSelect.vue';
import NodeExecuteButton from './NodeExecuteButton.vue';
import RunData from './RunData.vue';
import WireMeUp from './WireMeUp.vue';
import {
CRON_NODE_TYPE,
INTERVAL_NODE_TYPE,
MANUAL_TRIGGER_NODE_TYPE,
START_NODE_TYPE,
} from '@/constants';
import { useWorkflowsStore } from '@/stores/workflows.store';
import { useNDVStore } from '@/stores/ndv.store';
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
import { useUIStore } from '@/stores/ui.store';
type MappingMode = 'debugging' | 'mapping';
export default defineComponent({
name: 'InputPanel',
components: { RunData, NodeExecuteButton, WireMeUp },
components: { RunData, NodeExecuteButton, WireMeUp, InputNodeSelect },
props: {
currentNodeName: {
type: String,
@@ -204,7 +175,10 @@ export default defineComponent({
linkedRuns: {
type: Boolean,
},
workflow: {},
workflow: {
type: Object as PropType<Workflow>,
required: true,
},
canLinkRuns: {
type: Boolean,
},
@@ -223,6 +197,17 @@ export default defineComponent({
default: false,
},
},
emits: [
'itemHover',
'tableMounted',
'linkRun',
'unlinkRun',
'runChange',
'search',
'changeInputNode',
'execute',
'activatePane',
],
data() {
return {
showDraggableHintWithDelay: false,
@@ -262,10 +247,10 @@ export default defineComponent({
isActiveNodeConfig(): boolean {
let inputs = this.activeNodeType?.inputs ?? [];
let outputs = this.activeNodeType?.outputs ?? [];
if (this.activeNode !== null && this.currentWorkflow !== null) {
const node = this.currentWorkflow.getNode(this.activeNode.name);
inputs = NodeHelpers.getNodeInputs(this.currentWorkflow, node!, this.activeNodeType!);
outputs = NodeHelpers.getNodeOutputs(this.currentWorkflow, node!, this.activeNodeType!);
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)) {
@@ -319,22 +304,22 @@ export default defineComponent({
workflowRunning(): boolean {
return this.uiStore.isActionActive('workflowRunning');
},
currentWorkflow(): Workflow {
return this.workflow as Workflow;
},
activeNode(): INodeUi | null {
return this.ndvStore.activeNode;
},
rootNode(): string {
const workflow = this.currentWorkflow;
const workflow = this.workflow;
const rootNodes = workflow.getChildNodes(this.activeNode?.name ?? '', 'ALL_NON_MAIN');
return rootNodes[0];
},
rootNodesParents(): string[] {
const workflow = this.currentWorkflow;
const parentNodes = [...workflow.getParentNodes(this.rootNode, 'main')].reverse();
rootNodesParents() {
const workflow = this.workflow;
const parentNodes = [...workflow.getParentNodes(this.rootNode, 'main')]
.reverse()
.map((parent): IConnectedNode => ({ name: parent, depth: 1, indicies: [] }));
return parentNodes;
},
@@ -363,9 +348,7 @@ export default defineComponent({
if (!this.activeNode) {
return [];
}
const nodes: IConnectedNode[] = (this.workflow as Workflow).getParentNodesByDepth(
this.activeNode.name,
);
const nodes = this.workflow.getParentNodesByDepth(this.activeNode.name);
return nodes.filter(
({ name }, i) =>
@@ -376,7 +359,7 @@ export default defineComponent({
},
currentNodeDepth(): number {
const node = this.parentNodes.find(
(node) => this.currentNode && node.name === this.currentNode.name,
(parent) => this.currentNode && parent.name === this.currentNode.name,
);
return node ? node.depth : -1;
},
@@ -395,7 +378,7 @@ export default defineComponent({
this.onRunIndexChange(-1);
if (val === 'mapping') {
this.onUnlinkRun();
this.mappedNode = this.rootNodesParents[0];
this.mappedNode = this.rootNodesParents[0]?.name ?? null;
} else {
this.mappedNode = null;
}
@@ -440,32 +423,6 @@ export default defineComponent({
this.onRunIndexChange(0);
this.onUnlinkRun();
},
getMultipleNodesText(nodeName?: string): string {
if (
!nodeName ||
!this.isMultiInputNode ||
!this.activeNode ||
this.activeNodeType?.inputNames === undefined
)
return '';
const activeNodeConnections =
this.currentWorkflow.connectionsByDestinationNode[this.activeNode.name].main || [];
// Collect indexes of connected nodes
const connectedInputIndexes = activeNodeConnections.reduce((acc: number[], node, index) => {
if (node[0] && node[0].node === nodeName) return [...acc, index];
return acc;
}, []);
// Match connected input indexes to their names specified by active node
const connectedInputs = connectedInputIndexes.map(
(inputIndex) => this.activeNodeType?.inputNames?.[inputIndex],
);
if (connectedInputs.length === 0) return '';
return `(${connectedInputs.join(' & ')})`;
},
onNodeExecute() {
this.$emit('execute');
if (this.activeNode) {
@@ -502,13 +459,6 @@ export default defineComponent({
});
}
},
truncate(nodeName: string) {
const truncated = nodeName.substring(0, 30);
if (truncated.length < nodeName.length) {
return `${truncated}...`;
}
return truncated;
},
activatePane() {
this.$emit('activatePane');
},
@@ -518,9 +468,9 @@ export default defineComponent({
<style lang="scss" module>
.mappedNode {
width: max-content;
padding: 0 var(--spacing-s) var(--spacing-s);
}
.titleSection {
display: flex;
max-width: 300px;
@@ -575,17 +525,3 @@ export default defineComponent({
font-weight: var(--font-weight-bold);
}
</style>
<style lang="scss" scoped>
.node-option {
font-weight: var(--font-weight-regular) !important;
span {
color: var(--color-text-light);
}
&.selected > span {
color: var(--color-primary);
}
}
</style>