implement tree render

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

@@ -0,0 +1,50 @@
+/* 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"></n8n-tree>`,
+});
+
+Default.args = {
+	input: {
+		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,27 @@
+<template>
+	<div class="n8n-tree">
+		<n8n-tree-node :input="input"></n8n-tree-node>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import N8nTreeNode from './TreeNode.vue';
+
+export default Vue.extend({
+	name: 'n8n-tree',
+	components: {
+		N8nTreeNode,
+	},
+	props: {
+		input: {
+			type: Object,
+		},
+	},
+	computed: {
+	},
+});
+</script>
+
+<style lang="scss" module>
+</style>

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

@@ -0,0 +1,51 @@
+<template>
+	<div class="n8n-tree-node">
+		<div v-if="isSimple(input)">{{ input }}</div>
+		<div v-else v-for="(label, i) in Object.keys(input)" :key="i">
+			<div :class="$style.simple" v-if="isSimple(input[label])">
+				<span>{{ label }} :</span>
+				<span>{{ input[label] }}</span>
+			</div>
+			<div v-else>
+				<span>{{ label }}</span>
+				<div :class="$style.indent">
+					<n8n-tree-node :input="input[label]" />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	name: 'n8n-tree-node',
+	components: {
+	},
+	props: {
+		input: {
+			type: Object,
+		},
+	},
+	computed: {
+	},
+	methods: {
+		isSimple(data: unkown): boolean {
+			return typeof data !== 'object';
+		},
+	},
+});
+</script>
+
+<style lang="scss" module>
+.indent {
+	margin-left: var(--spacing-l);
+}
+
+.simple {
+	text-indent: -24px;
+	margin-left: var(--spacing-l);
+}
+
+</style>

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

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

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

@@ -71,6 +71,7 @@ import N8nTabs from './N8nTabs';
 import N8nTag from './N8nTag';
 import N8nText from './N8nText';
 import N8nTooltip from './N8nTooltip';
+import N8nTree from './N8nTree';
 import N8nUsersList from './N8nUsersList';
 import N8nUserSelect from './N8nUserSelect';
 
@@ -114,6 +115,7 @@ export {
 	N8nTags,
 	N8nTag,
 	N8nText,
+	N8nTree,
 	N8nTooltip,
 	N8nUsersList,
 	N8nUserSelect,

packages/editor-ui/src/components/RunDataTable.vue

@@ -54,7 +54,10 @@
 						:data-col="index2"
 						@mouseenter="onMouseEnterCell"
 						@mouseleave="onMouseLeaveCell"
-					>{{ [null, undefined].includes(data) ? '&nbsp;' : data }}</td>
+					>
+						<!-- <span v-if="isSimple()">{{ [null, undefined].includes(data) ? '&nbsp;' : data }}</span> -->
+						<n8n-tree :input="data" />
+					</td>
 				</tr>
 			</tbody>
 		</table>

packages/editor-ui/src/plugins/components.ts

@@ -79,6 +79,7 @@ import {
 	N8nTags,
 	N8nTag,
 	N8nText,
+	N8nTree,
 	N8nTooltip,
 } from 'n8n-design-system';
 import { ElMessageBoxOptions } from "element-ui/types/message-box";
@@ -119,6 +120,7 @@ Vue.use(N8nRadioButtons);
 Vue.component('n8n-square-button', N8nSquareButton);
 Vue.use(N8nTags);
 Vue.component('n8n-tabs', N8nTabs);
+Vue.component('n8n-tree', N8nTree);
 Vue.use(N8nTag);
 Vue.component('n8n-text', N8nText);
 Vue.use(N8nTooltip);