mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-09 22:24:05 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(editor): Harmonize rendering of new-lines in RunData (#9614)

Browse source 
Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>
Co-authored-by: Giulio Andreini <g.andreini@gmail.com>
This commit is contained in:
oleg 2024-06-10 15:24:17 +02:00 committed by GitHub
parent 22bdb0568e
commit bc3dcf706f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 311 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/design-system/src/css/_tokens.dark.scss
View file

@ -126,6 +126,8 @@
--color-code-gutterBackground: var(--prim-gray-670);
--color-code-gutterForeground: var(--prim-gray-320);
--color-code-tags-comment: var(--prim-gray-200);
--color-line-break: var(--prim-gray-420);
--color-code-line-break: var(--prim-color-secondary-tint-100);
// Variables
--color-variables-usage-font: var(--prim-color-alt-a-tint-300);

2
packages/design-system/src/css/_tokens.scss
View file

@ -163,6 +163,8 @@
--color-code-gutterBackground: var(--prim-gray-0);
--color-code-gutterForeground: var(--prim-gray-320);
--color-code-tags-comment: var(--prim-gray-420);
--color-line-break: var(--prim-gray-320);
--color-code-line-break: var(--prim-color-secondary-tint-200);
// Variables
--color-variables-usage-font: var(--color-success);

1
packages/editor-ui/src/components/RunDataJson.vue
View file

@ -264,6 +264,7 @@ export default defineComponent({
<style lang="scss">
.vjs-tree {
color: var(--color-json-default);
--color-line-break: var(--color-code-line-break);
}
.vjs-tree-node {

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

@ -38,6 +38,7 @@ const key = computed((): string | undefined => {
const schemaName = computed(() =>
isSchemaParentTypeArray.value ? `${props.schema.type}[${props.schema.key}]` : props.schema.key,
);
const text = computed(() =>
Array.isArray(props.schema.value) ? '' : shorten(props.schema.value, 600, 0),
);
@ -114,7 +115,11 @@ const getIconBySchemaType = (type: Schema['type']): string => {
/>
</span>
</div>
<span v-if="text" :class="$style.text">{{ text }}</span>
<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>{{ line }}
</template>
</span>
<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" />
@ -286,6 +291,12 @@ const getIconBySchemaType = (type: Schema['type']): string => {
font-size: var(--font-size-2xs);
overflow: hidden;
word-break: break-word;
.newLine {
font-family: var(--font-family-monospace);
color: var(--color-line-break);
padding-right: 2px;
}
}
.toggle {

2
packages/editor-ui/src/components/RunDataTable.vue
View file

@ -388,7 +388,7 @@ export default defineComponent({
return this.$locale.baseText('runData.emptyString');
}
if (typeof value === 'string') {
return value.replaceAll('\n', '\\n');
return value;
}
if (Array.isArray(value) && value.length === 0) {
return this.$locale.baseText('runData.emptyArray');

17
packages/editor-ui/src/components/TextWithHighlights.vue
View file

@ -48,5 +48,20 @@ const parts = computed(() => {
<span v-else-if="part.content" :key="`span-${index}`">{{ part.content }}</span>
</template>
</span>
<span v-else>{{ props.content }}</span>
<span v-else :class="$style.content">
<template v-if="typeof props.content === 'string'">
<span v-for="(line, index) in props.content.split('\n')" :key="`line-${index}`">
<span v-if="index > 0" :class="$style.newLine">\n</span>{{ line }}
</span>
</template>
<span v-else v-text="props.content" />
</span>
</template>
<style lang="scss" module>
:root .content .newLine {
font-family: var(--font-family-monospace);
color: var(--color-line-break);
padding-right: 2px;
}
</style>

29
packages/editor-ui/src/components/__tests__/TextWithHIghlights.test.ts
View file

@ -21,7 +21,9 @@ describe('TextWithHighlights', () => {
},
});
expect(wrapper.html()).toEqual('<span>Test content</span>');
expect(wrapper.html()).toEqual(
'<span class="content"><span><!--v-if-->Test content</span></span>',
);
expect(wrapper.html()).not.toContain('<mark>');
});
@ -32,18 +34,19 @@ describe('TextWithHighlights', () => {
},
});
expect(wrapper.html()).toEqual('<span>1</span>');
expect(wrapper.html()).toEqual('<span class="content"><span>1</span></span>');
expect(wrapper.html()).not.toContain('<mark>');
});
it('renders correctly objects when search is not set', () => {
it('renders correctly objects when search is not set', async () => {
const wrapper = shallowMount(TextWithHighlights, {
props: {
content: { hello: 'world' },
},
});
expect(wrapper.html()).toEqual('<span>{\n "hello": "world"\n}</span>');
expect(wrapper.html()).toEqual(
'<span class="content"><span>{\n "hello": "world"\n}</span></span>',
);
expect(wrapper.html()).not.toContain('<mark>');
});
@ -55,7 +58,9 @@ describe('TextWithHighlights', () => {
},
});
expect(wrapper.html()).toEqual('<span>{\n "hello": "world"\n}</span>');
expect(wrapper.html()).toEqual(
'<span class="content"><span>{\n "hello": "world"\n}</span></span>',
);
expect(wrapper.html()).not.toContain('<mark>');
});
@ -100,4 +105,16 @@ describe('TextWithHighlights', () => {
'<span><span>Test content </span><mark>()^${}[]</mark><span> world</span></span>',
);
});
it('renders new lines in the content correctly', () => {
const wrapper = shallowMount(TextWithHighlights, {
props: {
content: 'Line 1\n Line 2\nLine 3',
},
});
expect(wrapper.html()).toContain(
'<span class="content"><span><!--v-if-->Line 1</span><span><span class="newLine">\\n</span> Line 2</span><span><span class="newLine">\\n</span>Line 3</span></span>',
);
});
});

116
packages/editor-ui/src/components/__tests__/__snapshots__/RunDataJson.test.ts.snap
View file

@ -86,16 +86,21 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
>
<span
class="mappable"
class="content mappable"
data-depth="2"
data-name="list"
data-path="[0].list"
data-target="mappable"
data-value="{{ $('Set').item.json.list }}"
>
<span>
<!--v-if-->
"list"
</span>
</span>
<span
class="vjs-colon"
>
@ -140,17 +145,22 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
>
<span
class="mappable ph-no-capture"
class="content mappable ph-no-capture"
data-depth="3"
data-name="list[0]"
data-path="[0].list[0]"
data-target="mappable"
data-value="{{ $('Set').item.json.list[0] }}"
>
<span>
<!--v-if-->
1
</span>
</span>
</span>
<span>
,
</span>
@ -185,17 +195,22 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
>
<span
class="mappable ph-no-capture"
class="content mappable ph-no-capture"
data-depth="3"
data-name="list[1]"
data-path="[0].list[1]"
data-target="mappable"
data-value="{{ $('Set').item.json.list[1] }}"
>
<span>
<!--v-if-->
2
</span>
</span>
</span>
<span>
,
</span>
@ -230,17 +245,22 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
>
<span
class="mappable ph-no-capture"
class="content mappable ph-no-capture"
data-depth="3"
data-name="list[2]"
data-path="[0].list[2]"
data-target="mappable"
data-value="{{ $('Set').item.json.list[2] }}"
>
<span>
<!--v-if-->
3
</span>
</span>
</span>
<!---->
<!---->
</span>
@ -299,16 +319,21 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
>
<span
class="mappable"
class="content mappable"
data-depth="2"
data-name="record"
data-path="[0].record"
data-target="mappable"
data-value="{{ $('Set').item.json.record }}"
>
<span>
<!--v-if-->
"record"
</span>
</span>
<span
class="vjs-colon"
>
@ -351,16 +376,21 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
>
<span
class="mappable"
class="content mappable"
data-depth="3"
data-name="name"
data-path="[0].record.name"
data-target="mappable"
data-value="{{ $('Set').item.json.record.name }}"
>
<span>
<!--v-if-->
"name"
</span>
</span>
<span
class="vjs-colon"
>
@ -372,11 +402,18 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
class="vjs-value vjs-value-string"
>
<span
class="content"
>
<span>
<!--v-if-->
"Joe"
</span>
</span>
</span>
<!---->
<!---->
</span>
@ -435,16 +472,21 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
>
<span
class="mappable"
class="content mappable"
data-depth="2"
data-name="myNumber"
data-path="[0].myNumber"
data-target="mappable"
data-value="{{ $('Set').item.json.myNumber }}"
>
<span>
<!--v-if-->
"myNumber"
</span>
</span>
<span
class="vjs-colon"
>
@ -456,11 +498,18 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
class="vjs-value vjs-value-number"
>
<span
class="content"
>
<span>
<!--v-if-->
123
</span>
</span>
</span>
<span>
,
</span>
@ -490,16 +539,21 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
>
<span
class="mappable"
class="content mappable"
data-depth="2"
data-name="myStringNumber"
data-path="[0].myStringNumber"
data-target="mappable"
data-value="{{ $('Set').item.json.myStringNumber }}"
>
<span>
<!--v-if-->
"myStringNumber"
</span>
</span>
<span
class="vjs-colon"
>
@ -511,11 +565,18 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
class="vjs-value vjs-value-string"
>
<span
class="content"
>
<span>
<!--v-if-->
"456"
</span>
</span>
</span>
<span>
,
</span>
@ -545,16 +606,21 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
>
<span
class="mappable"
class="content mappable"
data-depth="2"
data-name="myStringText"
data-path="[0].myStringText"
data-target="mappable"
data-value="{{ $('Set').item.json.myStringText }}"
>
<span>
<!--v-if-->
"myStringText"
</span>
</span>
<span
class="vjs-colon"
>
@ -566,11 +632,18 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
class="vjs-value vjs-value-string"
>
<span
class="content"
>
<span>
<!--v-if-->
"abc"
</span>
</span>
</span>
<span>
,
</span>
@ -600,16 +673,21 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
>
<span
class="mappable"
class="content mappable"
data-depth="2"
data-name="nil"
data-path="[0].nil"
data-target="mappable"
data-value="{{ $('Set').item.json.nil }}"
>
<span>
<!--v-if-->
"nil"
</span>
</span>
<span
class="vjs-colon"
>
@ -621,11 +699,18 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
class="vjs-value vjs-value-null"
>
<span
class="content"
>
<span>
<!--v-if-->
null
</span>
</span>
</span>
<span>
,
</span>
@ -655,16 +740,21 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
>
<span
class="mappable"
class="content mappable"
data-depth="2"
data-name="d"
data-path="[0].d"
data-target="mappable"
data-value="{{ $('Set').item.json.d }}"
>
<span>
<!--v-if-->
"d"
</span>
</span>
<span
class="vjs-colon"
>
@ -676,7 +766,11 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
class="vjs-value vjs-value-undefined"
>
<span
class="content"
>
<span />
</span>
</span>
<!---->

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

@ -59,16 +59,26 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
</svg>
<!--v-if-->
<span
class=""
class="content"
>
<span>
<!--v-if-->
name
</span>
</span>
</span>
</div>
<span
class="text"
>
<!--v-if-->
John
</span>
<!--v-if-->
<!--v-if-->
@ -109,16 +119,26 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
</svg>
<!--v-if-->
<span
class=""
class="content"
>
<span>
<!--v-if-->
age
</span>
</span>
</span>
</div>
<span
class="text"
>
<!--v-if-->
22
</span>
<!--v-if-->
<!--v-if-->
@ -159,10 +179,15 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
</svg>
<!--v-if-->
<span
class=""
class="content"
>
<span>
<!--v-if-->
hobbies
</span>
</span>
</span>
</div>
<!--v-if-->
@ -228,20 +253,37 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
fill="currentColor"
/>
</svg>
<span
class="content"
>
<span>
<!--v-if-->
hobbies
</span>
</span>
<span
class="arrayIndex"
class="content arrayIndex"
>
<span>
<!--v-if-->
[0]
</span>
</span>
</span>
</div>
<span
class="text"
>
<!--v-if-->
surfing
</span>
<!--v-if-->
<!--v-if-->
@ -280,20 +322,37 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
fill="currentColor"
/>
</svg>
<span
class="content"
>
<span>
<!--v-if-->
hobbies
</span>
</span>
<span
class="arrayIndex"
class="content arrayIndex"
>
<span>
<!--v-if-->
[1]
</span>
</span>
</span>
</div>
<span
class="text"
>
<!--v-if-->
traveling
</span>
<!--v-if-->
<!--v-if-->
@ -417,10 +476,15 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
</svg>
<!--v-if-->
<span
class=""
class="content"
>
<span>
<!--v-if-->
hello world
</span>
</span>
</span>
</div>
<!--v-if-->
@ -486,14 +550,26 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
fill="currentColor"
/>
</svg>
<span
class="content"
>
<span>
<!--v-if-->
hello world
</span>
</span>
<span
class="arrayIndex"
class="content arrayIndex"
>
<span>
<!--v-if-->
[0]
</span>
</span>
</span>
</div>
<!--v-if-->
@ -561,10 +637,15 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
</svg>
<!--v-if-->
<span
class=""
class="content"
>
<span>
<!--v-if-->
test
</span>
</span>
</span>
</div>
<!--v-if-->
@ -632,16 +713,26 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
</svg>
<!--v-if-->
<span
class=""
class="content"
>
<span>
<!--v-if-->
more to think about
</span>
</span>
</span>
</div>
<span
class="text"
>
<!--v-if-->
1
</span>
<!--v-if-->
<!--v-if-->
@ -685,16 +776,26 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
</svg>
<!--v-if-->
<span
class=""
class="content"
>
<span>
<!--v-if-->
test.how
</span>
</span>
</span>
</div>
<span
class="text"
>
<!--v-if-->
ignore
</span>
<!--v-if-->
<!--v-if-->