From 86d291233fdd116a3659c0dc2bb95d43b189051e Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Wed, 22 Oct 2025 11:02:41 +0300
Subject: [PATCH] refactor(editor): Extract `banners` into features/shared
 (no-changelog) (#20964)

---
 packages/frontend/editor-ui/src/App.vue          |  2 +-
 packages/frontend/editor-ui/src/Interface.ts     |  9 ---------
 .../frontend/editor-ui/src/components/Banner.vue |  3 +++
 .../src/features/shared/banners/banners.types.ts |  9 +++++++++
 .../shared/banners/components}/BannerStack.vue   | 16 ++++++++--------
 .../banners}/components/BannersStack.test.ts     |  2 +-
 .../banners}/components/banners/BaseBanner.vue   |  0
 .../banners/DataTableStorageLimitErrorBanner.vue |  2 +-
 .../DataTableStorageLimitWarningBanner.vue       |  2 +-
 .../banners/EmailConfirmationBanner.vue          |  2 +-
 .../banners/NonProductionLicenseBanner.vue       |  2 +-
 .../banners}/components/banners/TrialBanner.vue  |  2 +-
 .../components/banners/TrialOverBanner.vue       |  2 +-
 .../banners}/components/banners/V1Banner.test.ts |  0
 .../banners}/components/banners/V1Banner.vue     |  2 +-
 .../banners/__snapshots__/V1Banner.test.ts.snap  |  0
 16 files changed, 29 insertions(+), 26 deletions(-)
 create mode 100644 packages/frontend/editor-ui/src/features/shared/banners/banners.types.ts
 rename packages/frontend/editor-ui/src/{components/banners => features/shared/banners/components}/BannerStack.vue (76%)
 rename packages/frontend/editor-ui/src/{ => features/shared/banners}/components/BannersStack.test.ts (98%)
 rename packages/frontend/editor-ui/src/{ => features/shared/banners}/components/banners/BaseBanner.vue (100%)
 rename packages/frontend/editor-ui/src/{ => features/shared/banners}/components/banners/DataTableStorageLimitErrorBanner.vue (90%)
 rename packages/frontend/editor-ui/src/{ => features/shared/banners}/components/banners/DataTableStorageLimitWarningBanner.vue (90%)
 rename packages/frontend/editor-ui/src/{ => features/shared/banners}/components/banners/EmailConfirmationBanner.vue (96%)
 rename packages/frontend/editor-ui/src/{ => features/shared/banners}/components/banners/NonProductionLicenseBanner.vue (82%)
 rename packages/frontend/editor-ui/src/{ => features/shared/banners}/components/banners/TrialBanner.vue (98%)
 rename packages/frontend/editor-ui/src/{ => features/shared/banners}/components/banners/TrialOverBanner.vue (92%)
 rename packages/frontend/editor-ui/src/{ => features/shared/banners}/components/banners/V1Banner.test.ts (100%)
 rename packages/frontend/editor-ui/src/{ => features/shared/banners}/components/banners/V1Banner.vue (94%)
 rename packages/frontend/editor-ui/src/{ => features/shared/banners}/components/banners/__snapshots__/V1Banner.test.ts.snap (100%)

diff --git a/packages/frontend/editor-ui/src/App.vue b/packages/frontend/editor-ui/src/App.vue
index 2626e20cefe..42fe64cdc7c 100644
--- a/packages/frontend/editor-ui/src/App.vue
+++ b/packages/frontend/editor-ui/src/App.vue
@@ -3,7 +3,7 @@ import '@/polyfills';
 
 import AssistantsHub from '@/features/ai/assistant/components/AssistantsHub.vue';
 import AskAssistantFloatingButton from '@/features/ai/assistant/components/Chat/AskAssistantFloatingButton.vue';
-import BannerStack from '@/components/banners/BannerStack.vue';
+import BannerStack from '@/features/shared/banners/components/BannerStack.vue';
 import Modals from '@/components/Modals.vue';
 import Telemetry from '@/components/Telemetry.vue';
 import { useHistoryHelper } from '@/composables/useHistoryHelper';
