feat(editor): mapping expressions from input table

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

@@ -0,0 +1,57 @@
+/* tslint:disable:variable-name */
+
+import N8nTree from './Tree.vue';
+import {StoryFn} from "@storybook/vue";
+
+export default {
+	title: 'Atoms/Tree',
+	component: N8nTree,
+};
+
+export const Default: StoryFn = (args, {argTypes}) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nTree,
+	},
+	template: `<n8n-tree v-bind="$props">
+		<template v-slot:label="{ label }">
+			<span>{{ label }}</span>
+		</template>
+		<template v-slot:value="{ value }">
+			<span>{{ value }}</span>
+		</template>
+	</n8n-tree>`,
+});
+
+Default.args = {
+	value: {
+		objectKey: {
+			nestedArrayKey: [
+				'in progress',
+				33958053,
+			],
+			stringKey: 'word',
+			aLongKey: 'Lorem ipsum dolor sit consectetur adipiscing elit. Sed dignissim aliquam ipsum mattis pellentesque. Phasellus ut ligula fermentum orci elementum dignissim. Vivamus interdum risus eget nibh placerat ultrices. Vivamus orci arcu, iaculis in nulla non, blandit molestie magna. Praesent tristique feugiat odio non vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fermentum purus diam, nec auctor elit consectetur nec. Vestibulum ultrices diam magna, in faucibus odio bibendum id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin lacus neque.',
+			objectKey: {
+				myKey: 'what\'s for lunch',
+				yourKey: 'prolle rewe wdyt',
+			},
+			id: 123,
+		},
+		hello: "world",
+		test: {
+			label: "A cool folder",
+			children: [
+				{
+					label: "A cool sub-folder 1",
+					children: [
+						{ label: "A cool sub-sub-folder 1" },
+						{ label: "A cool sub-sub-folder 2" },
+					],
+				},
+				{ label: "This one is not that cool" },
+			],
+		},
+	},
+};
+

packages/design-system/src/components/N8nTree/Tree.vue

@@ -0,0 +1,82 @@
+<template>
+	<div class="n8n-tree">
+		<div v-for="(label, i) in Object.keys(value || {})" :key="i" :class="{[nodeClass]: !!nodeClass, [$style.indent]: depth > 0}">
+			<div :class="$style.simple" v-if="isSimple(value[label])">
+				<slot v-if="$scopedSlots.label" name="label" v-bind:label="label" v-bind:path="getPath(label)" />
+				<span v-else>{{ label }}</span>
+				<span>:</span>
+				<slot v-if="$scopedSlots.value" name="value" v-bind:value="value[label]" />
+				<span v-else>{{ value[label] }}</span>
+			</div>
+			<div v-else>
+				<slot v-if="$scopedSlots.label" name="label" v-bind:label="label" v-bind:path="getPath(label)" />
+				<span v-else>{{ label }}</span>
+				<n8n-tree :path="getPath(label)" :depth="depth + 1" :value="value[label]" :nodeClass="nodeClass">
+					<template v-for="(index, name) in $scopedSlots" v-slot:[name]="data">
+						<slot :name="name" v-bind="data"></slot>
+					</template>
+				</n8n-tree>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	name: 'n8n-tree',
+	components: {
+	},
+	props: {
+		value: {
+		},
+		path: {
+			type: Array,
+			default: () => [],
+		},
+		depth: {
+			type: Number,
+			default: 0,
+		},
+		nodeClass: {
+			type: String,
+		},
+	},
+	methods: {
+		isSimple(data: unkown): boolean {
+			if (typeof data === 'object' && Object.keys(data).length === 0) {
+				return true;
+			}
+
+			if (Array.isArray(data) && data.length === 0) {
+				return true;
+			}
+
+			return typeof data !== 'object';
+		},
+		getPath(key: string): string[] {
+			if (Array.isArray(this.value)) {
+				return [...this.path, parseInt(key, 10)];
+			}
+			return [...this.path, key];
+		},
+	},
+});
+</script>
+
+<style lang="scss" module>
+
+$--spacing: var(--spacing-s);
+
+.indent {
+	margin-left: $--spacing;
+}
+
+.simple {
+	text-indent: calc($--spacing * -1);
+	margin-left: $--spacing;
+	max-width: 300px;
+}
+
+</style>

packages/design-system/src/components/N8nTree/__tests__/Tree.spec.ts

@@ -0,0 +1,74 @@
+import { render } from '@testing-library/vue';
+import N8nTree from '../Tree.vue';
+
+describe('components', () => {
+	describe('N8nTree', () => {
+		it('should render simple tree', () => {
+			const wrapper = render(N8nTree, {
+				props: {
+					value: {
+						"hello": "world",
+					},
+				},
+			});
+			expect(wrapper.html()).toMatchSnapshot();
+		});
+
+		it('should render tree', () => {
+			const wrapper = render(N8nTree, {
+				props: {
+					value: {
+						"hello": {
+							"test": "world",
+						},
+						"options": [
+							"yes",
+							"no",
+						],
+					},
+				},
+			});
+			expect(wrapper.html()).toMatchSnapshot();
+		});
+
+		it('should render tree with slots', () => {
+			const wrapper = render(N8nTree, {
+				props: {
+					value: {
+						"hello": {
+							"test": "world",
+						},
+						"options": [
+							"yes",
+							"no",
+						],
+					},
+				},
+				slots: {
+					label: "<span>label</span>",
+					value: "<span>value</span>",
+				},
+			});
+			expect(wrapper.html()).toMatchSnapshot();
+		});
+
+
+		it('should render each tree with node class', () => {
+			const wrapper = render(N8nTree, {
+				props: {
+					value: {
+						"hello": {
+							"test": "world",
+						},
+						"options": [
+							"yes",
+							"no",
+						],
+					},
+					nodeClass: "nodeClass",
+				},
+			});
+			expect(wrapper.html()).toMatchSnapshot();
+		});
+	});
+});

