feat(editor): Add 'Whats new' section and modal (#16664)

cypress/composables/versions.ts

@@ -1,9 +1,13 @@
+import { MainSidebar } from '../pages/sidebar/main-sidebar';
+
+const mainSidebar = new MainSidebar();
+
 /**
  * Getters
  */
 
 export function getVersionUpdatesPanelOpenButton() {
-	return cy.getByTestId('version-updates-panel-button');
+	return cy.getByTestId('version-update-next-versions-link');
 }
 
 export function getVersionUpdatesPanel() {
@@ -22,9 +26,13 @@ export function getVersionCard() {
  * Actions
  */
 
+export function openWhatsNewMenu() {
+	mainSidebar.getters.whatsNew().should('be.visible');
+	mainSidebar.getters.whatsNew().click();
+}
+
 export function openVersionUpdatesPanel() {
-	getVersionUpdatesPanelOpenButton().click();
-	getVersionUpdatesPanel().should('be.visible');
+	getVersionUpdatesPanelOpenButton().should('be.visible').click();
 }
 
 export function closeVersionUpdatesPanel() {

cypress/e2e/36-versions.cy.ts

@@ -2,6 +2,7 @@ import {
 	closeVersionUpdatesPanel,
 	getVersionCard,
 	getVersionUpdatesPanelOpenButton,
+	openWhatsNewMenu,
 	openVersionUpdatesPanel,
 } from '../composables/versions';
 import { WorkflowsPage } from '../pages/workflows';
@@ -16,6 +17,8 @@ describe('Versions', () => {
 			versionNotifications: {
 				enabled: true,
 				endpoint: 'https://api.n8n.io/api/versions/',
+				whatsNewEnabled: true,
+				whatsNewEndpoint: 'https://api.n8n.io/api/whats-new',
 				infoUrl: 'https://docs.n8n.io/getting-started/installation/updating.html',
 			},
 		});
@@ -23,7 +26,8 @@ describe('Versions', () => {
 		cy.visit(workflowsPage.url);
 		cy.wait('@loadSettings');
 
-		getVersionUpdatesPanelOpenButton().should('contain', '2 updates');
+		openWhatsNewMenu();
+		getVersionUpdatesPanelOpenButton().should('contain', '2 versions behind');
 		openVersionUpdatesPanel();
 		getVersionCard().should('have.length', 2);
 		closeVersionUpdatesPanel();

cypress/pages/sidebar/main-sidebar.ts

@@ -19,6 +19,7 @@ export class MainSidebar extends BasePage {
 		credentials: () => this.getters.menuItem('credentials'),
 		executions: () => this.getters.menuItem('executions'),
 		adminPanel: () => this.getters.menuItem('cloud-admin'),
+		whatsNew: () => this.getters.menuItem('whats-new'),
 		userMenu: () => cy.getByTestId('user-menu'),
 		logo: () => cy.getByTestId('n8n-logo'),
 	};