feat(editor): Implement new banners framework (#6603)

* ⚡ Implemented new grid row - banners
* ✨ Fixing node creator and executions sidebar position after layout update
* 💄 Added configurable round corners to the Callout component
* ⚡ Fixing mouse position detection and main tab bar position
* ⚡ Implemented basic banner component structure
* ⚡ Implemented banner state and dismiss logic
* ⚡ Fixing grid layout. Updating banners height state dynamically
* ⚡ Fix zoom to fit position, mouse position in demo mode and callout vertical alignment
* ⚡ Implementing proper trial banners logic
* 💄 Only showing execution usage data once the sidebar is fully expanded
* ✨ Implemented permanent/temporary dismiss logic for v1 flag
* ⚡ Minor refactoring of banner logic
* ⚡ Updating permanent dismiss logic to work with all banners
* 👕 Fixing linting errors
* ✔️ Updating Callout component test snapshots
* 💄 Tweaking zoom to fit position
* ✔️ Updating testing endpoints to use new store data
* ✅ Added banners unit tests
* ✔️ Fixing failing banner tests
* ✅ Added more banner tests
* ⚡ Updating banners dimensions on resize, removing leftover code
* ✔️ Removing store import from API file
* 👕 Fixing lint errors
* ⚡ Updating migration files
* ⚡ Using query parameters in migrations
* 👌 Addressing design review feedback
* ⚡ Updating upgrade plan button click
* ⚡ Updating the migrations syntax
* 👌 Updating permanent banner dismiss endpoint and back-end logic
* 👌 Refactoring trial banner component and ui store
* 👌 Addressing more points from code review
* 👌 Moving DOM logic from the store
* ✔️ Updated callout component snapshots
* 👌 Updating mysql migration file
* ✔️ Updating e2e test canvas coordinates after setting it's position to absolute
* 👌 Addressing back-end review feedback
* 👌 Improving typing around banners
* 👕 Fixing lint errors

packages/editor-ui/src/App.vue

@@ -9,7 +9,9 @@
 				[$style.sidebarCollapsed]: uiStore.sidebarMenuCollapsed,
 			}"
 		>
-			<V1Banner />
+			<div id="banners" :class="$style.banners">
+				<banner-stack v-if="!isDemoMode" />
+			</div>
 			<div id="header" :class="$style.header">
 				<router-view name="header"></router-view>
 			</div>
@@ -31,7 +33,7 @@
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
 
-import V1Banner from '@/components/V1Banner.vue';
+import BannerStack from '@/components/banners/BannerStack.vue';
 import Modals from '@/components/Modals.vue';
 import LoadingView from '@/views/LoadingView.vue';
 import Telemetry from '@/components/Telemetry.vue';
@@ -59,10 +61,10 @@ import { useExternalHooks } from '@/composables';
 export default defineComponent({
 	name: 'App',
 	components: {
+		BannerStack,
 		LoadingView,
 		Telemetry,
 		Modals,
-		V1Banner,
 	},
 	mixins: [newVersions, userHelpers],
 	setup(props) {
@@ -89,6 +91,9 @@ export default defineComponent({
 		defaultLocale(): string {
 			return this.rootStore.defaultLocale;
 		},
+		isDemoMode(): boolean {
+			return this.$route.name === VIEWS.DEMO;
+		},
 	},
 	data() {
 		return {
@@ -126,7 +131,7 @@ export default defineComponent({
 			} catch (e) {}
 		},
 		logHiringBanner() {
-			if (this.settingsStore.isHiringBannerEnabled && this.$route.name !== VIEWS.DEMO) {
+			if (this.settingsStore.isHiringBannerEnabled && !this.isDemoMode) {
 				console.log(HIRING_BANNER); // eslint-disable-line no-console
 			}
 		},
@@ -216,6 +221,16 @@ export default defineComponent({
 				} catch {}
 			}, CLOUD_TRIAL_CHECK_INTERVAL);
 		},
+		async initBanners(): Promise<void> {
+			if (this.cloudPlanStore.userIsTrialing) {
+				await this.uiStore.dismissBanner('V1', 'temporary');
+				if (this.cloudPlanStore.trialExpired) {
+					this.uiStore.showBanner('TRIAL_OVER');
+				} else {
+					this.uiStore.showBanner('TRIAL');
+				}
+			}
+		},
 		async postAuthenticate() {
 			if (this.postAuthenticateDone) {
 				return;
@@ -239,6 +254,12 @@ export default defineComponent({
 		this.authenticate();
 		this.redirectIfNecessary();
 		void this.checkForNewVersions();
+		await this.checkForCloudPlanData();
+		await this.initBanners();
+
+		if (this.sourceControlStore.isEnterpriseSourceControlEnabled) {
+			await this.sourceControlStore.getPreferences();
+		}
 		void this.checkForCloudPlanData();
 		void this.postAuthenticate();
 
@@ -279,17 +300,24 @@ export default defineComponent({
 .container {
 	display: grid;
 	grid-template-areas:
+		'banners banners'
 		'sidebar header'
 		'sidebar content';
 	grid-auto-columns: fit-content($sidebar-expanded-width) 1fr;
-	grid-template-rows: fit-content($sidebar-width) 1fr;
+	grid-template-rows: auto fit-content($header-height) 1fr;
+	height: 100vh;
+}
+
+.banners {
+	grid-area: banners;
+	z-index: 999;
 }
 
 .content {
 	display: flex;
 	grid-area: content;
 	overflow: auto;
-	height: 100vh;
+	height: 100%;
 	width: 100%;
 	justify-content: center;
 }
@@ -301,7 +329,7 @@ export default defineComponent({
 
 .sidebar {
 	grid-area: sidebar;
-	height: 100vh;
-	z-index: 99;
+	height: 100%;
+	z-index: 999;
 }
 </style>