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/cli/src/databases/migrations/mysqldb/1646992772331-CreateUserManagement.ts

@@ -156,7 +156,7 @@ export class CreateUserManagement1646992772331 implements ReversibleMigration {
 		);
 
 		await queryRunner.query(
-			`INSERT INTO ${tablePrefix}settings (\`key\`, value, loadOnStartup) VALUES ("ui.banners.v1.dismissed", "true", 1)`,
+			`INSERT INTO ${tablePrefix}settings (\`key\`, value, loadOnStartup) VALUES ("ui.banners.dismissed", "[\"V1\"]", 1)`,
 		);
 	}
 

packages/cli/src/databases/migrations/postgresdb/1646992772331-CreateUserManagement.ts

@@ -135,7 +135,8 @@ export class CreateUserManagement1646992772331 implements ReversibleMigration {
 		);
 
 		await queryRunner.query(
-			`INSERT INTO ${tablePrefix}settings ("key", "value", "loadOnStartup") VALUES ('ui.banners.v1.dismissed', 'true', true)`,
+			`INSERT INTO ${tablePrefix}settings ("key", "value", "loadOnStartup") VALUES ($1, $2, $3)`,
+			['ui.banners.dismissed', '["V1"]', true],
 		);
 	}
 

packages/cli/src/databases/migrations/sqlite/1646992772331-CreateUserManagement.ts

@@ -95,10 +95,13 @@ export class CreateUserManagement1646992772331 implements ReversibleMigration {
 			('userManagement.isInstanceOwnerSetUp', 'false', true), ('userManagement.skipInstanceOwnerSetup', 'false', true)
 		`);
 
-		await queryRunner.query(`
+		await queryRunner.query(
+			`
 			INSERT INTO "${tablePrefix}settings" (key, value, loadOnStartup)
-				VALUES ('ui.banners.v1.dismissed', 'true', true)
-		`);
+				VALUES (?, ?, ?)
+		`,
+			['ui.banners.dismissed', '["V1"]', true],
+		);
 	}
 
 	async down({ queryRunner, tablePrefix }: MigrationContext) {

packages/cli/src/databases/repositories/settings.repository.ts

@@ -9,6 +9,24 @@ export class SettingsRepository extends Repository<Settings> {
 		super(Settings, dataSource.manager);
 	}
 
+	async dismissBanner({ bannerName }: { bannerName: string }): Promise<{ success: boolean }> {
+		const dismissedBannersSetting = await this.findOneBy({ key: 'ui.banners.dismissed' });
+
+		if (dismissedBannersSetting) {
+			try {
+				const dismissedBanners = JSON.parse(dismissedBannersSetting.value) as string[];
+				await this.saveSetting(
+					'ui.banners.dismissed',
+					JSON.stringify([...dismissedBanners, bannerName]),
+				);
+				return { success: true };
+			} catch (error) {
+				return { success: false };
+			}
+		}
+		return { success: false };
+	}
+
 	async saveSetting(key: string, value: string, loadOnStartup = true) {
 		const setting = await this.findOneBy({ key });
 
@@ -18,6 +36,6 @@ export class SettingsRepository extends Repository<Settings> {
 			await this.save({ key, value, loadOnStartup });
 		}
 
-		if (loadOnStartup) config.set('ui.banners.v1.dismissed', true);
+		if (loadOnStartup) config.set('ui.banners.dismissed', value);
 	}
 }