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

packages/frontend/editor-ui/src/composables/useDataSchema.ts

@@ -1,20 +1,20 @@
-import { ref } from 'vue';
-import type { Optional, Primitives, Schema, INodeUi, SchemaType } from '@/Interface';
+import { useI18n } from '@/composables/useI18n';
+import type { INodeUi, Optional, Primitives, Schema, SchemaType } from '@/Interface';
+import { useWorkflowsStore } from '@/stores/workflows.store';
+import { generatePath, getNodeParentExpression } from '@/utils/mappingUtils';
+import { isObject } from '@/utils/objectUtils';
+import { isObj } from '@/utils/typeGuards';
+import { isPresent, shorten } from '@/utils/typesUtils';
+import type { JSONSchema7, JSONSchema7Definition, JSONSchema7TypeName } from 'json-schema';
+import { merge } from 'lodash-es';
 import {
-	type ITaskDataConnections,
 	type IDataObject,
 	type INodeExecutionData,
 	type INodeTypeDescription,
+	type ITaskDataConnections,
 	NodeConnectionType,
 } from 'n8n-workflow';
-import { merge } from 'lodash-es';
-import { generatePath, getMappedExpression } from '@/utils/mappingUtils';
-import { isObj } from '@/utils/typeGuards';
-import { useWorkflowsStore } from '@/stores/workflows.store';
-import { isPresent, shorten } from '@/utils/typesUtils';
-import { useI18n } from '@/composables/useI18n';
-import type { JSONSchema7, JSONSchema7Definition, JSONSchema7TypeName } from 'json-schema';
-import { isObject } from '@/utils/objectUtils';
+import { ref } from 'vue';
 
 export function useDataSchema() {
 	function getSchema(
@@ -236,29 +236,31 @@ export type SchemaNode = {
 };
 
 export type RenderItem = {
+	type: 'item';
+	id: string;
+	icon: string;
 	title?: string;
 	path?: string;
 	level?: number;
 	depth?: number;
 	expression?: string;
 	value?: string;
-	id: string;
-	icon: string;
 	collapsable?: boolean;
 	nodeName?: string;
 	nodeType?: INodeUi['type'];
 	preview?: boolean;
-	type: 'item';
+	locked?: boolean;
+	lockedTooltip?: string;
 };
 
 export type RenderHeader = {
+	type: 'header';
 	id: string;
 	title: string;
-	info?: string;
 	collapsable: boolean;
-	nodeType: INodeTypeDescription;
 	itemCount: number | null;
-	type: 'header';
+	info?: string;
+	nodeType?: INodeTypeDescription;
 	preview?: boolean;
 };
 
@@ -269,7 +271,14 @@ export type RenderIcon = {
 	tooltip: string;
 };
 
-type Renders = RenderHeader | RenderItem | RenderIcon;
+export type RenderNotice = {
+	id: string;
+	type: 'notice';
+	level: number;
+	message: string;
+};
+
+export type Renders = RenderHeader | RenderItem | RenderIcon | RenderNotice;
 
 const icons = {
 	object: 'cube',
@@ -333,14 +342,18 @@ export const useFlattenSchema = () => {
 
 	const flattenSchema = ({
 		schema,
-		node = { name: '', type: '' },
+		nodeType,
+		nodeName,
+		expressionPrefix = '',
 		depth = 0,
 		prefix = '',
 		level = 0,
 		preview,
 	}: {
 		schema: Schema;
-		node?: { name: string; type: string };
+		expressionPrefix?: string;
+		nodeType?: string;
+		nodeName?: string;
 		depth?: number;
 		prefix?: string;
 		level?: number;
@@ -351,13 +364,9 @@ export const useFlattenSchema = () => {
 			return [emptyItem()];
 		}
 
-		const expression = getMappedExpression({
-			nodeName: node.name,
-			distanceFromActive: depth,
-			path: schema.path,
-		});
+		const expression = `{{ ${expressionPrefix ? expressionPrefix + schema.path : schema.path.slice(1)} }}`;
 
-		const id = `${node.name}-${expression}`;
+		const id = expression;
 
 		if (Array.isArray(schema.value)) {
 			const items: RenderItem[] = [];
@@ -372,8 +381,8 @@ export const useFlattenSchema = () => {
 					icon: getIconBySchemaType(schema.type),
 					id,
 					collapsable: true,
-					nodeName: node.name,
-					nodeType: node.type,
+					nodeType,
+					nodeName,
 					type: 'item',
 					preview,
 				});
@@ -389,7 +398,9 @@ export const useFlattenSchema = () => {
 						const itemPrefix = schema.type === 'array' ? schema.key : '';
 						return flattenSchema({
 							schema: item,
-							node,
+							expressionPrefix,
+							nodeType,
+							nodeName,
 							depth,
 							prefix: itemPrefix,
 							level: level + 1,
@@ -410,8 +421,8 @@ export const useFlattenSchema = () => {
 					id,
 					icon: getIconBySchemaType(schema.type),
 					collapsable: false,
-					nodeType: node.type,
-					nodeName: node.name,
+					nodeType,
+					nodeName,
 					type: 'item',
 					preview,
 				},
@@ -450,7 +461,19 @@ export const useFlattenSchema = () => {
 				return acc;
 			}
 
-			acc.push(...flattenSchema(item));
+			acc = acc.concat(
+				flattenSchema({
+					schema: item.schema,
+					depth: item.depth,
+					nodeType: item.node.type,
+					nodeName: item.node.name,
+					preview: item.preview,
+					expressionPrefix: getNodeParentExpression({
+						nodeName: item.node.name,
+						distanceFromActive: item.depth,
+					}),
+				}),
+			);
 
 			if (item.preview) {
 				acc.push(moreFieldsItem());