n8n-io/n8n
1
1
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-10-26 21:46:07 +03:00
Code Issues 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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 1215 additions and 1096 deletions
Show Stats 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
.outputDataContainer()
.findChildByTestId('run-data-schema-item')
.find('> span')
.findChildByTestId('run-data-schema-item-value')
.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 {
display: grid;
padding-right: var(--spacing-s);
grid-template-rows: 1fr;
&.animated {

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

@ -77,6 +77,7 @@ const getIconBySchemaType = (type: Schema['type']): string => {
<template>
<div :class="$style.item" data-test-id="run-data-schema-item">
<div :class="$style.itemContent">
<div
v-if="level > 0 || (level === 0 && !isSchemaValueArray)"
:title="schema.type"
@ -109,12 +110,14 @@ const getIconBySchemaType = (type: Schema['type']): string => {
</span>
</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}`">
<span v-if="index > 0" :class="$style.newLine">\n</span>
<TextWithHighlights :content="line" :search="props.search" />
</template>
</span>
</div>
<input v-if="level > 0 && isSchemaValueArray" :id="subKey" type="checkbox" inert checked />
<label v-if="level > 0 && isSchemaValueArray" :class="$style.toggle" :for="subKey">
<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 {
display: grid;
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"
data-test-id="run-data-schema-item"
data-v-46dade00=""
>
<div
class="itemContent"
>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
<!--v-if-->
<div
@ -29,6 +33,9 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
<div
class="item"
data-test-id="run-data-schema-item"
>
<div
class="itemContent"
>
<div
class="pill mappable"
@ -73,6 +80,7 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
</div>
<span
class="text"
data-test-id="run-data-schema-item-value"
>
@ -90,6 +98,7 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
</span>
</div>
<!--v-if-->
<!--v-if-->
<!--v-if-->
@ -97,6 +106,9 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
<div
class="item"
data-test-id="run-data-schema-item"
>
<div
class="itemContent"
>
<div
class="pill mappable"
@ -141,6 +153,7 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
</div>
<span
class="text"
data-test-id="run-data-schema-item-value"
>
@ -158,6 +171,7 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
</span>
</div>
<!--v-if-->
<!--v-if-->
<!--v-if-->
@ -165,6 +179,9 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
<div
class="item"
data-test-id="run-data-schema-item"
>
<div
class="itemContent"
>
<div
class="pill mappable"
@ -208,6 +225,7 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
</span>
</div>
<!--v-if-->
</div>
<input
id="set_1-hobbies"
inert=""
@ -244,6 +262,9 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
<div
class="item"
data-test-id="run-data-schema-item"
>
<div
class="itemContent"
>
<div
class="pill mappable"
@ -297,6 +318,7 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
</div>
<span
class="text"
data-test-id="run-data-schema-item-value"
>
@ -314,6 +336,7 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
</span>
</div>
<!--v-if-->
<!--v-if-->
<!--v-if-->
@ -321,6 +344,9 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
<div
class="item"
data-test-id="run-data-schema-item"
>
<div
class="itemContent"
>
<div
class="pill mappable"
@ -374,6 +400,7 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
</div>
<span
class="text"
data-test-id="run-data-schema-item-value"
>
@ -391,6 +418,7 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
</span>
</div>
<!--v-if-->
<!--v-if-->
<!--v-if-->
@ -421,9 +449,13 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
class="item"
data-test-id="run-data-schema-item"
data-v-46dade00=""
>
<div
class="itemContent"
>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
<!--v-if-->
<div
@ -436,6 +468,9 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
<div
class="item"
data-test-id="run-data-schema-item"
>
<div
class="itemContent"
>
<div
class="pill mappable"
@ -480,6 +515,7 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
</div>
<span
class="text"
data-test-id="run-data-schema-item-value"
>
@ -497,6 +533,7 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
</span>
</div>
<!--v-if-->
<!--v-if-->
<!--v-if-->
@ -504,6 +541,9 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
<div
class="item"
data-test-id="run-data-schema-item"
>
<div
class="itemContent"
>
<div
class="pill mappable"
@ -548,6 +588,7 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
</div>
<span
class="text"
data-test-id="run-data-schema-item-value"
>
@ -565,6 +606,7 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
</span>
</div>
<!--v-if-->
<!--v-if-->
<!--v-if-->
@ -572,6 +614,9 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
<div
class="item"
data-test-id="run-data-schema-item"
>
<div
class="itemContent"
>
<div
class="pill mappable"
@ -615,6 +660,7 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
</span>
</div>
<!--v-if-->
</div>
<input
id="set_2-hobbies"
inert=""
@ -651,6 +697,9 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
<div
class="item"
data-test-id="run-data-schema-item"
>
<div
class="itemContent"
>
<div
class="pill mappable"
@ -704,6 +753,7 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
</div>
<span
class="text"
data-test-id="run-data-schema-item-value"
>
@ -721,6 +771,7 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
</span>
</div>
<!--v-if-->
<!--v-if-->
<!--v-if-->
@ -728,6 +779,9 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
<div
class="item"
data-test-id="run-data-schema-item"
>
<div
class="itemContent"
>
<div
class="pill mappable"
@ -781,6 +835,7 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
</div>
<span
class="text"
data-test-id="run-data-schema-item-value"
>
@ -798,6 +853,7 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
</span>
</div>
<!--v-if-->
<!--v-if-->
<!--v-if-->
@ -829,9 +885,13 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
class="item"
data-test-id="run-data-schema-item"
data-v-46dade00=""
>
<div
class="itemContent"
>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
<!--v-if-->
<div
@ -844,6 +904,9 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
<div
class="item"
data-test-id="run-data-schema-item"
>
<div
class="itemContent"
>
<div
class="pill mappable"
@ -888,6 +951,7 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
</div>
<span
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>
</div>
<!--v-if-->
<!--v-if-->
<!--v-if-->
@ -912,6 +977,9 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
<div
class="item"
data-test-id="run-data-schema-item"
>
<div
class="itemContent"
>
<div
class="pill mappable"
@ -956,6 +1024,7 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
</div>
<span
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>
</div>
<!--v-if-->
<!--v-if-->
<!--v-if-->
@ -980,6 +1050,9 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
<div
class="item"
data-test-id="run-data-schema-item"
>
<div
class="itemContent"
>
<div
class="pill mappable"
@ -1023,6 +1096,7 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
</span>
</div>
<!--v-if-->
</div>
<input
id="output_object-0-0-hobbies"
inert=""
@ -1059,6 +1133,9 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
<div
class="item"
data-test-id="run-data-schema-item"
>
<div
class="itemContent"
>
<div
class="pill mappable"
@ -1112,6 +1189,7 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
</div>
<span
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>
</div>
<!--v-if-->
<!--v-if-->
<!--v-if-->
@ -1136,6 +1215,9 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
<div
class="item"
data-test-id="run-data-schema-item"
>
<div
class="itemContent"
>
<div
class="pill mappable"
@ -1189,6 +1271,7 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
</div>
<span
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>
</div>
<!--v-if-->
<!--v-if-->
<!--v-if-->
@ -1337,9 +1421,13 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
class="item"
data-test-id="run-data-schema-item"
data-v-46dade00=""
>
<div
class="itemContent"
>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
<!--v-if-->
<div
@ -1352,6 +1440,9 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
<div
class="item"
data-test-id="run-data-schema-item"
>
<div
class="itemContent"
>
<div
class="pill mappable"
@ -1395,6 +1486,7 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
</span>
</div>
<!--v-if-->
</div>
<input
id="set_1-hello world"
inert=""
@ -1431,6 +1523,9 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
<div
class="item"
data-test-id="run-data-schema-item"
>
<div
class="itemContent"
>
<div
class="pill mappable"
@ -1483,6 +1578,7 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
</span>
</div>
<!--v-if-->
</div>
<input
id="set_1-hello world-0"
inert=""
@ -1519,6 +1615,9 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
<div
class="item"
data-test-id="run-data-schema-item"
>
<div
class="itemContent"
>
<div
class="pill mappable"
@ -1562,6 +1661,7 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
</span>
</div>
<!--v-if-->
</div>
<input
id="set_1-hello world-0-test"
inert=""
@ -1598,6 +1698,9 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
<div
class="item"
data-test-id="run-data-schema-item"
>
<div
class="itemContent"
>
<div
class="pill mappable"
@ -1642,6 +1745,7 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
</div>
<span
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>
</div>
<!--v-if-->
<!--v-if-->
<!--v-if-->
@ -1670,6 +1775,9 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
<div
class="item"
data-test-id="run-data-schema-item"
>
<div
class="itemContent"
>
<div
class="pill mappable"
@ -1714,6 +1822,7 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
</div>
<span
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>
</div>
<!--v-if-->
<!--v-if-->
<!--v-if-->