fix tests

e2e/old-arch/various-suite/helpers/prometheus-helpers.ts

@@ -14,6 +14,8 @@ export function createPromDS(dataSourceID: string, name: string): void {
     .should('be.visible') // prevents flakiness
     .click();
 
+  e2e.pages.ConnectionsDataSource.button().should('exist').click();
+
   // add url for DS to save without error
   e2e.components.DataSource.Prometheus.configPage.connectionSettings().type('http://prom-url:9090');
 

e2e/old-arch/various-suite/prometheus-editor.spec.ts

@@ -22,6 +22,8 @@ function navigateToEditor(editorType: editorType, name: string): void {
     .should('be.visible') // prevents flakiness
     .click();
 
+  e2e.pages.ConnectionsDataSource.button().should('exist').click();
+
   // choose default editor
   e2e.components.DataSource.Prometheus.configPage.defaultEditor().scrollIntoView().should('exist').click();
   selectOption(editorType);

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

@@ -99,13 +99,21 @@ export const versionedPages = {
   },
   AddDataSource: {
     url: {
-      [MIN_GRAFANA_VERSION]: '/datasources/new',
+      [MIN_GRAFANA_VERSION]: '/connections/add-new-connection?cat=data-source',
     },
     dataSourcePluginsV2: {
       '9.3.1': (pluginName: string) => `Add new data source ${pluginName}`,
       [MIN_GRAFANA_VERSION]: (pluginName: string) => `Data source plugin item ${pluginName}`,
     },
   },
+  ConnectionsDataSource: {
+    url: {
+      [MIN_GRAFANA_VERSION]: (dataSourceUid: string) => `/connections/datasources/${dataSourceUid}`,
+    },
+    button: {
+      '12.4.0': 'data-testid Add new data source button',
+    },
+  },
   ConfirmModal: {
     delete: {
       '10.0.0': 'data-testid Confirm Modal Danger Button',

public/app/features/connections/tabs/ConnectData/CardGrid/CardGrid.tsx

@@ -1,7 +1,8 @@
 import { css } from '@emotion/css';
 import * as React from 'react';
 
-import { GrafanaTheme2 } from '@grafana/data';
+import { GrafanaTheme2, PluginType } from '@grafana/data';
+import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
 import { t } from '@grafana/i18n';
 import { featureEnabled } from '@grafana/runtime';
 import { Badge, Card, Grid, Stack, useStyles2 } from '@grafana/ui';
@@ -80,6 +81,7 @@ export interface CardGridProps {
 export const CardGrid = ({ items, onClickItem }: CardGridProps) => {
   const styles = useStyles2(getStyles);
 
+  console.log('items', items);
   return (
     <Grid gap={1.5} minColumnWidth={44}>
       {items.map((item) => (
@@ -94,7 +96,16 @@ export const CardGrid = ({ items, onClickItem }: CardGridProps) => {
             }
           }}
         >
-          <Card.Heading className={styles.heading}>{item.name}</Card.Heading>
+          <Card.Heading
+            className={styles.heading}
+            aria-label={
+              item.type === PluginType.datasource
+                ? e2eSelectors.pages.AddDataSource.dataSourcePluginsV2(item.name)
+                : item.name
+            }
+          >
+            {item.name}
+          </Card.Heading>
 
           <Card.Figure align="center" className={styles.figure}>
             <img className={styles.logo} src={item.logo} alt="" />

public/app/features/plugins/admin/components/GetStartedWithPlugin/GetStartedWithDataSource.tsx

@@ -2,6 +2,7 @@ import { useCallback } from 'react';
 import * as React from 'react';
 
 import { DataSourcePluginMeta } from '@grafana/data';
+import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
 import { Trans, t } from '@grafana/i18n';
 import { config } from '@grafana/runtime';
 import { Button } from '@grafana/ui';
@@ -46,6 +47,7 @@ export function GetStartedWithDataSource({ plugin }: Props): React.ReactElement
             )
           : undefined
       }
+      data-testid={e2eSelectors.pages.ConnectionsDataSource.button}
     >
       <Trans i18nKey="plugins.get-started-with-data-source.add-new-data-source">Add new data source</Trans>
     </Button>