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

@@ -132,9 +132,9 @@ describe('NodeErrorView.vue', () => {
);
});
it('renders stack trace', () => {
it('renders stack trace if showDetails is set to true', () => {
const { getByText } = renderComponent({
props: { error },
props: { error, showDetails: true },
});
expect(getByText('Test stack trace')).toBeTruthy();
});

View File

@@ -29,6 +29,7 @@ import { N8nIconButton } from '@n8n/design-system';
type Props = {
// TODO: .node can be undefined
error: NodeError | NodeApiError | NodeOperationError;
showDetails?: boolean;
compact?: boolean;
};
@@ -416,7 +417,7 @@ async function onAskAssistantClick() {
</script>
<template>
<div class="node-error-view">
<div :class="['node-error-view', props.compact ? 'node-error-view_compact' : '']">
<div class="node-error-view__header">
<div class="node-error-view__header-message" data-test-id="node-error-message">
<div>
@@ -449,7 +450,7 @@ async function onAskAssistantClick() {
</div>
</div>
<div v-if="!compact" class="node-error-view__info">
<div v-if="showDetails" class="node-error-view__info">
<div class="node-error-view__info-header">
<p class="node-error-view__info-title">
{{ i18n.baseText('nodeErrorView.details.title') }}
@@ -660,6 +661,11 @@ async function onAskAssistantClick() {
background-color: var(--color-background-xlight);
border: 1px solid var(--color-foreground-base);
border-radius: var(--border-radius-large);
.node-error-view_compact & {
margin: 0 auto var(--spacing-2xs) auto;
border-radius: var(--border-radius-base);
}
}
&__header-title {
@@ -670,6 +676,10 @@ async function onAskAssistantClick() {
background-color: var(--color-danger-tint-2);
border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
color: var(--color-danger);
.node-error-view_compact & {
border-radius: var(--border-radius-base);
}
}
&__header-message {
@@ -758,6 +768,10 @@ async function onAskAssistantClick() {
margin: 0 auto;
border: 1px solid var(--color-foreground-base);
border-radius: var(--border-radius-large);
.node-error-view_compact & {
border-radius: var(--border-radius-base);
}
}
&__info-header {