mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse source 
* 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.
This commit is contained in:
Csaba Tuncsik 2022-12-13 14:00:20 +01:00 committed by GitHub
parent 7d7fe34f5d
commit 0b6d47086a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 38 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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-info-tip>{{ $locale.baseText('runData.emptyItemHint') }}</n8n-info-tip>
</td>
<td :class="$style.tableRightMargin"></td>
</tr>

56
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_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>
`;

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