diff --git a/packages/frontend/editor-ui/src/Interface.ts b/packages/frontend/editor-ui/src/Interface.ts
index 3f3d6cd347a..c31bcd3369d 100644
--- a/packages/frontend/editor-ui/src/Interface.ts
+++ b/packages/frontend/editor-ui/src/Interface.ts
@@ -1,7 +1,5 @@
-import type { Component } from 'vue';
 import type { NotificationOptions as ElementNotificationOptions } from 'element-plus';
 import type {
-	BannerName,
 	FrontendSettings,
 	IUserManagementSettings,
 	IVersionNotificationSettings,
@@ -886,13 +884,6 @@ export type UTMCampaign =
 	| 'upgrade-builder'
 	| 'upgrade-custom-roles';
 
-export type N8nBanners = {
-	[key in BannerName]: {
-		priority: number;
-		component: Component;
-	};
-};
-
 export type AddedNode = {
 	type: string;
 	openDetail?: boolean;
diff --git a/packages/frontend/editor-ui/src/components/Banner.vue b/packages/frontend/editor-ui/src/components/Banner.vue
index fbae8d273f8..427d5d36fb6 100644
--- a/packages/frontend/editor-ui/src/components/Banner.vue
+++ b/packages/frontend/editor-ui/src/components/Banner.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+/**
+ * @TODO Move to design system
+ */
 import { ref } from 'vue';
 
 import { ElTag } from 'element-plus';
diff --git a/packages/frontend/editor-ui/src/features/shared/banners/banners.types.ts b/packages/frontend/editor-ui/src/features/shared/banners/banners.types.ts
new file mode 100644
index 00000000000..e51554ae7f6
--- /dev/null
+++ b/packages/frontend/editor-ui/src/features/shared/banners/banners.types.ts
@@ -0,0 +1,9 @@
+import type { Component } from 'vue';
+import type { BannerName } from '@n8n/api-types';
+
+export type N8nBanners = {
+	[key in BannerName]: {
+		priority: number;
+		component: Component;
+	};
+};
diff --git a/packages/frontend/editor-ui/src/components/banners/BannerStack.vue b/packages/frontend/editor-ui/src/features/shared/banners/components/BannerStack.vue
similarity index 76%
rename from packages/frontend/editor-ui/src/components/banners/BannerStack.vue
rename to packages/frontend/editor-ui/src/features/shared/banners/components/BannerStack.vue
index 777cec04444..ab940e81d6a 100644
--- a/packages/frontend/editor-ui/src/components/banners/BannerStack.vue
+++ b/packages/frontend/editor-ui/src/features/shared/banners/components/BannerStack.vue
@@ -1,13 +1,13 @@
 <script lang="ts">
-import NonProductionLicenseBanner from '@/components/banners/NonProductionLicenseBanner.vue';
-import TrialOverBanner from '@/components/banners/TrialOverBanner.vue';
-import TrialBanner from '@/components/banners/TrialBanner.vue';
-import V1Banner from '@/components/banners/V1Banner.vue';
-import EmailConfirmationBanner from '@/components/banners/EmailConfirmationBanner.vue';
-import DataTableStorageLimitWarningBanner from '@/components/banners/DataTableStorageLimitWarningBanner.vue';
-import DataTableStorageLimitErrorBanner from '@/components/banners/DataTableStorageLimitErrorBanner.vue';
+import NonProductionLicenseBanner from './banners/NonProductionLicenseBanner.vue';
+import TrialOverBanner from './banners/TrialOverBanner.vue';
+import TrialBanner from './banners/TrialBanner.vue';
+import V1Banner from './banners/V1Banner.vue';
+import EmailConfirmationBanner from './banners/EmailConfirmationBanner.vue';
+import DataTableStorageLimitWarningBanner from './banners/DataTableStorageLimitWarningBanner.vue';
+import DataTableStorageLimitErrorBanner from './banners/DataTableStorageLimitErrorBanner.vue';
 import type { Component } from 'vue';
-import type { N8nBanners } from '@/Interface';
+import type { N8nBanners } from '../banners.types';
 
 // All banners that can be shown in the app should be registered here.
 // This component renders the banner with the highest priority from the banner stack, located in the UI store.
diff --git a/packages/frontend/editor-ui/src/components/BannersStack.test.ts b/packages/frontend/editor-ui/src/features/shared/banners/components/BannersStack.test.ts
similarity index 98%
rename from packages/frontend/editor-ui/src/components/BannersStack.test.ts
rename to packages/frontend/editor-ui/src/features/shared/banners/components/BannersStack.test.ts
index fd6301f412a..6227d64c0b9 100644
--- a/packages/frontend/editor-ui/src/components/BannersStack.test.ts
+++ b/packages/frontend/editor-ui/src/features/shared/banners/components/BannersStack.test.ts
@@ -6,7 +6,7 @@ import { ROLE } from '@n8n/api-types';
 import { STORES } from '@n8n/stores';
 
 import { createTestingPinia } from '@pinia/testing';
-import BannerStack from '@/components/banners/BannerStack.vue';
+import BannerStack from './BannerStack.vue';
 import type { RenderOptions } from '@/__tests__/render';
 import { createComponentRenderer } from '@/__tests__/render';
 import { waitFor } from '@testing-library/vue';
diff --git a/packages/frontend/editor-ui/src/components/banners/BaseBanner.vue b/packages/frontend/editor-ui/src/features/shared/banners/components/banners/BaseBanner.vue
similarity index 100%
rename from packages/frontend/editor-ui/src/components/banners/BaseBanner.vue
rename to packages/frontend/editor-ui/src/features/shared/banners/components/banners/BaseBanner.vue
diff --git a/packages/frontend/editor-ui/src/components/banners/DataTableStorageLimitErrorBanner.vue b/packages/frontend/editor-ui/src/features/shared/banners/components/banners/DataTableStorageLimitErrorBanner.vue
similarity index 90%
rename from packages/frontend/editor-ui/src/components/banners/DataTableStorageLimitErrorBanner.vue
rename to packages/frontend/editor-ui/src/features/shared/banners/components/banners/DataTableStorageLimitErrorBanner.vue
index c0d2131ef88..d27782add4c 100644
--- a/packages/frontend/editor-ui/src/components/banners/DataTableStorageLimitErrorBanner.vue
+++ b/packages/frontend/editor-ui/src/features/shared/banners/components/banners/DataTableStorageLimitErrorBanner.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useI18n } from '@n8n/i18n';
-import BaseBanner from '@/components/banners/BaseBanner.vue';
+import BaseBanner from './BaseBanner.vue';
 import { useDataTableStore } from '@/features/core/dataTable/dataTable.store';
 
 const dataTableStore = useDataTableStore();
diff --git a/packages/frontend/editor-ui/src/components/banners/DataTableStorageLimitWarningBanner.vue b/packages/frontend/editor-ui/src/features/shared/banners/components/banners/DataTableStorageLimitWarningBanner.vue
similarity index 90%
rename from packages/frontend/editor-ui/src/components/banners/DataTableStorageLimitWarningBanner.vue
rename to packages/frontend/editor-ui/src/features/shared/banners/components/banners/DataTableStorageLimitWarningBanner.vue
index 50aeae9b567..eed300ef9f1 100644
--- a/packages/frontend/editor-ui/src/components/banners/DataTableStorageLimitWarningBanner.vue
+++ b/packages/frontend/editor-ui/src/features/shared/banners/components/banners/DataTableStorageLimitWarningBanner.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useI18n } from '@n8n/i18n';
-import BaseBanner from '@/components/banners/BaseBanner.vue';
+import BaseBanner from './BaseBanner.vue';
 import { useDataTableStore } from '@/features/core/dataTable/dataTable.store';
 
 const dataTableStore = useDataTableStore();