packages/design-system/src/components/N8nTree/__tests__/__snapshots__/Tree.spec.ts.snap

@@ -0,0 +1,87 @@
+// Vitest Snapshot v1
+
+exports[`components > N8nTree > should render each tree with node class 1`] = `
+"<div class=\\"n8n-tree\\">
+  <div class=\\"nodeClass\\">
+    <div><span>hello</span>
+      <div class=\\"n8n-tree\\">
+        <div class=\\"nodeClass _indent_1y4uu_1\\">
+          <div class=\\"_simple_1y4uu_5\\"><span>test</span><span>:</span><span>world</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class=\\"nodeClass\\">
+    <div><span>options</span>
+      <div class=\\"n8n-tree\\">
+        <div class=\\"nodeClass _indent_1y4uu_1\\">
+          <div class=\\"_simple_1y4uu_5\\"><span>0</span><span>:</span><span>yes</span></div>
+        </div>
+        <div class=\\"nodeClass _indent_1y4uu_1\\">
+          <div class=\\"_simple_1y4uu_5\\"><span>1</span><span>:</span><span>no</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`components > N8nTree > should render simple tree 1`] = `
+"<div class=\\"n8n-tree\\">
+  <div class=\\"\\">
+    <div class=\\"_simple_1y4uu_5\\"><span>hello</span><span>:</span><span>world</span></div>
+  </div>
+</div>"
+`;
+
+exports[`components > N8nTree > should render tree 1`] = `
+"<div class=\\"n8n-tree\\">
+  <div class=\\"\\">
+    <div><span>hello</span>
+      <div class=\\"n8n-tree\\">
+        <div class=\\"_indent_1y4uu_1\\">
+          <div class=\\"_simple_1y4uu_5\\"><span>test</span><span>:</span><span>world</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class=\\"\\">
+    <div><span>options</span>
+      <div class=\\"n8n-tree\\">
+        <div class=\\"_indent_1y4uu_1\\">
+          <div class=\\"_simple_1y4uu_5\\"><span>0</span><span>:</span><span>yes</span></div>
+        </div>
+        <div class=\\"_indent_1y4uu_1\\">
+          <div class=\\"_simple_1y4uu_5\\"><span>1</span><span>:</span><span>no</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`components > N8nTree > should render tree with slots 1`] = `
+"<div class=\\"n8n-tree\\">
+  <div class=\\"\\">
+    <div><span>label</span>
+      <div class=\\"n8n-tree\\">
+        <div class=\\"_indent_1y4uu_1\\">
+          <div class=\\"_simple_1y4uu_5\\"><span>label</span><span>:</span><span>value</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class=\\"\\">
+    <div><span>label</span>
+      <div class=\\"n8n-tree\\">
+        <div class=\\"_indent_1y4uu_1\\">
+          <div class=\\"_simple_1y4uu_5\\"><span>label</span><span>:</span><span>value</span></div>
+        </div>
+        <div class=\\"_indent_1y4uu_1\\">
+          <div class=\\"_simple_1y4uu_5\\"><span>label</span><span>:</span><span>value</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>"
+`;

packages/design-system/src/components/N8nTree/index.ts

@@ -0,0 +1,3 @@
+import Tree from './Tree.vue';
+
+export default Tree;

packages/design-system/src/plugins/n8nComponents.ts

@@ -35,6 +35,7 @@ import N8nTabs from '../components/N8nTabs';
 import N8nTag from '../components/N8nTag';
 import N8nText from '../components/N8nText';
 import N8nTooltip from '../components/N8nTooltip';
+import N8nTree from '../components/N8nTree';
 import N8nUsersList from '../components/N8nUsersList';
 import N8nUserSelect from '../components/N8nUserSelect';
 
@@ -76,6 +77,7 @@ export default {
 		app.component('n8n-tag', N8nTag);
 		app.component('n8n-text', N8nText);
 		app.component('n8n-tooltip', N8nTooltip);
+		app.component('n8n-tree', N8nTree);
 		app.component('n8n-users-list', N8nUsersList);
 		app.component('n8n-user-select', N8nUserSelect);
 	},

packages/design-system/src/styleguide/colors.stories.mdx

@@ -31,7 +31,7 @@ import ColorCircles from './ColorCircles.vue';
 <Canvas>
 	<Story name="secondary">
 		{{
-			template: `<color-circles :colors="['--color-secondary']" />`,
+			template: `<color-circles :colors="['--color-secondary', '--color-secondary-tint-1', '--color-secondary-tint-2']" />`,
 			components: {
 				ColorCircles,
 			},

packages/design-system/theme/src/_tokens.scss

@@ -384,8 +384,8 @@
 
 	--color-json-default: #5045A1;
 	--color-json-null:  var(--color-danger);
-	--color-json-boolean: #1d8ce0;
-	--color-json-number: #1d8ce0;
+	--color-json-boolean: var(--color-success);
+	--color-json-number: var(--color-success);
 	--color-json-string: #5045A1;
 	--color-json-key: var(--color-text-dark);
 	--color-json-brackets: var(--color-text-dark);

packages/editor-ui/src/Interface.ts

@@ -221,6 +221,7 @@ export interface IRunDataUi {
 export interface ITableData {
 	columns: string[];
 	data: GenericValue[][];
+	hasJson: {[key: string]: boolean};
 }
 
 export interface IVariableItemSelected {