From 26c08e041e80a38ddeaafffc86ac83b29475888b Mon Sep 17 00:00:00 2001
From: Mutasem <mutdmour@gmail.com>
Date: Fri, 5 Aug 2022 14:42:21 +0200
Subject: [PATCH] implement tree render

---
 .../src/components/N8nTree/Tree.stories.ts    | 50 ++++++++++++++++++
 .../src/components/N8nTree/Tree.vue           | 27 ++++++++++
 .../src/components/N8nTree/TreeNode.vue       | 51 +++++++++++++++++++
 .../src/components/N8nTree/index.ts           |  3 ++
 .../design-system/src/components/index.ts     |  2 +
 .../editor-ui/src/components/RunDataTable.vue |  5 +-
 packages/editor-ui/src/plugins/components.ts  |  2 +
 7 files changed, 139 insertions(+), 1 deletion(-)
 create mode 100644 packages/design-system/src/components/N8nTree/Tree.stories.ts
 create mode 100644 packages/design-system/src/components/N8nTree/Tree.vue
 create mode 100644 packages/design-system/src/components/N8nTree/TreeNode.vue
 create mode 100644 packages/design-system/src/components/N8nTree/index.ts

diff --git a/packages/design-system/src/components/N8nTree/Tree.stories.ts b/packages/design-system/src/components/N8nTree/Tree.stories.ts
new file mode 100644
index 0000000000..69e11a2fc4
--- /dev/null
+++ b/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" },
+			],
+		},
+	},
+};
+
diff --git a/packages/design-system/src/components/N8nTree/Tree.vue b/packages/design-system/src/components/N8nTree/Tree.vue
new file mode 100644
index 0000000000..ee0d899cfd
--- /dev/null
+++ b/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>
diff --git a/packages/design-system/src/components/N8nTree/TreeNode.vue b/packages/design-system/src/components/N8nTree/TreeNode.vue
new file mode 100644
index 0000000000..80d7fbee00
--- /dev/null
+++ b/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>
diff --git a/packages/design-system/src/components/N8nTree/index.ts b/packages/design-system/src/components/N8nTree/index.ts
new file mode 100644
index 0000000000..eb6e49c351
--- /dev/null
+++ b/packages/design-system/src/components/N8nTree/index.ts
@@ -0,0 +1,3 @@
+import Tree from './Tree.vue';
+
+export default Tree;
diff --git a/packages/design-system/src/components/index.ts b/packages/design-system/src/components/index.ts
index 57c4356ef1..19ba6d37a4 100644
--- a/packages/design-system/src/components/index.ts
+++ b/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,
diff --git a/packages/editor-ui/src/components/RunDataTable.vue b/packages/editor-ui/src/components/RunDataTable.vue
index 398478aa63..1896dd11e6 100644
--- a/packages/editor-ui/src/components/RunDataTable.vue
+++ b/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>
diff --git a/packages/editor-ui/src/plugins/components.ts b/packages/editor-ui/src/plugins/components.ts
index 07c750cc6c..572a126b62 100644
--- a/packages/editor-ui/src/plugins/components.ts
+++ b/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);