feat(editor): Add "Rendered" display mode to the logs view (#14994)

This commit is contained in:
Suguru Inoue
2025-04-30 11:36:28 +02:00
committed by GitHub
parent 1de95ead0d
commit c0b54832b3
22 changed files with 587 additions and 294 deletions

View File

@@ -2,15 +2,17 @@
import { useI18n } from '@/composables/useI18n';
import { type NodePanelType, type IRunDataDisplayMode } from '@/Interface';
import { N8nIcon, N8nRadioButtons } from '@n8n/design-system';
import { computed } from 'vue';
import { computed, watch } from 'vue';
const { compact, value, hasBinaryData, paneType, nodeGeneratesHtml } = defineProps<{
compact: boolean;
value: IRunDataDisplayMode;
hasBinaryData: boolean;
paneType: NodePanelType;
nodeGeneratesHtml: boolean;
}>();
const { compact, value, hasBinaryData, paneType, nodeGeneratesHtml, hasRenderableData } =
defineProps<{
compact: boolean;
value: IRunDataDisplayMode;
hasBinaryData: boolean;
paneType: NodePanelType;
nodeGeneratesHtml: boolean;
hasRenderableData: boolean;
}>();
const emit = defineEmits<{ change: [IRunDataDisplayMode] }>();
@@ -30,8 +32,23 @@ const options = computed(() => {
defaults.unshift({ label: 'HTML', value: 'html' });
}
if (hasRenderableData) {
defaults.unshift({ label: i18n.baseText('runData.rendered'), value: 'ai' });
}
return defaults;
});
// If selected display mode isn't included in the options, rest to the first item
watch(
[() => value, options],
([val, opts]) => {
if (opts.length > 0 && opts.every((opt) => opt.value !== val)) {
emit('change', opts[0].value);
}
},
{ immediate: true },
);
</script>
<template>
@@ -49,6 +66,7 @@ const options = computed(() => {
<N8nIcon v-else-if="option.value === 'binary'" icon="binary" size="small" />
<N8nIcon v-else-if="option.value === 'schema'" icon="schema" size="small" />
<N8nIcon v-else-if="option.value === 'html'" icon="html" size="small" />
<N8nIcon v-else-if="option.value === 'ai'" icon="text" size="small" />
<span v-else>{{ option.label }}</span>
</template>
</N8nRadioButtons>