test: fix e2e dashboard and configure panel flows for Grafana 8 (#35498)

* fix e2e flows

* trigger build

* remove aria-label

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

@@ -61,7 +61,10 @@ export const Pages = {
       },
       Annotations: {
         List: {
-          addAnnotationCTA: Components.CallToActionCard.button('Add Annotation Query'),
+          addAnnotationCTA: Components.CallToActionCard.button('Add annotation query'),
+        },
+        Settings: {
+          name: 'Annotations settings name input',
         },
       },
       Variables: {

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

@@ -3,6 +3,7 @@ import { e2e } from '../index';
 import { getDashboardUid } from '../support/url';
 import { setDashboardTimeRange, TimeRangeConfig } from './setDashboardTimeRange';
 import { v4 as uuidv4 } from 'uuid';
+import { selectOption } from './selectOption';
 
 export interface AddAnnotationConfig {
   dataSource: string;
@@ -102,24 +103,21 @@ const addAnnotation = (config: AddAnnotationConfig, isFirst: boolean) => {
   if (isFirst) {
     e2e.pages.Dashboard.Settings.Annotations.List.addAnnotationCTA().click();
   } else {
-    // @todo add to e2e-selectors and `aria-label`
-    e2e().contains('.btn', 'New').click();
+    cy.contains('New query').click();
   }
 
   const { dataSource, dataSourceForm, name } = config;
 
-  // @todo add to e2e-selectors and `aria-label`
-  e2e().contains('.gf-form', 'Data source').find('select').select(dataSource);
+  selectOption({
+    container: e2e.components.DataSourcePicker.container(),
+    optionText: dataSource,
+  });
 
-  // @todo add to e2e-selectors and `aria-label`
-  e2e().contains('.gf-form', 'Name').find('input').type(name);
+  e2e.pages.Dashboard.Settings.Annotations.Settings.name().clear().type(name);
 
   if (dataSourceForm) {
     dataSourceForm();
   }
-
-  // @todo add to e2e-selectors and `aria-label`
-  e2e().contains('.btn', 'Add').click();
 };
 
 const addAnnotations = (configs: AddAnnotationConfig[]) => {

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

@@ -1,5 +1,4 @@
 import { e2e } from '../index';
-import { getLocalStorage, requireLocalStorage } from '../support/localStorage';
 import { getScenarioContext } from '../support/scenarioContext';
 import { selectOption } from './selectOption';
 import { setDashboardTimeRange } from './setDashboardTimeRange';
@@ -129,38 +128,20 @@ export const configurePanel = (config: PartialAddPanelConfig | PartialEditPanelC
     e2e().wait(2000);
 
     if (!isExplore) {
-      if (!isEdit) {
-        // Fields could be covered due to an empty query editor
-        closeRequestErrors();
-      }
-
       // `panelTitle` is needed to edit the panel, and unlikely to have its value changed at that point
       const changeTitle = panelTitle && !isEdit;
 
       if (changeTitle || visualizationName) {
-        openOptions();
-
-        if (changeTitle) {
-          openOptionsGroup('settings');
-          getOptionsGroup('settings')
-            .find('[value="Panel Title"]')
-            .scrollIntoView()
-            .clear()
-            .type(panelTitle as string);
+        if (changeTitle && panelTitle) {
+          e2e.components.PanelEditor.OptionsPane.fieldLabel('Panel options Title').type(`{selectall}${panelTitle}`);
         }
 
         if (visualizationName) {
-          openOptionsGroup('type');
           e2e.components.PluginVisualization.item(visualizationName).scrollIntoView().click();
 
           // @todo wait for '@pluginModule' if not a core visualization and not already loaded
           e2e().wait(2000);
         }
-
-        // Consistently closed
-        closeOptionsGroup('settings');
-        closeOptionsGroup('type');
-        closeOptions();
       } else {
         // Consistently closed
         closeOptions();
@@ -214,74 +195,7 @@ export const configurePanel = (config: PartialAddPanelConfig | PartialEditPanelC
   });
 
 // @todo this actually returns type `Cypress.Chainable`
-const closeOptions = (): any =>
-  isOptionsOpen().then((isOpen: any) => {
-    if (isOpen) {
-      e2e.components.PanelEditor.toggleVizOptions().click();
-    }
-  });
-
-// @todo this actually returns type `Cypress.Chainable`
-const closeOptionsGroup = (name: string): any =>
-  isOptionsGroupOpen(name).then((isOpen: any) => {
-    if (isOpen) {
-      toggleOptionsGroup(name);
-    }
-  });
-
-const closeRequestErrors = () => {
-  e2e().wait(1000); // emulate `cy.get()` for nested errors
-  e2e()
-    .get('app-notifications-list')
-    .then(($elm) => {
-      // Avoid failing when none are found
-      const selector = '[aria-label="Alert error"]:contains("Failed to call resource")';
-      const numErrors = $elm.find(selector).length;
-
-      for (let i = 0; i < numErrors; i++) {
-        e2e().get(selector).first().find('button').click();
-      }
-    });
-};
-
-const getOptionsGroup = (name: string) => e2e().get(`.options-group:has([aria-label="Options group Panel ${name}"])`);
-
-// @todo this actually returns type `Cypress.Chainable`
-const isOptionsGroupOpen = (name: string): any =>
-  requireLocalStorage(`grafana.dashboard.editor.ui.optionGroup[Panel ${name}]`).then(({ defaultToClosed }: any) => {
-    // @todo remove `wrap` when possible
-    return e2e().wrap(!defaultToClosed, { log: false });
-  });
-
-// @todo this actually returns type `Cypress.Chainable`
-const isOptionsOpen = (): any =>
-  getLocalStorage('grafana.dashboard.editor.ui').then((data: any) => {
-    if (data) {
-      // @todo remove `wrap` when possible
-      return e2e().wrap(data.isPanelOptionsVisible, { log: false });
-    } else {
-      // @todo remove `wrap` when possible
-      return e2e().wrap(true, { log: false });
-    }
-  });
-
-// @todo this actually returns type `Cypress.Chainable`
-const openOptions = (): any =>
-  isOptionsOpen().then((isOpen: any) => {
-    if (!isOpen) {
-      e2e.components.PanelEditor.toggleVizOptions().click();
-    }
-  });
-
-// @todo this actually returns type `Cypress.Chainable`
-const openOptionsGroup = (name: string): any =>
-  isOptionsGroupOpen(name).then((isOpen: any) => {
-    if (!isOpen) {
-      toggleOptionsGroup(name);
-    }
-  });
-
-const toggleOptionsGroup = (name: string) => getOptionsGroup(name).find('.editor-options-group-toggle').click();
+const closeOptions = () => e2e.components.PanelEditor.toggleVizOptions().click();
 
 export const VISUALIZATION_ALERT_LIST = 'Alert list';
 export const VISUALIZATION_BAR_GAUGE = 'Bar gauge';

public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx

@@ -6,6 +6,7 @@ import { getDataSourceSrv, DataSourcePicker } from '@grafana/runtime';
 import { useAsync } from 'react-use';
 import StandardAnnotationQueryEditor from 'app/features/annotations/components/StandardAnnotationQueryEditor';
 import { AngularEditorLoader } from './AngularEditorLoader';
+import { selectors } from '@grafana/e2e-selectors';
 
 export const newAnnotation: AnnotationQuery = {
   name: 'New annotation',
@@ -68,6 +69,7 @@ export const AnnotationSettingsEdit: React.FC<Props> = ({ editIdx, dashboard })
     <div>
       <Field label="Name">
         <Input
+          aria-label={selectors.pages.Dashboard.Settings.Annotations.Settings.name}
           name="name"
           id="name"
           autoFocus={isNewAnnotation}