Dashboards/E2E: Add e2e test for adding and configuring a new panel (#104857)

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');
+  });
+});

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,

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();
+};

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();
+};

e2e/utils/flows/scenes/index.ts

@@ -0,0 +1,2 @@
+export * from './addPanel';
+export * from './configurePanel';

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}`,

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>

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