feat(editor): Add variables and context section to schema view (#13875)

packages/frontend/editor-ui/src/components/ExpressionEditModal.test.ts

@@ -3,6 +3,9 @@ import { cleanupAppModals, createAppModals } from '@/__tests__/utils';
 import ExpressionEditModal from '@/components/ExpressionEditModal.vue';
 import { createTestingPinia } from '@pinia/testing';
 import { waitFor, within } from '@testing-library/vue';
+import { setActivePinia, type Pinia } from 'pinia';
+import { defaultSettings } from '../__tests__/defaults';
+import { useSettingsStore } from '../stores/settings.store';
 
 vi.mock('vue-router', () => {
 	const push = vi.fn();
@@ -15,11 +18,21 @@ vi.mock('vue-router', () => {
 	};
 });
 
+vi.mock('@/composables/useWorkflowHelpers', async (importOriginal) => {
+	const actual: object = await importOriginal();
+	return { ...actual, resolveParameter: vi.fn(() => 123) };
+});
+
 const renderModal = createComponentRenderer(ExpressionEditModal);
 
 describe('ExpressionEditModal', () => {
+	let pinia: Pinia;
+
 	beforeEach(() => {
 		createAppModals();
+		pinia = createTestingPinia({ stubActions: false });
+		setActivePinia(pinia);
+		useSettingsStore().setSettings(defaultSettings);
 	});
 
 	afterEach(() => {
@@ -28,8 +41,6 @@ describe('ExpressionEditModal', () => {
 	});
 
 	it('renders correctly', async () => {
-		const pinia = createTestingPinia();
-
 		const { getByTestId } = renderModal({
 			pinia,
 			props: {
@@ -52,8 +63,6 @@ describe('ExpressionEditModal', () => {
 	});
 
 	it('is read only', async () => {
-		const pinia = createTestingPinia();
-
 		const { getByTestId } = renderModal({
 			pinia,
 			props: {

packages/frontend/editor-ui/src/components/RunData.test.ts

@@ -34,6 +34,11 @@ vi.mock('@/composables/useExecutionHelpers', () => ({
 	}),
 }));
 
+vi.mock('@/composables/useWorkflowHelpers', async (importOriginal) => {
+	const actual: object = await importOriginal();
+	return { ...actual, resolveParameter: vi.fn(() => 123) };
+});
+
 describe('RunData', () => {
 	beforeAll(() => {
 		resolveRelatedExecutionUrl.mockReturnValue('execution.url/123');

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

@@ -20,11 +20,14 @@ import {
 	type INodeExecutionData,
 } from 'n8n-workflow';
 import * as nodeHelpers from '@/composables/useNodeHelpers';
+import * as workflowHelpers from '@/composables/useWorkflowHelpers';
 import { useNDVStore } from '@/stores/ndv.store';
 import { fireEvent } from '@testing-library/dom';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { useSchemaPreviewStore } from '../stores/schemaPreview.store';
 import { usePostHog } from '../stores/posthog.store';
+import { useSettingsStore } from '../stores/settings.store';
+import { defaultSettings } from '../__tests__/defaults';
 
 const mockNode1 = createTestNode({
 	name: 'Manual Trigger',
@@ -86,6 +89,8 @@ async function setupStore() {
 
 	const workflowsStore = useWorkflowsStore();
 	const nodeTypesStore = useNodeTypesStore();
+	const settingsStore = useSettingsStore();
+	settingsStore.setSettings(defaultSettings);
 
 	nodeTypesStore.setNodeTypes([
 		...defaultNodeDescriptions,
@@ -141,6 +146,8 @@ describe('VirtualSchema.vue', () => {
 
 	beforeEach(async () => {
 		cleanup();
+		vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue(123);
+		vi.setSystemTime('2025-01-01');
 		renderComponent = createComponentRenderer(VirtualSchema, {
 			global: {
 				stubs: {
@@ -195,7 +202,7 @@ describe('VirtualSchema.vue', () => {
 		const { getAllByTestId } = renderComponent();
 		await waitFor(() => {
 			const headers = getAllByTestId('run-data-schema-header');
-			expect(headers.length).toBe(2);
+			expect(headers.length).toBe(3);
 			expect(headers[0]).toHaveTextContent('Manual Trigger');
 			expect(headers[0]).toHaveTextContent('2 items');
 			expect(headers[1]).toHaveTextContent('Set2');
@@ -286,16 +293,15 @@ describe('VirtualSchema.vue', () => {
 	});
 
 	it('renders disabled nodes correctly', async () => {
-		const { getByTestId } = renderComponent({
+		const { getAllByTestId } = renderComponent({
 			props: {
 				nodes: [{ name: disabledNode.name, indicies: [], depth: 1 }],
 			},
 		});
-		await waitFor(() =>
-			expect(getByTestId('run-data-schema-header')).toHaveTextContent(
-				`${disabledNode.name} (Deactivated)`,
-			),
-		);
+		await waitFor(() => {
+			const headers = getAllByTestId('run-data-schema-header');
+			expect(headers[0]).toHaveTextContent(`${disabledNode.name} (Deactivated)`);
+		});
 	});
 
 	it('renders schema for correct output branch', async () => {
@@ -307,16 +313,17 @@ describe('VirtualSchema.vue', () => {
 			],
 			1,
 		);
-		const { getByTestId } = renderComponent({
+		const { getAllByTestId } = renderComponent({
 			props: {
 				nodes: [{ name: 'If', indicies: [1], depth: 2 }],
 			},
 		});
 
 		await waitFor(() => {
-			expect(getByTestId('run-data-schema-header')).toHaveTextContent('If');
-			expect(getByTestId('run-data-schema-header')).toHaveTextContent('2 items');
-			expect(getByTestId('run-data-schema-header')).toMatchSnapshot();
+			const headers = getAllByTestId('run-data-schema-header');
+			expect(headers[0]).toHaveTextContent('If');
+			expect(headers[0]).toHaveTextContent('2 items');
+			expect(headers[0]).toMatchSnapshot();
 		});
 	});
 
@@ -329,7 +336,7 @@ describe('VirtualSchema.vue', () => {
 			],
 			0,
 		);
-		const { getByTestId } = renderComponent({
+		const { getAllByTestId } = renderComponent({
 			props: {
 				nodes: [
 					{
@@ -343,9 +350,10 @@ describe('VirtualSchema.vue', () => {
 		});
 
 		await waitFor(() => {
-			expect(getByTestId('run-data-schema-header')).toHaveTextContent('If');
-			expect(getByTestId('run-data-schema-header')).toHaveTextContent('2 items');
-			expect(getByTestId('run-data-schema-header')).toMatchSnapshot();
+			const headers = getAllByTestId('run-data-schema-header');
+			expect(headers[0]).toHaveTextContent('If');
+			expect(headers[0]).toHaveTextContent('2 items');
+			expect(headers[0]).toMatchSnapshot();
 		});
 	});
 
@@ -414,7 +422,7 @@ describe('VirtualSchema.vue', () => {
 
 		await waitFor(() => {
 			const headers = getAllByTestId('run-data-schema-header');
-			expect(headers.length).toBe(2);
+			expect(headers.length).toBe(3);
 			expect(headers[0]).toHaveTextContent('Input 0');
 			expect(headers[1]).toHaveTextContent('Inputs 0, 1, 2');
 		});
@@ -428,6 +436,7 @@ describe('VirtualSchema.vue', () => {
 			fireEvent(window, new MouseEvent('mousemove', { bubbles: true }));
 			expect(reset).toHaveBeenCalled();
 
+			vi.useRealTimers();
 			vi.useFakeTimers({ toFake: ['setTimeout'] });
 			fireEvent(window, new MouseEvent('mouseup', { bubbles: true }));
 			vi.advanceTimersByTime(250);
@@ -538,18 +547,22 @@ describe('VirtualSchema.vue', () => {
 		});
 
 		const { getAllByTestId, queryAllByTestId, rerender } = renderComponent();
+
+		let headers: HTMLElement[] = [];
 		await waitFor(async () => {
-			const headers = getAllByTestId('run-data-schema-header');
-			expect(headers.length).toBe(2);
-			expect(getAllByTestId('run-data-schema-item').length).toBe(2);
-
-			// Collapse all nodes
-			await Promise.all(headers.map(async ($header) => await userEvent.click($header)));
-
-			expect(queryAllByTestId('run-data-schema-item').length).toBe(0);
-			await rerender({ search: 'John' });
+			headers = getAllByTestId('run-data-schema-header');
+			expect(headers.length).toBe(3);
 			expect(getAllByTestId('run-data-schema-item').length).toBe(2);
 		});
+
+		// Collapse all nodes (Variables & context is collapsed by default)
+		await Promise.all(headers.slice(0, -1).map(async (header) => await userEvent.click(header)));
+
+		expect(queryAllByTestId('run-data-schema-item').length).toBe(0);
+
+		await rerender({ search: 'John' });
+
+		expect(getAllByTestId('run-data-schema-item').length).toBe(13);
 	});
 
 	it('renders preview schema when enabled and available', async () => {
@@ -583,11 +596,47 @@ describe('VirtualSchema.vue', () => {
 		const { getAllByTestId, queryAllByText, container } = renderComponent({});
 
 		await waitFor(() => {
-			expect(getAllByTestId('run-data-schema-header')).toHaveLength(2);
+			expect(getAllByTestId('run-data-schema-header')).toHaveLength(3);
 		});
 
 		expect(queryAllByText("No fields - item(s) exist, but they're empty")).toHaveLength(0);
 		expect(getAllByTestId('schema-preview-warning')).toHaveLength(2);
 		expect(container).toMatchSnapshot();
 	});
+
+	it('renders variables and context section', async () => {
+		useWorkflowsStore().pinData({
+			node: mockNode1,
+			data: [],
+		});
+
+		const { getAllByTestId, container } = renderComponent({
+			props: {
+				nodes: [{ name: mockNode1.name, indicies: [], depth: 1 }],
+			},
+		});
+
+		let headers: HTMLElement[] = [];
+
+		await waitFor(() => {
+			headers = getAllByTestId('run-data-schema-header');
+			expect(headers).toHaveLength(2);
+			expect(headers[1]).toHaveTextContent('Variables and context');
+		});
+
+		await userEvent.click(headers[1]);
+
+		await waitFor(() => {
+			const items = getAllByTestId('run-data-schema-item');
+
+			expect(items).toHaveLength(11);
+			expect(items[0]).toHaveTextContent('$now');
+			expect(items[1]).toHaveTextContent('$today');
+			expect(items[2]).toHaveTextContent('$vars');
+			expect(items[3]).toHaveTextContent('$execution');
+			expect(items[7]).toHaveTextContent('$workflow');
+		});
+
+		expect(container).toMatchSnapshot();
+	});
 });

packages/frontend/editor-ui/src/components/VirtualSchema.vue

@@ -1,38 +1,53 @@
 <script lang="ts" setup>
-import { computed, watch, ref } from 'vue';
 import type { INodeUi } from '@/Interface';
-import VirtualSchemaItem from '@/components/VirtualSchemaItem.vue';
-import VirtualSchemaHeader from '@/components/VirtualSchemaHeader.vue';
-import { N8nText } from '@n8n/design-system';
 import Draggable from '@/components/Draggable.vue';
-import { useNDVStore } from '@/stores/ndv.store';
+import VirtualSchemaHeader from '@/components/VirtualSchemaHeader.vue';
+import VirtualSchemaItem from '@/components/VirtualSchemaItem.vue';
+import {
+	useDataSchema,
+	useFlattenSchema,
+	type RenderHeader,
+	type RenderNotice,
+	type Renders,
+	type SchemaNode,
+} from '@/composables/useDataSchema';
+import { useExternalHooks } from '@/composables/useExternalHooks';
+import { useI18n } from '@/composables/useI18n';
+import { useNodeHelpers } from '@/composables/useNodeHelpers';
 import { useTelemetry } from '@/composables/useTelemetry';
+import { useNDVStore } from '@/stores/ndv.store';
+import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+import { useWorkflowsStore } from '@/stores/workflows.store';
+import { executionDataToJson } from '@/utils/nodeTypesUtils';
+import { N8nText } from '@n8n/design-system';
 import {
 	createResultError,
 	NodeConnectionType,
 	type IConnectedNode,
 	type IDataObject,
 } from 'n8n-workflow';
-import { useExternalHooks } from '@/composables/useExternalHooks';
-import { useI18n } from '@/composables/useI18n';
-import MappingPill from './MappingPill.vue';
-import { useDataSchema, useFlattenSchema, type SchemaNode } from '@/composables/useDataSchema';
-import { useNodeTypesStore } from '@/stores/nodeTypes.store';
-import { useWorkflowsStore } from '@/stores/workflows.store';
-import { executionDataToJson } from '@/utils/nodeTypesUtils';
-import { useNodeHelpers } from '@/composables/useNodeHelpers';
+import { computed, ref, watch } from 'vue';
 import {
 	DynamicScroller,
 	DynamicScrollerItem,
 	type RecycleScrollerInstance,
 } from 'vue-virtual-scroller';
+import MappingPill from './MappingPill.vue';
 
-import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
-import { useSchemaPreviewStore } from '@/stores/schemaPreview.store';
-import { asyncComputed } from '@vueuse/core';
+import {
+	EnterpriseEditionFeature,
+	PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
+	SCHEMA_PREVIEW_EXPERIMENT,
+} from '@/constants';
+import useEnvironmentsStore from '@/stores/environments.ee.store';
 import { usePostHog } from '@/stores/posthog.store';
-import { SCHEMA_PREVIEW_EXPERIMENT } from '@/constants';
+import { useSchemaPreviewStore } from '@/stores/schemaPreview.store';
+import { useSettingsStore } from '@/stores/settings.store';
 import { isEmpty } from '@/utils/typesUtils';
+import { asyncComputed } from '@vueuse/core';
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
+import { pick } from 'lodash-es';
+import { DateTime } from 'luxon';
 
 type Props = {
 	nodes?: IConnectedNode[];
@@ -66,8 +81,11 @@ const ndvStore = useNDVStore();
 const nodeTypesStore = useNodeTypesStore();
 const workflowsStore = useWorkflowsStore();
 const schemaPreviewStore = useSchemaPreviewStore();
+const environmentsStore = useEnvironmentsStore();
+const settingsStore = useSettingsStore();
 const posthogStore = usePostHog();
-const { getSchemaForExecutionData, getSchemaForJsonSchema, filterSchema } = useDataSchema();
+const { getSchemaForExecutionData, getSchemaForJsonSchema, getSchema, filterSchema } =
+	useDataSchema();
 const { closedNodes, flattenSchema, flattenMultipleSchemas, toggleLeaf, toggleNode } =
 	useFlattenSchema();
 const { getNodeInputData } = useNodeHelpers();
@@ -83,14 +101,6 @@ const toggleNodeAndScrollTop = (id: string) => {
 	scroller.value?.scrollToItem(0);
 };
 
-watch(
-	() => props.search,
-	(newSearch) => {
-		if (!newSearch) return;
-		closedNodes.value.clear();
-	},
-);
-
 const getNodeSchema = async (fullNode: INodeUi, connectedNode: IConnectedNode) => {
 	const pinData = workflowsStore.pinDataByNodeName(connectedNode.name);
 	const connectedOutputIndexes = connectedNode.indicies.length > 0 ? connectedNode.indicies : [0];
@@ -133,6 +143,74 @@ const isSchemaPreviewEnabled = computed(() =>
 	posthogStore.isVariantEnabled(SCHEMA_PREVIEW_EXPERIMENT.name, SCHEMA_PREVIEW_EXPERIMENT.variant),
 );
 
+const isVariablesEnabled = computed(
+	() => settingsStore.isEnterpriseFeatureEnabled[EnterpriseEditionFeature.Variables],
+);
+
+const contextSchema = computed(() => {
+	const $vars = environmentsStore.variablesAsObject;
+
+	const schemaSource: Record<string, unknown> = {
+		$now: DateTime.now().toISO(),
+		$today: DateTime.now().set({ hour: 0, minute: 0, second: 0, millisecond: 0 }).toISO(),
+		$vars,
+		$execution: {
+			id: PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
+			mode: 'test',
+			resumeUrl: i18n.baseText('dataMapping.schemaView.execution.resumeUrl'),
+		},
+		$workflow: pick(workflowsStore.workflow, ['id', 'name', 'active']),
+	};
+
+	return getSchema(schemaSource);
+});
+
+const contextItems = computed(() => {
+	const header: RenderHeader = {
+		id: 'variables',
+		type: 'header',
+		title: i18n.baseText('dataMapping.schemaView.variablesContextTitle'),
+		collapsable: true,
+		itemCount: null,
+	};
+
+	if (closedNodes.value.has(header.id)) return [header];
+
+	const fields: Renders[] = flattenSchema({
+		schema: contextSchema.value,
+		depth: 1,
+	}).flatMap((renderItem) => {
+		const isVars =
+			renderItem.type === 'item' && renderItem.depth === 1 && renderItem.title === '$vars';
+
+		if (isVars) {
+			const isVarsOpen = !closedNodes.value.has(renderItem.id);
+
+			if (!isVariablesEnabled.value) {
+				renderItem.collapsable = false;
+				renderItem.locked = true;
+				renderItem.lockedTooltip = i18n.baseText('dataMapping.schemaView.variablesUpgrade');
+
+				return renderItem;
+			}
+
+			if (isVarsOpen && environmentsStore.variables.length === 0) {
+				const variablesEmptyNotice: RenderNotice = {
+					type: 'notice',
+					id: 'notice-variablesEmpty',
+					level: renderItem.level ?? 0,
+					message: i18n.baseText('dataMapping.schemaView.variablesEmpty'),
+				};
+				return [renderItem, variablesEmptyNotice];
+			}
+		}
+
+		return renderItem;
+	});
+
+	return [header as Renders].concat(fields);
+});
+
 const nodeSchema = asyncComputed(async () => {
 	const search = props.search;
 	if (props.data.length === 0 && isSchemaPreviewEnabled.value) {
@@ -231,13 +309,34 @@ const items = computed(() => {
 		return flattenNodeSchema.value;
 	}
 
-	return flattenedNodes.value;
+	return flattenedNodes.value.concat(contextItems.value);
 });
 
 const noSearchResults = computed(() => {
 	return Boolean(props.search.trim()) && !Boolean(items.value.length);
 });
 
+watch(
+	() => props.search,
+	(newSearch) => {
+		if (!newSearch) return;
+		closedNodes.value.clear();
+	},
+);
+
+// Variables & context items should be collapsed by default
+watch(
+	contextItems,
+	(currentContextItems) => {
+		currentContextItems
+			.filter((item) => item.type === 'header')
+			.forEach((item) => {
+				closedNodes.value.add(item.id);
+			});
+	},
+	{ once: true, immediate: true },
+);
+
 const onDragStart = () => {
 	ndvStore.resetMappingTelemetry();
 };
@@ -332,6 +431,13 @@ const onDragEnd = (el: HTMLElement) => {
 						<N8nTooltip v-else-if="item.type === 'icon'" :content="item.tooltip" placement="top">
 							<N8nIcon :size="14" :icon="item.icon" class="icon" />
 						</N8nTooltip>
+
+						<div
+							v-else-if="item.type === 'notice'"
+							v-n8n-html="item.message"
+							class="notice"
+							:style="{ marginLeft: `calc(var(--spacing-l) + var(--spacing-l) * ${item.level})` }"
+						/>
 					</DynamicScrollerItem>
 				</template>
 			</DynamicScroller>
@@ -370,4 +476,11 @@ const onDragEnd = (el: HTMLElement) => {
 	color: var(--color-text-light);
 	margin-bottom: var(--spacing-s);
 }
+
+.notice {
+	padding-bottom: var(--spacing-xs);
+	color: var(--color-text-base);
+	font-size: var(--font-size-2xs);
+	line-height: var(--font-line-height-loose);
+}
 </style>

packages/frontend/editor-ui/src/components/VirtualSchemaHeader.vue

@@ -8,16 +8,16 @@ import { SCHEMA_PREVIEW_DOCS_URL } from '@/constants';
 
 const props = defineProps<{
 	title: string;
-	info?: string;
 	collapsable: boolean;
 	collapsed: boolean;
-	nodeType: INodeTypeDescription;
 	itemCount: number | null;
+	info?: string;
+	nodeType?: INodeTypeDescription;
 	preview?: boolean;
 }>();
 
 const i18n = useI18n();
-const isTrigger = computed(() => props.nodeType.group.includes('trigger'));
+const isTrigger = computed(() => Boolean(props.nodeType?.group.includes('trigger')));
 const emit = defineEmits<{
 	'click:toggle': [];
 }>();
@@ -31,6 +31,7 @@ const emit = defineEmits<{
 			</div>
 
 			<NodeIcon
+				v-if="nodeType"
 				class="icon"
 				:class="{ ['icon-trigger']: isTrigger }"
 				:node-type="nodeType"
@@ -51,7 +52,6 @@ const emit = defineEmits<{
 		<div
 			v-if="preview && !collapsed"
 			class="notice"
-			theme="warning"
 			data-test-id="schema-preview-warning"
 			@click.stop
 		>

packages/frontend/editor-ui/src/components/VirtualSchemaItem.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { N8nTooltip } from '@n8n/design-system';
 import TextWithHighlights from './TextWithHighlights.vue';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
@@ -19,6 +20,8 @@ type Props = {
 	collapsed?: boolean;
 	search?: string;
 	preview?: boolean;
+	locked?: boolean;
+	lockedTooltip?: string;
 };
 
 const props = defineProps<Props>();
@@ -43,18 +46,27 @@ const emit = defineEmits<{
 			:data-nest-level="level"
 			:data-value="expression"
 			:data-node-type="nodeType"
+			:data-target="!locked && 'mappable'"
 			:data-node-name="nodeName"
-			data-target="mappable"
 			class="pill"
 			:class="{
 				'pill--highlight': highlight,
 				'pill--preview': preview,
+				'pill--locked': locked,
 			}"
 			data-test-id="run-data-schema-node-name"
 		>
 			<FontAwesomeIcon class="type-icon" :icon size="sm" />
 			<TextWithHighlights class="title" :content="title" :search="props.search" />
 		</div>
+
+		<N8nTooltip v-if="locked" :disabled="!lockedTooltip" :popper-class="$style.tooltip">
+			<template #content>
+				<span v-n8n-html="lockedTooltip" />
+			</template>
+			<N8nIcon class="locked-icon" icon="lock" size="small" />
+		</N8nTooltip>
+
 		<TextWithHighlights
 			data-test-id="run-data-schema-item-value"
 			class="text"
@@ -140,11 +152,11 @@ const emit = defineEmits<{
 	color: var(--color-primary);
 }
 
-.draggable .pill {
+.draggable .pill:not(.pill--locked) {
 	cursor: grab;
 }
 
-.draggable .pill:hover {
+.draggable .pill:not(.pill--locked):hover {
 	background-color: var(--color-background-light);
 	border-color: var(--color-foreground-base);
 }
@@ -153,6 +165,11 @@ const emit = defineEmits<{
 	color: var(--color-text-light);
 }
 
+.locked-icon {
+	color: var(--color-text-light);
+	margin-left: var(--spacing-2xs);
+}
+
 .title {
 	white-space: nowrap;
 	overflow: hidden;
@@ -173,4 +190,14 @@ const emit = defineEmits<{
 .collapsed {
 	transform: rotateZ(-90deg);
 }
+
+.tooltip {
+	max-width: 260px;
+}
+</style>
+
+<style lang="css" module>
+.tooltip {
+	max-width: 260px;
+}
 </style>