E2E: Fix configurePanel flow (#68487)

* Updates for new datasource picker

* Correct typing to ensure datasource selection

* Remove unused import

* Update labels

* Update labels and fix test

* Fix another test

.betterer.results

@@ -776,8 +776,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
     "packages/grafana-runtime/src/components/DataSourcePicker.tsx:5381": [
-      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"],
-      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "1"]
+      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
     ],
     "packages/grafana-runtime/src/components/PanelRenderer.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],

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

@@ -301,7 +301,7 @@ export const Components = {
     container: 'data-testid Readonly folder picker select container',
   },
   DataSourcePicker: {
-    container: 'Data source picker select container',
+    container: 'data-testid Data source picker select container',
     /**
      * @deprecated use inputV2 instead
      */

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

@@ -144,6 +144,7 @@ export const addDashboard = (config?: Partial<AddDashboardConfig>) => {
   e2e.pages.SaveDashboardAsModal.newName().clear().type(title, { force: true });
   e2e.pages.SaveDashboardAsModal.save().click();
   e2e.flows.assertSuccessNotification();
+  e2e.pages.AddDashboard.addNewPanel().should('be.visible');
 
   e2e().logToConsole('Added dashboard with title:', title);
 

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

@@ -1,7 +1,6 @@
 import { e2e } from '..';
 import { getScenarioContext } from '../support/scenarioContext';
 
-import { selectOption } from './selectOption';
 import { setDashboardTimeRange } from './setDashboardTimeRange';
 import { TimeRangeConfig } from './setTimeRange';
 
@@ -113,10 +112,7 @@ export const configurePanel = (config: PartialAddPanelConfig | PartialEditPanelC
     e2e().intercept(chartData.method, chartData.route).as('chartData');
 
     if (dataSourceName) {
-      selectOption({
-        container: e2e.components.DataSourcePicker.container(),
-        optionText: dataSourceName,
-      });
+      e2e.components.DataSourcePicker.container().click().type(`${dataSourceName}{downArrow}{enter}`);
     }
 
     // @todo instead wait for '@pluginModule' if not already loaded

packages/grafana-runtime/src/components/DataSourcePicker.tsx

@@ -181,7 +181,10 @@ export class DataSourcePicker extends PureComponent<DataSourcePickerProps, DataS
     const isClearable = typeof onClear === 'function';
 
     return (
-      <div aria-label={selectors.components.DataSourcePicker.container}>
+      <div
+        aria-label="Data source picker select container"
+        data-testid={selectors.components.DataSourcePicker.container}
+      >
         <Select
           isLoading={isLoading}
           disabled={disabled}

public/app/features/explore/Explore.test.tsx

@@ -4,6 +4,7 @@ import { AutoSizerProps } from 'react-virtualized-auto-sizer';
 import { TestProvider } from 'test/helpers/TestProvider';
 
 import { DataSourceApi, LoadingState, CoreApp, createTheme, EventBusSrv } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { ExploreId } from 'app/types';
 
 import { Explore, Props } from './Explore';
@@ -132,7 +133,7 @@ describe('Explore', () => {
     setup();
 
     // Wait for the Explore component to render
-    await screen.findByLabelText('Data source picker select container');
+    await screen.findByTestId(selectors.components.DataSourcePicker.container);
 
     expect(screen.queryByTestId('explore-no-data')).not.toBeInTheDocument();
   });
@@ -142,7 +143,7 @@ describe('Explore', () => {
     setup({ queryResponse: queryResp });
 
     // Wait for the Explore component to render
-    await screen.findByLabelText('Data source picker select container');
+    await screen.findByTestId(selectors.components.DataSourcePicker.container);
 
     expect(screen.getByTestId('explore-no-data')).toBeInTheDocument();
   });
@@ -162,7 +163,7 @@ describe('Explore', () => {
     it('should render data source picker', async () => {
       setup();
 
-      const dataSourcePicker = await screen.findByLabelText('Data source picker select container');
+      const dataSourcePicker = await screen.findByTestId(selectors.components.DataSourcePicker.container);
 
       expect(dataSourcePicker).toBeInTheDocument();
     });

public/app/features/explore/spec/helper/interactions.ts

@@ -8,7 +8,7 @@ import { ExploreId } from '../../../../types';
 import { withinExplore } from './setup';
 
 export const changeDatasource = async (name: string) => {
-  const datasourcePicker = (await screen.findByLabelText(selectors.components.DataSourcePicker.container)).children[0];
+  const datasourcePicker = (await screen.findByTestId(selectors.components.DataSourcePicker.container)).children[0];
   fireEvent.keyDown(datasourcePicker, { keyCode: 40 });
   const option = screen.getByText(name);
   fireEvent.click(option);

public/app/features/query/components/QueryEditorRowHeader.test.tsx

@@ -71,13 +71,13 @@ describe('QueryEditorRowHeader', () => {
   it('should show data source picker when callback is passed', async () => {
     renderScenario({ onChangeDataSource: () => {} });
 
-    expect(screen.queryByLabelText(selectors.components.DataSourcePicker.container)).not.toBeNull();
+    expect(screen.queryByTestId(selectors.components.DataSourcePicker.container)).not.toBeNull();
   });
 
   it('should not show data source picker when no callback is passed', async () => {
     renderScenario({ onChangeDataSource: undefined });
 
-    expect(screen.queryByLabelText(selectors.components.DataSourcePicker.container)).toBeNull();
+    expect(screen.queryByTestId(selectors.components.DataSourcePicker.container)).toBeNull();
   });
 
   it('should render variables in the data source picker', async () => {