From bb4e08c0766487b150fad4ec3ee301d765d413d3 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Tue, 18 Oct 2022 15:22:33 +0200
Subject: [PATCH] fix(editor): show null value in table view (#4346)

* fix(editor): remove code that never runs from table view

* fix(editor): show null in table view

* fix(editor): handle nil values properly

* fix(editor): add double quotes around strings

* fix(editor): remove unused function

* Revert "fix(editor): remove code that never runs from table view"

This reverts commit 167312d0592db5a975c710a5249a5b806bf8f9c5.

* fix(editor): applying Max's review
---
 .../editor-ui/src/components/RunDataTable.vue   | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/editor-ui/src/components/RunDataTable.vue b/packages/editor-ui/src/components/RunDataTable.vue
index b03fc9bb7..6a529cc35 100644
--- a/packages/editor-ui/src/components/RunDataTable.vue
+++ b/packages/editor-ui/src/components/RunDataTable.vue
@@ -103,9 +103,7 @@
 							@mouseleave="onMouseLeaveCell"
 							:class="hasJsonInColumn(index2) ? $style.minColWidth : $style.limitColWidth"
 						>
-							<span v-if="isSimple(data)" :class="$style.value">{{
-								[null, undefined].includes(data) ? '&nbsp;' : data
-							}}</span>
+							<span v-if="isSimple(data)" :class="{[$style.value]: true, [$style.empty]: isEmpty(data)}">{{ getValueToRender(data) }}</span>
 							<n8n-tree :nodeClass="$style.nodeClass" v-else :value="data">
 								<template v-slot:label="{ label, path }">
 									<span
@@ -315,11 +313,12 @@ export default mixins(externalHooks).extend({
 
 			return `{{ $node["${this.node.name}"].json["${column}"]${expr} }}`;
 		},
-		isEmpty(value: unknown) {
+		isEmpty(value: unknown): boolean {
 			return (
 				value === '' ||
 				(Array.isArray(value) && value.length === 0) ||
-				(typeof value === 'object' && value !== null && Object.keys(value).length === 0)
+				(typeof value === 'object' && value !== null && Object.keys(value).length === 0) ||
+				(value === null || value === undefined)
 			);
 		},
 		getValueToRender(value: unknown) {
@@ -338,6 +337,10 @@ export default mixins(externalHooks).extend({
 				return this.$locale.baseText('runData.emptyObject');
 			}
 
+			if (value === null || value === undefined) {
+				return `[${value}]`;
+			}
+
 			return value;
 		},
 		onDragStart() {
@@ -386,7 +389,9 @@ export default mixins(externalHooks).extend({
 			}, 1000); // ensure dest data gets set if drop
 		},
 		isSimple(data: unknown): boolean {
-			return typeof data !== 'object';
+			return (typeof data !== 'object' || data === null) ||
+				(Array.isArray(data) && data.length === 0) ||
+				(typeof data === 'object' && Object.keys(data).length === 0);
 		},
 		hasJsonInColumn(colIndex: number): boolean {
 			return this.tableData.hasJson[this.tableData.columns[colIndex]];