From 020bd3635444d83f1aef310714470140dcac7c6e Mon Sep 17 00:00:00 2001
From: Tomi Turtiainen <10324676+tomi@users.noreply.github.com>
Date: Fri, 31 May 2024 11:33:52 +0300
Subject: [PATCH] fix(editor): Show correct schema for output with falsy keys
 (#9556)

---
 .../src/components/RunDataSchema.vue          | 14 +++++++----
 .../__tests__/RunDataSchema.test.ts           | 23 +++++++++++++++++++
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/packages/editor-ui/src/components/RunDataSchema.vue b/packages/editor-ui/src/components/RunDataSchema.vue
index 5496c1406a..703081c5fe 100644
--- a/packages/editor-ui/src/components/RunDataSchema.vue
+++ b/packages/editor-ui/src/components/RunDataSchema.vue
@@ -6,7 +6,6 @@ import Draggable from '@/components/Draggable.vue';
 import { useNDVStore } from '@/stores/ndv.store';
 import { telemetry } from '@/plugins/telemetry';
 import type { IDataObject } from 'n8n-workflow';
-import { isEmpty } from '@/utils/typesUtils';
 import { useExternalHooks } from '@/composables/useExternalHooks';
 import { i18n } from '@/plugins/i18n';
 import MappingPill from './MappingPill.vue';
@@ -33,7 +32,14 @@ const { getSchemaForExecutionData } = useDataSchema();
 
 const schema = computed(() => getSchemaForExecutionData(props.data));
 
-const isDataEmpty = computed(() => isEmpty(props.data));
+const isDataEmpty = computed(() => {
+	// Utilize the generated schema instead of looping over the entire data again
+	// The schema for empty data is { type: 'object' | 'array', value: [] }
+	const isObjectOrArray = schema.value.type === 'object' || schema.value.type === 'array';
+	const isEmpty = Array.isArray(schema.value.value) && schema.value.value.length === 0;
+
+	return isObjectOrArray && isEmpty;
+});
 
 const highlight = computed(() => ndvStore.highlightDraggables);
 
@@ -51,11 +57,11 @@ const onDragEnd = (el: HTMLElement) => {
 		const mappingTelemetry = ndvStore.mappingTelemetry;
 		const telemetryPayload = {
 			src_node_type: props.node?.type,
-			src_field_name: el.dataset.name || '',
+			src_field_name: el.dataset.name ?? '',
 			src_nodes_back: props.distanceFromActive,
 			src_run_index: props.runIndex,
 			src_runs_total: props.totalRuns,
-			src_field_nest_level: el.dataset.depth || 0,
+			src_field_nest_level: el.dataset.depth ?? 0,
 			src_view: 'schema',
 			src_element: el,
 			success: false,
diff --git a/packages/editor-ui/src/components/__tests__/RunDataSchema.test.ts b/packages/editor-ui/src/components/__tests__/RunDataSchema.test.ts
index 2c8cfc4c08..580980c48b 100644
--- a/packages/editor-ui/src/components/__tests__/RunDataSchema.test.ts
+++ b/packages/editor-ui/src/components/__tests__/RunDataSchema.test.ts
@@ -84,4 +84,27 @@ describe('RunDataJsonSchema.vue', () => {
 		});
 		expect(container).toMatchSnapshot();
 	});
+
+	it('renders no data to show for data empty objects', () => {
+		const renderResult = renderComponent({
+			props: {
+				data: [{}, {}],
+			},
+		});
+
+		expect(renderResult.getByText(/No data to show/)).toBeInTheDocument();
+	});
+
+	test.each([[[{ tx: false }, { tx: false }]], [[{ tx: '' }, { tx: '' }]], [[{ tx: [] }]]])(
+		'renders schema instead of showing no data for %o',
+		(data) => {
+			const renderResult = renderComponent({
+				props: {
+					data,
+				},
+			});
+
+			expect(renderResult.queryByText(/No data to show/)).not.toBeInTheDocument();
+		},
+	);
 });