E2E: Fixed so openPanelMenuItem flow works with new/old panel chrome without breaking changes (#66118)

Fixed so the openPanelMenuItem works with both angular and react panels.

e2e/panels-suite/panelEdit_base.spec.ts

@@ -17,7 +17,7 @@ e2e.scenario({
     e2e.flows.openDashboard({ uid: 'TkZXxlNG3' });
     e2e().wait('@query');
 
-    e2e.flows.openPanelMenuItem(e2e.flows.PanelMenuItems.Edit, PANEL_UNDER_TEST, true);
+    e2e.flows.openPanelMenuItem(e2e.flows.PanelMenuItems.Edit, PANEL_UNDER_TEST);
 
     // New panel editor opens when navigating from Panel menu
     e2e.components.PanelEditor.General.content().should('be.visible');

e2e/various-suite/inspect-drawer.spec.ts

@@ -37,7 +37,7 @@ e2e.scenario({
     e2e.flows.openDashboard({ uid: 'wfTJJL5Wz' });
 
     // testing opening inspect drawer directly by clicking on Inspect in header menu
-    e2e.flows.openPanelMenuItem(e2e.flows.PanelMenuItems.Inspect, PANEL_UNDER_TEST, true);
+    e2e.flows.openPanelMenuItem(e2e.flows.PanelMenuItems.Inspect, PANEL_UNDER_TEST);
 
     expectDrawerTabsAndContent();
 
@@ -49,7 +49,7 @@ e2e.scenario({
     expectSubMenuScenario('Query');
     expectSubMenuScenario('Panel JSON', 'JSON');
 
-    e2e.flows.openPanelMenuItem(e2e.flows.PanelMenuItems.Edit, PANEL_UNDER_TEST, true);
+    e2e.flows.openPanelMenuItem(e2e.flows.PanelMenuItems.Edit, PANEL_UNDER_TEST);
 
     e2e.components.QueryTab.queryInspectorButton().should('be.visible').click();
 

packages/grafana-e2e/src/flows/openPanelMenuItem.ts

@@ -7,26 +7,51 @@ export enum PanelMenuItems {
   Extensions = 'Extensions',
 }
 
-export const openPanelMenuItem = (menu: PanelMenuItems, panelTitle = 'Panel Title', isReactPanel = false) => {
+export const openPanelMenuItem = (menu: PanelMenuItems, panelTitle = 'Panel Title') => {
   // we changed the way we open the panel menu in react panels with the new panel header
-  if (isReactPanel) {
-    e2e.components.Panels.Panel.menu(panelTitle).click({ force: true }); // force click because menu is hidden and show on hover
-    e2e.components.Panels.Panel.menuItems(menu).should('be.visible').click();
-  } else {
-    // this is the old way of opening the panel menu from the title
-    e2e.components.Panels.Panel.title(panelTitle).should('be.visible').click();
-    e2e.components.Panels.Panel.headerItems(menu).should('be.visible').click();
-  }
+  detectPanelType(panelTitle, (isAngularPanel) => {
+    if (isAngularPanel) {
+      e2e.components.Panels.Panel.title(panelTitle).should('be.visible').click();
+      e2e.components.Panels.Panel.headerItems(menu).should('be.visible').click();
+    } else {
+      e2e.components.Panels.Panel.menu(panelTitle).click({ force: true }); // force click because menu is hidden and show on hover
+      e2e.components.Panels.Panel.menuItems(menu).should('be.visible').click();
+    }
+  });
 };
 
 export const openPanelMenuExtension = (extensionTitle: string, panelTitle = 'Panel Title') => {
-  e2e.components.Panels.Panel.title(panelTitle).should('be.visible').click();
+  const menuItem = PanelMenuItems.Extensions;
+  // we changed the way we open the panel menu in react panels with the new panel header
+  detectPanelType(panelTitle, (isAngularPanel) => {
+    if (isAngularPanel) {
+      e2e.components.Panels.Panel.title(panelTitle).should('be.visible').click();
+      e2e.components.Panels.Panel.headerItems(menuItem)
+        .should('be.visible')
+        .parent()
+        .parent()
+        .invoke('addClass', 'open');
+      e2e.components.Panels.Panel.headerItems(extensionTitle).should('be.visible').click();
+    } else {
+      e2e.components.Panels.Panel.menu(panelTitle).click({ force: true }); // force click because menu is hidden and show on hover
+      e2e.components.Panels.Panel.menuItems(menuItem).trigger('mouseover', { force: true });
+      e2e.components.Panels.Panel.menuItems(extensionTitle).click({ force: true });
+    }
+  });
+};
 
-  e2e.components.Panels.Panel.headerItems(PanelMenuItems.Extensions)
-    .should('be.visible')
-    .parent()
-    .parent()
-    .invoke('addClass', 'open');
+function detectPanelType(panelTitle: string, detected: (isAngularPanel: boolean) => void) {
+  e2e.components.Panels.Panel.title(panelTitle).then((el) => {
+    const isAngularPanel = el.find('plugin-component.ng-scope').length > 0;
 
-  e2e.components.Panels.Panel.headerItems(extensionTitle).should('be.visible').click();
-};
+    if (isAngularPanel) {
+      Cypress.log({
+        name: 'detectPanelType',
+        displayName: 'detector',
+        message: 'Angular panel detected, will use legacy selectors.',
+      });
+    }
+
+    detected(isAngularPanel);
+  });
+}

public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx

@@ -197,7 +197,11 @@ export class PanelChromeAngularUnconnected extends PureComponent<Props, State> {
     });
 
     return (
-      <div className={containerClassNames} aria-label={selectors.components.Panels.Panel.containerByTitle(panel.title)}>
+      <div
+        className={containerClassNames}
+        data-testid={selectors.components.Panels.Panel.title(panel.title)}
+        aria-label={selectors.components.Panels.Panel.containerByTitle(panel.title)}
+      >
         <PanelHeader
           panel={panel}
           dashboard={dashboard}