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

@@ -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}

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}

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}

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}

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}

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}