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>

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}