diff --git a/packages/frontend/editor-ui/src/components/banners/EmailConfirmationBanner.vue b/packages/frontend/editor-ui/src/features/shared/banners/components/banners/EmailConfirmationBanner.vue
similarity index 96%
rename from packages/frontend/editor-ui/src/components/banners/EmailConfirmationBanner.vue
rename to packages/frontend/editor-ui/src/features/shared/banners/components/banners/EmailConfirmationBanner.vue
index 45f4e4d34a3..4c63650c781 100644
--- a/packages/frontend/editor-ui/src/components/banners/EmailConfirmationBanner.vue
+++ b/packages/frontend/editor-ui/src/features/shared/banners/components/banners/EmailConfirmationBanner.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import BaseBanner from '@/components/banners/BaseBanner.vue';
+import BaseBanner from './BaseBanner.vue';
 import { useToast } from '@/composables/useToast';
 import { i18n as locale } from '@n8n/i18n';
 import { useUsersStore } from '@/features/settings/users/users.store';
diff --git a/packages/frontend/editor-ui/src/components/banners/NonProductionLicenseBanner.vue b/packages/frontend/editor-ui/src/features/shared/banners/components/banners/NonProductionLicenseBanner.vue
similarity index 82%
rename from packages/frontend/editor-ui/src/components/banners/NonProductionLicenseBanner.vue
rename to packages/frontend/editor-ui/src/features/shared/banners/components/banners/NonProductionLicenseBanner.vue
index abbab0e9dae..0a13cf8f589 100644
--- a/packages/frontend/editor-ui/src/components/banners/NonProductionLicenseBanner.vue
+++ b/packages/frontend/editor-ui/src/features/shared/banners/components/banners/NonProductionLicenseBanner.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import BaseBanner from '@/components/banners/BaseBanner.vue';
+import BaseBanner from './BaseBanner.vue';
 import { i18n as locale } from '@n8n/i18n';
 </script>
 
