From 0294b5e89ea7ff23d4f66e0ae6d4403b0be6fdda Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Tue, 13 Dec 2022 06:56:03 +0100
Subject: [PATCH] fix(editor): Schema view render empty data
---
.../src/components/N8nAlert/Alert.vue | 19 +++--
packages/editor-ui/src/__tests__/setup.ts | 2 +
.../src/components/RunDataSchema.test.ts | 7 --
.../src/components/RunDataSchema.vue | 7 +-
.../src/components/RunDataSchemaItem.vue | 2 +-
.../editor-ui/src/components/RunDataTable.vue | 2 +-
.../__snapshots__/RunDataSchema.test.ts.snap | 69 +++++++++++--------
.../src/plugins/i18n/locales/en.json | 1 +
8 files changed, 65 insertions(+), 44 deletions(-)
diff --git a/packages/design-system/src/components/N8nAlert/Alert.vue b/packages/design-system/src/components/N8nAlert/Alert.vue
index a216f827b4..1f80edc907 100644
--- a/packages/design-system/src/components/N8nAlert/Alert.vue
+++ b/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-s);
+ padding-right: var(--spacing-2xs);
}
.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 {
diff --git a/packages/editor-ui/src/__tests__/setup.ts b/packages/editor-ui/src/__tests__/setup.ts
index 01855f1dd7..aec3867da2 100644
--- a/packages/editor-ui/src/__tests__/setup.ts
+++ b/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));
diff --git a/packages/editor-ui/src/components/RunDataSchema.test.ts b/packages/editor-ui/src/components/RunDataSchema.test.ts
index 80acccc806..a37a626597 100644
--- a/packages/editor-ui/src/components/RunDataSchema.test.ts
+++ b/packages/editor-ui/src/components/RunDataSchema.test.ts
@@ -42,13 +42,6 @@ describe('RunDataJsonSchema.vue', () => {
},
data: [{}],
},
- mocks: {
- $locale: {
- baseText() {
- return '';
- },
- },
- },
};
beforeEach(cleanup);
diff --git a/packages/editor-ui/src/components/RunDataSchema.vue b/packages/editor-ui/src/components/RunDataSchema.vue
index 8010a74842..e14410c4d0 100644
--- a/packages/editor-ui/src/components/RunDataSchema.vue
+++ b/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 {
diff --git a/packages/editor-ui/src/components/RunDataSchemaItem.vue b/packages/editor-ui/src/components/RunDataSchemaItem.vue
index be5c03b50b..411e6bdd2c 100644
--- a/packages/editor-ui/src/components/RunDataSchemaItem.vue
+++ b/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>
diff --git a/packages/editor-ui/src/components/RunDataTable.vue b/packages/editor-ui/src/components/RunDataTable.vue
index 5d67879cd5..b8c36eae83 100644
--- a/packages/editor-ui/src/components/RunDataTable.vue
+++ b/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>
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 ec77e1e866..94e4873b9f 100644
--- a/packages/editor-ui/src/components/__snapshots__/RunDataSchema.test.ts.snap
+++ b/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>
`;
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index c39d9d8bfa..4792084a12 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/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",