fix: Show input names when node has multiple inputs (#10434)

This commit is contained in:
Michael Kret 2024-08-19 16:28:07 +03:00 committed by GitHub
parent aa4404ed79
commit 973956cc26
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 62 additions and 4 deletions

View file

@ -63,6 +63,15 @@ const isMultiInputNode = computed(() => {
return nodeType !== null && nodeType.inputs.length > 1;
});
const connectedTo = (nodeName: string) => {
const connections = ndvStore.ndvNodeInputNumber[nodeName];
if (!connections) return '';
if (connections.length === 1) {
return `Input ${ndvStore.ndvNodeInputNumber[nodeName]}`;
}
return `Inputs ${ndvStore.ndvNodeInputNumber[nodeName].join(', ')}`;
};
function getMultipleNodesText(nodeName: string): string {
if (
!nodeName ||
@ -90,8 +99,8 @@ function getMultipleNodesText(nodeName: string): string {
return `(${connectedInputs.join(' & ')})`;
}
function title(nodeName: string) {
const truncated = nodeName.substring(0, 30);
function title(nodeName: string, length = 30) {
const truncated = nodeName.substring(0, length);
if (truncated.length < nodeName.length) {
return `${truncated}...`;
}
@ -150,7 +159,9 @@ function onInputNodeChange(value: string) {
<span v-if="node.disabled">({{ i18n.baseText('node.disabled') }})</span>
</span>
<span :class="$style.subtitle">{{ subtitle(node.name, depth) }}</span>
<span :class="$style.subtitle">{{
connectedTo(node.name) ? connectedTo(node.name) : subtitle(node.name, depth)
}}</span>
</n8n-option>
</n8n-select>
</template>

View file

@ -110,6 +110,24 @@ const filteredNodes = computed(() =>
nodes.value.filter((node) => !props.search || !isDataEmpty(node.schema)),
);
const nodeAdditionalInfo = (node: INodeUi) => {
const returnData: string[] = [];
if (node.disabled) {
returnData.push(i18n.baseText('node.disabled'));
}
const connections = ndvStore.ndvNodeInputNumber[node.name];
if (connections) {
if (connections.length === 1) {
returnData.push(`Input ${connections}`);
} else {
returnData.push(`Inputs ${connections.join(', ')}`);
}
}
return returnData.length ? `(${returnData.join(' | ')})` : '';
};
const isDataEmpty = (schema: Schema | null) => {
if (!schema) return true;
// Utilize the generated schema instead of looping over the entire data again
@ -292,7 +310,9 @@ watch(
<div :class="$style.title">
{{ currentNode.node.name }}
<span v-if="currentNode.node.disabled">({{ $locale.baseText('node.disabled') }})</span>
<span v-if="nodeAdditionalInfo(currentNode.node)" :class="$style.subtitle">{{
nodeAdditionalInfo(currentNode.node)
}}</span>
</div>
<font-awesome-icon
v-if="currentNode.nodeType.group.includes('trigger')"
@ -478,6 +498,13 @@ watch(
cursor: pointer;
}
.subtitle {
margin-left: auto;
padding-left: var(--spacing-2xs);
color: var(--color-text-light);
font-weight: var(--font-weight-regular);
}
.header {
display: flex;
align-items: center;

View file

@ -177,6 +177,26 @@ export const useNDVStore = defineStore(STORES.NDV, {
isNDVOpen(): boolean {
return this.activeNodeName !== null;
},
ndvNodeInputNumber() {
const returnData: { [nodeName: string]: number[] } = {};
const workflow = useWorkflowsStore().getCurrentWorkflow();
const activeNodeConections = (
workflow.connectionsByDestinationNode[this.activeNode?.name || ''] ?? {}
).main;
if (!activeNodeConections || activeNodeConections.length < 2) return returnData;
for (const [index, connection] of activeNodeConections.entries()) {
for (const node of connection) {
if (!returnData[node.node]) {
returnData[node.node] = [];
}
returnData[node.node].push(index + 1);
}
}
return returnData;
},
},
actions: {
setActiveNodeName(nodeName: string | null): void {