From 712f3fb8b271985e72b609127dfb51b6cea395ed Mon Sep 17 00:00:00 2001
From: Deepayan Mukherjee <deepayanmukherjee1312@gmail.com>
Date: Wed, 13 Sep 2023 13:06:22 +0530
Subject: [PATCH] SQL query editor: Ensure unique ID for switch components
 (#74751)

* SQL:Add unique sql filter id

Signed-off-by: Deepayan Mukherjee <deepayanmukherjee1312@gmail.com>

* SQL: add unique sql group filter preview ids

Signed-off-by: Deepayan Mukherjee <deepayanmukherjee1312@gmail.com>

---------

Signed-off-by: Deepayan Mukherjee <deepayanmukherjee1312@gmail.com>
---
 .../app/features/plugins/sql/components/QueryHeader.tsx  | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/public/app/features/plugins/sql/components/QueryHeader.tsx b/public/app/features/plugins/sql/components/QueryHeader.tsx
index 37869dbe1a5..5b7adb502fe 100644
--- a/public/app/features/plugins/sql/components/QueryHeader.tsx
+++ b/public/app/features/plugins/sql/components/QueryHeader.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
+import { v4 as uuidv4 } from 'uuid';
 
 import { SelectableValue } from '@grafana/data';
 import { EditorField, EditorHeader, EditorMode, EditorRow, FlexItem, InlineSelect, Space } from '@grafana/experimental';
@@ -131,7 +132,7 @@ export function QueryHeader({
         {editorMode === EditorMode.Builder && (
           <>
             <InlineSwitch
-              id="sql-filter"
+              id={`sql-filter-${uuidv4()}}`}
               label="Filter"
               transparent={true}
               showLabel={true}
@@ -151,7 +152,7 @@ export function QueryHeader({
             />
 
             <InlineSwitch
-              id="sql-group"
+              id={`sql-group-${uuidv4()}}`}
               label="Group"
               transparent={true}
               showLabel={true}
@@ -171,7 +172,7 @@ export function QueryHeader({
             />
 
             <InlineSwitch
-              id="sql-order"
+              id={`sql-order-${uuidv4()}}`}
               label="Order"
               transparent={true}
               showLabel={true}
@@ -191,7 +192,7 @@ export function QueryHeader({
             />
 
             <InlineSwitch
-              id="sql-preview"
+              id={`sql-preview-${uuidv4()}}`}
               label="Preview"
               transparent={true}
               showLabel={true}