From 71b98163e52306c5da36b243bd74e74f634920a0 Mon Sep 17 00:00:00 2001
From: Jamin <okpusjamin@gmail.com>
Date: Wed, 10 Jan 2024 11:51:16 +0000
Subject: [PATCH] Frontend: Migrate `DataSourceHttpSettings.tsx` from
 aria-label e2e selectors to data-testid (#79615)

---
 .betterer.results                                          | 3 ---
 packages/grafana-e2e-selectors/src/selectors/components.ts | 2 +-
 .../DataSourceSettings/DataSourceHttpSettings.tsx          | 7 +++++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index c75b69a702d..baaf458b582 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -609,9 +609,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
-    "packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx:5381": [
-      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
-    ],
     "packages/grafana-ui/src/components/DataSourceSettings/types.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts
index 78182274957..83b53842e87 100644
--- a/packages/grafana-e2e-selectors/src/selectors/components.ts
+++ b/packages/grafana-e2e-selectors/src/selectors/components.ts
@@ -53,7 +53,7 @@ export const Components = {
       },
     },
     DataSourceHttpSettings: {
-      urlInput: 'Datasource HTTP settings url',
+      urlInput: 'data-testid Datasource HTTP settings url',
     },
     Jaeger: {
       traceIDInput: 'Trace ID',
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
index 2f5d295ef2c..998c614738e 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
+++ b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useId } from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
@@ -153,12 +153,15 @@ export const DataSourceHttpSettings = (props: HttpSettingsProps) => {
 
   const inputStyle = cx({ [`width-20`]: true, [notValidStyle]: !isValidUrl });
 
+  const fromFieldId = useId();
+
   const urlInput = (
     <Input
+      id={fromFieldId}
       className={inputStyle}
       placeholder={defaultUrl}
       value={dataSourceConfig.url}
-      aria-label={selectors.components.DataSource.DataSourceHttpSettings.urlInput}
+      data-testid={selectors.components.DataSource.DataSourceHttpSettings.urlInput}
       onChange={(event) => onSettingsChange({ url: event.currentTarget.value })}
       disabled={dataSourceConfig.readOnly}
     />