Dashboards/E2E: Add tests for grouping and ungrouping into rows and tabs (#105315)

* add e2e for grouping into tabs and rows

* enable kubernetesDashboards feature toggle for e2e tests

* remove unnecessary kubernetesDashboard feature flag enablement

e2e/dashboard-new-layouts/dashboard-group-panels.spec.ts

@@ -0,0 +1,152 @@
+import { e2e } from '../utils';
+
+describe('Grouping panels', () => {
+  beforeEach(() => {
+    e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD'));
+  });
+
+  after(() => {
+    e2e.flows.revertAllChanges();
+  });
+
+  it('can group and ungroup new panels into row', () => {
+    e2e.flows.addDashboard({ title: 'Group new panels into row' });
+    cy.contains('Group new panels into row').should('be.visible');
+
+    // Toggle edit mode
+    e2e.components.NavToolbar.editDashboard.editButton().should('be.visible').click();
+
+    // Add 3 panels
+    e2e.flows.scenes.addFirstPanel();
+    e2e.flows.scenes.addPanel();
+    e2e.flows.scenes.addPanel();
+
+    // Group into row
+    e2e.flows.scenes.groupIntoRow();
+
+    // Verify row and panel titles
+    e2e.components.DashboardRow.title('New row').should('be.visible');
+    e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
+
+    // Save dashboards and reload
+    e2e.flows.scenes.saveDashboard();
+    cy.reload();
+
+    // Verify row and panel titles after reload
+    e2e.components.DashboardRow.title('New row').should('be.visible');
+    e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
+
+    e2e.components.NavToolbar.editDashboard.editButton().should('be.visible').click();
+
+    // Ungroup
+    e2e.flows.scenes.ungroupPanels();
+
+    // Verify Row title is gone
+    e2e.components.DashboardRow.title('New row').should('not.exist');
+    e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
+
+    //Save dashboards and reload
+    e2e.flows.scenes.saveDashboard();
+    cy.reload();
+
+    // Verify Row title is gone
+    e2e.components.DashboardRow.title('New row').should('not.exist');
+    e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
+  });
+
+  it('can group and ungroup new panels into tab', () => {
+    e2e.flows.addDashboard({ title: 'Group new panels into tab' });
+    cy.contains('Group new panels into tab').should('be.visible');
+
+    // Toggle edit mode
+    e2e.components.NavToolbar.editDashboard.editButton().should('be.visible').click();
+
+    // Add 3 panels
+    e2e.flows.scenes.addFirstPanel();
+    e2e.flows.scenes.addPanel();
+    e2e.flows.scenes.addPanel();
+
+    // Group into tab
+    e2e.flows.scenes.groupIntoTab();
+
+    // Verify tab and panel titles
+    e2e.components.Tab.title('New tab').should('be.visible');
+    e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
+
+    // Save dashboards and reload
+    e2e.flows.scenes.saveDashboard();
+    cy.reload();
+
+    // Verify row and panel titles after reload
+    e2e.components.Tab.title('New tab').should('be.visible');
+    e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
+
+    e2e.components.NavToolbar.editDashboard.editButton().should('be.visible').click();
+
+    // Ungroup
+    e2e.flows.scenes.ungroupPanels();
+
+    // Verify Row title is gone
+    e2e.components.Tab.title('New tab').should('not.exist');
+    e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
+
+    // Save dashboards and reload
+    e2e.flows.scenes.saveDashboard();
+    cy.reload();
+
+    // Verify Row title is gone
+    e2e.components.Tab.title('New tab').should('not.exist');
+    e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
+  });
+
+  it('can group and ungroup new panels into tab with row', () => {
+    e2e.flows.addDashboard({ title: 'Group new panels into tab with row' });
+    cy.contains('Group new panels into tab with row').should('be.visible');
+
+    // Toggle edit mode
+    e2e.components.NavToolbar.editDashboard.editButton().should('be.visible').click();
+
+    // Add 3 panels
+    e2e.flows.scenes.addFirstPanel();
+    e2e.flows.scenes.addPanel();
+    e2e.flows.scenes.addPanel();
+
+    // Group into tab
+    e2e.flows.scenes.groupIntoTab();
+    e2e.flows.scenes.groupIntoRow();
+
+    // Verify tab and panel titles
+    e2e.components.Tab.title('New tab').should('be.visible');
+    e2e.components.DashboardRow.title('New row').should('be.visible');
+    e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
+
+    // Save dashboards and reload
+    e2e.flows.scenes.saveDashboard();
+    cy.reload();
+
+    // Verify tab, row and panel titles after reload
+    e2e.components.Tab.title('New tab').should('be.visible');
+    e2e.components.DashboardRow.title('New row').should('be.visible');
+    e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
+
+    e2e.components.NavToolbar.editDashboard.editButton().should('be.visible').click();
+
+    // Ungroup
+    e2e.flows.scenes.ungroupPanels(); // ungroup rows
+    e2e.flows.scenes.ungroupPanels(); // ungroup tabs
+
+    // Verify tab and row titles is gone
+    e2e.components.Tab.title('New tab').should('not.exist');
+    e2e.components.DashboardRow.title('New row').should('not.exist');
+    e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
+
+    // Save dashboards and reload
+    e2e.flows.scenes.saveDashboard();
+    cy.reload();
+
+    // Verify Row title is gone
+    e2e.components.Tab.title('New tab').should('not.exist');
+    e2e.components.DashboardRow.title('New row').should('not.exist');
+    e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
+  });
+});

e2e/utils/flows/scenes/addPanel.ts

@@ -1,6 +1,16 @@
 import { e2e } from '../..';
 
 export const addPanel = () => {
-  e2e.components.DashboardEditPaneSplitter.primaryBody().scrollTo('bottom');
+  e2e.components.DashboardEditPaneSplitter.primaryBody().scrollTo('bottom', { ensureScrollable: false });
   e2e.components.CanvasGridAddActions.addPanel().should('be.visible').click();
 };
+
+export const addFirstPanel = () => {
+  // add visualization
+  e2e.pages.AddDashboard.itemButton('Create new panel button').should('be.visible').click();
+
+  // close the data source picker modal
+  cy.get('[aria-label="Close"]').click({ force: true });
+
+  e2e.components.NavToolbar.editDashboard.backToDashboardButton().click();
+};

e2e/utils/flows/scenes/groupPanels.ts

@@ -0,0 +1,15 @@
+import { e2e } from '../..';
+
+export const groupIntoRow = () => {
+  e2e.components.CanvasGridAddActions.groupPanels().click({ scrollBehavior: 'nearest' });
+  cy.contains('Group into row').click();
+};
+
+export const groupIntoTab = () => {
+  e2e.components.CanvasGridAddActions.groupPanels().click({ scrollBehavior: 'nearest' });
+  cy.contains('Group into tab').click();
+};
+
+export const ungroupPanels = () => {
+  e2e.components.CanvasGridAddActions.ungroup().click({ scrollBehavior: 'nearest' });
+};

e2e/utils/flows/scenes/index.ts

@@ -2,3 +2,5 @@ export * from './addPanel';
 export * from './configurePanel';
 export * from './removePanel';
 export * from './toggleEditMode';
+export * from './groupPanels';
+export * from './saveDashboard';

e2e/utils/flows/scenes/saveDashboard.ts

@@ -0,0 +1,8 @@
+import { e2e } from '../../index';
+
+export const saveDashboard = () => {
+  e2e.components.NavToolbar.editDashboard.saveButton().click();
+
+  e2e.components.Drawer.DashboardSaveDrawer.saveButton().click();
+  e2e.flows.assertSuccessNotification();
+};