mirror of
https://github.com/n8n-io/n8n.git
synced 2024-12-25 20:54:07 -08:00
feat(editor): Overhaul input selector in NDV (#9520)
This commit is contained in:
Elias Meire
GitHub
parent
2e9bd6739b
commit
c0ec990f4c
|
|
@ -63,7 +63,9 @@ export class NDV extends BasePage {
|
|||
httpRequestNotice: () => cy.getByTestId('node-parameters-http-notice'),
|
||||
nthParam: (n: number) => cy.getByTestId('node-parameters').find('.parameter-item').eq(n),
|
||||
inputRunSelector: () => this.getters.inputPanel().findChildByTestId('run-selector'),
|
||||
inputLinkRun: () => this.getters.inputPanel().findChildByTestId('link-run'),
|
||||
outputRunSelector: () => this.getters.outputPanel().findChildByTestId('run-selector'),
|
||||
outputLinkRun: () => this.getters.outputPanel().findChildByTestId('link-run'),
|
||||
outputHoveringItem: () => this.getters.outputPanel().findChildByTestId('hovering-item'),
|
||||
inputHoveringItem: () => this.getters.inputPanel().findChildByTestId('hovering-item'),
|
||||
outputBranches: () => this.getters.outputPanel().findChildByTestId('branches'),
|
||||
|
|
@ -228,10 +230,10 @@ export class NDV extends BasePage {
|
|||
getVisibleSelect().find('.el-select-dropdown__item').contains(runName).click();
|
||||
},
|
||||
toggleOutputRunLinking: () => {
|
||||
this.getters.outputRunSelector().find('button').click();
|
||||
this.getters.outputLinkRun().click();
|
||||
},
|
||||
toggleInputRunLinking: () => {
|
||||
this.getters.inputRunSelector().find('button').click();
|
||||
this.getters.inputLinkRun().click();
|
||||
},
|
||||
switchOutputBranch: (name: string) => {
|
||||
this.getters.outputBranches().get('span').contains(name).click();
|
||||
|
|
|
|||
193
packages/editor-ui/src/components/InputNodeSelect.vue
Normal file
193
packages/editor-ui/src/components/InputNodeSelect.vue
Normal file
|
|
@ -0,0 +1,193 @@
|
|||
<script lang="ts" setup>
|
||||
import { useI18n } from '@/composables/useI18n';
|
||||
import { useNDVStore } from '@/stores/ndv.store';
|
||||
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
|
||||
import { useWorkflowsStore } from '@/stores/workflows.store';
|
||||
import { isPresent } from '@/utils/typesUtils';
|
||||
import type { IConnectedNode, Workflow } from 'n8n-workflow';
|
||||
import { computed } from 'vue';
|
||||
import NodeIcon from './NodeIcon.vue';
|
||||
|
||||
type Props = {
|
||||
nodes: IConnectedNode[];
|
||||
workflow: Workflow;
|
||||
modelValue: string | null;
|
||||
};
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:model-value', value: string): void;
|
||||
}>();
|
||||
|
||||
const i18n = useI18n();
|
||||
const workflowsStore = useWorkflowsStore();
|
||||
const nodeTypesStore = useNodeTypesStore();
|
||||
const ndvStore = useNDVStore();
|
||||
|
||||
const selectedInputNode = computed(() => workflowsStore.getNodeByName(props.modelValue ?? ''));
|
||||
|
||||
const selectedInputNodeType = computed(() => {
|
||||
const node = selectedInputNode.value;
|
||||
if (!node) return null;
|
||||
|
||||
return nodeTypesStore.getNodeType(node.type, node.typeVersion);
|
||||
});
|
||||
|
||||
const inputNodes = computed(() =>
|
||||
props.nodes
|
||||
.map((node) => {
|
||||
const fullNode = workflowsStore.getNodeByName(node.name);
|
||||
if (!fullNode) return null;
|
||||
|
||||
return {
|
||||
node: fullNode,
|
||||
type: nodeTypesStore.getNodeType(fullNode.type, fullNode.typeVersion),
|
||||
depth: node.depth,
|
||||
};
|
||||
})
|
||||
.filter(isPresent),
|
||||
);
|
||||
|
||||
const activeNode = computed(() => ndvStore.activeNode);
|
||||
|
||||
const activeNodeType = computed(() => {
|
||||
const node = activeNode.value;
|
||||
if (!node) return null;
|
||||
|
||||
return nodeTypesStore.getNodeType(node.type, node.typeVersion);
|
||||
});
|
||||
|
||||
const isMultiInputNode = computed(() => {
|
||||
const nodeType = activeNodeType.value;
|
||||
return nodeType !== null && nodeType.inputs.length > 1;
|
||||
});
|
||||
|
||||
function getMultipleNodesText(nodeName: string): string {
|
||||
if (
|
||||
!nodeName ||
|
||||
!isMultiInputNode.value ||
|
||||
!activeNode.value ||
|
||||
!activeNodeType.value?.inputNames
|
||||
)
|
||||
return '';
|
||||
|
||||
const activeNodeConnections =
|
||||
props.workflow.connectionsByDestinationNode[activeNode.value.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) => activeNodeType.value?.inputNames?.[inputIndex],
|
||||
);
|
||||
|
||||
if (connectedInputs.length === 0) return '';
|
||||
|
||||
return `(${connectedInputs.join(' & ')})`;
|
||||
}
|
||||
|
||||
function title(nodeName: string) {
|
||||
const truncated = nodeName.substring(0, 30);
|
||||
if (truncated.length < nodeName.length) {
|
||||
return `${truncated}...`;
|
||||
}
|
||||
return truncated;
|
||||
}
|
||||
|
||||
function subtitle(nodeName: string, depth: number) {
|
||||
const multipleNodesText = getMultipleNodesText(nodeName);
|
||||
if (multipleNodesText) return multipleNodesText;
|
||||
return i18n.baseText('ndv.input.nodeDistance', { adjustToNumber: depth });
|
||||
}
|
||||
|
||||
function onInputNodeChange(value: string) {
|
||||
emit('update:model-value', value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n8n-select
|
||||
:model-value="modelValue"
|
||||
:no-data-text="i18n.baseText('ndv.input.noNodesFound')"
|
||||
:placeholder="i18n.baseText('ndv.input.parentNodes')"
|
||||
:class="$style.select"
|
||||
teleported
|
||||
size="small"
|
||||
filterable
|
||||
data-test-id="ndv-input-select"
|
||||
@update:model-value="onInputNodeChange"
|
||||
>
|
||||
<template #prefix>
|
||||
<NodeIcon
|
||||
:disabled="selectedInputNode?.disabled"
|
||||
:node-type="selectedInputNodeType"
|
||||
:size="14"
|
||||
:shrink="false"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<n8n-option
|
||||
v-for="{ node, type, depth } of inputNodes"
|
||||
:key="node.name"
|
||||
:value="node.name"
|
||||
:class="[$style.node, { [$style.disabled]: node.disabled }]"
|
||||
:label="`${title(node.name)} ${getMultipleNodesText(node.name)}`"
|
||||
data-test-id="ndv-input-option"
|
||||
>
|
||||
<NodeIcon
|
||||
:disabled="node.disabled"
|
||||
:node-type="type"
|
||||
:size="14"
|
||||
:shrink="false"
|
||||
:class="$style.icon"
|
||||
/>
|
||||
<span :class="$style.title">
|
||||
{{ title(node.name) }}
|
||||
<span v-if="node.disabled">({{ i18n.baseText('node.disabled') }})</span>
|
||||
</span>
|
||||
|
||||
<span :class="$style.subtitle">{{ subtitle(node.name, depth) }}</span>
|
||||
</n8n-option>
|
||||
</n8n-select>
|
||||
</template>
|
||||
|
||||
<style lang="scss" module>
|
||||
.select {
|
||||
max-width: 224px;
|
||||
|
||||
:global(.el-input--suffix .el-input__inner) {
|
||||
padding-left: calc(var(--spacing-l) + var(--spacing-4xs));
|
||||
padding-right: var(--spacing-l);
|
||||
}
|
||||
}
|
||||
|
||||
.node {
|
||||
--select-option-padding: 0 var(--spacing-s);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: var(--font-size-2xs);
|
||||
gap: var(--spacing-4xs);
|
||||
}
|
||||
|
||||
.icon {
|
||||
padding-right: var(--spacing-4xs);
|
||||
}
|
||||
|
||||
.title {
|
||||
color: var(--color-text-dark);
|
||||
font-weight: var(--font-weight-regular);
|
||||
}
|
||||
|
||||
.disabled .title {
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--color-text-light);
|
||||
font-weight: var(--font-weight-regular);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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) }} </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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -85,6 +85,7 @@
|
|||
<template #output>
|
||||
<OutputPanel
|
||||
data-test-id="output-panel"
|
||||
:workflow="workflow"
|
||||
:can-link-runs="canLinkRuns"
|
||||
:run-index="outputRun"
|
||||
:linked-runs="linked"
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<RunData
|
||||
ref="runData"
|
||||
:node="node"
|
||||
:workflow="workflow"
|
||||
:run-index="runIndex"
|
||||
:linked-runs="linkedRuns"
|
||||
:can-link-runs="canLinkRuns"
|
||||
|
|
@ -100,9 +101,15 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { type PropType, defineComponent } from 'vue';
|
||||
import type { IExecutionResponse, INodeUi } from '@/Interface';
|
||||
import type { INodeTypeDescription, IRunData, IRunExecutionData, ITaskData } from 'n8n-workflow';
|
||||
import type {
|
||||
INodeTypeDescription,
|
||||
IRunData,
|
||||
IRunExecutionData,
|
||||
ITaskData,
|
||||
Workflow,
|
||||
} from 'n8n-workflow';
|
||||
import RunData from './RunData.vue';
|
||||
import RunInfo from './RunInfo.vue';
|
||||
import { mapStores, storeToRefs } from 'pinia';
|
||||
|
|
@ -129,6 +136,10 @@ export default defineComponent({
|
|||
name: 'OutputPanel',
|
||||
components: { RunData, RunInfo, RunDataAi },
|
||||
props: {
|
||||
workflow: {
|
||||
type: Object as PropType<Workflow>,
|
||||
required: true,
|
||||
},
|
||||
runIndex: {
|
||||
type: Number,
|
||||
required: true,
|
||||
|
|
|
|||
|
|
@ -58,6 +58,7 @@
|
|||
data-test-id="ndv-run-data-display-mode"
|
||||
@update:model-value="onDisplayModeChange"
|
||||
/>
|
||||
|
||||
<n8n-icon-button
|
||||
v-if="canPinData && !isReadOnlyRoute && !readOnlyEnv"
|
||||
v-show="!editMode.enabled"
|
||||
|
|
@ -105,17 +106,19 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="maxRunIndex > 0"
|
||||
v-show="!editMode.enabled"
|
||||
:class="$style.runSelector"
|
||||
data-test-id="run-selector"
|
||||
>
|
||||
<div :class="$style.runSelectorWrapper">
|
||||
<div v-if="extraControlsLocation === 'header'" :class="$style.inputSelect">
|
||||
<slot name="input-select"></slot>
|
||||
</div>
|
||||
|
||||
<div v-if="maxRunIndex > 0" v-show="!editMode.enabled" :class="$style.runSelector">
|
||||
<slot v-if="extraControlsLocation === 'runs'" name="input-select"></slot>
|
||||
|
||||
<n8n-select
|
||||
size="small"
|
||||
:model-value="runIndex"
|
||||
:class="$style.runSelectorInner"
|
||||
size="small"
|
||||
teleported
|
||||
data-test-id="run-selector"
|
||||
@update:model-value="onRunIndexChange"
|
||||
@click.stop
|
||||
>
|
||||
|
|
@ -127,29 +130,34 @@
|
|||
:value="option - 1"
|
||||
></n8n-option>
|
||||
</n8n-select>
|
||||
|
||||
<n8n-tooltip v-if="canLinkRuns" placement="right">
|
||||
<template #content>
|
||||
{{ $locale.baseText(linkedRuns ? 'runData.unlinking.hint' : 'runData.linking.hint') }}
|
||||
</template>
|
||||
<n8n-icon-button
|
||||
class="linkRun"
|
||||
:icon="linkedRuns ? 'unlink' : 'link'"
|
||||
class="linkRun"
|
||||
text
|
||||
type="tertiary"
|
||||
size="small"
|
||||
data-test-id="link-run"
|
||||
@click="toggleLinkRuns"
|
||||
/>
|
||||
</n8n-tooltip>
|
||||
|
||||
<slot name="run-info"></slot>
|
||||
</div>
|
||||
|
||||
<RunDataSearch
|
||||
v-if="showIOSearch"
|
||||
v-if="showIOSearch && extraControlsLocation === 'runs'"
|
||||
v-model="search"
|
||||
:class="$style.search"
|
||||
:pane-type="paneType"
|
||||
:is-area-active="isPaneActive"
|
||||
@focus="activatePane"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<slot name="before-data" />
|
||||
|
||||
<n8n-callout
|
||||
|
|
@ -163,22 +171,27 @@
|
|||
|
||||
<div
|
||||
v-if="maxOutputIndex > 0 && branches.length > 1"
|
||||
:class="$style.tabs"
|
||||
:class="$style.outputs"
|
||||
data-test-id="branches"
|
||||
>
|
||||
<slot v-if="extraControlsLocation === 'outputs'" name="input-select"></slot>
|
||||
|
||||
<div :class="$style.tabs">
|
||||
<n8n-tabs
|
||||
:model-value="currentOutputIndex"
|
||||
:options="branches"
|
||||
@update:model-value="onBranchChange"
|
||||
/>
|
||||
|
||||
<RunDataSearch
|
||||
v-if="showIOSearch"
|
||||
v-if="showIOSearch && extraControlsLocation === 'outputs'"
|
||||
v-model="search"
|
||||
:pane-type="paneType"
|
||||
:is-area-active="isPaneActive"
|
||||
@focus="activatePane"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="
|
||||
|
|
@ -188,10 +201,12 @@
|
|||
!isArtificialRecoveredEventItem
|
||||
"
|
||||
v-show="!editMode.enabled && !hasRunError"
|
||||
:class="$style.itemsCount"
|
||||
:class="[$style.itemsCount, { [$style.muted]: paneType === 'input' && maxRunIndex === 0 }]"
|
||||
data-test-id="ndv-items-count"
|
||||
>
|
||||
<n8n-text v-if="search">
|
||||
<slot v-if="extraControlsLocation === 'items'" name="input-select"></slot>
|
||||
|
||||
<n8n-text v-if="search" :class="$style.itemsText">
|
||||
{{
|
||||
$locale.baseText('ndv.search.items', {
|
||||
adjustToNumber: unfilteredDataCount,
|
||||
|
|
@ -199,7 +214,7 @@
|
|||
})
|
||||
}}
|
||||
</n8n-text>
|
||||
<n8n-text v-else>
|
||||
<n8n-text v-else :class="$style.itemsText">
|
||||
{{
|
||||
$locale.baseText('ndv.output.items', {
|
||||
adjustToNumber: dataCount,
|
||||
|
|
@ -207,9 +222,11 @@
|
|||
})
|
||||
}}
|
||||
</n8n-text>
|
||||
|
||||
<RunDataSearch
|
||||
v-if="showIOSearch"
|
||||
v-if="showIOSearch && extraControlsLocation === 'items'"
|
||||
v-model="search"
|
||||
:class="$style.search"
|
||||
:pane-type="paneType"
|
||||
:is-area-active="isPaneActive"
|
||||
@focus="activatePane"
|
||||
|
|
@ -568,6 +585,7 @@ import type {
|
|||
IRunExecutionData,
|
||||
NodeHint,
|
||||
NodeError,
|
||||
Workflow,
|
||||
} from 'n8n-workflow';
|
||||
import { NodeHelpers, NodeConnectionType } from 'n8n-workflow';
|
||||
|
||||
|
|
@ -647,6 +665,10 @@ export default defineComponent({
|
|||
type: Object as PropType<INodeUi | null>,
|
||||
default: null,
|
||||
},
|
||||
workflow: {
|
||||
type: Object as PropType<Workflow>,
|
||||
required: true,
|
||||
},
|
||||
runIndex: {
|
||||
type: Number,
|
||||
required: true,
|
||||
|
|
@ -800,7 +822,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
const schemaView = { label: this.$locale.baseText('runData.schema'), value: 'schema' };
|
||||
if (this.isPaneTypeInput && !isEmpty(this.jsonData)) {
|
||||
if (this.isPaneTypeInput) {
|
||||
defaults.unshift(schemaView);
|
||||
} else {
|
||||
defaults.push(schemaView);
|
||||
|
|
@ -925,9 +947,11 @@ export default defineComponent({
|
|||
rawInputData(): INodeExecutionData[] {
|
||||
return this.getRawInputData(this.runIndex, this.currentOutputIndex, this.connectionType);
|
||||
},
|
||||
unfilteredInputData(): INodeExecutionData[] {
|
||||
return this.getPinDataOrLiveData(this.rawInputData);
|
||||
},
|
||||
inputData(): INodeExecutionData[] {
|
||||
const pinOrLiveData = this.getPinDataOrLiveData(this.rawInputData);
|
||||
return this.getFilteredData(pinOrLiveData);
|
||||
return this.getFilteredData(this.unfilteredInputData);
|
||||
},
|
||||
inputDataPage(): INodeExecutionData[] {
|
||||
const offset = this.pageSize * (this.currentPage - 1);
|
||||
|
|
@ -1016,20 +1040,27 @@ export default defineComponent({
|
|||
return this.sourceControlStore.preferences.branchReadOnly;
|
||||
},
|
||||
showIOSearch(): boolean {
|
||||
return this.hasNodeRun && !this.hasRunError;
|
||||
return this.hasNodeRun && !this.hasRunError && this.unfilteredInputData.length > 0;
|
||||
},
|
||||
extraControlsLocation() {
|
||||
if (!this.hasNodeRun) return 'header';
|
||||
if (this.maxRunIndex > 0) return 'runs';
|
||||
if (this.maxOutputIndex > 0 && this.branches.length > 1) {
|
||||
return 'outputs';
|
||||
}
|
||||
|
||||
return 'items';
|
||||
},
|
||||
showIoSearchNoMatchContent(): boolean {
|
||||
return this.hasNodeRun && !this.inputData.length && !!this.search;
|
||||
},
|
||||
parentNodeOutputData(): INodeExecutionData[] {
|
||||
const workflow = this.workflowsStore.getCurrentWorkflow();
|
||||
|
||||
const parentNode = workflow.getParentNodesByDepth(this.node?.name ?? '')[0];
|
||||
const parentNode = this.workflow.getParentNodesByDepth(this.node?.name ?? '')[0];
|
||||
let parentNodeData: INodeExecutionData[] = [];
|
||||
|
||||
if (parentNode?.name) {
|
||||
parentNodeData = this.nodeHelpers.getNodeInputData(
|
||||
workflow.getNode(parentNode?.name),
|
||||
this.workflow.getNode(parentNode?.name),
|
||||
this.runIndex,
|
||||
this.outputIndex,
|
||||
'input',
|
||||
|
|
@ -1124,11 +1155,10 @@ export default defineComponent({
|
|||
methods: {
|
||||
getResolvedNodeOutputs() {
|
||||
if (this.node && this.nodeType) {
|
||||
const workflow = this.workflowsStore.getCurrentWorkflow();
|
||||
const workflowNode = workflow.getNode(this.node.name);
|
||||
const workflowNode = this.workflow.getNode(this.node.name);
|
||||
|
||||
if (workflowNode) {
|
||||
const outputs = NodeHelpers.getNodeOutputs(workflow, workflowNode, this.nodeType);
|
||||
const outputs = NodeHelpers.getNodeOutputs(this.workflow, workflowNode, this.nodeType);
|
||||
return outputs;
|
||||
}
|
||||
}
|
||||
|
|
@ -1162,12 +1192,11 @@ export default defineComponent({
|
|||
},
|
||||
getNodeHints(): NodeHint[] {
|
||||
if (this.node && this.nodeType) {
|
||||
const workflow = this.workflowsStore.getCurrentWorkflow();
|
||||
const workflowNode = workflow.getNode(this.node.name);
|
||||
const workflowNode = this.workflow.getNode(this.node.name);
|
||||
|
||||
if (workflowNode) {
|
||||
const executionHints = this.executionHints;
|
||||
const nodeHints = NodeHelpers.getNodeHints(workflow, workflowNode, this.nodeType, {
|
||||
const nodeHints = NodeHelpers.getNodeHints(this.workflow, workflowNode, this.nodeType, {
|
||||
runExecutionData: this.workflowExecution?.data ?? null,
|
||||
runIndex: this.runIndex,
|
||||
connectionInputData: this.parentNodeOutputData,
|
||||
|
|
@ -1716,33 +1745,68 @@ export default defineComponent({
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.outputs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-s);
|
||||
padding-left: var(--spacing-s);
|
||||
padding-right: var(--spacing-s);
|
||||
padding-bottom: var(--spacing-s);
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-s);
|
||||
min-height: 30px;
|
||||
}
|
||||
|
||||
.itemsCount {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-left: var(--spacing-s);
|
||||
margin-bottom: var(--spacing-s);
|
||||
gap: var(--spacing-2xs);
|
||||
padding-left: var(--spacing-s);
|
||||
padding-right: var(--spacing-s);
|
||||
padding-bottom: var(--spacing-s);
|
||||
|
||||
.itemsText {
|
||||
flex-shrink: 0;
|
||||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&.muted .itemsText {
|
||||
color: var(--color-text-light);
|
||||
font-size: var(--font-size-2xs);
|
||||
}
|
||||
}
|
||||
|
||||
.inputSelect {
|
||||
padding-left: var(--spacing-s);
|
||||
padding-right: var(--spacing-s);
|
||||
padding-bottom: var(--spacing-s);
|
||||
}
|
||||
|
||||
.runSelector {
|
||||
padding-left: var(--spacing-s);
|
||||
padding-right: var(--spacing-s);
|
||||
padding-bottom: var(--spacing-s);
|
||||
display: flex;
|
||||
width: 100%;
|
||||
gap: var(--spacing-4xs);
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
:global(.el-input--suffix .el-input__inner) {
|
||||
padding-right: var(--spacing-l);
|
||||
}
|
||||
}
|
||||
|
||||
.runSelectorWrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.search {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.runSelectorInner {
|
||||
max-width: 172px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { computed, ref, onMounted, onUnmounted } from 'vue';
|
||||
import { computed, ref, onMounted, onUnmounted, type StyleValue } from 'vue';
|
||||
import { useI18n } from '@/composables/useI18n';
|
||||
import type { NodePanelType } from '@/Interface';
|
||||
|
||||
|
|
@ -9,7 +9,9 @@ type Props = {
|
|||
isAreaActive?: boolean;
|
||||
};
|
||||
|
||||
const INITIAL_WIDTH = '34px';
|
||||
const COLLAPSED_WIDTH = '34px';
|
||||
const OPEN_WIDTH = '200px';
|
||||
const OPEN_MIN_WIDTH = '120px';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', value: Props['modelValue']): void;
|
||||
|
|
@ -24,7 +26,6 @@ const props = withDefaults(defineProps<Props>(), {
|
|||
const locale = useI18n();
|
||||
|
||||
const inputRef = ref<HTMLInputElement | null>(null);
|
||||
const maxWidth = ref(INITIAL_WIDTH);
|
||||
const opened = ref(false);
|
||||
const placeholder = computed(() =>
|
||||
props.paneType === 'input'
|
||||
|
|
@ -32,6 +33,10 @@ const placeholder = computed(() =>
|
|||
: locale.baseText('ndv.search.placeholder.output'),
|
||||
);
|
||||
|
||||
const style = computed<StyleValue>(() =>
|
||||
opened.value ? { maxWidth: OPEN_WIDTH, minWidth: OPEN_MIN_WIDTH } : { maxWidth: COLLAPSED_WIDTH },
|
||||
);
|
||||
|
||||
const documentKeyHandler = (event: KeyboardEvent) => {
|
||||
const isTargetFormElementOrEditable =
|
||||
event.target instanceof HTMLInputElement ||
|
||||
|
|
@ -50,14 +55,12 @@ const onSearchUpdate = (value: string) => {
|
|||
};
|
||||
const onFocus = () => {
|
||||
opened.value = true;
|
||||
maxWidth.value = '30%';
|
||||
inputRef.value?.select();
|
||||
emit('focus');
|
||||
};
|
||||
const onBlur = () => {
|
||||
if (!props.modelValue) {
|
||||
opened.value = false;
|
||||
maxWidth.value = INITIAL_WIDTH;
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
|
|
@ -76,7 +79,7 @@ onUnmounted(() => {
|
|||
[$style.ioSearch]: true,
|
||||
[$style.ioSearchOpened]: opened,
|
||||
}"
|
||||
:style="{ maxWidth }"
|
||||
:style="style"
|
||||
:model-value="modelValue"
|
||||
:placeholder="placeholder"
|
||||
size="small"
|
||||
|
|
@ -94,7 +97,6 @@ onUnmounted(() => {
|
|||
@import '@/styles/variables';
|
||||
|
||||
.ioSearch {
|
||||
margin-right: var(--spacing-s);
|
||||
transition: max-width 0.3s $ease-out-expo;
|
||||
|
||||
.ioSearchIcon {
|
||||
|
|
|
|||
|
|
@ -893,12 +893,11 @@
|
|||
"ndv.execute.workflowAlreadyRunning": "Workflow is already running",
|
||||
"ndv.featureRequest": "I wish this node would...",
|
||||
"ndv.input": "Input",
|
||||
"ndv.input.nodeDistance": "({count} node back) | ({count} nodes back)",
|
||||
"ndv.input.nodeDistance": "{count} node back | {count} nodes back",
|
||||
"ndv.input.noNodesFound": "No nodes found",
|
||||
"ndv.input.mapping": "Mapping",
|
||||
"ndv.input.debugging": "Debugging",
|
||||
"ndv.input.parentNodes": "Parent nodes",
|
||||
"ndv.input.previousNode": "Previous node",
|
||||
"ndv.input.tooMuchData.title": "Input data is huge",
|
||||
"ndv.input.noOutputDataInBranch": "No input data in this branch",
|
||||
"ndv.input.noOutputDataInNode": "Node did not output any data. n8n stops executing the workflow when a node has no output data.",
|
||||
|
|
@ -926,7 +925,7 @@
|
|||
"ndv.output.noOutputData.message.settingsOption": "> \"Always Output Data\".",
|
||||
"ndv.output.noOutputData.title": "No output data returned",
|
||||
"ndv.output.noOutputDataInBranch": "No output data in this branch",
|
||||
"ndv.output.of": " of ",
|
||||
"ndv.output.of": "{current} of {total}",
|
||||
"ndv.output.pageSize": "Page Size",
|
||||
"ndv.output.run": "Run",
|
||||
"ndv.output.runNodeHint": "Execute this node to view data",
|
||||
|
|
|
|||
|
|
@ -161,3 +161,7 @@ export const getObjectKeys = <T extends object, K extends keyof T>(o: T): K[] =>
|
|||
export const tryToParseNumber = (value: string): number | string => {
|
||||
return isNaN(+value) ? value : +value;
|
||||
};
|
||||
|
||||
export function isPresent<T>(arg: T): arg is Exclude<T, null | undefined> {
|
||||
return arg !== null && arg !== undefined;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue