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

feat(editor): Schema preview UI updates (#13578)

Browse Source
This commit is contained in:
Elias Meire
2025-03-05 10:29:13 +01:00
committed by GitHub
parent c821f1c532
commit 8790a0df3d
7 changed files with 148 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/frontend/editor-ui/src/components/VirtualSchemaHeader.vue
View File

@@ -4,8 +4,7 @@ import NodeIcon from '@/components/NodeIcon.vue';
import { type INodeTypeDescription } from 'n8n-workflow';
import { useI18n } from '@/composables/useI18n';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { DATA_EDITING_DOCS_URL } from '@/constants';
import { N8nNotice } from '@n8n/design-system';
import { SCHEMA_PREVIEW_DOCS_URL } from '@/constants';
const props = defineProps<{
title: string;
@@ -42,24 +41,28 @@ const emit = defineEmits<{
<span v-if="info" class="info">{{ info }}</span>
</div>
<FontAwesomeIcon v-if="isTrigger" class="trigger-icon" icon="bolt" size="xs" />
<div v-if="itemCount" class="item-count" data-test-id="run-data-schema-node-item-count">
<div v-if="itemCount" class="extra-info" data-test-id="run-data-schema-node-item-count">
{{ i18n.baseText('ndv.output.items', { interpolate: { count: itemCount } }) }}
</div>
<div v-else-if="preview" class="extra-info">
{{ i18n.baseText('dataMapping.schemaView.previewNode') }}
</div>
</div>
<N8nNotice
<div
v-if="preview && !collapsed"
class="notice"
theme="warning"
data-test-id="schema-preview-warning"
@click.stop
>
<i18n-t keypath="dataMapping.schemaView.preview">
<template #link>
<N8nLink :to="DATA_EDITING_DOCS_URL" size="small">
<N8nLink :to="SCHEMA_PREVIEW_DOCS_URL" size="small" bold>
{{ i18n.baseText('generic.learnMore') }}
</N8nLink>
</template>
</i18n-t>
</N8nNotice>
</div>
</div>
</template>
@@ -117,7 +120,7 @@ const emit = defineEmits<{
color: var(--color-primary);
}
.item-count {
.extra-info {
font-size: var(--font-size-2xs);
color: var(--color-text-light);
margin-left: auto;
@@ -126,6 +129,9 @@ const emit = defineEmits<{
.notice {
margin-left: var(--spacing-2xl);
margin-top: var(--spacing-2xs);
margin-bottom: 0;
padding-bottom: var(--spacing-2xs);
color: var(--color-text-base);
font-size: var(--font-size-2xs);
line-height: var(--font-line-height-loose);
}
</style>