fix(editor): Schema view render empty data

packages/design-system/src/components/N8nAlert/Alert.vue

@@ -81,11 +81,9 @@ const alertBoxClassNames = computed(() => {
 .alert {
 	display: flex;
 	position: relative;
-	min-height: 60px;
 	border-bottom: 1px solid transparent;
 	align-items: center;
 	justify-content: space-between;
-	padding: $alert-padding;
 
 	&.center {
 		justify-content: center;
@@ -202,6 +200,15 @@ const alertBoxClassNames = computed(() => {
 			}
 		}
 	}
+
+	&.background {
+		min-height: 60px;
+		padding: $alert-padding;
+
+		.icon {
+			padding-left: var(--spacing-2xs);
+		}
+	}
 }
 
 .content {
@@ -213,8 +220,7 @@ const alertBoxClassNames = computed(() => {
 	display: inline-flex;
 	color: inherit;
 	align-items: center;
-	padding-left: var(--spacing-2xs);
+	padding-right: var(--spacing-2xs);
-	padding-right: var(--spacing-s);
 }
 
 .text {
@@ -227,11 +233,14 @@ const alertBoxClassNames = computed(() => {
 	font-size: $alert-title-font-size;
 	line-height: 18px;
 	font-weight: bold;
+
+	+ .description {
+		margin-top: var(--spacing-2xs);
+	}
 }
 
 .description {
 	font-size: $alert-description-font-size;
-	margin: 5px 0 0 0;
 }
 
 .aside {

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-alert v-if="isDataEmpty" :background="false" :description="i18n.baseText('dataMapping.schemaView.emptyData')" />
 		<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*="alert"] {
+		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-alert :background="false" :description="$locale.baseText('runData.emptyItemHint')" />
 				</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_1wosl_1"
   >
     <div
       class=""
     >
       <div
-        class="_schema_1w572_1"
+        class="_schema_1wosl_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,40 @@ 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_1wosl_1"
   >
-    <div />
+    <div
+      class="n8n-alert"
+      role="alert"
+    >
+      <div
+        class="_content_1qxmg_213"
+      >
+        <span
+          class="_icon_1qxmg_209"
+        >
+          <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>
+        <div
+          class="_text_1qxmg_225"
+        >
+          <!---->
+          <div
+            class="_description_1qxmg_236"
+          >
+            No data to show - item(s) exist, but they’re empty
+          </div>
+        </div>
+      </div>
+      <!---->
+    </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",