diff --git a/packages/frontend/editor-ui/src/components/banners/TrialBanner.vue b/packages/frontend/editor-ui/src/features/shared/banners/components/banners/TrialBanner.vue
similarity index 98%
rename from packages/frontend/editor-ui/src/components/banners/TrialBanner.vue
rename to packages/frontend/editor-ui/src/features/shared/banners/components/banners/TrialBanner.vue
index fd0a4a8c46e..f1900dd9d7d 100644
--- a/packages/frontend/editor-ui/src/components/banners/TrialBanner.vue
+++ b/packages/frontend/editor-ui/src/features/shared/banners/components/banners/TrialBanner.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import BaseBanner from '@/components/banners/BaseBanner.vue';
+import BaseBanner from './BaseBanner.vue';
 import { i18n as locale } from '@n8n/i18n';
 import { useCloudPlanStore } from '@/stores/cloudPlan.store';
 import { computed } from 'vue';
diff --git a/packages/frontend/editor-ui/src/components/banners/TrialOverBanner.vue b/packages/frontend/editor-ui/src/features/shared/banners/components/banners/TrialOverBanner.vue
similarity index 92%
rename from packages/frontend/editor-ui/src/components/banners/TrialOverBanner.vue
rename to packages/frontend/editor-ui/src/features/shared/banners/components/banners/TrialOverBanner.vue
index 3ae4f80b5a6..7c7573e71a2 100644
--- a/packages/frontend/editor-ui/src/components/banners/TrialOverBanner.vue
+++ b/packages/frontend/editor-ui/src/features/shared/banners/components/banners/TrialOverBanner.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import BaseBanner from '@/components/banners/BaseBanner.vue';
+import BaseBanner from './BaseBanner.vue';
 import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper';
 import { i18n as locale } from '@n8n/i18n';
 
diff --git a/packages/frontend/editor-ui/src/components/banners/V1Banner.test.ts b/packages/frontend/editor-ui/src/features/shared/banners/components/banners/V1Banner.test.ts
similarity index 100%
rename from packages/frontend/editor-ui/src/components/banners/V1Banner.test.ts
rename to packages/frontend/editor-ui/src/features/shared/banners/components/banners/V1Banner.test.ts
diff --git a/packages/frontend/editor-ui/src/components/banners/V1Banner.vue b/packages/frontend/editor-ui/src/features/shared/banners/components/banners/V1Banner.vue
similarity index 94%
rename from packages/frontend/editor-ui/src/components/banners/V1Banner.vue
rename to packages/frontend/editor-ui/src/features/shared/banners/components/banners/V1Banner.vue
index 9a879715333..ff7b1403b3c 100644
--- a/packages/frontend/editor-ui/src/components/banners/V1Banner.vue
+++ b/packages/frontend/editor-ui/src/features/shared/banners/components/banners/V1Banner.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
-import BaseBanner from '@/components/banners/BaseBanner.vue';
+import BaseBanner from './BaseBanner.vue';
 import { i18n as locale } from '@n8n/i18n';
 import { hasPermission } from '@/utils/rbac/permissions';
 import { useUIStore } from '@/stores/ui.store';
diff --git a/packages/frontend/editor-ui/src/components/banners/__snapshots__/V1Banner.test.ts.snap b/packages/frontend/editor-ui/src/features/shared/banners/components/banners/__snapshots__/V1Banner.test.ts.snap
similarity index 100%
rename from packages/frontend/editor-ui/src/components/banners/__snapshots__/V1Banner.test.ts.snap
rename to packages/frontend/editor-ui/src/features/shared/banners/components/banners/__snapshots__/V1Banner.test.ts.snap