Dashboards/E2E: Add tests for removing panel(s) (#104998)

* Dashboards/E2E: Add tests for removing panel(s)

e2e/dashboards-edit-v2-suite/dashboards-remove-panel.spec.ts

@@ -0,0 +1,37 @@
+import { e2e } from '../utils';
+
+const PAGE_UNDER_TEST = 'edediimbjhdz4b/a-tall-dashboard';
+
+describe('Dashboard panels', () => {
+  beforeEach(() => {
+    e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD'));
+  });
+
+  it('can remove a panel', () => {
+    e2e.pages.Dashboards.visit();
+    e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1` });
+
+    e2e.flows.scenes.toggleEditMode();
+
+    e2e.flows.scenes.removePanels(/^Panel #1$/);
+
+    // Check that panel has been deleted
+    e2e.components.Panels.Panel.headerContainer()
+      .contains(/^Panel #1$/)
+      .should('not.exist');
+  });
+
+  it('can remove several panels at once', () => {
+    e2e.pages.Dashboards.visit();
+    e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1` });
+
+    e2e.flows.scenes.toggleEditMode();
+
+    e2e.flows.scenes.removePanels(/^Panel #1$/, /^Panel #2$/, /^Panel #3$/);
+
+    // Check that panels have been deleted
+    e2e.components.Panels.Panel.headerContainer()
+      .contains(/^Panel #[123]$/)
+      .should('not.exist');
+  });
+});

e2e/utils/flows/scenes/index.ts

@@ -1,2 +1,4 @@
 export * from './addPanel';
 export * from './configurePanel';
+export * from './removePanel';
+export * from './toggleEditMode';

e2e/utils/flows/scenes/removePanel.ts

@@ -0,0 +1,17 @@
+import { e2e } from '../..';
+
+import { selectPanels } from './selectPanel';
+
+export const removePanels = (...panelTitles: Array<string | RegExp>) => {
+  selectPanels(panelTitles);
+
+  // Delete the panels
+  e2e.components.EditPaneHeader.deleteButton().click();
+
+  // Confirm deletion via modal
+  e2e.pages.ConfirmModal.delete().click();
+};
+
+export const removePanel = (panelTitle: string | RegExp) => {
+  removePanels(panelTitle);
+};

e2e/utils/flows/scenes/selectPanel.ts

@@ -0,0 +1,11 @@
+import { e2e } from '../..';
+
+export const selectPanel = (panelTitle: string | RegExp, shift = false) => {
+  e2e.components.Panels.Panel.headerContainer().contains(panelTitle).click({ shiftKey: shift });
+};
+
+export const selectPanels = (panelTitles: Array<string | RegExp>) => {
+  for (const panel of panelTitles) {
+    selectPanel(panel, true);
+  }
+};

e2e/utils/flows/scenes/toggleEditMode.ts

@@ -0,0 +1,5 @@
+import { e2e } from '../..';
+
+export const toggleEditMode = () => {
+  e2e.components.NavToolbar.editDashboard.editButton().should('be.visible').click();
+};

packages/grafana-e2e-selectors/src/selectors/components.ts

@@ -33,6 +33,11 @@ export const versionedComponents = {
       '12.1.0': 'data-testid DashboardEditPaneSplitter primary body',
     },
   },
+  EditPaneHeader: {
+    deleteButton: {
+      '12.1.0': 'data-testid EditPaneHeader delete panel',
+    },
+  },
   TimePicker: {
     openButton: {
       [MIN_GRAFANA_VERSION]: 'data-testid TimePicker Open Button',
@@ -354,6 +359,9 @@ export const versionedComponents = {
       content: {
         '11.1.0': 'data-testid panel content',
       },
+      headerContainer: {
+        '9.5.0': 'data-testid header-container',
+      },
       headerItems: {
         '10.2.0': (item: string) => `data-testid Panel header item ${item}`,
       },

packages/grafana-ui/src/components/PanelChrome/PanelChrome.test.tsx

@@ -63,7 +63,7 @@ it('renders an empty panel with padding', () => {
 it('renders panel header if prop title', () => {
   setup({ title: 'Test Panel Header' });
 
-  expect(screen.getByTestId('header-container')).toBeInTheDocument();
+  expect(screen.getByTestId(selectors.components.Panels.Panel.headerContainer)).toBeInTheDocument();
 });
 
 // Check for backwards compatibility
@@ -79,13 +79,13 @@ it('renders panel with a header if prop leftItems', () => {
     leftItems: [<div key="left-item-test"> This should be a self-contained node </div>],
   });
 
-  expect(screen.getByTestId('header-container')).toBeInTheDocument();
+  expect(screen.getByTestId(selectors.components.Panels.Panel.headerContainer)).toBeInTheDocument();
 });
 
 it('renders panel with a hovering header if prop hoverHeader is true', () => {
   setup({ title: 'Test Panel Header', hoverHeader: true });
 
-  expect(screen.queryByTestId('header-container')).not.toBeInTheDocument();
+  expect(screen.queryByTestId(selectors.components.Panels.Panel.headerContainer)).not.toBeInTheDocument();
 });
 
 it('renders panel with a header if prop titleItems', () => {
@@ -93,7 +93,7 @@ it('renders panel with a header if prop titleItems', () => {
     titleItems: [<div key="title-item-test"> This should be a self-contained node </div>],
   });
 
-  expect(screen.getByTestId('header-container')).toBeInTheDocument();
+  expect(screen.getByTestId(selectors.components.Panels.Panel.headerContainer)).toBeInTheDocument();
 });
 
 it('renders panel with a header with icons in place if prop titleItems', () => {

packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx

@@ -372,7 +372,7 @@ export function PanelChrome({
         <div
           className={cx(styles.headerContainer, dragClass)}
           style={headerStyles}
-          data-testid="header-container"
+          data-testid={selectors.components.Panels.Panel.headerContainer}
           onPointerDown={onPointerDown}
           onMouseEnter={isSelectable ? onHeaderEnter : undefined}
           onMouseLeave={isSelectable ? onHeaderLeave : undefined}

public/app/features/dashboard-scene/edit-pane/EditPaneHeader.tsx

@@ -1,6 +1,7 @@
 import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { Button, Menu, Stack, Text, useStyles2, Dropdown, Icon, IconButton } from '@grafana/ui';
 import { t } from 'app/core/internationalization';
 
@@ -78,6 +79,7 @@ export function EditPaneHeader({ element, editPane }: EditPaneHeaderProps) {
             fill="outline"
             icon="trash-alt"
             tooltip={t('dashboard.layout.common.delete', 'Delete')}
+            data-testid={selectors.components.EditPaneHeader.deleteButton}
           />
         )}
       </Stack>