From a29e24c5b43d26e7bdeb7fa8a8b948a389b93010 Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Tue, 10 Jun 2025 10:49:14 +0100
Subject: [PATCH] Dashboards: Add ids to DataLinkEditor inputs (#106433)

---
 .../components/DataLinks/DataLinkEditor.tsx   | 37 +++++++++----------
 packages/grafana-ui/src/utils/i18n.tsx        |  1 +
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx
index 159161af151..df079db03dc 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx
@@ -20,17 +20,6 @@ interface DataLinkEditorProps {
   showOneClick?: boolean;
 }
 
-const getStyles = (theme: GrafanaTheme2) => ({
-  listItem: css({
-    marginBottom: theme.spacing(),
-  }),
-  infoText: css({
-    paddingBottom: theme.spacing(2),
-    marginLeft: '66px',
-    color: theme.colors.text.secondary,
-  }),
-});
-
 export const DataLinkEditor = memo(
   ({ index, value, onChange, suggestions, isLast, showOneClick = false }: DataLinkEditorProps) => {
     const styles = useStyles2(getStyles);
@@ -55,6 +44,7 @@ export const DataLinkEditor = memo(
       <div className={styles.listItem}>
         <Field label={t('grafana-ui.data-link-editor.title-label', 'Title')}>
           <Input
+            id="link-title"
             value={value.title}
             onChange={onTitleChange}
             placeholder={t('grafana-ui.data-link-editor.title-placeholder', 'Show details')}
@@ -66,7 +56,7 @@ export const DataLinkEditor = memo(
         </Field>
 
         <Field label={t('grafana-ui.data-link-editor.new-tab-label', 'Open in new tab')}>
-          <Switch value={value.targetBlank || false} onChange={onOpenInNewTabChanged} />
+          <Switch id="new-tab-toggle" value={value.targetBlank || false} onChange={onOpenInNewTabChanged} />
         </Field>
 
         {showOneClick && (
@@ -77,17 +67,15 @@ export const DataLinkEditor = memo(
               'Only one link can have one click enabled at a time'
             )}
           >
-            <Switch value={value.oneClick || false} onChange={onOneClickChanged} />
+            <Switch id="one-click-toggle" value={value.oneClick || false} onChange={onOneClickChanged} />
           </Field>
         )}
 
         {isLast && (
-          <div className={styles.infoText}>
-            <Trans i18nKey="grafana-ui.data-link-editor.info">
-              With data links you can reference data variables like series name, labels and values. Type CMD+Space,
-              CTRL+Space, or $ to open variable suggestions.
-            </Trans>
-          </div>
+          <Trans i18nKey="grafana-ui.data-link-editor.info" className={styles.infoText}>
+            With data links you can reference data variables like series name, labels and values. Type CMD+Space,
+            CTRL+Space, or $ to open variable suggestions.
+          </Trans>
         )}
       </div>
     );
@@ -95,3 +83,14 @@ export const DataLinkEditor = memo(
 );
 
 DataLinkEditor.displayName = 'DataLinkEditor';
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  listItem: css({
+    marginBottom: theme.spacing(),
+  }),
+  infoText: css({
+    paddingBottom: theme.spacing(2),
+    marginLeft: '66px',
+    color: theme.colors.text.secondary,
+  }),
+});
diff --git a/packages/grafana-ui/src/utils/i18n.tsx b/packages/grafana-ui/src/utils/i18n.tsx
index 5e688f48fee..83fcce10b8b 100644
--- a/packages/grafana-ui/src/utils/i18n.tsx
+++ b/packages/grafana-ui/src/utils/i18n.tsx
@@ -29,6 +29,7 @@ type I18NextTransProps = Parameters<I18NextTransType>[0];
 
 interface TransProps extends I18NextTransProps {
   i18nKey: string;
+  className?: string;
 }
 
 export const Trans = (props: TransProps): ReactElement => {