Dashboards/E2E: Add test validating panel title and description modification (#105561)

* Dashboards/E2E: Add test validating panel title and description modification

* Use component selector for headerContainer

* Add flows for changing panel title and description

e2e/dashboard-new-layouts/dashboard-edit-flows.ts

@@ -1,5 +1,9 @@
 import { e2e } from '../utils';
 
+const deselectPanels = () => {
+  e2e.pages.Dashboard.Controls().click();
+};
+
 // Common flows for adding/editing variables on the new edit pane
 export const flows = {
   newEditPaneVariableClick() {
@@ -13,6 +17,33 @@ export const flows = {
     e2e.components.PanelEditor.ElementEditPane.variableNameInput().clear().type(variable.name).blur();
     e2e.components.PanelEditor.ElementEditPane.variableLabelInput().clear().type(variable.label).blur();
   },
+  firstPanelTitleShouldBe(panelTitle: string) {
+    return e2e.components.Panels.Panel.headerContainer()
+      .first()
+      .within(() => cy.get('h2').first().should('have.text', panelTitle));
+  },
+  deselectPanels,
+  changePanelTitle(oldPanelTitle: string, newPanelTitle: string) {
+    deselectPanels();
+    const oldPanelRegex = new RegExp(`^${oldPanelTitle}$`);
+    e2e.flows.scenes.selectPanel(oldPanelRegex);
+
+    e2e.components.PanelEditor.OptionsPane.fieldInput('Title')
+      .should('have.value', oldPanelTitle)
+      .clear()
+      .type(newPanelTitle);
+    e2e.components.PanelEditor.OptionsPane.fieldInput('Title').should('have.value', newPanelTitle);
+  },
+  changePanelDescription(panelTitle: string, newDescription: string) {
+    deselectPanels();
+    const panelTitleRegex = new RegExp(`^${panelTitle}$`);
+    e2e.flows.scenes.selectPanel(panelTitleRegex);
+
+    e2e.components.PanelEditor.OptionsPane.fieldLabel('panel-options Description').within(() => {
+      cy.get('textarea').type(newDescription);
+      cy.get('textarea').should('have.value', newDescription);
+    });
+  },
 };
 
 export type Variable = {

e2e/dashboard-new-layouts/dashboards-edit-panel-title-description.spec.ts

@@ -0,0 +1,38 @@
+import { e2e } from '../utils';
+
+import { flows } from './dashboard-edit-flows';
+
+const PAGE_UNDER_TEST = '5SdHCadmz/panel-tests-graph';
+
+describe('Dashboard', () => {
+  beforeEach(() => {
+    e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD'));
+  });
+
+  it('can edit panel title and description', () => {
+    e2e.pages.Dashboards.visit();
+    e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1` });
+
+    e2e.flows.scenes.toggleEditMode();
+
+    const oldTitle = 'No Data Points Warning';
+    flows.firstPanelTitleShouldBe(oldTitle);
+
+    const newDescription = 'A description of this panel';
+    flows.changePanelDescription(oldTitle, newDescription);
+
+    const newTitle = 'New Panel Title';
+    flows.changePanelTitle(oldTitle, newTitle);
+
+    // Check that new title is reflected in panel header
+    flows.firstPanelTitleShouldBe(newTitle);
+
+    // Reveal description tooltip and check that its value is as expected
+    const descriptionIcon = () => cy.get('[data-testid="title-items-container"] > span').first();
+    descriptionIcon().click({ force: true });
+    descriptionIcon().then((el) => {
+      const tooltipId = el.attr('aria-describedby');
+      cy.get(`[id="${tooltipId}"]`).should('have.text', `${newDescription}\n`);
+    });
+  });
+});

e2e/utils/flows/scenes/index.ts

@@ -5,3 +5,4 @@ export * from './toggleEditMode';
 export * from './movePanel';
 export * from './groupPanels';
 export * from './saveDashboard';
+export * from './selectPanel';