diff --git a/packages/design-system/src/components/N8nAlert/Alert.vue b/packages/design-system/src/components/N8nAlert/Alert.vue index a216f827b4..1f80edc907 100644 --- a/packages/design-system/src/components/N8nAlert/Alert.vue +++ b/packages/design-system/src/components/N8nAlert/Alert.vue @@ -81,11 +81,9 @@ const alertBoxClassNames = computed(() => { .alert { display: flex; position: relative; - min-height: 60px; border-bottom: 1px solid transparent; align-items: center; justify-content: space-between; - padding: $alert-padding; &.center { justify-content: center; @@ -202,6 +200,15 @@ const alertBoxClassNames = computed(() => { } } } + + &.background { + min-height: 60px; + padding: $alert-padding; + + .icon { + padding-left: var(--spacing-2xs); + } + } } .content { @@ -213,8 +220,7 @@ const alertBoxClassNames = computed(() => { display: inline-flex; color: inherit; align-items: center; - padding-left: var(--spacing-2xs); - padding-right: var(--spacing-s); + padding-right: var(--spacing-2xs); } .text { @@ -227,11 +233,14 @@ const alertBoxClassNames = computed(() => { font-size: $alert-title-font-size; line-height: 18px; font-weight: bold; + + + .description { + margin-top: var(--spacing-2xs); + } } .description { font-size: $alert-description-font-size; - margin: 5px 0 0 0; } .aside { diff --git a/packages/editor-ui/src/__tests__/setup.ts b/packages/editor-ui/src/__tests__/setup.ts index 01855f1dd7..aec3867da2 100644 --- a/packages/editor-ui/src/__tests__/setup.ts +++ b/packages/editor-ui/src/__tests__/setup.ts @@ -1,6 +1,7 @@ import '@testing-library/jest-dom'; import Vue from 'vue'; import '../plugins'; +import { I18nPlugin } from "@/plugins/i18n"; Vue.config.productionTip = false; Vue.config.devtools = false; @@ -9,4 +10,5 @@ Vue.config.devtools = false; // Without having this 3rd party library imported like this, any component test using 'vue-json-pretty' fail with: // [Vue warn]: Failed to mount component: template or render function not defined. Vue.component('vue-json-pretty', require('vue-json-pretty').default); +Vue.use((vue) => I18nPlugin(vue)); diff --git a/packages/editor-ui/src/components/RunDataSchema.test.ts b/packages/editor-ui/src/components/RunDataSchema.test.ts index 80acccc806..a37a626597 100644 --- a/packages/editor-ui/src/components/RunDataSchema.test.ts +++ b/packages/editor-ui/src/components/RunDataSchema.test.ts @@ -42,13 +42,6 @@ describe('RunDataJsonSchema.vue', () => { }, data: [{}], }, - mocks: { - $locale: { - baseText() { - return ''; - }, - }, - }, }; beforeEach(cleanup); diff --git a/packages/editor-ui/src/components/RunDataSchema.vue b/packages/editor-ui/src/components/RunDataSchema.vue index 8010a74842..e14410c4d0 100644 --- a/packages/editor-ui/src/components/RunDataSchema.vue +++ b/packages/editor-ui/src/components/RunDataSchema.vue @@ -9,6 +9,7 @@ import { runExternalHook } from "@/mixins/externalHooks"; import { telemetry } from "@/plugins/telemetry"; import { IDataObject } from "n8n-workflow"; import { getSchema, isEmpty, mergeDeep } from "@/utils"; +import { i18n } from '@/plugins/i18n'; type Props = { data: IDataObject[] @@ -71,7 +72,7 @@ const onDragEnd = (el: HTMLElement) => {