Dashboards: Add ids to DataLinkEditor inputs (#106433)

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,
+  }),
+});

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 => {