From 4812cdf1a7c58e00b432fb0af65d5b07a5c23c43 Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Fri, 2 May 2025 16:23:49 +0100
Subject: [PATCH] Dashboards/E2E: Add e2e test for adding and configuring a new
 panel (#104857)

---
 .../dashboards-add-panel.spec.ts              | 28 +++++++++++++++++++
 e2e/utils/flows/index.ts                      |  1 +
 e2e/utils/flows/scenes/addPanel.ts            |  6 ++++
 e2e/utils/flows/scenes/configurePanel.ts      |  5 ++++
 e2e/utils/flows/scenes/index.ts               |  2 ++
 .../src/selectors/components.ts               | 11 +++++++-
 .../edit-pane/DashboardEditPaneSplitter.tsx   |  7 ++++-
 .../layouts-shared/CanvasGridAddActions.tsx   |  9 +++++-
 8 files changed, 66 insertions(+), 3 deletions(-)
 create mode 100644 e2e/dashboards-edit-v2-suite/dashboards-add-panel.spec.ts
 create mode 100644 e2e/utils/flows/scenes/addPanel.ts
 create mode 100644 e2e/utils/flows/scenes/configurePanel.ts
 create mode 100644 e2e/utils/flows/scenes/index.ts

diff --git a/e2e/dashboards-edit-v2-suite/dashboards-add-panel.spec.ts b/e2e/dashboards-edit-v2-suite/dashboards-add-panel.spec.ts
new file mode 100644
index 00000000000..2c653deda74
--- /dev/null
+++ b/e2e/dashboards-edit-v2-suite/dashboards-add-panel.spec.ts
@@ -0,0 +1,28 @@
+import { e2e } from '../utils';
+
+const PAGE_UNDER_TEST = 'kVi2Gex7z/test-variable-output';
+const DASHBOARD_NAME = 'Test variable output';
+
+describe('Dashboard panels', () => {
+  beforeEach(() => {
+    e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD'));
+  });
+
+  it('can add a new panel', () => {
+    e2e.pages.Dashboards.visit();
+    e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1` });
+    cy.contains(DASHBOARD_NAME).should('be.visible');
+
+    // Toggle edit mode
+    e2e.components.NavToolbar.editDashboard.editButton().should('be.visible').click();
+
+    e2e.flows.scenes.addPanel();
+
+    // Check that new panel has been added
+    e2e.components.Panels.Panel.title('New panel').should('be.visible');
+
+    // Check that pressing the configure button shows the panel editor
+    e2e.flows.scenes.configurePanel();
+    e2e.components.PanelEditor.General.content().should('be.visible');
+  });
+});
diff --git a/e2e/utils/flows/index.ts b/e2e/utils/flows/index.ts
index ae07146d13e..959fd816960 100644
--- a/e2e/utils/flows/index.ts
+++ b/e2e/utils/flows/index.ts
@@ -16,6 +16,7 @@ export * from './importDashboard';
 export * from './importDashboards';
 export * from './userPreferences';
 export * from './confirmModal';
+export * as 'scenes' from './scenes';
 
 export {
   VISUALIZATION_ALERT_LIST,
diff --git a/e2e/utils/flows/scenes/addPanel.ts b/e2e/utils/flows/scenes/addPanel.ts
new file mode 100644
index 00000000000..bea70e4f4b7
--- /dev/null
+++ b/e2e/utils/flows/scenes/addPanel.ts
@@ -0,0 +1,6 @@
+import { e2e } from '../..';
+
+export const addPanel = () => {
+  e2e.components.DashboardEditPaneSplitter.primaryBody().scrollTo('bottom');
+  e2e.components.CanvasGridAddActions.addPanel().should('be.visible').click();
+};
diff --git a/e2e/utils/flows/scenes/configurePanel.ts b/e2e/utils/flows/scenes/configurePanel.ts
new file mode 100644
index 00000000000..bf0fcb87cbe
--- /dev/null
+++ b/e2e/utils/flows/scenes/configurePanel.ts
@@ -0,0 +1,5 @@
+import { e2e } from '../..';
+
+export const configurePanel = () => {
+  e2e.components.Panels.Panel.content().contains('Configure').should('be.visible').click();
+};
diff --git a/e2e/utils/flows/scenes/index.ts b/e2e/utils/flows/scenes/index.ts
new file mode 100644
index 00000000000..70488d43dc5
--- /dev/null
+++ b/e2e/utils/flows/scenes/index.ts
@@ -0,0 +1,2 @@
+export * from './addPanel';
+export * from './configurePanel';
diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts
index df16879214a..2d58dd46c03 100644
--- a/packages/grafana-e2e-selectors/src/selectors/components.ts
+++ b/packages/grafana-e2e-selectors/src/selectors/components.ts
@@ -23,6 +23,16 @@ export const versionedComponents = {
       '9.4.0': (title: string) => `data-testid ${title} breadcrumb`,
     },
   },
+  CanvasGridAddActions: {
+    addPanel: {
+      '12.1.0': 'data-testid CanvasGridAddActions add-panel',
+    },
+  },
+  DashboardEditPaneSplitter: {
+    primaryBody: {
+      '12.1.0': 'data-testid DashboardEditPaneSplitter primary body',
+    },
+  },
   TimePicker: {
     openButton: {
       [MIN_GRAFANA_VERSION]: 'data-testid TimePicker Open Button',
@@ -544,7 +554,6 @@ export const versionedComponents = {
         '12.0.0': (type: string) => `data-testid outline item ${type}`,
       },
     },
-
     ElementEditPane: {
       variableType: {
         '12.0.0': (type?: string) => `data-testid variable type ${type}`,
diff --git a/public/app/features/dashboard-scene/edit-pane/DashboardEditPaneSplitter.tsx b/public/app/features/dashboard-scene/edit-pane/DashboardEditPaneSplitter.tsx
index 4d9ca7100fc..0066d82c52e 100644
--- a/public/app/features/dashboard-scene/edit-pane/DashboardEditPaneSplitter.tsx
+++ b/public/app/features/dashboard-scene/edit-pane/DashboardEditPaneSplitter.tsx
@@ -2,6 +2,7 @@ import { css, cx } from '@emotion/css';
 import React, { CSSProperties, useEffect } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { config, useChromeHeaderHeight } from '@grafana/runtime';
 import { useSceneObjectState } from '@grafana/scenes';
 import { ElementSelectionContext, useStyles2 } from '@grafana/ui';
@@ -98,7 +99,11 @@ export function DashboardEditPaneSplitter({ dashboard, isEditing, body, controls
           <NavToolbarActions dashboard={dashboard} />
           <div className={cx(!isEditing && styles.controlsWrapperSticky)}>{controls}</div>
           <div className={styles.bodyWrapper}>
-            <div className={cx(styles.body, isEditing && styles.bodyEditing)} ref={onBodyRef}>
+            <div
+              className={cx(styles.body, isEditing && styles.bodyEditing)}
+              data-testid={selectors.components.DashboardEditPaneSplitter.primaryBody}
+              ref={onBodyRef}
+            >
               {body}
             </div>
           </div>
diff --git a/public/app/features/dashboard-scene/scene/layouts-shared/CanvasGridAddActions.tsx b/public/app/features/dashboard-scene/scene/layouts-shared/CanvasGridAddActions.tsx
index 6ca67510a78..4baf5ddeb85 100644
--- a/public/app/features/dashboard-scene/scene/layouts-shared/CanvasGridAddActions.tsx
+++ b/public/app/features/dashboard-scene/scene/layouts-shared/CanvasGridAddActions.tsx
@@ -1,6 +1,7 @@
 import { css, cx } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { Button, Dropdown, Menu, useStyles2 } from '@grafana/ui';
 import { t, Trans } from 'app/core/internationalization';
 
@@ -25,7 +26,13 @@ export function CanvasGridAddActions({ layoutManager }: Props) {
 
   return (
     <div className={cx(styles.addAction, 'dashboard-canvas-add-button')}>
-      <Button variant="primary" fill="text" icon="plus" onClick={() => layoutManager.addPanel(getDefaultVizPanel())}>
+      <Button
+        variant="primary"
+        fill="text"
+        icon="plus"
+        data-testid={selectors.components.CanvasGridAddActions.addPanel}
+        onClick={() => layoutManager.addPanel(getDefaultVizPanel())}
+      >
         <Trans i18nKey="dashboard.canvas-actions.add-panel">Add panel</Trans>
       </Button>
       <Dropdown