admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-17 10:02:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(editor): Improve text wrapping in schema view (#9888)

Browse Source
This commit is contained in:
Elias Meire
2024-07-01 11:03:04 +02:00
committed by GitHub
parent e613de28ca
commit dc1c5fce8a
4 changed files with 1215 additions and 1096 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
cypress/e2e/5-ndv.cy.ts
View File

@@ -631,8 +631,7 @@ describe('NDV', () => {
ndv.getters.outputDisplayMode().find('label').eq(2).click({ force: true }); ndv.getters.outputDisplayMode().find('label').eq(2).click({ force: true });
ndv.getters ndv.getters
.outputDataContainer() .outputDataContainer()
.findChildByTestId('run-data-schema-item') .findChildByTestId('run-data-schema-item-value')
.find('> span')
.should('include.text', '<?xml version="1.0" encoding="UTF-8"?>'); .should('include.text', '<?xml version="1.0" encoding="UTF-8"?>');
}); });

1
packages/editor-ui/src/components/RunDataSchema.vue
View File

@@ -418,6 +418,7 @@ watch(
.schema { .schema {
display: grid; display: grid;
padding-right: var(--spacing-s);
grid-template-rows: 1fr; grid-template-rows: 1fr;
&.animated { &.animated {

11
packages/editor-ui/src/components/RunDataSchemaItem.vue
View File

@@ -77,6 +77,7 @@ const getIconBySchemaType = (type: Schema['type']): string => {
<template> <template>
<div :class="$style.item" data-test-id="run-data-schema-item"> <div :class="$style.item" data-test-id="run-data-schema-item">
<div :class="$style.itemContent">
<div <div
v-if="level > 0 || (level === 0 && !isSchemaValueArray)" v-if="level > 0 || (level === 0 && !isSchemaValueArray)"
:title="schema.type" :title="schema.type"
@@ -109,12 +110,14 @@ const getIconBySchemaType = (type: Schema['type']): string => {
</span> </span>
</div> </div>
<span v-if="text" :class="$style.text"> <span v-if="text" :class="$style.text" data-test-id="run-data-schema-item-value">
<template v-for="(line, index) in text.split('\n')" :key="`line-${index}`"> <template v-for="(line, index) in text.split('\n')" :key="`line-${index}`">
<span v-if="index > 0" :class="$style.newLine">\n</span> <span v-if="index > 0" :class="$style.newLine">\n</span>
<TextWithHighlights :content="line" :search="props.search" /> <TextWithHighlights :content="line" :search="props.search" />
</template> </template>
</span> </span>
</div>
<input v-if="level > 0 && isSchemaValueArray" :id="subKey" type="checkbox" inert checked /> <input v-if="level > 0 && isSchemaValueArray" :id="subKey" type="checkbox" inert checked />
<label v-if="level > 0 && isSchemaValueArray" :class="$style.toggle" :for="subKey"> <label v-if="level > 0 && isSchemaValueArray" :class="$style.toggle" :for="subKey">
<font-awesome-icon icon="angle-right" /> <font-awesome-icon icon="angle-right" />
@@ -191,6 +194,12 @@ const getIconBySchemaType = (type: Schema['type']): string => {
} }
} }
.itemContent {
display: flex;
gap: var(--spacing-2xs);
align-items: baseline;
}
.sub { .sub {
display: grid; display: grid;
grid-template-rows: 0fr; grid-template-rows: 0fr;

110
packages/editor-ui/src/components/__tests__/__snapshots__/RunDataSchema.test.ts.snap
View File

@@ -14,9 +14,13 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
class="item" class="item"
data-test-id="run-data-schema-item" data-test-id="run-data-schema-item"
data-v-46dade00="" data-v-46dade00=""
>
<div
class="itemContent"
> >
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div>
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
<div <div
@@ -29,6 +33,9 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
<div <div
class="item" class="item"
data-test-id="run-data-schema-item" data-test-id="run-data-schema-item"
>
<div
class="itemContent"
> >
<div <div
class="pill mappable" class="pill mappable"
@@ -73,6 +80,7 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
</div> </div>
<span <span
class="text" class="text"
data-test-id="run-data-schema-item-value"
> >
@@ -90,6 +98,7 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
</span> </span>
</div>
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
@@ -97,6 +106,9 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
<div <div
class="item" class="item"
data-test-id="run-data-schema-item" data-test-id="run-data-schema-item"
>
<div
class="itemContent"
> >
<div <div
class="pill mappable" class="pill mappable"
@@ -141,6 +153,7 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
</div> </div>
<span <span
class="text" class="text"
data-test-id="run-data-schema-item-value"
> >
@@ -158,6 +171,7 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
</span> </span>
</div>
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
@@ -165,6 +179,9 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
<div <div
class="item" class="item"
data-test-id="run-data-schema-item" data-test-id="run-data-schema-item"
>
<div
class="itemContent"
> >
<div <div
class="pill mappable" class="pill mappable"
@@ -208,6 +225,7 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
</span> </span>
</div> </div>
<!--v-if--> <!--v-if-->
</div>
<input <input
id="set_1-hobbies" id="set_1-hobbies"
inert="" inert=""
@@ -244,6 +262,9 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
<div <div
class="item" class="item"
data-test-id="run-data-schema-item" data-test-id="run-data-schema-item"
>
<div
class="itemContent"
> >
<div <div
class="pill mappable" class="pill mappable"
@@ -297,6 +318,7 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
</div> </div>
<span <span
class="text" class="text"
data-test-id="run-data-schema-item-value"
> >
@@ -314,6 +336,7 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
</span> </span>
</div>
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
@@ -321,6 +344,9 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
<div <div
class="item" class="item"
data-test-id="run-data-schema-item" data-test-id="run-data-schema-item"
>
<div
class="itemContent"
> >
<div <div
class="pill mappable" class="pill mappable"
@@ -374,6 +400,7 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
</div> </div>
<span <span
class="text" class="text"
data-test-id="run-data-schema-item-value"
> >
@@ -391,6 +418,7 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
</span> </span>
</div>
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
@@ -421,9 +449,13 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
class="item" class="item"
data-test-id="run-data-schema-item" data-test-id="run-data-schema-item"
data-v-46dade00="" data-v-46dade00=""
>
<div
class="itemContent"
> >
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div>
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
<div <div
@@ -436,6 +468,9 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
<div <div
class="item" class="item"
data-test-id="run-data-schema-item" data-test-id="run-data-schema-item"
>
<div
class="itemContent"
> >
<div <div
class="pill mappable" class="pill mappable"
@@ -480,6 +515,7 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
</div> </div>
<span <span
class="text" class="text"
data-test-id="run-data-schema-item-value"
> >
@@ -497,6 +533,7 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
</span> </span>
</div>
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
@@ -504,6 +541,9 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
<div <div
class="item" class="item"
data-test-id="run-data-schema-item" data-test-id="run-data-schema-item"
>
<div
class="itemContent"
> >
<div <div
class="pill mappable" class="pill mappable"
@@ -548,6 +588,7 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
</div> </div>
<span <span
class="text" class="text"
data-test-id="run-data-schema-item-value"
> >
@@ -565,6 +606,7 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
</span> </span>
</div>
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
@@ -572,6 +614,9 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
<div <div
class="item" class="item"
data-test-id="run-data-schema-item" data-test-id="run-data-schema-item"
>
<div
class="itemContent"
> >
<div <div
class="pill mappable" class="pill mappable"
@@ -615,6 +660,7 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
</span> </span>
</div> </div>
<!--v-if--> <!--v-if-->
</div>
<input <input
id="set_2-hobbies" id="set_2-hobbies"
inert="" inert=""
@@ -651,6 +697,9 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
<div <div
class="item" class="item"
data-test-id="run-data-schema-item" data-test-id="run-data-schema-item"
>
<div
class="itemContent"
> >
<div <div
class="pill mappable" class="pill mappable"
@@ -704,6 +753,7 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
</div> </div>
<span <span
class="text" class="text"
data-test-id="run-data-schema-item-value"
> >
@@ -721,6 +771,7 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
</span> </span>
</div>
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
@@ -728,6 +779,9 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
<div <div
class="item" class="item"
data-test-id="run-data-schema-item" data-test-id="run-data-schema-item"
>
<div
class="itemContent"
> >
<div <div
class="pill mappable" class="pill mappable"
@@ -781,6 +835,7 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
</div> </div>
<span <span
class="text" class="text"
data-test-id="run-data-schema-item-value"
> >
@@ -798,6 +853,7 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
</span> </span>
</div>
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
@@ -829,9 +885,13 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
class="item" class="item"
data-test-id="run-data-schema-item" data-test-id="run-data-schema-item"
data-v-46dade00="" data-v-46dade00=""
>
<div
class="itemContent"
> >
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div>
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
<div <div
@@ -844,6 +904,9 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
<div <div
class="item" class="item"
data-test-id="run-data-schema-item" data-test-id="run-data-schema-item"
>
<div
class="itemContent"
> >
<div <div
class="pill mappable" class="pill mappable"
@@ -888,6 +951,7 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
</div> </div>
<span <span
class="text" class="text"
data-test-id="run-data-schema-item-value"
> >
@@ -905,6 +969,7 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
</span> </span>
</div>
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
@@ -912,6 +977,9 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
<div <div
class="item" class="item"
data-test-id="run-data-schema-item" data-test-id="run-data-schema-item"
>
<div
class="itemContent"
> >
<div <div
class="pill mappable" class="pill mappable"
@@ -956,6 +1024,7 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
</div> </div>
<span <span
class="text" class="text"
data-test-id="run-data-schema-item-value"
> >
@@ -973,6 +1042,7 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
</span> </span>
</div>
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
@@ -980,6 +1050,9 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
<div <div
class="item" class="item"
data-test-id="run-data-schema-item" data-test-id="run-data-schema-item"
>
<div
class="itemContent"
> >
<div <div
class="pill mappable" class="pill mappable"
@@ -1023,6 +1096,7 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
</span> </span>
</div> </div>
<!--v-if--> <!--v-if-->
</div>
<input <input
id="output_object-0-0-hobbies" id="output_object-0-0-hobbies"
inert="" inert=""
@@ -1059,6 +1133,9 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
<div <div
class="item" class="item"
data-test-id="run-data-schema-item" data-test-id="run-data-schema-item"
>
<div
class="itemContent"
> >
<div <div
class="pill mappable" class="pill mappable"
@@ -1112,6 +1189,7 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
</div> </div>
<span <span
class="text" class="text"
data-test-id="run-data-schema-item-value"
> >
@@ -1129,6 +1207,7 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
</span> </span>
</div>
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
@@ -1136,6 +1215,9 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
<div <div
class="item" class="item"
data-test-id="run-data-schema-item" data-test-id="run-data-schema-item"
>
<div
class="itemContent"
> >
<div <div
class="pill mappable" class="pill mappable"
@@ -1189,6 +1271,7 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
</div> </div>
<span <span
class="text" class="text"
data-test-id="run-data-schema-item-value"
> >
@@ -1206,6 +1289,7 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
</span> </span>
</div>
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
@@ -1337,9 +1421,13 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
class="item" class="item"
data-test-id="run-data-schema-item" data-test-id="run-data-schema-item"
data-v-46dade00="" data-v-46dade00=""
>
<div
class="itemContent"
> >
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</div>
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
<div <div
@@ -1352,6 +1440,9 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
<div <div
class="item" class="item"
data-test-id="run-data-schema-item" data-test-id="run-data-schema-item"
>
<div
class="itemContent"
> >
<div <div
class="pill mappable" class="pill mappable"
@@ -1395,6 +1486,7 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
</span> </span>
</div> </div>
<!--v-if--> <!--v-if-->
</div>
<input <input
id="set_1-hello world" id="set_1-hello world"
inert="" inert=""
@@ -1431,6 +1523,9 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
<div <div
class="item" class="item"
data-test-id="run-data-schema-item" data-test-id="run-data-schema-item"
>
<div
class="itemContent"
> >
<div <div
class="pill mappable" class="pill mappable"
@@ -1483,6 +1578,7 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
</span> </span>
</div> </div>
<!--v-if--> <!--v-if-->
</div>
<input <input
id="set_1-hello world-0" id="set_1-hello world-0"
inert="" inert=""
@@ -1519,6 +1615,9 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
<div <div
class="item" class="item"
data-test-id="run-data-schema-item" data-test-id="run-data-schema-item"
>
<div
class="itemContent"
> >
<div <div
class="pill mappable" class="pill mappable"
@@ -1562,6 +1661,7 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
</span> </span>
</div> </div>
<!--v-if--> <!--v-if-->
</div>
<input <input
id="set_1-hello world-0-test" id="set_1-hello world-0-test"
inert="" inert=""
@@ -1598,6 +1698,9 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
<div <div
class="item" class="item"
data-test-id="run-data-schema-item" data-test-id="run-data-schema-item"
>
<div
class="itemContent"
> >
<div <div
class="pill mappable" class="pill mappable"
@@ -1642,6 +1745,7 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
</div> </div>
<span <span
class="text" class="text"
data-test-id="run-data-schema-item-value"
> >
@@ -1659,6 +1763,7 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
</span> </span>
</div>
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
@@ -1670,6 +1775,9 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
<div <div
class="item" class="item"
data-test-id="run-data-schema-item" data-test-id="run-data-schema-item"
>
<div
class="itemContent"
> >
<div <div
class="pill mappable" class="pill mappable"
@@ -1714,6 +1822,7 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
</div> </div>
<span <span
class="text" class="text"
data-test-id="run-data-schema-item-value"
> >
@@ -1731,6 +1840,7 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
</span> </span>
</div>
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->