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): 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.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 {

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

@ -77,44 +77,47 @@ 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 <div :class="$style.itemContent">
v-if="level > 0 || (level === 0 && !isSchemaValueArray)" <div
:title="schema.type" v-if="level > 0 || (level === 0 && !isSchemaValueArray)"
:class="{ :title="schema.type"
[$style.pill]: true, :class="{
[$style.mappable]: mappingEnabled, [$style.pill]: true,
[$style.highlight]: dragged, [$style.mappable]: mappingEnabled,
}" [$style.highlight]: dragged,
> }"
<span
:class="$style.label"
:data-value="getJsonParameterPath(schema.path)"
:data-name="schemaName"
:data-path="schema.path"
:data-depth="level"
data-target="mappable"
> >
<font-awesome-icon :icon="getIconBySchemaType(schema.type)" size="sm" /> <span
<TextWithHighlights :class="$style.label"
v-if="isSchemaParentTypeArray" :data-value="getJsonParameterPath(schema.path)"
:content="props.parent?.key" :data-name="schemaName"
:search="props.search" :data-path="schema.path"
/> :data-depth="level"
<TextWithHighlights data-target="mappable"
v-if="key" >
:class="{ [$style.arrayIndex]: isSchemaParentTypeArray }" <font-awesome-icon :icon="getIconBySchemaType(schema.type)" size="sm" />
:content="key" <TextWithHighlights
:search="props.search" v-if="isSchemaParentTypeArray"
/> :content="props.parent?.key"
:search="props.search"
/>
<TextWithHighlights
v-if="key"
:class="{ [$style.arrayIndex]: isSchemaParentTypeArray }"
:content="key"
:search="props.search"
/>
</span>
</div>
<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> </span>
</div> </div>
<span v-if="text" :class="$style.text">
<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>
<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;

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

File diff suppressed because it is too large Load diff