mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-28 05:59:42 -08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

refactor(editor): RunData components to composition API (no-changelog) (#11545)

Browse source
This commit is contained in:
Elias Meire 2024-11-07 15:29:02 +01:00 committed by GitHub
parent 28ad66cc12
commit 6e2809b490
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 2044 additions and 2070 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue
View file

@ -1,14 +1,14 @@
<script lang="ts" setup> <script lang="ts" setup generic="Value extends string">
import RadioButton from './RadioButton.vue'; import RadioButton from './RadioButton.vue';
interface RadioOption { interface RadioOption {
label: string; label: string;
value: string; value: Value;
disabled?: boolean; disabled?: boolean;
} }
interface RadioButtonsProps { interface RadioButtonsProps {
modelValue?: string; modelValue?: Value;
options?: RadioOption[]; options?: RadioOption[];
/** @default medium */ /** @default medium */
size?: 'small' | 'medium'; size?: 'small' | 'medium';
@ -22,11 +22,11 @@ const props = withDefaults(defineProps<RadioButtonsProps>(), {
}); });
const emit = defineEmits<{ const emit = defineEmits<{
'update:modelValue': [value: string, e: MouseEvent]; 'update:modelValue': [value: Value, e: MouseEvent];
}>(); }>();
const onClick = ( const onClick = (
option: { label: string; value: string; disabled?: boolean }, option: { label: string; value: Value; disabled?: boolean },
event: MouseEvent, event: MouseEvent,
) => { ) => {
if (props.disabled || option.disabled) { if (props.disabled || option.disabled) {

16
packages/design-system/src/components/N8nTabs/Tabs.vue
View file

@ -1,11 +1,11 @@
<script lang="ts" setup> <script lang="ts" setup generic="Value extends string | number">
import { onMounted, onUnmounted, ref } from 'vue'; import { onMounted, onUnmounted, ref } from 'vue';
import type { RouteLocationRaw } from 'vue-router'; import type { RouteLocationRaw } from 'vue-router';
import N8nIcon from '../N8nIcon'; import N8nIcon from '../N8nIcon';
interface TabOptions { interface TabOptions {
value: string; value: Value;
label?: string; label?: string;
icon?: string; icon?: string;
href?: string; href?: string;
@ -15,7 +15,7 @@ interface TabOptions {
} }
interface TabsProps { interface TabsProps {
modelValue?: string; modelValue?: Value;
options?: TabOptions[]; options?: TabOptions[];
} }
@ -56,12 +56,12 @@ onUnmounted(() => {
}); });
const emit = defineEmits<{ const emit = defineEmits<{
tooltipClick: [tab: string, e: MouseEvent]; tooltipClick: [tab: Value, e: MouseEvent];
'update:modelValue': [tab: string]; 'update:modelValue': [tab: Value];
}>(); }>();
const handleTooltipClick = (tab: string, event: MouseEvent) => emit('tooltipClick', tab, event); const handleTooltipClick = (tab: Value, event: MouseEvent) => emit('tooltipClick', tab, event);
const handleTabClick = (tab: string) => emit('update:modelValue', tab); const handleTabClick = (tab: Value) => emit('update:modelValue', tab);
const scroll = (left: number) => { const scroll = (left: number) => {
const container = tabs.value; const container = tabs.value;
@ -84,7 +84,7 @@ const scrollRight = () => scroll(50);
<div ref="tabs" :class="$style.tabs"> <div ref="tabs" :class="$style.tabs">
<div <div
v-for="option in options" v-for="option in options"
:id="option.value" :id="option.value.toString()"
:key="option.value" :key="option.value"
:class="{ [$style.alignRight]: option.align === 'right' }" :class="{ [$style.alignRight]: option.align === 'right' }"
> >

1
packages/design-system/src/components/N8nTree/Tree.stories.ts
View file

@ -7,6 +7,7 @@ export default {
component: N8nTree, component: N8nTree,
}; };
// @ts-expect-error Storybook incorrect slot types
export const Default: StoryFn = (args, { argTypes }) => ({ export const Default: StoryFn = (args, { argTypes }) => ({
setup: () => ({ args }), setup: () => ({ args }),
props: Object.keys(argTypes), props: Object.keys(argTypes),

30
packages/design-system/src/components/N8nTree/Tree.vue
View file

@ -1,19 +1,16 @@
<script lang="ts" setup> <script lang="ts" setup generic="Value extends unknown = unknown">
import { computed, useCssModule } from 'vue'; import { computed, useCssModule } from 'vue';
interface TreeProps { interface TreeProps {
value?: Record<string, unknown>; value?: Record<string, Value>;
path?: Array<string | number>; path?: Array<string | number>;
depth?: number; depth?: number;
nodeClass?: string; nodeClass?: string;
} }
defineSlots<{ defineSlots<{
[key: string]: (props: { label(props: { label: string; path: Array<string | number> }): never;
label?: string; value(props: { value: Value }): never;
path?: Array<string | number>;
value?: unknown;
}) => never;
}>(); }>();
defineOptions({ name: 'N8nTree' }); defineOptions({ name: 'N8nTree' });
@ -29,11 +26,11 @@ const classes = computed((): Record<string, boolean> => {
return { [props.nodeClass]: !!props.nodeClass, [$style.indent]: props.depth > 0 }; return { [props.nodeClass]: !!props.nodeClass, [$style.indent]: props.depth > 0 };
}); });
const isObject = (data: unknown): data is Record<string, unknown> => { const isObject = (data: unknown): data is Record<string, Value> => {
return typeof data === 'object' && data !== null; return typeof data === 'object' && data !== null;
}; };
const isSimple = (data: unknown): boolean => { const isSimple = (data: Value): boolean => {
if (data === null || data === undefined) { if (data === null || data === undefined) {
return true; return true;
} }
@ -70,16 +67,21 @@ const getPath = (key: string): Array<string | number> => {
<div v-else> <div v-else>
<slot v-if="$slots.label" name="label" :label="label" :path="getPath(label)" /> <slot v-if="$slots.label" name="label" :label="label" :path="getPath(label)" />
<span v-else>{{ label }}</span> <span v-else>{{ label }}</span>
<n8n-tree <N8nTree
v-if="isObject(value[label])"
:path="getPath(label)" :path="getPath(label)"
:depth="depth + 1" :depth="depth + 1"
:value="value[label] as Record<string, unknown>" :value="value[label]"
:node-class="nodeClass" :node-class="nodeClass"
> >
<template v-for="(_, name) in $slots" #[name]="data"> <template v-if="$slots.label" #label="data">
<slot :name="name" v-bind="data"></slot> <slot name="label" v-bind="data" />
</template> </template>
</n8n-tree>
<template v-if="$slots.value" #value="data">
<slot name="value" v-bind="data" />
</template>
</N8nTree>
</div> </div>
</div> </div>
</div> </div>

4
packages/editor-ui/src/Interface.ts
View file

@ -1129,8 +1129,8 @@ export interface IInviteResponse {
error?: string; error?: string;
} }
export interface ITab { export interface ITab<Value extends string | number = string | number> {
value: string | number; value: Value;
label?: string; label?: string;
href?: string; href?: string;
icon?: string; icon?: string;

676
packages/editor-ui/src/components/InputPanel.vue
View file

@ -1,5 +1,5 @@
<script lang="ts"> <script setup lang="ts">
import type { INodeUi } from '@/Interface'; import { useI18n } from '@/composables/useI18n';
import { import {
CRON_NODE_TYPE, CRON_NODE_TYPE,
INTERVAL_NODE_TYPE, INTERVAL_NODE_TYPE,
@ -10,331 +10,326 @@ import { useNDVStore } from '@/stores/ndv.store';
import { useNodeTypesStore } from '@/stores/nodeTypes.store'; import { useNodeTypesStore } from '@/stores/nodeTypes.store';
import { useUIStore } from '@/stores/ui.store'; import { useUIStore } from '@/stores/ui.store';
import { useWorkflowsStore } from '@/stores/workflows.store'; import { useWorkflowsStore } from '@/stores/workflows.store';
import type { import { waitingNodeTooltip } from '@/utils/executionUtils';
IConnectedNode, import { uniqBy } from 'lodash-es';
INodeInputConfiguration, import type { INodeInputConfiguration, INodeOutputConfiguration, Workflow } from 'n8n-workflow';
INodeOutputConfiguration,
INodeTypeDescription,
Workflow,
} from 'n8n-workflow';
import { NodeConnectionType, NodeHelpers } from 'n8n-workflow'; import { NodeConnectionType, NodeHelpers } from 'n8n-workflow';
import { mapStores } from 'pinia'; import { computed, ref, watch } from 'vue';
import { defineComponent, type PropType } from 'vue';
import InputNodeSelect from './InputNodeSelect.vue'; import InputNodeSelect from './InputNodeSelect.vue';
import NodeExecuteButton from './NodeExecuteButton.vue'; import NodeExecuteButton from './NodeExecuteButton.vue';
import RunData from './RunData.vue'; import RunData from './RunData.vue';
import WireMeUp from './WireMeUp.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'; type MappingMode = 'debugging' | 'mapping';
export default defineComponent({ type Props = {
name: 'InputPanel', runIndex: number;
components: { RunData, NodeExecuteButton, WireMeUp, InputNodeSelect }, workflow: Workflow;
props: { pushRef: string;
currentNodeName: { currentNodeName?: string;
type: String, canLinkRuns?: boolean;
}, linkedRuns?: boolean;
runIndex: { readOnly?: boolean;
type: Number, isProductionExecutionPreview?: boolean;
required: true, isPaneActive?: boolean;
}, };
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;
}
return !!this.focusedMappableInput && !this.isUserOnboarded; const props = withDefaults(defineProps<Props>(), {
}, currentNodeName: '',
isActiveNodeConfig(): boolean { canLinkRuns: false,
let inputs = this.activeNodeType?.inputs ?? []; readOnly: false,
let outputs = this.activeNodeType?.outputs ?? []; isProductionExecutionPreview: false,
if (this.activeNode !== null && this.workflow !== null) { isPaneActive: false,
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 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> </script>
<template> <template>
@ -358,18 +353,19 @@ export default defineComponent({
pane-type="input" pane-type="input"
data-test-id="ndv-input-panel" data-test-id="ndv-input-panel"
@activate-pane="activatePane" @activate-pane="activatePane"
@item-hover="$emit('itemHover', $event)" @item-hover="onItemHover"
@link-run="onLinkRun" @link-run="onLinkRun"
@unlink-run="onUnlinkRun" @unlink-run="onUnlinkRun"
@run-change="onRunIndexChange" @run-change="onRunIndexChange"
@table-mounted="$emit('tableMounted', $event)" @table-mounted="onTableMounted"
@search="$emit('search', $event)" @search="onSearch"
> >
<template #header> <template #header>
<div :class="$style.titleSection"> <div :class="$style.titleSection">
<span :class="$style.title">{{ $locale.baseText('ndv.input') }}</span> <span :class="$style.title">{{ $locale.baseText('ndv.input') }}</span>
<n8n-radio-buttons <N8nRadioButtons
v-if="isActiveNodeConfig && !readOnly" v-if="isActiveNodeConfig && !readOnly"
data-test-id="input-panel-mode"
:options="inputModes" :options="inputModes"
:model-value="inputMode" :model-value="inputMode"
@update:model-value="onInputModeChange" @update:model-value="onInputModeChange"
@ -405,10 +401,10 @@ export default defineComponent({
v-if="(isActiveNodeConfig && rootNode) || parentNodes.length" v-if="(isActiveNodeConfig && rootNode) || parentNodes.length"
:class="$style.noOutputData" :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') $locale.baseText('ndv.input.noOutputData.title')
}}</n8n-text> }}</N8nText>
<n8n-tooltip v-if="!readOnly" :visible="showDraggableHint && showDraggableHintWithDelay"> <N8nTooltip v-if="!readOnly" :visible="showDraggableHint && showDraggableHintWithDelay">
<template #content> <template #content>
<div <div
v-n8n-html=" v-n8n-html="
@ -422,25 +418,25 @@ export default defineComponent({
type="secondary" type="secondary"
hide-icon hide-icon
:transparent="true" :transparent="true"
:node-name="isActiveNodeConfig ? rootNode : (currentNodeName ?? '')" :node-name="(isActiveNodeConfig ? rootNode : currentNodeName) ?? ''"
:label="$locale.baseText('ndv.input.noOutputData.executePrevious')" :label="$locale.baseText('ndv.input.noOutputData.executePrevious')"
telemetry-source="inputs" telemetry-source="inputs"
data-test-id="execute-previous-node" data-test-id="execute-previous-node"
@execute="onNodeExecute" @execute="onNodeExecute"
/> />
</n8n-tooltip> </N8nTooltip>
<n8n-text v-if="!readOnly" tag="div" size="small"> <N8nText v-if="!readOnly" tag="div" size="small">
{{ $locale.baseText('ndv.input.noOutputData.hint') }} {{ $locale.baseText('ndv.input.noOutputData.hint') }}
</n8n-text> </N8nText>
</div> </div>
<div v-else :class="$style.notConnected"> <div v-else :class="$style.notConnected">
<div> <div>
<WireMeUp /> <WireMeUp />
</div> </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') $locale.baseText('ndv.input.notConnected.title')
}}</n8n-text> }}</N8nText>
<n8n-text tag="div"> <N8nText tag="div">
{{ $locale.baseText('ndv.input.notConnected.message') }} {{ $locale.baseText('ndv.input.notConnected.message') }}
<a <a
href="https://docs.n8n.io/workflows/connections/" href="https://docs.n8n.io/workflows/connections/"
@ -449,29 +445,29 @@ export default defineComponent({
> >
{{ $locale.baseText('ndv.input.notConnected.learnMore') }} {{ $locale.baseText('ndv.input.notConnected.learnMore') }}
</a> </a>
</n8n-text> </N8nText>
</div> </div>
</template> </template>
<template #node-waiting> <template #node-waiting>
<n8n-text :bold="true" color="text-dark" size="large">Waiting for input</n8n-text> <N8nText :bold="true" color="text-dark" size="large">Waiting for input</N8nText>
<n8n-text v-n8n-html="waitingMessage"></n8n-text> <N8nText v-n8n-html="waitingMessage"></N8nText>
</template> </template>
<template #no-output-data> <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') $locale.baseText('ndv.input.noOutputData')
}}</n8n-text> }}</N8nText>
</template> </template>
<template #recovered-artificial-output-data> <template #recovered-artificial-output-data>
<div :class="$style.recoveredOutputData"> <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') $locale.baseText('executionDetails.executionFailed.recoveredNodeTitle')
}}</n8n-text> }}</N8nText>
<n8n-text> <N8nText>
{{ $locale.baseText('executionDetails.executionFailed.recoveredNodeMessage') }} {{ $locale.baseText('executionDetails.executionFailed.recoveredNodeMessage') }}
</n8n-text> </N8nText>
</div> </div>
</template> </template>
</RunData> </RunData>

8
packages/editor-ui/src/components/NodeDetailsView.test.ts
View file

@ -16,6 +16,14 @@ import { setupServer } from '@/__tests__/server';
import { defaultNodeDescriptions, mockNodes } from '@/__tests__/mocks'; import { defaultNodeDescriptions, mockNodes } from '@/__tests__/mocks';
import { cleanupAppModals, createAppModals } from '@/__tests__/utils'; import { cleanupAppModals, createAppModals } from '@/__tests__/utils';
vi.mock('vue-router', () => {
return {
useRouter: () => ({}),
useRoute: () => ({ meta: {} }),
RouterLink: vi.fn(),
};
});
async function createPiniaWithActiveNode() { async function createPiniaWithActiveNode() {
const node = mockNodes[0]; const node = mockNodes[0];
const workflow = mock<IWorkflowDb>({ const workflow = mock<IWorkflowDb>({

2
packages/editor-ui/src/components/NodeDetailsView.vue
View file

@ -387,7 +387,7 @@ const onWorkflowActivate = () => {
}, 1000); }, 1000);
}; };
const onOutputItemHover = (e: { itemIndex: number; outputIndex: number }) => { const onOutputItemHover = (e: { itemIndex: number; outputIndex: number } | null) => {
if (e === null || !activeNode.value || !isPairedItemHoveringEnabled.value) { if (e === null || !activeNode.value || !isPairedItemHoveringEnabled.value) {
ndvStore.setHoveringItem(null); ndvStore.setHoveringItem(null);
return; return;

83
packages/editor-ui/src/components/OutputPanel.vue
View file

@ -15,10 +15,11 @@ import { usePinnedData } from '@/composables/usePinnedData';
import { useTelemetry } from '@/composables/useTelemetry'; import { useTelemetry } from '@/composables/useTelemetry';
import { useI18n } from '@/composables/useI18n'; import { useI18n } from '@/composables/useI18n';
import { waitingNodeTooltip } from '@/utils/executionUtils'; import { waitingNodeTooltip } from '@/utils/executionUtils';
import { N8nRadioButtons, N8nText } from 'n8n-design-system';
// Types // Types
type RunDataRef = InstanceType<typeof RunData> | null; type RunDataRef = InstanceType<typeof RunData>;
const OUTPUT_TYPE = { const OUTPUT_TYPE = {
REGULAR: 'regular', REGULAR: 'regular',
@ -55,7 +56,7 @@ const emit = defineEmits<{
runChange: [number]; runChange: [number];
activatePane: []; activatePane: [];
tableMounted: [{ avgRowHeight: number }]; tableMounted: [{ avgRowHeight: number }];
itemHover: [{ itemIndex: number; outputIndex: number }]; itemHover: [item: { itemIndex: number; outputIndex: number } | null];
search: [string]; search: [string];
openSettings: []; openSettings: [];
}>(); }>();
@ -87,7 +88,7 @@ const outputTypes = ref([
{ label: i18n.baseText('ndv.output.outType.regular'), value: OUTPUT_TYPE.REGULAR }, { label: i18n.baseText('ndv.output.outType.regular'), value: OUTPUT_TYPE.REGULAR },
{ label: i18n.baseText('ndv.output.outType.logs'), value: OUTPUT_TYPE.LOGS }, { label: i18n.baseText('ndv.output.outType.logs'), value: OUTPUT_TYPE.LOGS },
]); ]);
const runDataRef = ref<RunDataRef>(null); const runDataRef = ref<RunDataRef>();
// Computed // Computed
@ -127,9 +128,7 @@ const isNodeRunning = computed(() => {
return workflowRunning.value && !!node.value && workflowsStore.isNodeExecuting(node.value.name); return workflowRunning.value && !!node.value && workflowsStore.isNodeExecuting(node.value.name);
}); });
const workflowRunning = computed(() => { const workflowRunning = computed(() => uiStore.isActionActive.workflowRunning);
return uiStore.isActionActive['workflowRunning'];
});
const workflowExecution = computed(() => { const workflowExecution = computed(() => {
return workflowsStore.getWorkflowExecution; return workflowsStore.getWorkflowExecution;
@ -253,8 +252,8 @@ const onRunIndexChange = (run: number) => {
emit('runChange', run); emit('runChange', run);
}; };
const onUpdateOutputMode = (outputMode: OutputType) => { const onUpdateOutputMode = (newOutputMode: OutputType) => {
if (outputMode === OUTPUT_TYPE.LOGS) { if (newOutputMode === OUTPUT_TYPE.LOGS) {
ndvEventBus.emit('setPositionByName', 'minLeft'); ndvEventBus.emit('setPositionByName', 'minLeft');
} else { } else {
ndvEventBus.emit('setPositionByName', 'initial'); ndvEventBus.emit('setPositionByName', 'initial');
@ -288,10 +287,10 @@ const activatePane = () => {
:run-index="runIndex" :run-index="runIndex"
:linked-runs="linkedRuns" :linked-runs="linkedRuns"
:can-link-runs="canLinkRuns" :can-link-runs="canLinkRuns"
:too-much-data-title="$locale.baseText('ndv.output.tooMuchData.title')" :too-much-data-title="i18n.baseText('ndv.output.tooMuchData.title')"
:no-data-in-branch-message="$locale.baseText('ndv.output.noOutputDataInBranch')" :no-data-in-branch-message="i18n.baseText('ndv.output.noOutputDataInBranch')"
:is-executing="isNodeRunning" :is-executing="isNodeRunning"
:executing-message="$locale.baseText('ndv.output.executing')" :executing-message="i18n.baseText('ndv.output.executing')"
:push-ref="pushRef" :push-ref="pushRef"
:block-u-i="blockUI" :block-u-i="blockUI"
:is-production-execution-preview="isProductionExecutionPreview" :is-production-execution-preview="isProductionExecutionPreview"
@ -310,15 +309,15 @@ const activatePane = () => {
<template #header> <template #header>
<div :class="$style.titleSection"> <div :class="$style.titleSection">
<template v-if="hasAiMetadata"> <template v-if="hasAiMetadata">
<n8n-radio-buttons <N8nRadioButtons
data-test-id="ai-output-mode-select"
v-model="outputMode" v-model="outputMode"
data-test-id="ai-output-mode-select"
:options="outputTypes" :options="outputTypes"
@update:model-value="onUpdateOutputMode" @update:model-value="onUpdateOutputMode"
/> />
</template> </template>
<span v-else :class="$style.title"> <span v-else :class="$style.title">
{{ $locale.baseText(outputPanelEditMode.enabled ? 'ndv.output.edit' : 'ndv.output') }} {{ i18n.baseText(outputPanelEditMode.enabled ? 'ndv.output.edit' : 'ndv.output') }}
</span> </span>
<RunInfo <RunInfo
v-if="hasNodeRun && !pinnedData.hasData.value && runsCount === 1" v-if="hasNodeRun && !pinnedData.hasData.value && runsCount === 1"
@ -331,42 +330,40 @@ const activatePane = () => {
</template> </template>
<template #node-not-run> <template #node-not-run>
<n8n-text v-if="workflowRunning && !isTriggerNode" data-test-id="ndv-output-waiting">{{ <N8nText v-if="workflowRunning && !isTriggerNode" data-test-id="ndv-output-waiting">{{
$locale.baseText('ndv.output.waitingToRun') i18n.baseText('ndv.output.waitingToRun')
}}</n8n-text> }}</N8nText>
<n8n-text v-if="!workflowRunning" data-test-id="ndv-output-run-node-hint"> <N8nText v-if="!workflowRunning" data-test-id="ndv-output-run-node-hint">
<template v-if="isSubNodeType"> <template v-if="isSubNodeType">
{{ $locale.baseText('ndv.output.runNodeHintSubNode') }} {{ i18n.baseText('ndv.output.runNodeHintSubNode') }}
</template> </template>
<template v-else> <template v-else>
{{ $locale.baseText('ndv.output.runNodeHint') }} {{ i18n.baseText('ndv.output.runNodeHint') }}
<span v-if="canPinData" @click="insertTestData"> <span v-if="canPinData" @click="insertTestData">
<br /> <br />
{{ $locale.baseText('generic.or') }} {{ i18n.baseText('generic.or') }}
<n8n-text tag="a" size="medium" color="primary"> <N8nText tag="a" size="medium" color="primary">
{{ $locale.baseText('ndv.output.insertTestData') }} {{ i18n.baseText('ndv.output.insertTestData') }}
</n8n-text> </N8nText>
</span> </span>
</template> </template>
</n8n-text> </N8nText>
</template> </template>
<template #node-waiting> <template #node-waiting>
<n8n-text :bold="true" color="text-dark" size="large">Waiting for input</n8n-text> <N8nText :bold="true" color="text-dark" size="large">Waiting for input</N8nText>
<n8n-text v-n8n-html="waitingNodeTooltip()"></n8n-text> <N8nText v-n8n-html="waitingNodeTooltip()"></N8nText>
</template> </template>
<template #no-output-data> <template #no-output-data>
<n8n-text :bold="true" color="text-dark" size="large">{{ <N8nText :bold="true" color="text-dark" size="large">{{
$locale.baseText('ndv.output.noOutputData.title') i18n.baseText('ndv.output.noOutputData.title')
}}</n8n-text> }}</N8nText>
<n8n-text> <N8nText>
{{ $locale.baseText('ndv.output.noOutputData.message') }} {{ i18n.baseText('ndv.output.noOutputData.message') }}
<a @click="openSettings">{{ <a @click="openSettings">{{ i18n.baseText('ndv.output.noOutputData.message.settings') }}</a>
$locale.baseText('ndv.output.noOutputData.message.settings') {{ i18n.baseText('ndv.output.noOutputData.message.settingsOption') }}
}}</a> </N8nText>
{{ $locale.baseText('ndv.output.noOutputData.message.settingsOption') }}
</n8n-text>
</template> </template>
<template v-if="outputMode === 'logs' && node" #content> <template v-if="outputMode === 'logs' && node" #content>
@ -375,12 +372,12 @@ const activatePane = () => {
<template #recovered-artificial-output-data> <template #recovered-artificial-output-data>
<div :class="$style.recoveredOutputData"> <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') i18n.baseText('executionDetails.executionFailed.recoveredNodeTitle')
}}</n8n-text> }}</N8nText>
<n8n-text> <N8nText>
{{ $locale.baseText('executionDetails.executionFailed.recoveredNodeMessage') }} {{ i18n.baseText('executionDetails.executionFailed.recoveredNodeMessage') }}
</n8n-text> </N8nText>
</div> </div>
</template> </template>

72
packages/editor-ui/src/components/RunData.test.ts
View file

@ -1,16 +1,24 @@
import { waitFor } from '@testing-library/vue'; import { createTestWorkflowObject, defaultNodeDescriptions } from '@/__tests__/mocks';
import userEvent from '@testing-library/user-event';
import { createTestingPinia } from '@pinia/testing';
import { merge } from 'lodash-es';
import RunData from '@/components/RunData.vue';
import { SET_NODE_TYPE, STORES, VIEWS } from '@/constants';
import { SETTINGS_STORE_DEFAULT_STATE } from '@/__tests__/utils';
import { createComponentRenderer } from '@/__tests__/render'; import { createComponentRenderer } from '@/__tests__/render';
import { SETTINGS_STORE_DEFAULT_STATE } from '@/__tests__/utils';
import RunData from '@/components/RunData.vue';
import { SET_NODE_TYPE, STORES } from '@/constants';
import type { INodeUi, IRunDataDisplayMode, NodePanelType } from '@/Interface'; import type { INodeUi, IRunDataDisplayMode, NodePanelType } from '@/Interface';
import { useWorkflowsStore } from '@/stores/workflows.store'; import { useWorkflowsStore } from '@/stores/workflows.store';
import { setActivePinia } from 'pinia'; import { createTestingPinia } from '@pinia/testing';
import { defaultNodeTypes } from '@/__tests__/mocks'; import userEvent from '@testing-library/user-event';
import { waitFor } from '@testing-library/vue';
import type { INodeExecutionData } from 'n8n-workflow'; import type { INodeExecutionData } from 'n8n-workflow';
import { setActivePinia } from 'pinia';
import { useNodeTypesStore } from '../stores/nodeTypes.store';
vi.mock('vue-router', () => {
return {
useRouter: () => ({}),
useRoute: () => ({ meta: {} }),
RouterLink: vi.fn(),
};
});
const nodes = [ const nodes = [
{ {
@ -112,9 +120,12 @@ describe('RunData', () => {
], ],
'binary', 'binary',
); );
expect(getByTestId('ndv-view-binary-data')).toBeInTheDocument();
expect(getByTestId('ndv-download-binary-data')).toBeInTheDocument(); await waitFor(() => {
expect(getByTestId('ndv-binary-data_0')).toBeInTheDocument(); expect(getByTestId('ndv-view-binary-data')).toBeInTheDocument();
expect(getByTestId('ndv-download-binary-data')).toBeInTheDocument();
expect(getByTestId('ndv-binary-data_0')).toBeInTheDocument();
});
}); });
it('should not render a view button for unknown content-type', async () => { it('should not render a view button for unknown content-type', async () => {
@ -132,9 +143,12 @@ describe('RunData', () => {
], ],
'binary', 'binary',
); );
expect(queryByTestId('ndv-view-binary-data')).not.toBeInTheDocument();
expect(getByTestId('ndv-download-binary-data')).toBeInTheDocument(); await waitFor(() => {
expect(getByTestId('ndv-binary-data_0')).toBeInTheDocument(); expect(queryByTestId('ndv-view-binary-data')).not.toBeInTheDocument();
expect(getByTestId('ndv-download-binary-data')).toBeInTheDocument();
expect(getByTestId('ndv-binary-data_0')).toBeInTheDocument();
});
}); });
it('should not render pin data button when there is no output data', async () => { it('should not render pin data button when there is no output data', async () => {
@ -201,10 +215,9 @@ describe('RunData', () => {
paneType: NodePanelType = 'output', paneType: NodePanelType = 'output',
) => { ) => {
const pinia = createTestingPinia({ const pinia = createTestingPinia({
stubActions: false,
initialState: { initialState: {
[STORES.SETTINGS]: { [STORES.SETTINGS]: SETTINGS_STORE_DEFAULT_STATE,
settings: merge({}, SETTINGS_STORE_DEFAULT_STATE.settings),
},
[STORES.NDV]: { [STORES.NDV]: {
output: { output: {
displayMode, displayMode,
@ -248,16 +261,17 @@ describe('RunData', () => {
}, },
}, },
}, },
[STORES.NODE_TYPES]: {
nodeTypes: defaultNodeTypes,
},
}, },
}); });
setActivePinia(pinia); setActivePinia(pinia);
const workflowsStore = useWorkflowsStore(); const workflowsStore = useWorkflowsStore();
const nodeTypesStore = useNodeTypesStore();
nodeTypesStore.setNodeTypes(defaultNodeDescriptions);
vi.mocked(workflowsStore).getNodeByName.mockReturnValue(nodes[0]); vi.mocked(workflowsStore).getNodeByName.mockReturnValue(nodes[0]);
if (pinnedData) { if (pinnedData) {
vi.mocked(workflowsStore).pinDataByNodeName.mockReturnValue(pinnedData); vi.mocked(workflowsStore).pinDataByNodeName.mockReturnValue(pinnedData);
} }
@ -267,31 +281,21 @@ describe('RunData', () => {
node: { node: {
name: 'Test Node', name: 'Test Node',
}, },
workflow: { workflow: createTestWorkflowObject({
nodes, nodes,
}, }),
},
data() {
return {
canPinData: true,
showData: true,
};
}, },
global: { global: {
stubs: { stubs: {
RunDataPinButton: { template: '<button data-test-id="ndv-pin-data"></button>' }, RunDataPinButton: { template: '<button data-test-id="ndv-pin-data"></button>' },
}, },
mocks: {
$route: {
name: VIEWS.WORKFLOW,
},
},
}, },
})({ })({
props: { props: {
node: { node: {
id: '1', id: '1',
name: 'Test Node', name: 'Test Node',
type: SET_NODE_TYPE,
position: [0, 0], position: [0, 0],
}, },
nodes: [{ name: 'Test Node', indicies: [], depth: 1 }], nodes: [{ name: 'Test Node', indicies: [], depth: 1 }],

2434
packages/editor-ui/src/components/RunData.vue
View file

File diff suppressed because it is too large Load diff

15
packages/editor-ui/src/components/RunDataPinButton.vue
View file

@ -2,6 +2,7 @@
import { computed } from 'vue'; import { computed } from 'vue';
import { useI18n } from '@/composables/useI18n'; import { useI18n } from '@/composables/useI18n';
import type { usePinnedData } from '@/composables/usePinnedData'; import type { usePinnedData } from '@/composables/usePinnedData';
import { N8nIconButton, N8nLink, N8nText, N8nTooltip } from 'n8n-design-system';
const locale = useI18n(); const locale = useI18n();
@ -27,7 +28,7 @@ const visible = computed(() =>
</script> </script>
<template> <template>
<n8n-tooltip placement="bottom-end" :visible="visible"> <N8nTooltip placement="bottom-end" :visible="visible">
<template #content> <template #content>
<div v-if="props.tooltipContentsVisibility.binaryDataTooltipContent"> <div v-if="props.tooltipContentsVisibility.binaryDataTooltipContent">
{{ locale.baseText('ndv.pinData.pin.binary') }} {{ locale.baseText('ndv.pinData.pin.binary') }}
@ -37,16 +38,16 @@ const visible = computed(() =>
</div> </div>
<div v-else> <div v-else>
<strong>{{ locale.baseText('ndv.pinData.pin.title') }}</strong> <strong>{{ locale.baseText('ndv.pinData.pin.title') }}</strong>
<n8n-text size="small" tag="p"> <N8nText size="small" tag="p">
{{ locale.baseText('ndv.pinData.pin.description') }} {{ locale.baseText('ndv.pinData.pin.description') }}
<n8n-link :to="props.dataPinningDocsUrl" size="small"> <N8nLink :to="props.dataPinningDocsUrl" size="small">
{{ locale.baseText('ndv.pinData.pin.link') }} {{ locale.baseText('ndv.pinData.pin.link') }}
</n8n-link> </N8nLink>
</n8n-text> </N8nText>
</div> </div>
</template> </template>
<n8n-icon-button <N8nIconButton
:class="$style.pinDataButton" :class="$style.pinDataButton"
type="tertiary" type="tertiary"
:active="props.pinnedData.hasData.value" :active="props.pinnedData.hasData.value"
@ -55,7 +56,7 @@ const visible = computed(() =>
data-test-id="ndv-pin-data" data-test-id="ndv-pin-data"
@click="emit('togglePinData')" @click="emit('togglePinData')"
/> />
</n8n-tooltip> </N8nTooltip>
</template> </template>
<style lang="scss" module> <style lang="scss" module>

763
packages/editor-ui/src/components/RunDataTable.vue
View file

@ -1,389 +1,387 @@
<script lang="ts"> <script setup lang="ts">
import { defineComponent } from 'vue';
import type { PropType } from 'vue';
import { mapStores } from 'pinia';
import type { INodeUi, ITableData, NDVState } from '@/Interface';
import { shorten } from '@/utils/typesUtils';
import { getPairedItemId } from '@/utils/pairedItemUtils';
import type { GenericValue, IDataObject, INodeExecutionData } from 'n8n-workflow';
import Draggable from './Draggable.vue';
import { useWorkflowsStore } from '@/stores/workflows.store';
import { useNDVStore } from '@/stores/ndv.store';
import MappingPill from './MappingPill.vue';
import { getMappedExpression } from '@/utils/mappingUtils';
import { useExternalHooks } from '@/composables/useExternalHooks'; import { useExternalHooks } from '@/composables/useExternalHooks';
import type { INodeUi, IRunDataDisplayMode, ITableData } from '@/Interface';
import { useNDVStore } from '@/stores/ndv.store';
import { useWorkflowsStore } from '@/stores/workflows.store';
import { getMappedExpression } from '@/utils/mappingUtils';
import { getPairedItemId } from '@/utils/pairedItemUtils';
import { shorten } from '@/utils/typesUtils';
import type { GenericValue, IDataObject, INodeExecutionData } from 'n8n-workflow';
import { computed, onMounted, ref, watch } from 'vue';
import Draggable from './Draggable.vue';
import MappingPill from './MappingPill.vue';
import TextWithHighlights from './TextWithHighlights.vue'; import TextWithHighlights from './TextWithHighlights.vue';
import { useI18n } from '@/composables/useI18n';
import { useTelemetry } from '@/composables/useTelemetry';
import { N8nInfoTip, N8nTooltip, N8nTree } from 'n8n-design-system';
import { storeToRefs } from 'pinia';
const MAX_COLUMNS_LIMIT = 40; const MAX_COLUMNS_LIMIT = 40;
type DraggableRef = InstanceType<typeof Draggable>; type DraggableRef = InstanceType<typeof Draggable>;
export default defineComponent({ type Props = {
name: 'RunDataTable', node: INodeUi;
components: { Draggable, MappingPill, TextWithHighlights }, inputData: INodeExecutionData[];
props: { distanceFromActive: number;
node: { pageOffset: number;
type: Object as PropType<INodeUi>, runIndex?: number;
required: true, outputIndex?: number;
}, totalRuns?: number;
inputData: { mappingEnabled?: boolean;
type: Array as PropType<INodeExecutionData[]>, hasDefaultHoverState?: boolean;
required: true, search?: string;
}, };
mappingEnabled: {
type: Boolean, const props = withDefaults(defineProps<Props>(), {
}, runIndex: 0,
distanceFromActive: { outputIndex: 0,
type: Number, totalRuns: 0,
required: true, mappingEnabled: false,
}, hasDefaultHoverState: false,
runIndex: { search: '',
type: Number, });
}, const emit = defineEmits<{
outputIndex: { activeRowChanged: [row: number | null];
type: Number, displayModeChange: [mode: IRunDataDisplayMode];
}, mounted: [data: { avgRowHeight: number }];
totalRuns: { }>();
type: Number,
}, const externalHooks = useExternalHooks();
pageOffset: { const activeColumn = ref(-1);
type: Number, const forceShowGrip = ref(false);
required: true, const draggedColumn = ref(false);
}, const draggingPath = ref<string | null>(null);
hasDefaultHoverState: { const hoveringPath = ref<string | null>(null);
type: Boolean, const activeRow = ref<number | null>(null);
}, const columnLimit = ref(MAX_COLUMNS_LIMIT);
search: { const columnLimitExceeded = ref(false);
type: String, const draggableRef = ref<DraggableRef>();
},
}, const ndvStore = useNDVStore();
setup() { const workflowsStore = useWorkflowsStore();
const externalHooks = useExternalHooks();
return { const i18n = useI18n();
externalHooks, const telemetry = useTelemetry();
};
}, const {
data() { hoveringItem,
return { focusedMappableInput,
activeColumn: -1, highlightDraggables: highlight,
forceShowGrip: false, } = storeToRefs(ndvStore);
draggedColumn: false, const pairedItemMappings = computed(() => workflowsStore.workflowExecutionPairedItemMappings);
draggingPath: null as null | string, const tableData = computed(() => convertToTable(props.inputData));
hoveringPath: null as null | string,
mappingHintVisible: false, onMounted(() => {
activeRow: null as number | null, if (tableData.value?.columns && draggableRef.value) {
columnLimit: MAX_COLUMNS_LIMIT, const tbody = draggableRef.value.$refs.wrapper as HTMLElement;
columnLimitExceeded: false, if (tbody) {
}; emit('mounted', {
}, avgRowHeight: tbody.offsetHeight / tableData.value.data.length,
mounted() { });
if (this.tableData && this.tableData.columns && this.$refs.draggable) {
const tbody = (this.$refs.draggable as DraggableRef).$refs.wrapper as HTMLElement;
if (tbody) {
this.$emit('mounted', {
avgRowHeight: tbody.offsetHeight / this.tableData.data.length,
});
}
} }
}, }
computed: { });
...mapStores(useNDVStore, useWorkflowsStore),
hoveringItem(): NDVState['hoveringItem'] {
return this.ndvStore.hoveringItem;
},
pairedItemMappings(): { [itemId: string]: Set<string> } {
return this.workflowsStore.workflowExecutionPairedItemMappings;
},
tableData(): ITableData {
return this.convertToTable(this.inputData);
},
focusedMappableInput(): string {
return this.ndvStore.focusedMappableInput;
},
highlight(): boolean {
return this.ndvStore.highlightDraggables;
},
},
methods: {
shorten,
isHoveringRow(row: number): boolean {
if (row === this.activeRow) {
return true;
}
const itemIndex = this.pageOffset + row; function isHoveringRow(row: number): boolean {
if ( if (row === activeRow.value) {
itemIndex === 0 && return true;
!this.hoveringItem && }
this.hasDefaultHoverState &&
this.distanceFromActive === 1
) {
return true;
}
const itemNodeId = getPairedItemId(
this.node?.name ?? '',
this.runIndex || 0,
this.outputIndex || 0,
itemIndex,
);
if (!this.hoveringItem || !this.pairedItemMappings[itemNodeId]) {
return false;
}
const hoveringItemId = getPairedItemId( const itemIndex = props.pageOffset + row;
this.hoveringItem.nodeName, if (
this.hoveringItem.runIndex, itemIndex === 0 &&
this.hoveringItem.outputIndex, !hoveringItem.value &&
this.hoveringItem.itemIndex, props.hasDefaultHoverState &&
); props.distanceFromActive === 1
return this.pairedItemMappings[itemNodeId].has(hoveringItemId); ) {
}, return true;
onMouseEnterCell(e: MouseEvent) { }
const target = e.target; const itemNodeId = getPairedItemId(
if (target && this.mappingEnabled) { props.node?.name ?? '',
const col = (target as HTMLElement).dataset.col; props.runIndex || 0,
if (col && !isNaN(parseInt(col, 10))) { props.outputIndex || 0,
this.activeColumn = parseInt(col, 10); itemIndex,
} );
if (!hoveringItem.value || !pairedItemMappings.value[itemNodeId]) {
return false;
}
const hoveringItemId = getPairedItemId(
hoveringItem.value.nodeName,
hoveringItem.value.runIndex,
hoveringItem.value.outputIndex,
hoveringItem.value.itemIndex,
);
return pairedItemMappings.value[itemNodeId].has(hoveringItemId);
}
function onMouseEnterCell(e: MouseEvent) {
const target = e.target;
if (target && props.mappingEnabled) {
const col = (target as HTMLElement).dataset.col;
if (col && !isNaN(parseInt(col, 10))) {
activeColumn.value = parseInt(col, 10);
}
}
if (target) {
const row = (target as HTMLElement).dataset.row;
if (row && !isNaN(parseInt(row, 10))) {
activeRow.value = parseInt(row, 10);
emit('activeRowChanged', props.pageOffset + activeRow.value);
}
}
}
function onMouseLeaveCell() {
activeColumn.value = -1;
activeRow.value = null;
emit('activeRowChanged', null);
}
function onMouseEnterKey(path: Array<string | number>, colIndex: number) {
hoveringPath.value = getCellExpression(path, colIndex);
}
function onMouseLeaveKey() {
hoveringPath.value = null;
}
function isHovering(path: Array<string | number>, colIndex: number) {
const expr = getCellExpression(path, colIndex);
return hoveringPath.value === expr;
}
function getExpression(column: string) {
if (!props.node) {
return '';
}
return getMappedExpression({
nodeName: props.node.name,
distanceFromActive: props.distanceFromActive,
path: [column],
});
}
function getPathNameFromTarget(el?: HTMLElement) {
if (!el) {
return '';
}
return el.dataset.name;
}
function getCellPathName(path: Array<string | number>, colIndex: number) {
const lastKey = path[path.length - 1];
if (typeof lastKey === 'string') {
return lastKey;
}
if (path.length > 1) {
const prevKey = path[path.length - 2];
return `${prevKey}[${lastKey}]`;
}
const column = tableData.value.columns[colIndex];
return `${column}[${lastKey}]`;
}
function getCellExpression(path: Array<string | number>, colIndex: number) {
if (!props.node) {
return '';
}
const column = tableData.value.columns[colIndex];
return getMappedExpression({
nodeName: props.node.name,
distanceFromActive: props.distanceFromActive,
path: [column, ...path],
});
}
function isEmpty(value: unknown): boolean {
return (
value === '' ||
(Array.isArray(value) && value.length === 0) ||
(typeof value === 'object' && value !== null && Object.keys(value).length === 0) ||
value === null ||
value === undefined
);
}
function getValueToRender(value: unknown): string {
if (value === '') {
return i18n.baseText('runData.emptyString');
}
if (typeof value === 'string') {
return value;
}
if (Array.isArray(value) && value.length === 0) {
return i18n.baseText('runData.emptyArray');
}
if (typeof value === 'object' && value !== null && Object.keys(value).length === 0) {
return i18n.baseText('runData.emptyObject');
}
if (value === null || value === undefined) {
return `[${value}]`;
}
if (value === true || value === false || typeof value === 'number') {
return value.toString();
}
return JSON.stringify(value);
}
function onDragStart() {
draggedColumn.value = true;
ndvStore.resetMappingTelemetry();
}
function onCellDragStart(el: HTMLElement) {
if (el?.dataset.value) {
draggingPath.value = el.dataset.value;
}
onDragStart();
}
function onCellDragEnd(el: HTMLElement) {
draggingPath.value = null;
onDragEnd(el.dataset.name ?? '', 'tree', el.dataset.depth ?? '0');
}
function isDraggingKey(path: Array<string | number>, colIndex: number) {
if (!draggingPath.value) {
return;
}
return draggingPath.value === getCellExpression(path, colIndex);
}
function onDragEnd(column: string, src: string, depth = '0') {
setTimeout(() => {
const mappingTelemetry = ndvStore.mappingTelemetry;
const telemetryPayload = {
src_node_type: props.node.type,
src_field_name: column,
src_nodes_back: props.distanceFromActive,
src_run_index: props.runIndex,
src_runs_total: props.totalRuns,
src_field_nest_level: parseInt(depth, 10),
src_view: 'table',
src_element: src,
success: false,
...mappingTelemetry,
};
void externalHooks.run('runDataTable.onDragEnd', telemetryPayload);
telemetry.track('User dragged data for mapping', telemetryPayload, {
withPostHog: true,
});
}, 1000); // ensure dest data gets set if drop
}
function isSimple(data: GenericValue): data is string | number | boolean | null | undefined {
return (
typeof data !== 'object' ||
data === null ||
(Array.isArray(data) && data.length === 0) ||
(typeof data === 'object' && Object.keys(data).length === 0)
);
}
function isObject(data: GenericValue): data is Record<string, unknown> {
return !isSimple(data);
}
function hasJsonInColumn(colIndex: number): boolean {
return tableData.value.hasJson[tableData.value.columns[colIndex]];
}
function convertToTable(inputData: INodeExecutionData[]): ITableData {
const resultTableData: GenericValue[][] = [];
const tableColumns: string[] = [];
let leftEntryColumns: string[], entryRows: GenericValue[];
// Go over all entries
let entry: IDataObject;
const hasJson: { [key: string]: boolean } = {};
inputData.forEach((data) => {
if (!data.hasOwnProperty('json')) {
return;
}
entry = data.json;
// Go over all keys of entry
entryRows = [];
const entryColumns = Object.keys(entry || {});
if (entryColumns.length > MAX_COLUMNS_LIMIT) {
columnLimitExceeded.value = true;
leftEntryColumns = entryColumns.slice(0, MAX_COLUMNS_LIMIT);
} else {
leftEntryColumns = entryColumns;
}
// Go over all the already existing column-keys
tableColumns.forEach((key) => {
if (entry.hasOwnProperty(key)) {
// Entry does have key so add its value
entryRows.push(entry[key]);
// Remove key so that we know that it got added
leftEntryColumns.splice(leftEntryColumns.indexOf(key), 1);
hasJson[key] =
hasJson[key] ||
(typeof entry[key] === 'object' && Object.keys(entry[key] ?? {}).length > 0) ||
false;
} else {
// Entry does not have key so add undefined
entryRows.push(undefined);
} }
});
if (target) { // Go over all the columns the entry has but did not exist yet
const row = (target as HTMLElement).dataset.row; leftEntryColumns.forEach((key) => {
if (row && !isNaN(parseInt(row, 10))) { // Add the key for all runs in the future
this.activeRow = parseInt(row, 10); tableColumns.push(key);
this.$emit('activeRowChanged', this.pageOffset + this.activeRow); // Add the value
} entryRows.push(entry[key]);
} hasJson[key] =
}, hasJson[key] ||
onMouseLeaveCell() { (typeof entry[key] === 'object' && Object.keys(entry[key] ?? {}).length > 0) ||
this.activeColumn = -1; false;
this.activeRow = null; });
this.$emit('activeRowChanged', null);
},
onMouseEnterKey(path: string[], colIndex: number) {
this.hoveringPath = this.getCellExpression(path, colIndex);
},
onMouseLeaveKey() {
this.hoveringPath = null;
},
isHovering(path: string[], colIndex: number) {
const expr = this.getCellExpression(path, colIndex);
return this.hoveringPath === expr; // Add the data of the entry
}, resultTableData.push(entryRows);
getExpression(column: string) { });
if (!this.node) {
return '';
}
return getMappedExpression({ // Make sure that all entry-rows have the same length
nodeName: this.node.name, resultTableData.forEach((rows) => {
distanceFromActive: this.distanceFromActive, if (tableColumns.length > rows.length) {
path: [column], // Has fewer entries so add the missing ones
}); rows.push(...new Array(tableColumns.length - rows.length));
}, }
getPathNameFromTarget(el?: HTMLElement) { });
if (!el) {
return '';
}
return el.dataset.name;
},
getCellPathName(path: Array<string | number>, colIndex: number) {
const lastKey = path[path.length - 1];
if (typeof lastKey === 'string') {
return lastKey;
}
if (path.length > 1) {
const prevKey = path[path.length - 2];
return `${prevKey}[${lastKey}]`;
}
const column = this.tableData.columns[colIndex];
return `${column}[${lastKey}]`;
},
getCellExpression(path: Array<string | number>, colIndex: number) {
if (!this.node) {
return '';
}
const column = this.tableData.columns[colIndex];
return getMappedExpression({
nodeName: this.node.name,
distanceFromActive: this.distanceFromActive,
path: [column, ...path],
});
},
isEmpty(value: unknown): boolean {
return (
value === '' ||
(Array.isArray(value) && value.length === 0) ||
(typeof value === 'object' && value !== null && Object.keys(value).length === 0) ||
value === null ||
value === undefined
);
},
getValueToRender(value: unknown): string {
if (value === '') {
return this.$locale.baseText('runData.emptyString');
}
if (typeof value === 'string') {
return value;
}
if (Array.isArray(value) && value.length === 0) {
return this.$locale.baseText('runData.emptyArray');
}
if (typeof value === 'object' && value !== null && Object.keys(value).length === 0) {
return this.$locale.baseText('runData.emptyObject');
}
if (value === null || value === undefined) {
return `[${value}]`;
}
if (value === true || value === false || typeof value === 'number') {
return value.toString();
}
return JSON.stringify(value);
},
onDragStart() {
this.draggedColumn = true;
this.ndvStore.resetMappingTelemetry();
},
onCellDragStart(el: HTMLElement) {
if (el?.dataset.value) {
this.draggingPath = el.dataset.value;
}
this.onDragStart(); return {
hasJson,
columns: tableColumns,
data: resultTableData,
};
}
function switchToJsonView() {
emit('displayModeChange', 'json');
}
watch(focusedMappableInput, (curr) => {
setTimeout(
() => {
forceShowGrip.value = !!focusedMappableInput.value;
}, },
onCellDragEnd(el: HTMLElement) { curr ? 300 : 150,
this.draggingPath = null; );
this.onDragEnd(el.dataset.name || '', 'tree', el.dataset.depth || '0');
},
isDraggingKey(path: Array<string | number>, colIndex: number) {
if (!this.draggingPath) {
return;
}
return this.draggingPath === this.getCellExpression(path, colIndex);
},
onDragEnd(column: string, src: string, depth = '0') {
setTimeout(() => {
const mappingTelemetry = this.ndvStore.mappingTelemetry;
const telemetryPayload = {
src_node_type: this.node.type,
src_field_name: column,
src_nodes_back: this.distanceFromActive,
src_run_index: this.runIndex,
src_runs_total: this.totalRuns,
src_field_nest_level: parseInt(depth, 10),
src_view: 'table',
src_element: src,
success: false,
...mappingTelemetry,
};
void this.externalHooks.run('runDataTable.onDragEnd', telemetryPayload);
this.$telemetry.track('User dragged data for mapping', telemetryPayload, {
withPostHog: true,
});
}, 1000); // ensure dest data gets set if drop
},
isSimple(data: unknown): boolean {
return (
typeof data !== 'object' ||
data === null ||
(Array.isArray(data) && data.length === 0) ||
(typeof data === 'object' && Object.keys(data).length === 0)
);
},
hasJsonInColumn(colIndex: number): boolean {
return this.tableData.hasJson[this.tableData.columns[colIndex]];
},
convertToTable(inputData: INodeExecutionData[]): ITableData {
const tableData: GenericValue[][] = [];
const tableColumns: string[] = [];
let leftEntryColumns: string[], entryRows: GenericValue[];
// Go over all entries
let entry: IDataObject;
const hasJson: { [key: string]: boolean } = {};
inputData.forEach((data) => {
if (!data.hasOwnProperty('json')) {
return;
}
entry = data.json;
// Go over all keys of entry
entryRows = [];
const entryColumns = Object.keys(entry || {});
if (entryColumns.length > MAX_COLUMNS_LIMIT) {
this.columnLimitExceeded = true;
leftEntryColumns = entryColumns.slice(0, MAX_COLUMNS_LIMIT);
} else {
leftEntryColumns = entryColumns;
}
// Go over all the already existing column-keys
tableColumns.forEach((key) => {
if (entry.hasOwnProperty(key)) {
// Entry does have key so add its value
entryRows.push(entry[key]);
// Remove key so that we know that it got added
leftEntryColumns.splice(leftEntryColumns.indexOf(key), 1);
hasJson[key] =
hasJson[key] ||
(typeof entry[key] === 'object' && Object.keys(entry[key] || {}).length > 0) ||
false;
} else {
// Entry does not have key so add undefined
entryRows.push(undefined);
}
});
// Go over all the columns the entry has but did not exist yet
leftEntryColumns.forEach((key) => {
// Add the key for all runs in the future
tableColumns.push(key);
// Add the value
entryRows.push(entry[key]);
hasJson[key] =
hasJson[key] ||
(typeof entry[key] === 'object' && Object.keys(entry[key] || {}).length > 0) ||
false;
});
// Add the data of the entry
tableData.push(entryRows);
});
// Make sure that all entry-rows have the same length
tableData.forEach((entryRows) => {
if (tableColumns.length > entryRows.length) {
// Has fewer entries so add the missing ones
entryRows.push(...new Array(tableColumns.length - entryRows.length));
}
});
return {
hasJson,
columns: tableColumns,
data: tableData,
};
},
switchToJsonView() {
this.$emit('displayModeChange', 'json');
},
},
watch: {
focusedMappableInput(curr: boolean) {
setTimeout(
() => {
this.forceShowGrip = !!this.focusedMappableInput;
},
curr ? 300 : 150,
);
},
},
}); });
</script> </script>
@ -408,7 +406,7 @@ export default defineComponent({
@mouseenter="onMouseEnterCell" @mouseenter="onMouseEnterCell"
@mouseleave="onMouseLeaveCell" @mouseleave="onMouseLeaveCell"
> >
<n8n-info-tip>{{ $locale.baseText('runData.emptyItemHint') }}</n8n-info-tip> <N8nInfoTip>{{ i18n.baseText('runData.emptyItemHint') }}</N8nInfoTip>
</td> </td>
<td :class="$style.tableRightMargin"></td> <td :class="$style.tableRightMargin"></td>
</tr> </tr>
@ -418,11 +416,11 @@ export default defineComponent({
<thead> <thead>
<tr> <tr>
<th v-for="(column, i) in tableData.columns || []" :key="column"> <th v-for="(column, i) in tableData.columns || []" :key="column">
<n8n-tooltip placement="bottom-start" :disabled="!mappingEnabled" :show-after="1000"> <N8nTooltip placement="bottom-start" :disabled="!mappingEnabled" :show-after="1000">
<template #content> <template #content>
<div> <div>
<img src="/static/data-mapping-gif.gif" /> <img src="/static/data-mapping-gif.gif" />
{{ $locale.baseText('dataMapping.dragColumnToFieldHint') }} {{ i18n.baseText('dataMapping.dragColumnToFieldHint') }}
</div> </div>
</template> </template>
<Draggable <Draggable
@ -455,17 +453,17 @@ export default defineComponent({
</div> </div>
</template> </template>
</Draggable> </Draggable>
</n8n-tooltip> </N8nTooltip>
</th> </th>
<th v-if="columnLimitExceeded" :class="$style.header"> <th v-if="columnLimitExceeded" :class="$style.header">
<n8n-tooltip placement="bottom-end"> <N8nTooltip placement="bottom-end">
<template #content> <template #content>
<div> <div>
<i18n-t tag="span" keypath="dataMapping.tableView.tableColumnsExceeded.tooltip"> <i18n-t tag="span" keypath="dataMapping.tableView.tableColumnsExceeded.tooltip">
<template #columnLimit>{{ columnLimit }}</template> <template #columnLimit>{{ columnLimit }}</template>
<template #link> <template #link>
<a @click="switchToJsonView">{{ <a @click="switchToJsonView">{{
$locale.baseText('dataMapping.tableView.tableColumnsExceeded.tooltip.link') i18n.baseText('dataMapping.tableView.tableColumnsExceeded.tooltip.link')
}}</a> }}</a>
</template> </template>
</i18n-t> </i18n-t>
@ -476,15 +474,15 @@ export default defineComponent({
:class="$style['warningTooltip']" :class="$style['warningTooltip']"
icon="exclamation-triangle" icon="exclamation-triangle"
></font-awesome-icon> ></font-awesome-icon>
{{ $locale.baseText('dataMapping.tableView.tableColumnsExceeded') }} {{ i18n.baseText('dataMapping.tableView.tableColumnsExceeded') }}
</span> </span>
</n8n-tooltip> </N8nTooltip>
</th> </th>
<th :class="$style.tableRightMargin"></th> <th :class="$style.tableRightMargin"></th>
</tr> </tr>
</thead> </thead>
<Draggable <Draggable
ref="draggable" ref="draggableRef"
tag="tbody" tag="tbody"
type="mapping" type="mapping"
target-data-key="mappable" target-data-key="mappable"
@ -519,7 +517,7 @@ export default defineComponent({
:search="search" :search="search"
:class="{ [$style.value]: true, [$style.empty]: isEmpty(data) }" :class="{ [$style.value]: true, [$style.empty]: isEmpty(data) }"
/> />
<n8n-tree v-else :node-class="$style.nodeClass" :value="data"> <N8nTree v-else-if="isObject(data)" :node-class="$style.nodeClass" :value="data">
<template #label="{ label, path }"> <template #label="{ label, path }">
<span <span
:class="{ :class="{
@ -534,9 +532,10 @@ export default defineComponent({
:data-depth="path.length" :data-depth="path.length"
@mouseenter="() => onMouseEnterKey(path, index2)" @mouseenter="() => onMouseEnterKey(path, index2)"
@mouseleave="onMouseLeaveKey" @mouseleave="onMouseLeaveKey"
>{{ label || $locale.baseText('runData.unnamedField') }}</span >{{ label || i18n.baseText('runData.unnamedField') }}</span
> >
</template> </template>
<template #value="{ value }"> <template #value="{ value }">
<TextWithHighlights <TextWithHighlights
:content="getValueToRender(value)" :content="getValueToRender(value)"
@ -544,7 +543,7 @@ export default defineComponent({
:class="{ [$style.nestedValue]: true, [$style.empty]: isEmpty(value) }" :class="{ [$style.nestedValue]: true, [$style.empty]: isEmpty(value) }"
/> />
</template> </template>
</n8n-tree> </N8nTree>
</td> </td>
<td v-if="columnLimitExceeded"></td> <td v-if="columnLimitExceeded"></td>
<td :class="$style.tableRightMargin"></td> <td :class="$style.tableRightMargin"></td>