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

fix(editor): Fix schema view bugs (#14734)

Browse Source 
Co-authored-by: Michael Kret <michael.k@radency.com>
This commit is contained in:
Elias Meire
2025-04-24 08:53:02 +02:00
committed by GitHub
parent 1b1d6043d6
commit 022f4755c2
14 changed files with 1040 additions and 781 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
packages/frontend/editor-ui/src/components/NodeDetailsView.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue';
import { createEventBus } from '@n8n/utils/event-bus';
import type { IRunData, Workflow, NodeConnectionType } from 'n8n-workflow';
import type { IRunData, Workflow, NodeConnectionType, IConnectedNode } from 'n8n-workflow';
import { jsonParse, NodeHelpers, NodeConnectionTypes } from 'n8n-workflow';
import type { IUpdateInformation, TargetItem } from '@/Interface';
@@ -130,24 +130,19 @@ const workflowRunData = computed(() => {
const parentNodes = computed(() => {
if (activeNode.value) {
return (
props.workflowObject
.getParentNodesByDepth(activeNode.value.name, 1)
.map(({ name }) => name) || []
);
} else {
return [];
return props.workflowObject.getParentNodesByDepth(activeNode.value.name, 1);
}
return [];
});
const parentNode = computed(() => {
for (const parentNodeName of parentNodes.value) {
if (workflowsStore?.pinnedWorkflowData?.[parentNodeName]) {
return parentNodeName;
const parentNode = computed<IConnectedNode | undefined>(() => {
for (const parent of parentNodes.value) {
if (workflowsStore?.pinnedWorkflowData?.[parent.name]) {
return parent;
}
if (workflowRunData.value?.[parentNodeName]) {
return parentNodeName;
if (workflowRunData.value?.[parent.name]) {
return parent;
}
}
return parentNodes.value[0];
@@ -177,7 +172,7 @@ const inputNodeName = computed<string | undefined>(() => {
)?.[0];
return connectedOutputNode;
}
return selectedInput.value || parentNode.value;
return selectedInput.value ?? parentNode.value?.name;
});
const inputNode = computed(() => {
@@ -290,12 +285,23 @@ const maxInputRun = computed(() => {
return 0;
});
const connectedCurrentNodeOutputs = computed(() => {
return parentNodes.value.find(({ name }) => name === inputNodeName.value)?.indicies;
});
const inputRun = computed(() => {
if (isLinkingEnabled.value && maxOutputRun.value === maxInputRun.value) {
return outputRun.value;
}
if (runInputIndex.value === -1) {
return maxInputRun.value;
const currentInputNodeName = inputNodeName.value;
if (runInputIndex.value === -1 && currentInputNodeName) {
return (
connectedCurrentNodeOutputs.value
?.map((outputIndex) =>
nodeHelpers.getLastRunIndexWithData(currentInputNodeName, outputIndex),
)
.find((runIndex) => runIndex !== -1) ?? maxInputRun.value
);
}
return Math.min(runInputIndex.value, maxInputRun.value);

31
packages/frontend/editor-ui/src/components/RunData.vue
View File

@@ -262,9 +262,8 @@ const nodeType = computed(() => {
const isSchemaView = computed(() => displayMode.value === 'schema');
const isSearchInSchemaView = computed(() => isSchemaView.value && !!search.value);
const displaysMultipleNodes = computed(
() => isSchemaView.value && props.paneType === 'input' && props.nodes.length > 0,
);
const hasMultipleInputNodes = computed(() => props.paneType === 'input' && props.nodes.length > 0);
const displaysMultipleNodes = computed(() => isSchemaView.value && hasMultipleInputNodes.value);
const isTriggerNode = computed(() => !!node.value && nodeTypesStore.isTriggerNode(node.value.type));
@@ -478,7 +477,10 @@ const isPaneTypeOutput = computed(() => props.paneType === 'output');
const readOnlyEnv = computed(() => sourceControlStore.preferences.branchReadOnly);
const showIOSearch = computed(
() => hasNodeRun.value && !hasRunError.value && unfilteredInputData.value.length > 0,
() =>
hasNodeRun.value &&
!hasRunError.value &&
(unfilteredInputData.value.length > 0 || displaysMultipleNodes.value),
);
const inputSelectLocation = computed(() => {
if (isSchemaView.value) return 'none';
@@ -492,7 +494,8 @@ const inputSelectLocation = computed(() => {
});
const showIoSearchNoMatchContent = computed(
() => hasNodeRun.value && !inputData.value.length && !!search.value,
() =>
hasNodeRun.value && !inputData.value.length && !!search.value && !displaysMultipleNodes.value,
);
const parentNodeOutputData = computed(() => {
@@ -565,7 +568,7 @@ const hasInputOverwrite = computed((): boolean => {
if (!node.value) {
return false;
}
const taskData = nodeHelpers.getNodeTaskData(node.value, props.runIndex);
const taskData = nodeHelpers.getNodeTaskData(node.value.name, props.runIndex);
return Boolean(taskData?.inputOverride);
});
@@ -1395,7 +1398,9 @@ defineExpose({ enterEditMode });
<RunDataDisplayModeSelect
v-show="
hasPreviewSchema ||
(hasNodeRun && (inputData.length || binaryData.length || search) && !editMode.enabled)
(hasNodeRun &&
(inputData.length || binaryData.length || search || hasMultipleInputNodes) &&
!editMode.enabled)
"
:class="$style.displayModeSelect"
:compact="props.compact"
@@ -1679,7 +1684,10 @@ defineExpose({ enterEditMode });
<div
v-else-if="
hasNodeRun && (!unfilteredDataCount || (search && !dataCount)) && branches.length > 1
hasNodeRun &&
(!unfilteredDataCount || (search && !dataCount)) &&
!displaysMultipleNodes &&
branches.length > 1
"
:class="$style.center"
>
@@ -1700,7 +1708,10 @@ defineExpose({ enterEditMode });
</N8nText>
</div>
<div v-else-if="hasNodeRun && !inputData.length && !search" :class="$style.center">
<div
v-else-if="hasNodeRun && !inputData.length && !displaysMultipleNodes && !search"
:class="$style.center"
>
<slot name="no-output-data">xxx</slot>
</div>
@@ -1816,9 +1827,7 @@ defineExpose({ enterEditMode });
:data="jsonData"
:pane-type="paneType"
:connection-type="connectionType"
:run-index="runIndex"
:output-index="currentOutputIndex"
:total-runs="maxRunIndex"
:search="search"
:class="$style.schema"
:compact="props.compact"

58
packages/frontend/editor-ui/src/components/VirtualSchema.test.ts
View File

@@ -106,6 +106,7 @@ async function setupStore() {
const workflowsStore = useWorkflowsStore();
const nodeTypesStore = useNodeTypesStore();
const settingsStore = useSettingsStore();
const ndvStore = useNDVStore();
settingsStore.setSettings(defaultSettings);
nodeTypesStore.setNodeTypes([
@@ -124,6 +125,7 @@ async function setupStore() {
}),
]);
workflowsStore.workflow = workflow as IWorkflowDb;
ndvStore.activeNodeName = 'Test Node Name';
return pinia;
}
@@ -133,6 +135,8 @@ function mockNodeOutputData(nodeName: string, data: INodeExecutionData[], output
vi.spyOn(nodeHelpers, 'useNodeHelpers').mockImplementation(() => {
return {
...originalNodeHelpers,
getLastRunIndexWithData: vi.fn(() => 0),
hasNodeExecuted: vi.fn(() => true),
getNodeInputData: vi.fn((node, _, output) => {
if (node.name === nodeName && output === outputIndex) {
return data;
@@ -168,6 +172,8 @@ describe('VirtualSchema.vue', () => {
cleanup();
vi.resetAllMocks();
vi.setSystemTime('2025-01-01');
const pinia = await setupStore();
renderComponent = createComponentRenderer(VirtualSchema, {
global: {
stubs: {
@@ -177,12 +183,9 @@ describe('VirtualSchema.vue', () => {
Notice: NoticeStub,
},
},
pinia: await setupStore(),
pinia,
props: {
mappingEnabled: true,
runIndex: 1,
outputIndex: 0,
totalRuns: 2,
paneType: 'input',
connectionType: 'main',
search: '',
@@ -192,13 +195,9 @@ describe('VirtualSchema.vue', () => {
});
it('renders schema for empty data for unexecuted nodes', async () => {
const { getAllByText, getAllByTestId } = renderComponent();
const { getAllByText } = renderComponent();
await waitFor(() => expect(getAllByText('Execute previous nodes').length).toBe(2));
// Collapse second node
await userEvent.click(getAllByTestId('run-data-schema-header')[1]);
expect(getAllByText('Execute previous nodes').length).toBe(1);
await waitFor(() => expect(getAllByText('Execute previous nodes').length).toBe(1));
});
it('renders schema for empty data with binary', async () => {
@@ -320,7 +319,9 @@ describe('VirtualSchema.vue', () => {
const { getAllByText } = renderComponent({ props: { paneType: 'output' } });
await waitFor(() =>
expect(getAllByText("No fields - item(s) exist, but they're empty").length).toBe(1),
expect(
getAllByText('No fields - node executed, but no items were sent on this branch').length,
).toBe(1),
);
});
@@ -352,7 +353,6 @@ describe('VirtualSchema.vue', () => {
const headers = getAllByTestId('run-data-schema-header');
expect(headers[0]).toHaveTextContent('If');
expect(headers[0]).toHaveTextContent('2 items');
expect(headers[0]).toMatchSnapshot();
});
});
@@ -434,7 +434,10 @@ describe('VirtualSchema.vue', () => {
},
});
await waitFor(() => expect(getAllByTestId('run-data-schema-item').length).toBe(2));
await waitFor(() => {
expect(getAllByTestId('run-data-schema-header')).toHaveLength(3);
expect(getAllByTestId('run-data-schema-item').length).toBe(1);
});
});
it('should show connections', async () => {
@@ -564,30 +567,27 @@ describe('VirtualSchema.vue', () => {
data: [{ json: { name: 'John' } }],
});
const { getAllByTestId, queryAllByTestId, rerender } = renderComponent();
const { getAllByTestId, queryAllByTestId, rerender, container } = renderComponent();
let headers: HTMLElement[] = [];
await waitFor(async () => {
headers = getAllByTestId('run-data-schema-header');
expect(headers.length).toBe(3);
expect(getAllByTestId('run-data-schema-item').length).toBe(2);
expect(getAllByTestId('run-data-schema-item').length).toBe(1);
});
// Collapse all nodes (Variables & context is collapsed by default)
await Promise.all(headers.slice(0, -1).map(async (header) => await userEvent.click(header)));
// Collapse first node (expanded by default)
await userEvent.click(headers[0]);
expect(queryAllByTestId('run-data-schema-item').length).toBe(0);
await rerender({ search: 'John' });
expect(getAllByTestId('run-data-schema-item').length).toBe(13);
expect(getAllByTestId('run-data-schema-item').length).toBe(2);
expect(container).toMatchSnapshot();
});
it('renders preview schema when enabled and available', async () => {
useWorkflowsStore().pinData({
node: mockNode1,
data: [],
});
useWorkflowsStore().pinData({
node: mockNode2,
data: [],
@@ -611,14 +611,18 @@ describe('VirtualSchema.vue', () => {
}),
);
const { getAllByTestId, queryAllByText, container } = renderComponent({});
await waitFor(() => {
expect(getAllByTestId('run-data-schema-header')).toHaveLength(3);
const { getAllByTestId, queryAllByText, container } = renderComponent({
props: {
nodes: [{ name: mockNode2.name, indicies: [], depth: 1 }],
},
});
await waitFor(() => {
expect(getAllByTestId('run-data-schema-header')).toHaveLength(2);
});
expect(getAllByTestId('schema-preview-warning')).toHaveLength(1);
expect(queryAllByText("No fields - item(s) exist, but they're empty")).toHaveLength(0);
expect(getAllByTestId('schema-preview-warning')).toHaveLength(2);
expect(container).toMatchSnapshot();
});

128
packages/frontend/editor-ui/src/components/VirtualSchema.vue
View File

@@ -56,9 +56,6 @@ type Props = {
node?: INodeUi | null;
data?: IDataObject[];
mappingEnabled?: boolean;
runIndex?: number;
outputIndex?: number;
totalRuns?: number;
paneType: 'input' | 'output';
connectionType?: NodeConnectionType;
search?: string;
@@ -70,9 +67,6 @@ const props = withDefaults(defineProps<Props>(), {
distanceFromActive: 1,
node: null,
data: () => [],
runIndex: 0,
outputIndex: 0,
totalRuns: 1,
connectionType: NodeConnectionTypes.Main,
search: '',
mappingEnabled: false,
@@ -91,20 +85,24 @@ const posthogStore = usePostHog();
const { getSchemaForExecutionData, getSchemaForJsonSchema, getSchema, filterSchema } =
useDataSchema();
const { closedNodes, flattenSchema, flattenMultipleSchemas, toggleLeaf, toggleNode } =
useFlattenSchema();
const { getNodeInputData, getNodeTaskData } = useNodeHelpers();
const { closedNodes, flattenSchema, flattenMultipleSchemas, toggleNode } = useFlattenSchema();
const { getNodeInputData, getLastRunIndexWithData, hasNodeExecuted } = useNodeHelpers();
const emit = defineEmits<{
'clear:search': [];
}>();
const scroller = ref<RecycleScrollerInstance>();
const closedNodesBeforeSearch = ref(new Set<string>());
const canDraggableDrop = computed(() => ndvStore.canDraggableDrop);
const draggableStickyPosition = computed(() => ndvStore.draggableStickyPos);
const toggleNodeAndScrollTop = (id: string) => {
const toggleNodeExclusiveAndScrollTop = (id: string) => {
const isClosed = closedNodes.value.has(id);
if (isClosed) {
closedNodes.value = new Set(items.value.map((item) => item.id));
}
toggleNode(id);
scroller.value?.scrollToItem(0);
};
@@ -112,13 +110,23 @@ const toggleNodeAndScrollTop = (id: string) => {
const getNodeSchema = async (fullNode: INodeUi, connectedNode: IConnectedNode) => {
const pinData = workflowsStore.pinDataByNodeName(connectedNode.name);
const hasPinnedData = pinData ? pinData.length > 0 : false;
const isNodeExecuted = getNodeTaskData(fullNode, props.runIndex) !== null || hasPinnedData;
const isNodeExecuted = hasPinnedData || hasNodeExecuted(connectedNode.name);
const connectedOutputIndexes = connectedNode.indicies.length > 0 ? connectedNode.indicies : [0];
const nodeData = connectedOutputIndexes.map((outputIndex) =>
getNodeInputData(fullNode, props.runIndex, outputIndex, props.paneType, props.connectionType),
);
const hasBinary = nodeData.flat().some((data) => !isEmpty(data.binary));
const data = pinData ?? nodeData.map(executionDataToJson).flat();
const connectedOutputsWithData = connectedOutputIndexes
.map((outputIndex) => ({
outputIndex,
runIndex: getLastRunIndexWithData(fullNode.name, outputIndex, props.connectionType),
}))
.filter(({ runIndex }) => runIndex !== -1);
const nodeData = connectedOutputsWithData
.map(({ outputIndex, runIndex }) =>
getNodeInputData(fullNode, runIndex, outputIndex, props.paneType, props.connectionType),
)
.flat();
const hasBinary = nodeData.some((data) => !isEmpty(data.binary));
const data = pinData ?? executionDataToJson(nodeData);
const isDataEmpty = data.length === 0;
let schema = getSchemaForExecutionData(data);
let preview = false;
@@ -135,9 +143,11 @@ const getNodeSchema = async (fullNode: INodeUi, connectedNode: IConnectedNode) =
schema,
connectedOutputIndexes,
itemsCount: data.length,
runIndex: connectedOutputsWithData[0]?.runIndex ?? 0,
preview,
hasBinary,
isNodeExecuted,
isDataEmpty,
};
};
@@ -164,7 +174,7 @@ const contextSchema = computed(() => {
$workflow: pick(workflowsStore.workflow, ['id', 'name', 'active']),
};
return getSchema(schemaSource);
return filterSchema(getSchema(schemaSource), props.search);
});
const contextItems = computed(() => {
@@ -178,10 +188,13 @@ const contextItems = computed(() => {
if (closedNodes.value.has(header.id)) return [header];
const fields: Renders[] = flattenSchema({
schema: contextSchema.value,
depth: 1,
}).flatMap((renderItem) => {
const schema = contextSchema.value;
if (!schema) {
return [];
}
const fields: Renders[] = flattenSchema({ schema, depth: 1 }).flatMap((renderItem) => {
const isVars =
renderItem.type === 'item' && renderItem.depth === 1 && renderItem.title === '$vars';
@@ -252,8 +265,16 @@ const nodesSchemas = asyncComputed<SchemaNode[]>(async () => {
const nodeType = nodeTypesStore.getNodeType(fullNode.type, fullNode.typeVersion);
if (!nodeType) continue;
const { schema, connectedOutputIndexes, itemsCount, preview, hasBinary, isNodeExecuted } =
await getNodeSchema(fullNode, node);
const {
schema,
connectedOutputIndexes,
itemsCount,
preview,
hasBinary,
isNodeExecuted,
isDataEmpty,
runIndex,
} = await getNodeSchema(fullNode, node);
const filteredSchema = filterSchema(schema, search);
@@ -269,6 +290,8 @@ const nodesSchemas = asyncComputed<SchemaNode[]>(async () => {
preview,
hasBinary,
isNodeExecuted,
isDataEmpty,
runIndex,
});
}
@@ -319,25 +342,28 @@ const noSearchResults = computed(() => {
});
watch(
() => props.search,
(newSearch) => {
if (!newSearch) return;
closedNodes.value.clear();
() => Boolean(props.search),
(hasSearch) => {
if (hasSearch) {
closedNodesBeforeSearch.value = new Set(closedNodes.value);
closedNodes.value.clear();
} else if (closedNodes.value.size === 0) {
closedNodes.value = closedNodesBeforeSearch.value;
}
},
);
// Variables & context items should be collapsed by default
watch(
contextItems,
(currentContextItems) => {
currentContextItems
// Collapse all nodes except the first
const unwatchItems = watch(items, (newItems) => {
if (newItems.length < 2) return;
closedNodes.value = new Set(
newItems
.filter((item) => item.type === 'header')
.forEach((item) => {
closedNodes.value.add(item.id);
});
},
{ once: true, immediate: true },
);
.slice(1)
.map((item) => item.id),
);
unwatchItems();
});
const onDragStart = (el: HTMLElement, data?: string) => {
ndvStore.draggableStartDragging({
@@ -356,13 +382,14 @@ const onDragEnd = (el: HTMLElement) => {
const isPreview = parentNode?.preview ?? false;
const hasCredential = !isEmpty(parentNode?.node.credentials);
const runIndex = Number(el.dataset.runIndex);
const telemetryPayload = {
src_node_type: el.dataset.nodeType,
src_field_name: el.dataset.name ?? '',
src_nodes_back: el.dataset.depth,
src_run_index: props.runIndex,
src_runs_total: props.totalRuns,
src_run_index: runIndex,
src_runs_total: runIndex,
src_field_nest_level: el.dataset.level ?? 0,
src_view: isPreview ? 'schema_preview' : 'schema',
src_has_credential: hasCredential,
@@ -424,8 +451,8 @@ const onDragEnd = (el: HTMLElement) => {
v-if="item.type === 'header'"
v-bind="item"
:collapsed="closedNodes.has(item.id)"
@click:toggle="toggleLeaf(item.id)"
@click="toggleNodeAndScrollTop(item.id)"
@click:toggle="toggleNode(item.id)"
@click="toggleNodeExclusiveAndScrollTop(item.id)"
/>
<VirtualSchemaItem
v-else-if="item.type === 'item'"
@@ -434,7 +461,7 @@ const onDragEnd = (el: HTMLElement) => {
:draggable="mappingEnabled"
:collapsed="closedNodes.has(item.id)"
:highlight="ndvStore.highlightDraggables"
@click="toggleLeaf(item.id)"
@click="toggleNode(item.id)"
>
</VirtualSchemaItem>
@@ -461,13 +488,14 @@ const onDragEnd = (el: HTMLElement) => {
>
<template #link>
<NodeExecuteButton
:node-name="item.nodeName"
v-if="ndvStore.activeNodeName"
:node-name="ndvStore.activeNodeName"
:label="i18n.baseText('ndv.input.noOutputData.executePrevious')"
text
telemetry-source="inputs"
hide-icon
size="small"
class="execute-button"
:class="$style.executeButton"
/>
</template>
</i18n-t>
@@ -481,6 +509,12 @@ const onDragEnd = (el: HTMLElement) => {
</div>
</template>
<style lang="css" module>
.executeButton {
padding: 0;
}
</style>
<style lang="css" scoped>
.full-height {
height: 100%;
@@ -532,8 +566,4 @@ const onDragEnd = (el: HTMLElement) => {
padding-bottom: var(--spacing-xs);
margin-left: calc((var(--spacing-xl) * var(--schema-level)));
}
.execute-button {
padding: 0;
}
</style>

2
packages/frontend/editor-ui/src/components/VirtualSchemaItem.vue
View File

@@ -22,6 +22,7 @@ type Props = {
preview?: boolean;
locked?: boolean;
lockedTooltip?: string;
runIndex?: number;
};
const props = defineProps<Props>();
@@ -48,6 +49,7 @@ const emit = defineEmits<{
:data-node-type="nodeType"
:data-target="!locked && 'mappable'"
:data-node-name="nodeName"
:data-run-index="runIndex"
class="pill"
:class="{
'pill--highlight': highlight,

864
packages/frontend/editor-ui/src/components/__snapshots__/VirtualSchema.test.ts.snap
View File

@@ -21,357 +21,6 @@ exports[`VirtualSchema.vue > renders preview schema when enabled and available 1
<div
class="schema-header-wrapper"
data-v-882a318e=""
data-v-d00cba9a=""
id="Manual Trigger"
type="header"
>
<div
class="schema-header"
data-test-id="run-data-schema-header"
data-v-882a318e=""
>
<div
class="toggle"
data-v-882a318e=""
>
<font-awesome-icon-stub
beat="false"
beatfade="false"
border="false"
bounce="false"
class="collapse-icon"
data-v-882a318e=""
fade="false"
fixedwidth="false"
flash="false"
flip="false"
icon="angle-down"
inverse="false"
listitem="false"
pulse="false"
shake="false"
spin="false"
spinpulse="false"
spinreverse="false"
swapopacity="false"
symbol="false"
/>
</div>
<div
class="n8n-node-icon icon icon-trigger icon icon-trigger"
data-v-882a318e=""
>
<div
class="nodeIconWrapper"
style="width: 12px; height: 12px; font-size: 12px; line-height: 12px;"
>
<!-- ElementUI tooltip is prone to memory-leaking so we only render it if we really need it -->
<div
class="icon"
>
<img
class="nodeIconImage"
src="/nodes/test-node/icon.svg"
/>
<!--v-if-->
</div>
</div>
</div>
<div
class="title"
data-v-882a318e=""
>
Manual Trigger
<!--v-if-->
</div>
<font-awesome-icon-stub
beat="false"
beatfade="false"
border="false"
bounce="false"
class="trigger-icon"
data-v-882a318e=""
fade="false"
fixedwidth="false"
flash="false"
flip="false"
icon="bolt"
inverse="false"
listitem="false"
pulse="false"
shake="false"
size="xs"
spin="false"
spinpulse="false"
spinreverse="false"
swapopacity="false"
symbol="false"
/>
<div
class="extra-info"
data-v-882a318e=""
>
Preview
</div>
</div>
<div
class="notice"
data-test-id="schema-preview-warning"
data-v-882a318e=""
>
Usually outputs the following fields. Execute the node to see the actual ones.
<a
class="n8n-link"
data-v-882a318e=""
href="https://docs.n8n.io/data/schema-preview/"
target="_blank"
>
<span
class="primary"
>
<span
class="n8n-text size-small bold"
>
Learn more
</span>
</span>
</a>
</div>
</div>
<div
class="schema-item draggable"
data-test-id="run-data-schema-item"
data-v-0f5e7239=""
data-v-d00cba9a=""
type="item"
>
<div
class="toggle-container"
data-v-0f5e7239=""
>
<div
class="toggle"
data-v-0f5e7239=""
>
<font-awesome-icon-stub
beat="false"
beatfade="false"
border="false"
bounce="false"
class="collapse-icon"
data-v-0f5e7239=""
fade="false"
fixedwidth="false"
flash="false"
flip="false"
icon="angle-down"
inverse="false"
listitem="false"
pulse="false"
shake="false"
spin="false"
spinpulse="false"
spinreverse="false"
swapopacity="false"
symbol="false"
/>
</div>
</div>
<div
class="pill pill--preview"
data-depth="1"
data-name="account"
data-nest-level="1"
data-node-name="Manual Trigger"
data-node-type="n8n-nodes-base.manualTrigger"
data-path=".account"
data-target="mappable"
data-test-id="run-data-schema-node-name"
data-v-0f5e7239=""
data-value="{{ $json.account }}"
>
<font-awesome-icon-stub
beat="false"
beatfade="false"
border="false"
bounce="false"
class="type-icon"
data-v-0f5e7239=""
fade="false"
fixedwidth="false"
flash="false"
flip="false"
icon="cube"
inverse="false"
listitem="false"
pulse="false"
shake="false"
size="sm"
spin="false"
spinpulse="false"
spinreverse="false"
swapopacity="false"
symbol="false"
/>
<span
class="content title"
data-v-0f5e7239=""
>
<span>
<!--v-if-->
account
</span>
</span>
</div>
<!--v-if-->
<span
class="content text"
data-test-id="run-data-schema-item-value"
data-v-0f5e7239=""
>
<span />
</span>
</div>
<div
class="schema-item draggable"
data-test-id="run-data-schema-item"
data-v-0f5e7239=""
data-v-d00cba9a=""
type="item"
>
<div
class="toggle-container"
data-v-0f5e7239=""
>
<!--v-if-->
</div>
<div
class="pill pill--preview"
data-depth="1"
data-name="id"
data-nest-level="2"
data-node-name="Manual Trigger"
data-node-type="n8n-nodes-base.manualTrigger"
data-path=".account.id"
data-target="mappable"
data-test-id="run-data-schema-node-name"
data-v-0f5e7239=""
data-value="{{ $json.account.id }}"
>
<font-awesome-icon-stub
beat="false"
beatfade="false"
border="false"
bounce="false"
class="type-icon"
data-v-0f5e7239=""
fade="false"
fixedwidth="false"
flash="false"
flip="false"
icon="font"
inverse="false"
listitem="false"
pulse="false"
shake="false"
size="sm"
spin="false"
spinpulse="false"
spinreverse="false"
swapopacity="false"
symbol="false"
/>
<span
class="content title"
data-v-0f5e7239=""
>
<span>
<!--v-if-->
id
</span>
</span>
</div>
<!--v-if-->
<span
class="content text"
data-test-id="run-data-schema-item-value"
data-v-0f5e7239=""
>
<span>
<!--v-if-->
</span>
</span>
</div>
<span
class="n8n-text compact size-14 regular n8n-icon icon el-tooltip__trigger el-tooltip__trigger icon el-tooltip__trigger el-tooltip__trigger n8n-icon icon el-tooltip__trigger el-tooltip__trigger icon el-tooltip__trigger el-tooltip__trigger"
data-v-d00cba9a=""
>
<font-awesome-icon-stub
beat="false"
beatfade="false"
border="false"
bounce="false"
class="14"
fade="false"
fixedwidth="false"
flash="false"
flip="false"
icon="ellipsis-h"
inverse="false"
listitem="false"
pulse="false"
shake="false"
spin="false"
spinpulse="false"
spinreverse="false"
swapopacity="false"
symbol="false"
/>
</span>
<!--teleport start-->
<!--teleport end-->
<div
class="schema-header-wrapper"
data-v-882a318e=""
@@ -527,7 +176,7 @@ exports[`VirtualSchema.vue > renders preview schema when enabled and available 1
</div>
<div
class="pill pill--preview"
data-depth="2"
data-depth="1"
data-name="account"
data-nest-level="1"
data-node-name="Set2"
@@ -536,7 +185,7 @@ exports[`VirtualSchema.vue > renders preview schema when enabled and available 1
data-target="mappable"
data-test-id="run-data-schema-node-name"
data-v-0f5e7239=""
data-value="{{ $('Set2').item.json.account }}"
data-value="{{ $json.account }}"
>
<font-awesome-icon-stub
beat="false"
@@ -601,7 +250,7 @@ exports[`VirtualSchema.vue > renders preview schema when enabled and available 1
</div>
<div
class="pill pill--preview"
data-depth="2"
data-depth="1"
data-name="id"
data-nest-level="2"
data-node-name="Set2"
@@ -610,7 +259,7 @@ exports[`VirtualSchema.vue > renders preview schema when enabled and available 1
data-target="mappable"
data-test-id="run-data-schema-node-name"
data-v-0f5e7239=""
data-value="{{ $('Set2').item.json.account.id }}"
data-value="{{ $json.account.id }}"
>
<font-awesome-icon-stub
beat="false"
@@ -838,79 +487,6 @@ exports[`VirtualSchema.vue > renders previous nodes schema for AI tools 1`] = `
</div>
`;
exports[`VirtualSchema.vue > renders schema for correct output branch 1`] = `
<div
class="schema-header"
data-test-id="run-data-schema-header"
data-v-882a318e=""
>
<div
class="toggle"
data-v-882a318e=""
>
<font-awesome-icon-stub
beat="false"
beatfade="false"
border="false"
bounce="false"
class="collapse-icon"
data-v-882a318e=""
fade="false"
fixedwidth="false"
flash="false"
flip="false"
icon="angle-down"
inverse="false"
listitem="false"
pulse="false"
shake="false"
spin="false"
spinpulse="false"
spinreverse="false"
swapopacity="false"
symbol="false"
/>
</div>
<div
class="n8n-node-icon icon icon"
data-v-882a318e=""
>
<div
class="nodeIconWrapper"
style="width: 12px; height: 12px; font-size: 12px; line-height: 12px;"
>
<!-- ElementUI tooltip is prone to memory-leaking so we only render it if we really need it -->
<div
class="icon"
>
<img
class="nodeIconImage"
src="/nodes/test-node/icon.svg"
/>
<!--v-if-->
</div>
</div>
</div>
<div
class="title"
data-v-882a318e=""
>
If
<!--v-if-->
</div>
<!--v-if-->
<div
class="extra-info"
data-test-id="run-data-schema-node-item-count"
data-v-882a318e=""
>
2 items
</div>
</div>
`;
exports[`VirtualSchema.vue > renders schema for empty objects and arrays 1`] = `
<div>
<div
@@ -2741,7 +2317,7 @@ exports[`VirtualSchema.vue > renders schema with spaces and dots 1`] = `
beatfade="false"
border="false"
bounce="false"
class="collapse-icon"
class="collapse-icon collapsed"
data-v-882a318e=""
fade="false"
fixedwidth="false"
@@ -2797,45 +2373,6 @@ exports[`VirtualSchema.vue > renders schema with spaces and dots 1`] = `
<div
class="empty-schema"
data-v-d00cba9a=""
style="--schema-level: 1;"
>
<div
class="n8n-text size-small regular"
data-v-d00cba9a=""
>
<span
data-v-d00cba9a=""
>
<button
aria-live="polite"
class="button button primary small text execute-button el-tooltip__trigger el-tooltip__trigger execute-button el-tooltip__trigger el-tooltip__trigger"
title="Runs the current node. Will also run previous nodes if they have not been run yet"
transparent-background="false"
>
<!--v-if-->
<span>
Execute previous nodes
</span>
</button>
<!--teleport start-->
<!--teleport end-->
to see schema
</span>
</div>
</div>
<div
class="schema-header-wrapper"
data-v-882a318e=""
@@ -3990,6 +3527,397 @@ exports[`VirtualSchema.vue > renders variables and context section 1`] = `
</div>
<!--teleport start-->
<!--teleport end-->
</div>
</div>
</div>
`;
exports[`VirtualSchema.vue > should expand all nodes when searching 1`] = `
<div>
<div
class="run-data-schema full-height"
data-v-d00cba9a=""
>
<!--v-if-->
<div
class="full-height"
data-test-id="draggable"
data-v-d00cba9a=""
>
<div
class="full-height scroller"
data-v-d00cba9a=""
min-item-size="38"
>
<div
class="schema-header-wrapper"
data-v-882a318e=""
data-v-d00cba9a=""
id="Manual Trigger"
type="header"
>
<div
class="schema-header"
data-test-id="run-data-schema-header"
data-v-882a318e=""
>
<div
class="toggle"
data-v-882a318e=""
>
<font-awesome-icon-stub
beat="false"
beatfade="false"
border="false"
bounce="false"
class="collapse-icon"
data-v-882a318e=""
fade="false"
fixedwidth="false"
flash="false"
flip="false"
icon="angle-down"
inverse="false"
listitem="false"
pulse="false"
shake="false"
spin="false"
spinpulse="false"
spinreverse="false"
swapopacity="false"
symbol="false"
/>
</div>
<div
class="n8n-node-icon icon icon-trigger icon icon-trigger"
data-v-882a318e=""
>
<div
class="nodeIconWrapper"
style="width: 12px; height: 12px; font-size: 12px; line-height: 12px;"
>
<!-- ElementUI tooltip is prone to memory-leaking so we only render it if we really need it -->
<div
class="icon"
>
<img
class="nodeIconImage"
src="/nodes/test-node/icon.svg"
/>
<!--v-if-->
</div>
</div>
</div>
<div
class="title"
data-v-882a318e=""
>
Manual Trigger
<!--v-if-->
</div>
<font-awesome-icon-stub
beat="false"
beatfade="false"
border="false"
bounce="false"
class="trigger-icon"
data-v-882a318e=""
fade="false"
fixedwidth="false"
flash="false"
flip="false"
icon="bolt"
inverse="false"
listitem="false"
pulse="false"
shake="false"
size="xs"
spin="false"
spinpulse="false"
spinreverse="false"
swapopacity="false"
symbol="false"
/>
<div
class="extra-info"
data-test-id="run-data-schema-node-item-count"
data-v-882a318e=""
>
1 item
</div>
</div>
<!--v-if-->
</div>
<div
class="schema-item draggable"
data-test-id="run-data-schema-item"
data-v-0f5e7239=""
data-v-d00cba9a=""
type="item"
>
<div
class="toggle-container"
data-v-0f5e7239=""
>
<!--v-if-->
</div>
<div
class="pill"
data-depth="1"
data-name="name"
data-nest-level="1"
data-node-name="Manual Trigger"
data-node-type="n8n-nodes-base.manualTrigger"
data-path=".name"
data-target="mappable"
data-test-id="run-data-schema-node-name"
data-v-0f5e7239=""
data-value="{{ $json.name }}"
>
<font-awesome-icon-stub
beat="false"
beatfade="false"
border="false"
bounce="false"
class="type-icon"
data-v-0f5e7239=""
fade="false"
fixedwidth="false"
flash="false"
flip="false"
icon="font"
inverse="false"
listitem="false"
pulse="false"
shake="false"
size="sm"
spin="false"
spinpulse="false"
spinreverse="false"
swapopacity="false"
symbol="false"
/>
<span
class="title"
data-v-0f5e7239=""
>
<span>
name
</span>
</span>
</div>
<!--v-if-->
<span
class="text"
data-test-id="run-data-schema-item-value"
data-v-0f5e7239=""
>
<!--v-if-->
<mark>
John
</mark>
<!--v-if-->
</span>
</div>
<div
class="schema-header-wrapper"
data-v-882a318e=""
data-v-d00cba9a=""
id="Set2"
type="header"
>
<div
class="schema-header"
data-test-id="run-data-schema-header"
data-v-882a318e=""
>
<div
class="toggle"
data-v-882a318e=""
>
<font-awesome-icon-stub
beat="false"
beatfade="false"
border="false"
bounce="false"
class="collapse-icon"
data-v-882a318e=""
fade="false"
fixedwidth="false"
flash="false"
flip="false"
icon="angle-down"
inverse="false"
listitem="false"
pulse="false"
shake="false"
spin="false"
spinpulse="false"
spinreverse="false"
swapopacity="false"
symbol="false"
/>
</div>
<div
class="n8n-node-icon icon icon"
data-v-882a318e=""
>
<div
class="nodeIconWrapper"
style="width: 12px; height: 12px; font-size: 12px; line-height: 12px;"
>
<!-- ElementUI tooltip is prone to memory-leaking so we only render it if we really need it -->
<div
class="icon"
>
<img
class="nodeIconImage"
src="/nodes/test-node/icon.svg"
/>
<!--v-if-->
</div>
</div>
</div>
<div
class="title"
data-v-882a318e=""
>
Set2
<!--v-if-->
</div>
<!--v-if-->
<div
class="extra-info"
data-test-id="run-data-schema-node-item-count"
data-v-882a318e=""
>
1 item
</div>
</div>
<!--v-if-->
</div>
<div
class="schema-item draggable"
data-test-id="run-data-schema-item"
data-v-0f5e7239=""
data-v-d00cba9a=""
type="item"
>
<div
class="toggle-container"
data-v-0f5e7239=""
>
<!--v-if-->
</div>
<div
class="pill"
data-depth="2"
data-name="name"
data-nest-level="1"
data-node-name="Set2"
data-node-type="n8n-nodes-base.set"
data-path=".name"
data-target="mappable"
data-test-id="run-data-schema-node-name"
data-v-0f5e7239=""
data-value="{{ $('Set2').item.json.name }}"
>
<font-awesome-icon-stub
beat="false"
beatfade="false"
border="false"
bounce="false"
class="type-icon"
data-v-0f5e7239=""
fade="false"
fixedwidth="false"
flash="false"
flip="false"
icon="font"
inverse="false"
listitem="false"
pulse="false"
shake="false"
size="sm"
spin="false"
spinpulse="false"
spinreverse="false"
swapopacity="false"
symbol="false"
/>
<span
class="title"
data-v-0f5e7239=""
>
<span>
name
</span>
</span>
</div>
<!--v-if-->
<span
class="text"
data-test-id="run-data-schema-item-value"
data-v-0f5e7239=""
>
<!--v-if-->
<mark>
John
</mark>
<!--v-if-->
</span>
</div>
</div>
<!--teleport start-->