fix(editor): Schema view render empty data (#4902)

* fix(editor): Schema view render empty data

* fix(editor): Schema view switch n8n-alert with n8n-info-tip

* Revert "fix(editor): Schema view render empty data"

This reverts commit 0294b5e8 for Alert component

* chore(editor): code styling fix

* fix(editor): Table view empty data hint

* Revert "fix(editor): Table view empty data hint"

This reverts commit d42dabf2c5.

packages/editor-ui/src/__tests__/setup.ts

@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom';
 import Vue from 'vue';
 import '../plugins';
+import { I18nPlugin } from '@/plugins/i18n';
 
 Vue.config.productionTip = false;
 Vue.config.devtools = false;
@@ -9,4 +10,5 @@ Vue.config.devtools = false;
 // Without having this 3rd party library imported like this, any component test using 'vue-json-pretty' fail with:
 // [Vue warn]: Failed to mount component: template or render function not defined.
 Vue.component('vue-json-pretty', require('vue-json-pretty').default);
+Vue.use((vue) => I18nPlugin(vue));
 

packages/editor-ui/src/components/RunDataSchema.test.ts

@@ -42,13 +42,6 @@ describe('RunDataJsonSchema.vue', () => {
 			},
 			data: [{}],
 		},
-		mocks: {
-			$locale: {
-				baseText() {
-					return '';
-				},
-			},
-		},
 	};
 
 	beforeEach(cleanup);

packages/editor-ui/src/components/RunDataSchema.vue

@@ -9,6 +9,7 @@ import { runExternalHook } from "@/mixins/externalHooks";
 import { telemetry } from "@/plugins/telemetry";
 import { IDataObject } from "n8n-workflow";
 import { getSchema, isEmpty, mergeDeep } from "@/utils";
+import { i18n } from '@/plugins/i18n';
 
 type Props = {
 	data: IDataObject[]
@@ -71,7 +72,7 @@ const onDragEnd = (el: HTMLElement) => {
 
 <template>
 	<div :class="$style.schemaWrapper">
-		<div v-if="isDataEmpty" />
+		<n8n-info-tip v-if="isDataEmpty">{{ i18n.baseText('dataMapping.schemaView.emptyData') }}</n8n-info-tip>
 		<draggable
 			v-else
 			type="mapping"
@@ -114,6 +115,10 @@ const onDragEnd = (el: HTMLElement) => {
 	height: 100%;
 	width: 100%;
 	background-color: var(--color-background-base);
+
+	> div[class*="info"] {
+		padding: 0 var(--spacing-s);
+	}
 }
 
 .schema {

packages/editor-ui/src/components/RunDataSchemaItem.vue

@@ -79,7 +79,7 @@ const getIconBySchemaType = (type: Schema['type']): string => {
 			</span>
 		</div>
 		<span v-if="text" :class="$style.text">{{ text }}</span>
-		<input :id="subKey" type="checkbox" checked />
+		<input v-if="level > 0 && isSchemaValueArray" :id="subKey" type="checkbox" checked />
 		<label v-if="level > 0 && isSchemaValueArray" :class="$style.toggle" :for="subKey">
 			<font-awesome-icon icon="angle-up" />
 		</label>

packages/editor-ui/src/components/RunDataTable.vue

@@ -12,7 +12,7 @@
 					@mouseenter="onMouseEnterCell"
 					@mouseleave="onMouseLeaveCell"
 				>
-					<n8n-text>{{ $locale.baseText('runData.emptyItemHint') }}</n8n-text>
+					<n8n-info-tip>{{ $locale.baseText('runData.emptyItemHint') }}</n8n-info-tip>
 				</td>
 				<td :class="$style.tableRightMargin"></td>
 			</tr>

packages/editor-ui/src/components/__snapshots__/RunDataSchema.test.ts.snap

@@ -3,24 +3,20 @@
 exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
 <div>
   <div
-    class="_schemaWrapper_1w572_1"
+    class="_schemaWrapper_1x7h2_1"
   >
     <div
       class=""
     >
       <div
-        class="_schema_1w572_1"
+        class="_schema_1x7h2_1"
       >
         <div
           class="_item_eg159_1"
         >
           <!---->
           <!---->
-          <input
+          <!---->
-            checked="checked"
-            id="object-0-0"
-            type="checkbox"
-          />
           <!---->
           <div
             class="_sub_eg159_14"
@@ -58,11 +54,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
               >
                 John
               </span>
-              <input
+              <!---->
-                checked="checked"
-                id="string-0-0"
-                type="checkbox"
-              />
               <!---->
               <!---->
             </div>
@@ -99,11 +91,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
               >
                 22
               </span>
-              <input
+              <!---->
-                checked="checked"
-                id="number-0-1"
-                type="checkbox"
-              />
               <!---->
               <!---->
             </div>
@@ -187,11 +175,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
                   >
                     surfing
                   </span>
-                  <input
+                  <!---->
-                    checked="checked"
-                    id="string-1-0"
-                    type="checkbox"
-                  />
                   <!---->
                   <!---->
                 </div>
@@ -230,11 +214,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
                   >
                     traveling
                   </span>
-                  <input
+                  <!---->
-                    checked="checked"
-                    id="string-1-1"
-                    type="checkbox"
-                  />
                   <!---->
                   <!---->
                 </div>
@@ -255,9 +235,27 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
 exports[`RunDataJsonSchema.vue > renders schema for empty data 1`] = `
 <div>
   <div
-    class="_schemaWrapper_1w572_1"
+    class="_schemaWrapper_1x7h2_1"
   >
-    <div />
+    <div
+      class="n8n-info-tip _info_3egb8_33 _note_3egb8_16 _base_3egb8_1 _bold_3egb8_12"
+    >
+      <span
+        class="_iconText_3egb8_28"
+      >
+        <span
+          class="n8n-icon n8n-text _compact_e4k11_34 _size-medium_e4k11_19 _regular_e4k11_5"
+        >
+          <font-awesome-icon-stub
+            class="_medium_1pnjy_9"
+            icon="info-circle"
+          />
+        </span>
+        <span>
+          No data to show - item(s) exist, but they’re empty
+        </span>
+      </span>
+    </div>
   </div>
 </div>
 `;

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -371,6 +371,7 @@
 	"dataMapping.tableView.tableColumnsExceeded": "Some columns are hidden",
 	"dataMapping.tableView.tableColumnsExceeded.tooltip": "Your data has more than {columnLimit} columns so some are hidden. Switch to {link} to see all data.",
 	"dataMapping.tableView.tableColumnsExceeded.tooltip.link": "JSON view",
+	"dataMapping.schemaView.emptyData": "No data to show - item(s) exist, but they’re empty",
 	"displayWithChange.cancelEdit": "Cancel Edit",
 	"displayWithChange.clickToChange": "Click to Change",
 	"displayWithChange.setValue": "Set Value",