From 1cce13b5018fa718d5486189d45001adc72fab2c Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Mon, 19 Oct 2020 18:56:57 +0300
Subject: [PATCH] Add unique ids to query editor fields (#28376)

* Add unique ids to query editor fields

* Update public/app/plugins/datasource/testdata/components/RandomWalkEditor.tsx

Co-authored-by: Ryan McKinley <ryantxu@gmail.com>

Co-authored-by: Ryan McKinley <ryantxu@gmail.com>
---
 public/app/plugins/datasource/testdata/QueryEditor.tsx      | 6 +++---
 .../datasource/testdata/components/CSVWaveEditor.tsx        | 2 +-
 .../datasource/testdata/components/ManualEntryEditor.tsx    | 4 ++--
 .../testdata/components/PredictablePulseEditor.tsx          | 2 +-
 .../datasource/testdata/components/RandomWalkEditor.tsx     | 2 +-
 .../testdata/components/StreamingClientEditor.tsx           | 4 ++--
 6 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/public/app/plugins/datasource/testdata/QueryEditor.tsx b/public/app/plugins/datasource/testdata/QueryEditor.tsx
index f3cb7592522..66577c52e33 100644
--- a/public/app/plugins/datasource/testdata/QueryEditor.tsx
+++ b/public/app/plugins/datasource/testdata/QueryEditor.tsx
@@ -131,7 +131,7 @@ export const QueryEditor = ({ query, datasource, onChange, onRunQuery }: Props)
           <InlineField label="String Input">
             <Input
               width={32}
-              id="stringInput"
+              id={`stringInput-${query.refId}`}
               name="stringInput"
               placeholder={query.stringInput}
               value={query.stringInput}
@@ -142,7 +142,7 @@ export const QueryEditor = ({ query, datasource, onChange, onRunQuery }: Props)
         <InlineField label="Alias" labelWidth={14}>
           <Input
             width={32}
-            id="alias"
+            id={`alias-${query.refId}`}
             type="text"
             placeholder="optional"
             pattern='[^<>&\\"]+'
@@ -170,7 +170,7 @@ export const QueryEditor = ({ query, datasource, onChange, onRunQuery }: Props)
           >
             <Input
               width={32}
-              id="labels"
+              id={`labels-${query.refId}`}
               name="labels"
               onChange={onInputChange}
               value={query?.labels}
diff --git a/public/app/plugins/datasource/testdata/components/CSVWaveEditor.tsx b/public/app/plugins/datasource/testdata/components/CSVWaveEditor.tsx
index 88ed5d53ea6..a480d726519 100644
--- a/public/app/plugins/datasource/testdata/components/CSVWaveEditor.tsx
+++ b/public/app/plugins/datasource/testdata/components/CSVWaveEditor.tsx
@@ -30,7 +30,7 @@ export const CSVWaveEditor = ({ onChange, query }: EditorProps) => {
               width={grow ? undefined : 32}
               type={type}
               name={id}
-              id={`csvWave.${id}`}
+              id={`csvWave.${id}-${query.refId}`}
               value={query.csvWave?.[id]}
               placeholder={placeholder}
               onChange={onChange}
diff --git a/public/app/plugins/datasource/testdata/components/ManualEntryEditor.tsx b/public/app/plugins/datasource/testdata/components/ManualEntryEditor.tsx
index 2e0c0c38276..0e6dfb82c26 100644
--- a/public/app/plugins/datasource/testdata/components/ManualEntryEditor.tsx
+++ b/public/app/plugins/datasource/testdata/components/ManualEntryEditor.tsx
@@ -42,7 +42,7 @@ export const ManualEntryEditor = ({ onChange, query, onRunQuery }: Props) => {
                 width={32}
                 type="number"
                 placeholder="value"
-                id="newPointValue"
+                id={`newPointValue-${query.refId}`}
                 name="newPointValue"
                 ref={register}
               />
@@ -50,7 +50,7 @@ export const ManualEntryEditor = ({ onChange, query, onRunQuery }: Props) => {
             <InlineField label="Time" labelWidth={14}>
               <Input
                 width={32}
-                id="newPointTime"
+                id={`newPointTime-${query.refId}`}
                 placeholder="time"
                 name="newPointTime"
                 ref={register}
diff --git a/public/app/plugins/datasource/testdata/components/PredictablePulseEditor.tsx b/public/app/plugins/datasource/testdata/components/PredictablePulseEditor.tsx
index 17e1538214e..393200f63bd 100644
--- a/public/app/plugins/datasource/testdata/components/PredictablePulseEditor.tsx
+++ b/public/app/plugins/datasource/testdata/components/PredictablePulseEditor.tsx
@@ -43,7 +43,7 @@ export const PredictablePulseEditor = ({ onChange, query }: EditorProps) => {
               width={32}
               type="number"
               name={id}
-              id={`pulseWave.${id}`}
+              id={`pulseWave.${id}-${query.refId}`}
               value={query.pulseWave?.[id as keyof PulseWaveQuery]}
               placeholder={placeholder}
               onChange={onInputChange}
diff --git a/public/app/plugins/datasource/testdata/components/RandomWalkEditor.tsx b/public/app/plugins/datasource/testdata/components/RandomWalkEditor.tsx
index 0ff6a881836..79fe23c26f9 100644
--- a/public/app/plugins/datasource/testdata/components/RandomWalkEditor.tsx
+++ b/public/app/plugins/datasource/testdata/components/RandomWalkEditor.tsx
@@ -27,7 +27,7 @@ export const RandomWalkEditor = ({ onChange, query }: EditorProps) => {
               width={32}
               name={id}
               type="number"
-              id={id}
+              id={`randomWalk-${id}-${query.refId}`}
               min={min}
               step={step}
               value={query[id as keyof TestDataQuery] || placeholder}
diff --git a/public/app/plugins/datasource/testdata/components/StreamingClientEditor.tsx b/public/app/plugins/datasource/testdata/components/StreamingClientEditor.tsx
index 409de1c9ab2..3d6e9e6c9d6 100644
--- a/public/app/plugins/datasource/testdata/components/StreamingClientEditor.tsx
+++ b/public/app/plugins/datasource/testdata/components/StreamingClientEditor.tsx
@@ -40,7 +40,7 @@ export const StreamingClientEditor = ({ onChange, query }: EditorProps) => {
               <Input
                 width={32}
                 type="number"
-                id={`stream.${id}`}
+                id={`stream.${id}-${query.refId}`}
                 name={id}
                 min={min}
                 step={step}
@@ -57,7 +57,7 @@ export const StreamingClientEditor = ({ onChange, query }: EditorProps) => {
           <Input
             type="text"
             name="url"
-            id="stream.url"
+            id={`stream.url-${query.refId}`}
             value={query?.stream?.url}
             placeholder="Fetch URL"
             onChange={onChange}