feat(editor): Add v1 banner (#6443)

packages/editor-ui/src/stores/settings.store.ts

@@ -212,6 +212,10 @@ export const useSettingsStore = defineStore(STORES.SETTINGS, {
 			rootStore.setN8nMetadata(settings.n8nMetadata || {});
 			rootStore.setDefaultLocale(settings.defaultLocale);
 			rootStore.setIsNpmAvailable(settings.isNpmAvailable);
+			if (settings.banners.v1.dismissed) {
+				useUIStore().setBanners({ v1: { dismissed: true, mode: 'permanent' } });
+			}
+
 			useVersionsStore().setVersionNotificationSettings(settings.versionNotifications);
 		},
 		stopShowingSetupPage(): void {

packages/editor-ui/src/stores/ui.store.ts

@@ -52,6 +52,7 @@ import type { BaseTextKey } from '@/plugins/i18n';
 import { i18n as locale } from '@/plugins/i18n';
 import type { Modals, NewCredentialsModal } from '@/Interface';
 import { useTelemetryStore } from '@/stores/telemetry.store';
+import { dismissV1BannerPermanently } from '@/api/ui';
 
 export const useUIStore = defineStore(STORES.UI, {
 	state: (): UIState => ({
@@ -139,6 +140,12 @@ export const useUIStore = defineStore(STORES.UI, {
 		},
 		modalStack: [],
 		sidebarMenuCollapsed: true,
+		banners: {
+			v1: {
+				dismissed: false,
+				mode: 'temporary',
+			},
+		},
 		isPageLoading: true,
 		currentView: '',
 		mainPanelPosition: 0.5,
@@ -332,6 +339,12 @@ export const useUIStore = defineStore(STORES.UI, {
 		},
 	},
 	actions: {
+		setBanners(banners: UIState['banners']): void {
+			this.banners = {
+				...this.banners,
+				...banners,
+			};
+		},
 		setMode(name: keyof Modals, mode: string): void {
 			this.modals[name] = {
 				...this.modals[name],
@@ -508,6 +521,22 @@ export const useUIStore = defineStore(STORES.UI, {
 		toggleSidebarMenuCollapse(): void {
 			this.sidebarMenuCollapsed = !this.sidebarMenuCollapsed;
 		},
+		async dismissBanner(bannerType: 'v1', mode: 'temporary' | 'permanent'): Promise<void> {
+			if (mode === 'permanent') {
+				await dismissV1BannerPermanently(useRootStore().getRestApiContext);
+				this.banners[bannerType].dismissed = true;
+				this.banners[bannerType].mode = 'permanent';
+				return;
+			}
+
+			this.banners[bannerType].dismissed = true;
+			this.banners[bannerType].mode = 'temporary';
+		},
+		restoreBanner(bannerType: 'v1'): void {
+			if (this.banners[bannerType].dismissed && this.banners[bannerType].mode === 'temporary') {
+				this.banners[bannerType].dismissed = false;
+			}
+		},
 		async getCurlToJson(curlCommand: string): Promise<CurlToJSONResponse> {
 			const rootStore = useRootStore();
 			return getCurlToJson(rootStore.getRestApiContext, curlCommand);