Plugin E2e: Support scenes powered dashboard UI (#1155)

packages/plugin-e2e/src/e2e-selectors/types.ts

@@ -109,6 +109,12 @@ export type Components = {
   Alert: {
     alertV2: (severity: string) => string;
   };
+  NavToolbar: {
+    editDashboard: {
+      backToDashboardButton: string;
+      editButton: string;
+    };
+  };
   PageToolbar: {
     item: (tooltip: string) => string;
     showMoreItems: string;

packages/plugin-e2e/src/e2e-selectors/versioned/components.ts

@@ -166,6 +166,16 @@ export const versionedComponents = {
       [MIN_GRAFANA_VERSION]: (severity: string) => `Alert ${severity}`,
     },
   },
+  NavToolbar: {
+    editDashboard: {
+      editButton: {
+        '11.1.0': 'data-testid Edit dashboard button',
+      },
+      backToDashboardButton: {
+        '11.1.0': 'data-testid Back to dashboard button',
+      },
+    },
+  },
   PageToolbar: {
     item: {
       [MIN_GRAFANA_VERSION]: (tooltip: string) => `${tooltip}`,

packages/plugin-e2e/src/e2e-selectors/versioned/pages.ts

@@ -40,6 +40,7 @@ export const versionedPages = {
       '9.5.0': (title: string) => `data-testid ${title}`,
     },
     addNewPanel: {
+      '11.1.0': 'data-testid Add new panel',
       [MIN_GRAFANA_VERSION]: 'Add new panel',
     },
     itemButtonAddViz: {
@@ -70,8 +71,7 @@ export const versionedPages = {
           url: {
             [MIN_GRAFANA_VERSION]: (variableIndex: string) =>
               `/dashboard/new?orgId=1&editview=templating&editIndex=${variableIndex}`,
-              '11.3.0': (variableIndex: string) =>
-              `/dashboard/new?orgId=1&editview=variables&editIndex=${variableIndex}`,
+            '11.3.0': (variableIndex: string) => `/dashboard/new?orgId=1&editview=variables&editIndex=${variableIndex}`,
           },
         },
       },

packages/plugin-e2e/src/models/pages/DashboardPage.ts

@@ -78,12 +78,21 @@ export class DashboardPage extends GrafanaPage {
    */
   async addPanel(): Promise<PanelEditPage> {
     const { components, pages } = this.ctx.selectors;
+
+    // From Grafana 11.3.0, one needs to click the edit button before adding a new panel in already existing dashboards
+    if (semver.gte(this.ctx.grafanaVersion, '11.3.0') && this.dashboard?.uid) {
+      await this.getByGrafanaSelector(components.NavToolbar.editDashboard.editButton).click();
+    }
+
     if (semver.gte(this.ctx.grafanaVersion, '10.0.0')) {
       await this.getByGrafanaSelector(
         components.PageToolbar.itemButton(components.PageToolbar.itemButtonTitle)
       ).click();
       await this.getByGrafanaSelector(pages.AddDashboard.itemButton(pages.AddDashboard.itemButtonAddViz)).click();
     } else {
+      if (this.dashboard?.uid) {
+        await this.getByGrafanaSelector(components.PageToolbar.item('Add panel')).click();
+      }
       await this.getByGrafanaSelector(pages.AddDashboard.addNewPanel).click();
     }
 

packages/plugin-e2e/src/models/pages/PanelEditPage.ts

@@ -6,6 +6,7 @@ import { GrafanaPage } from './GrafanaPage';
 import { TimeRange } from '../components/TimeRange';
 import { Panel } from '../components/Panel';
 import { radioButtonSetChecked } from '../utils';
+import { DashboardPage } from './DashboardPage';
 
 export class PanelEditPage extends GrafanaPage {
   datasource: DataSourcePicker;
@@ -116,11 +117,31 @@ export class PanelEditPage extends GrafanaPage {
     return this.getByGrafanaSelector(this.ctx.selectors.components.PanelEditor.toggleVizPicker);
   }
 
+  /**
+   * Clicks the "Back to dashboard" button in the panel editor
+   * In versions prior to 11.3.0, this method clicks the "Apply" button instead
+   */
+  async backToDashboard() {
+    if (semver.gte(this.ctx.grafanaVersion, '11.3.0')) {
+      await this.getByGrafanaSelector(
+        this.ctx.selectors.components.NavToolbar.editDashboard.backToDashboardButton
+      ).click();
+    } else if (semver.gte(this.ctx.grafanaVersion, '9.0.0')) {
+      await this.ctx.page.getByTestId(this.ctx.selectors.components.PanelEditor.applyButton).click();
+    } else {
+      await this.ctx.page.getByLabel('panel editor apply').click();
+    }
+
+    return new DashboardPage(this.ctx, this.args);
+  }
+
   /**
    * Clicks the "Apply" button in the panel editor
+   *
+   * @deprecated use {@link PanelEditPage.backToDashboard} method instead.
    */
   async apply() {
-    await this.ctx.page.getByTestId(this.ctx.selectors.components.PanelEditor.applyButton).click();
+    return this.backToDashboard();
   }
 
   /**

packages/plugin-e2e/tests/as-admin-user/datasource/dashboards/dashboard.spec.ts

@@ -0,0 +1,14 @@
+import { expect, test } from '../../../../src';
+
+test('add panel in already existing dashboard', async ({ gotoDashboardPage, readProvisionedDashboard, page }) => {
+  const dashboard = await readProvisionedDashboard({ fileName: 'redshift.json' });
+  const dashboardPage = await gotoDashboardPage(dashboard);
+  await dashboardPage.addPanel();
+  await expect(page.url()).toContain('editPanel');
+});
+
+test('add panel in new dashboard', async ({ dashboardPage, page }) => {
+  const panelEditPage = await dashboardPage.addPanel();
+  await expect(panelEditPage.panel.locator).toBeVisible();
+  await expect(page.url()).toContain('editPanel');
+});

packages/plugin-e2e/tests/as-admin-user/datasource/query-editor/queryEditor.spec.ts

@@ -47,3 +47,14 @@ test('should set correct cache time on query passed to the backend', async ({
   await panelEditPage.refreshPanel();
   await expect(await queryReq).toBeTruthy();
 });
+
+test('backToDashboard method should be backwards compatible and navigate to dashboard page', async ({
+  gotoPanelEditPage,
+  readProvisionedDashboard,
+  page,
+}) => {
+  const dashboard = await readProvisionedDashboard({ fileName: 'redshift.json' });
+  const panelEditPage = await gotoPanelEditPage({ dashboard, id: '3' });
+  await panelEditPage.backToDashboard();
+  await expect(page.url()).not.toContain('editPanel');
+});