From 4036e9131da92b0fca60597544e1c402c3d7ca19 Mon Sep 17 00:00:00 2001
From: Mutasem <mutdmour@gmail.com>
Date: Fri, 5 Aug 2022 15:13:45 +0200
Subject: [PATCH] update styles

---
 .../src/components/N8nTree/Tree.vue           |  6 ++++-
 .../src/components/N8nTree/TreeNode.vue       | 27 ++++++++++++++-----
 .../editor-ui/src/components/RunDataTable.vue | 10 ++++---
 3 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/packages/design-system/src/components/N8nTree/Tree.vue b/packages/design-system/src/components/N8nTree/Tree.vue
index ee0d899cfd..3ed2b44c31 100644
--- a/packages/design-system/src/components/N8nTree/Tree.vue
+++ b/packages/design-system/src/components/N8nTree/Tree.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="n8n-tree">
-		<n8n-tree-node :input="input"></n8n-tree-node>
+		<n8n-tree-node :input="input" :path="path"></n8n-tree-node>
 	</div>
 </template>
 
@@ -17,6 +17,10 @@ export default Vue.extend({
 		input: {
 			type: Object,
 		},
+		path: {
+			type: String,
+			default: '',
+		},
 	},
 	computed: {
 	},
diff --git a/packages/design-system/src/components/N8nTree/TreeNode.vue b/packages/design-system/src/components/N8nTree/TreeNode.vue
index 80d7fbee00..50b3d17133 100644
--- a/packages/design-system/src/components/N8nTree/TreeNode.vue
+++ b/packages/design-system/src/components/N8nTree/TreeNode.vue
@@ -1,15 +1,14 @@
 <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 v-for="(label, i) in Object.keys(input)" :key="i" :class="{[$style.indent]: depth > 0}">
 			<div :class="$style.simple" v-if="isSimple(input[label])">
-				<span>{{ label }} :</span>
-				<span>{{ input[label] }}</span>
+				<span>{{ label }} :&nbsp;</span>
+				<span :class="$style.value">{{ input[label] }}</span>
 			</div>
 			<div v-else>
 				<span>{{ label }}</span>
-				<div :class="$style.indent">
-					<n8n-tree-node :input="input[label]" />
+				<div>
+					<n8n-tree-node :path="getPath(label)" :depth="depth + 1" :input="input[label]" />
 				</div>
 			</div>
 		</div>
@@ -27,6 +26,14 @@ export default Vue.extend({
 		input: {
 			type: Object,
 		},
+		path: {
+			type: String,
+			default: '',
+		},
+		depth: {
+			type: Number,
+			default: 0,
+		},
 	},
 	computed: {
 	},
@@ -34,6 +41,9 @@ export default Vue.extend({
 		isSimple(data: unkown): boolean {
 			return typeof data !== 'object';
 		},
+		getPath(key: string): string {
+			return `${this.path}["${key}"]`;
+		},
 	},
 });
 </script>
@@ -48,4 +58,9 @@ export default Vue.extend({
 	margin-left: var(--spacing-l);
 }
 
+
+.value {
+	word-break: break-all;
+}
+
 </style>
diff --git a/packages/editor-ui/src/components/RunDataTable.vue b/packages/editor-ui/src/components/RunDataTable.vue
index 1896dd11e6..df5c0c5efa 100644
--- a/packages/editor-ui/src/components/RunDataTable.vue
+++ b/packages/editor-ui/src/components/RunDataTable.vue
@@ -55,8 +55,8 @@
 						@mouseenter="onMouseEnterCell"
 						@mouseleave="onMouseLeaveCell"
 					>
-						<!-- <span v-if="isSimple()">{{ [null, undefined].includes(data) ? '&nbsp;' : data }}</span> -->
-						<n8n-tree :input="data" />
+						<span v-if="isSimple(data)">{{ [null, undefined].includes(data) ? '&nbsp;' : data }}</span>
+						<n8n-tree path="$json" :input="data" />
 					</td>
 				</tr>
 			</tbody>
@@ -167,6 +167,9 @@ export default Vue.extend({
 				});
 			}, 1000); // ensure dest data gets set if drop
 		},
+		isSimple(data: unknown): boolean {
+			return typeof data !== 'object';
+		},
 	},
 	watch: {
 		focusedMappableInput (curr: boolean) {
@@ -206,15 +209,14 @@ export default Vue.extend({
 		border-left: var(--border-base);
 		position: sticky;
 		top: 0;
-		max-width: 300px;
 	}
 
 	td {
+		vertical-align: top;
 		padding: var(--spacing-2xs);
 		border-bottom: var(--border-base);
 		border-left: var(--border-base);
 		overflow-wrap: break-word;
-		max-width: 300px;
 		white-space: pre-wrap;
 	}