From b0c158c64fa7df7da7fefb6ee24223ce650318b2 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Mon, 12 Dec 2022 10:08:29 +0100
Subject: [PATCH] fix(editor): Schema view shows checkbox in case of empty data
 (#4889)

* fix(editor): Schema view show nothing in case of empty data

* fix(editor): Schema view test for empty data
---
 packages/editor-ui/src/components/RunData.vue |   2 +-
 .../src/components/RunDataSchema.test.ts      | 100 ++++++++++--------
 .../src/components/RunDataSchema.vue          |   8 +-
 .../__snapshots__/RunDataSchema.test.ts.snap  |  12 ++-
 4 files changed, 74 insertions(+), 48 deletions(-)

diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 9bdd8463d1ca2..bda269b2dbcdd 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -250,7 +250,7 @@
 			/>
 
 			<run-data-schema
-				v-else-if="hasNodeRun && displayMode === 'schema' && jsonData?.length > 0"
+				v-else-if="hasNodeRun && displayMode === 'schema'"
 				:data="jsonData"
 				:mappingEnabled="mappingEnabled"
 				:distanceFromActive="distanceFromActive"
diff --git a/packages/editor-ui/src/components/RunDataSchema.test.ts b/packages/editor-ui/src/components/RunDataSchema.test.ts
index 9d71ab3f13a9d..80acccc806445 100644
--- a/packages/editor-ui/src/components/RunDataSchema.test.ts
+++ b/packages/editor-ui/src/components/RunDataSchema.test.ts
@@ -1,59 +1,69 @@
 import { PiniaVuePlugin } from 'pinia';
 import { createTestingPinia } from '@pinia/testing';
-import { render } from '@testing-library/vue';
+import { render, cleanup } from '@testing-library/vue';
 import RunDataJsonSchema from '@/components/RunDataSchema.vue';
 import { STORES } from "@/constants";
 
 describe('RunDataJsonSchema.vue', () => {
-	it('renders json schema properly', () => {
-		const { container } = render(RunDataJsonSchema, {
-				pinia: createTestingPinia({
-					initialState: {
-						[STORES.SETTINGS]: {
-							settings: {
-								templates: {
-									enabled: true,
-									host: 'https://api.n8n.io/api/',
-								},
-							},
+	const renderOptions = {
+		pinia: createTestingPinia({
+			initialState: {
+				[STORES.SETTINGS]: {
+					settings: {
+						templates: {
+							enabled: true,
+							host: 'https://api.n8n.io/api/',
 						},
 					},
-				}),
-				stubs: ['font-awesome-icon'],
-				props: {
-					mappingEnabled: true,
-					distanceFromActive: 1,
-					runIndex: 1,
-					totalRuns: 2,
-					node: {
-						parameters: {
-							keepOnlySet: false,
-							values: {},
-							options: {},
-						},
-						id: '820ea733-d8a6-4379-8e73-88a2347ea003',
-						name: 'Set',
-						type: 'n8n-nodes-base.set',
-						typeVersion: 1,
-						position: [
-							380,
-							1060,
-						],
-						disabled: false,
-					},
-					data: [{ name: 'John', age: 22, hobbies: ['surfing', 'traveling'] }, { name: 'Joe', age: 33, hobbies: ['skateboarding', 'gaming'] }],
 				},
-				mocks: {
-					$locale: {
-						baseText() {
-							return '';
-						},
-					},
-					$store: {
-						getters: {},
-					},
+			},
+		}),
+		stubs: ['font-awesome-icon'],
+		props: {
+			mappingEnabled: true,
+			distanceFromActive: 1,
+			runIndex: 1,
+			totalRuns: 2,
+			node: {
+				parameters: {
+					keepOnlySet: false,
+					values: {},
+					options: {},
+				},
+				id: '820ea733-d8a6-4379-8e73-88a2347ea003',
+				name: 'Set',
+				type: 'n8n-nodes-base.set',
+				typeVersion: 1,
+				position: [
+					380,
+					1060,
+				],
+				disabled: false,
+			},
+			data: [{}],
+		},
+		mocks: {
+			$locale: {
+				baseText() {
+					return '';
 				},
 			},
+		},
+	};
+
+	beforeEach(cleanup);
+
+	it('renders schema for empty data', () => {
+		const { container } = render(RunDataJsonSchema, renderOptions,
+			vue => {
+				vue.use(PiniaVuePlugin);
+			});
+		expect(container).toMatchSnapshot();
+	});
+
+	it('renders schema for data', () => {
+		renderOptions.props.data = [{ name: 'John', age: 22, hobbies: ['surfing', 'traveling'] }, { name: 'Joe', age: 33, hobbies: ['skateboarding', 'gaming'] }];
+		const { container } = render(RunDataJsonSchema, renderOptions,
 			vue => {
 				vue.use(PiniaVuePlugin);
 			});
diff --git a/packages/editor-ui/src/components/RunDataSchema.vue b/packages/editor-ui/src/components/RunDataSchema.vue
index 3321669c9fac6..8010a748424c7 100644
--- a/packages/editor-ui/src/components/RunDataSchema.vue
+++ b/packages/editor-ui/src/components/RunDataSchema.vue
@@ -8,7 +8,7 @@ import { useWebhooksStore } from "@/stores/webhooks";
 import { runExternalHook } from "@/mixins/externalHooks";
 import { telemetry } from "@/plugins/telemetry";
 import { IDataObject } from "n8n-workflow";
-import { getSchema, mergeDeep } from "@/utils";
+import { getSchema, isEmpty, mergeDeep } from "@/utils";
 
 type Props = {
 	data: IDataObject[]
@@ -32,6 +32,10 @@ const schema = computed<Schema>(() => {
 	return getSchema(mergeDeep([head, ...tail, head]));
 });
 
+const isDataEmpty = computed(() => {
+	return isEmpty(props.data);
+});
+
 const onDragStart = (el: HTMLElement) => {
 	if (el && el.dataset?.path) {
 		draggingPath.value = el.dataset.path;
@@ -67,7 +71,9 @@ const onDragEnd = (el: HTMLElement) => {
 
 <template>
 	<div :class="$style.schemaWrapper">
+		<div v-if="isDataEmpty" />
 		<draggable
+			v-else
 			type="mapping"
 			targetDataKey="mappable"
 			:disabled="!mappingEnabled"
diff --git a/packages/editor-ui/src/components/__snapshots__/RunDataSchema.test.ts.snap b/packages/editor-ui/src/components/__snapshots__/RunDataSchema.test.ts.snap
index 04fc0b99082a2..ec77e1e866404 100644
--- a/packages/editor-ui/src/components/__snapshots__/RunDataSchema.test.ts.snap
+++ b/packages/editor-ui/src/components/__snapshots__/RunDataSchema.test.ts.snap
@@ -1,6 +1,6 @@
 // Vitest Snapshot v1
 
-exports[`RunDataJsonSchema.vue > renders json schema properly 1`] = `
+exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
 <div>
   <div
     class="_schemaWrapper_1w572_1"
@@ -251,3 +251,13 @@ exports[`RunDataJsonSchema.vue > renders json schema properly 1`] = `
   </div>
 </div>
 `;
+
+exports[`RunDataJsonSchema.vue > renders schema for empty data 1`] = `
+<div>
+  <div
+    class="_schemaWrapper_1w572_1"
+  >
+    <div />
+  </div>
+</div>
+`;