From c3cbe220bbd0a36afeccfcb78d683b3f58f73b51 Mon Sep 17 00:00:00 2001
From: Matias Chomicki <matyax@gmail.com>
Date: Wed, 6 Sep 2023 10:17:11 +0200
Subject: [PATCH] Elasticsearch query editor: ensure unique ids on labelled
 fields (#74396)

---
 .../SettingsEditor/index.tsx                  | 20 ++++++++++---------
 .../components/QueryEditor/index.tsx          |  6 ++++--
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx
index 6a908e823c8..83f8338903f 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx
@@ -1,12 +1,11 @@
 import { uniqueId } from 'lodash';
-import React, { ComponentProps, useRef, useState } from 'react';
+import React, { ComponentProps, useId, useRef, useState } from 'react';
 
 import { InlineField, Input, InlineSwitch, Select } from '@grafana/ui';
 
 import { useDispatch } from '../../../../hooks/useStatelessReducer';
 import { extendedStats } from '../../../../queryDef';
 import { MetricAggregation, ExtendedStat } from '../../../../types';
-import { useQuery } from '../../ElasticsearchQueryContext';
 import { SettingsEditorContainer } from '../../SettingsEditorContainer';
 import { isMetricAggregationWithInlineScript, isMetricAggregationWithMissingSupport } from '../aggregations';
 import { changeMetricMeta, changeMetricSetting } from '../state/actions';
@@ -33,7 +32,10 @@ export const SettingsEditor = ({ metric, previousMetrics }: Props) => {
 
   const dispatch = useDispatch();
   const description = useDescription(metric);
-  const query = useQuery();
+
+  const sizeFieldId = useId();
+  const unitFieldId = useId();
+  const modeFieldId = useId();
 
   const rateAggUnitOptions = [
     { value: 'second', label: 'Second' },
@@ -76,9 +78,9 @@ export const SettingsEditor = ({ metric, previousMetrics }: Props) => {
       )}
 
       {(metric.type === 'raw_data' || metric.type === 'raw_document') && (
-        <InlineField label="Size" {...inlineFieldProps}>
+        <InlineField label="Size" {...inlineFieldProps} htmlFor={sizeFieldId}>
           <Input
-            id={`ES-query-${query.refId}_metric-${metric.id}-size`}
+            id={sizeFieldId}
             onBlur={(e) => dispatch(changeMetricSetting({ metric, settingName: 'size', newValue: e.target.value }))}
             defaultValue={metric.settings?.size ?? metricAggregationConfig['raw_data'].defaults.settings?.size}
           />
@@ -133,18 +135,18 @@ export const SettingsEditor = ({ metric, previousMetrics }: Props) => {
 
       {metric.type === 'rate' && (
         <>
-          <InlineField label="Unit" {...inlineFieldProps} data-testid="unit-select">
+          <InlineField label="Unit" {...inlineFieldProps} data-testid="unit-select" htmlFor={unitFieldId}>
             <Select
-              id={`ES-query-${query.refId}_metric-${metric.id}-unit`}
+              id={unitFieldId}
               onChange={(e) => dispatch(changeMetricSetting({ metric, settingName: 'unit', newValue: e.value }))}
               options={rateAggUnitOptions}
               value={metric.settings?.unit}
             />
           </InlineField>
 
-          <InlineField label="Mode" {...inlineFieldProps} data-testid="mode-select">
+          <InlineField label="Mode" {...inlineFieldProps} data-testid="mode-select" htmlFor={modeFieldId}>
             <Select
-              id={`ES-query-${query.refId}_metric-${metric.id}-mode`}
+              id={modeFieldId}
               onChange={(e) => dispatch(changeMetricSetting({ metric, settingName: 'mode', newValue: e.value }))}
               options={rateAggModeOptions}
               value={metric.settings?.unit}
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx
index 108f5695160..d9e8ab5f80f 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useId, useState } from 'react';
 import { SemVer } from 'semver';
 
 import { getDefaultTimeRange, GrafanaTheme2, QueryEditorProps } from '@grafana/data';
@@ -90,6 +90,7 @@ export const ElasticSearchQueryField = ({ value, onChange }: { value?: string; o
 const QueryEditorForm = ({ value }: Props) => {
   const dispatch = useDispatch();
   const nextId = useNextId();
+  const inputId = useId();
   const styles = useStyles2(getStyles);
 
   const isTimeSeries = isTimeSeriesQuery(value);
@@ -115,9 +116,10 @@ const QueryEditorForm = ({ value }: Props) => {
             label="Alias"
             labelWidth={15}
             tooltip="Aliasing only works for timeseries queries (when the last group is 'Date Histogram'). For all other query types this field is ignored."
+            htmlFor={inputId}
           >
             <Input
-              id={`ES-query-${value.refId}_alias`}
+              id={inputId}
               placeholder="Alias Pattern"
               onBlur={(e) => dispatch(changeAliasPattern(e.currentTarget.value))}
               defaultValue={value.alias}