diff --git a/packages/grafana-e2e-selectors/src/selectors/pages.ts b/packages/grafana-e2e-selectors/src/selectors/pages.ts index cf42d5b3bca..d22c25ca06d 100644 --- a/packages/grafana-e2e-selectors/src/selectors/pages.ts +++ b/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: { diff --git a/packages/grafana-e2e/src/flows/addDashboard.ts b/packages/grafana-e2e/src/flows/addDashboard.ts index 9bde10d2295..fc18f76c67d 100644 --- a/packages/grafana-e2e/src/flows/addDashboard.ts +++ b/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[]) => { diff --git a/packages/grafana-e2e/src/flows/configurePanel.ts b/packages/grafana-e2e/src/flows/configurePanel.ts index c8d60fa1e73..c4b75ff55ec 100644 --- a/packages/grafana-e2e/src/flows/configurePanel.ts +++ b/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'; diff --git a/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx b/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx index 5a3b79c2d43..d11ddecaeb5 100644 --- a/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx +++ b/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 = ({ editIdx, dashboard })