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

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

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"?>');
});

View file

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

View file

@ -77,44 +77,47 @@ const getIconBySchemaType = (type: Schema['type']): string => {
<template>
<div :class="$style.item" data-test-id="run-data-schema-item">
<div
v-if="level > 0 || (level === 0 && !isSchemaValueArray)"
:title="schema.type"
:class="{
[$style.pill]: true,
[$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"
<div :class="$style.itemContent">
<div
v-if="level > 0 || (level === 0 && !isSchemaValueArray)"
:title="schema.type"
:class="{
[$style.pill]: true,
[$style.mappable]: mappingEnabled,
[$style.highlight]: dragged,
}"
>
<font-awesome-icon :icon="getIconBySchemaType(schema.type)" size="sm" />
<TextWithHighlights
v-if="isSchemaParentTypeArray"
:content="props.parent?.key"
:search="props.search"
/>
<TextWithHighlights
v-if="key"
:class="{ [$style.arrayIndex]: isSchemaParentTypeArray }"
:content="key"
:search="props.search"
/>
<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" />
<TextWithHighlights
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>
</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 />
<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;