mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-25 04:34:06 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Schema view render empty data

Browse source
This commit is contained in:
Csaba Tuncsik 2022-12-13 06:56:03 +01:00
parent 3fc2d7cc5a
commit 0294b5e89e
8 changed files with 65 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
packages/design-system/src/components/N8nAlert/Alert.vue
View file

@ -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 {

2
packages/editor-ui/src/__tests__/setup.ts
View file

@ -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));

7
packages/editor-ui/src/components/RunDataSchema.test.ts
View file

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

7
packages/editor-ui/src/components/RunDataSchema.vue
View file

@ -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 {

2
packages/editor-ui/src/components/RunDataSchemaItem.vue
View file

@ -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>

2
packages/editor-ui/src/components/RunDataTable.vue
View file

@ -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>

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

@ -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>
`;

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

@ -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",