From 935076c349f614e4083c0e3036a10d484084e43a Mon Sep 17 00:00:00 2001
From: timo <timonator@perpetuum-immobile.de>
Date: Thu, 9 May 2024 20:30:33 +0200
Subject: [PATCH] SQL Query Editor: Fix label-for IDs, associate "Table" label
 (#86944)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* SQL Query Editor: Fix label-for IDs, associate "Table" label

* Fix mysql e2e test

---------

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>
---
 e2e/plugin-e2e/mysql/mysql.spec.ts                |  2 +-
 .../src/components/DatasetSelector.tsx            | 13 +++++++++++--
 .../grafana-sql/src/components/QueryHeader.tsx    | 15 +++++++++------
 .../grafana-sql/src/components/TableSelector.tsx  |  4 +++-
 4 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/e2e/plugin-e2e/mysql/mysql.spec.ts b/e2e/plugin-e2e/mysql/mysql.spec.ts
index c54d19c3b2a..8adfd456fbc 100644
--- a/e2e/plugin-e2e/mysql/mysql.spec.ts
+++ b/e2e/plugin-e2e/mysql/mysql.spec.ts
@@ -54,7 +54,7 @@ test('visual query builder should handle time filter macro', async ({ explorePag
   await select.locator(page.getByText('createdAt')).click();
 
   // Toggle where row
-  await page.getByLabel('Filter').click();
+  await page.getByLabel('Filter').last().click();
 
   // Click add filter button
   await page.getByRole('button', { name: 'Add filter' }).click();
diff --git a/packages/grafana-sql/src/components/DatasetSelector.tsx b/packages/grafana-sql/src/components/DatasetSelector.tsx
index 11fcac922fb..bed91f5f5ca 100644
--- a/packages/grafana-sql/src/components/DatasetSelector.tsx
+++ b/packages/grafana-sql/src/components/DatasetSelector.tsx
@@ -14,10 +14,18 @@ export interface DatasetSelectorProps extends ResourceSelectorProps {
   preconfiguredDataset: string;
   dialect: SQLDialect;
   onChange: (v: SelectableValue) => void;
+  inputId?: string | undefined;
 }
 
-export const DatasetSelector = ({ dataset, db, dialect, onChange, preconfiguredDataset }: DatasetSelectorProps) => {
-  /* 
+export const DatasetSelector = ({
+  dataset,
+  db,
+  dialect,
+  onChange,
+  inputId,
+  preconfiguredDataset,
+}: DatasetSelectorProps) => {
+  /*
     The behavior of this component - for MSSQL and MySQL datasources - is based on whether the user chose to create a datasource
     with or without a default database (preconfiguredDataset). If the user configured a default database, this selector
     should only allow that single preconfigured database option to be selected. If the user chose to NOT assign/configure a default database,
@@ -68,6 +76,7 @@ export const DatasetSelector = ({ dataset, db, dialect, onChange, preconfiguredD
   return (
     <Select
       aria-label="Dataset selector"
+      inputId={inputId}
       value={dataset}
       options={state.value}
       onChange={onChange}
diff --git a/packages/grafana-sql/src/components/QueryHeader.tsx b/packages/grafana-sql/src/components/QueryHeader.tsx
index 3501a5e9ea3..c52fdaafaf8 100644
--- a/packages/grafana-sql/src/components/QueryHeader.tsx
+++ b/packages/grafana-sql/src/components/QueryHeader.tsx
@@ -1,6 +1,5 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useId, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import { v4 as uuidv4 } from 'uuid';
 
 import { SelectableValue } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
@@ -49,6 +48,8 @@ export function QueryHeader({
   const [showConfirm, setShowConfirm] = useState(false);
   const toRawSql = db.toRawSql;
 
+  const htmlId = useId();
+
   const onEditorModeChange = useCallback(
     (newEditorMode: EditorMode) => {
       if (newEditorMode === EditorMode.Code) {
@@ -136,7 +137,7 @@ export function QueryHeader({
         {editorMode === EditorMode.Builder && (
           <>
             <InlineSwitch
-              id={`sql-filter-${uuidv4()}}`}
+              id={`sql-filter-${htmlId}`}
               label="Filter"
               data-testid={selectors.components.SQLQueryEditor.headerFilterSwitch}
               transparent={true}
@@ -157,7 +158,7 @@ export function QueryHeader({
             />
 
             <InlineSwitch
-              id={`sql-group-${uuidv4()}}`}
+              id={`sql-group-${htmlId}`}
               label="Group"
               data-testid={selectors.components.SQLQueryEditor.headerGroupSwitch}
               transparent={true}
@@ -178,7 +179,7 @@ export function QueryHeader({
             />
 
             <InlineSwitch
-              id={`sql-order-${uuidv4()}}`}
+              id={`sql-order-${htmlId}`}
               label="Order"
               data-testid={selectors.components.SQLQueryEditor.headerOrderSwitch}
               transparent={true}
@@ -199,7 +200,7 @@ export function QueryHeader({
             />
 
             <InlineSwitch
-              id={`sql-preview-${uuidv4()}}`}
+              id={`sql-preview-${htmlId}`}
               label="Preview"
               data-testid={selectors.components.SQLQueryEditor.headerPreviewSwitch}
               transparent={true}
@@ -297,6 +298,7 @@ export function QueryHeader({
               <EditorField label="Dataset" width={25}>
                 <DatasetSelector
                   db={db}
+                  inputId={`sql-dataset-${htmlId}`}
                   dataset={query.dataset}
                   dialect={dialect}
                   preconfiguredDataset={preconfiguredDataset}
@@ -307,6 +309,7 @@ export function QueryHeader({
             <EditorField label="Table" width={25}>
               <TableSelector
                 db={db}
+                inputId={`sql-tableselect-${htmlId}`}
                 dataset={query.dataset || preconfiguredDataset}
                 table={query.table}
                 onChange={onTableChange}
diff --git a/packages/grafana-sql/src/components/TableSelector.tsx b/packages/grafana-sql/src/components/TableSelector.tsx
index 70604b01796..d1dff4d0b78 100644
--- a/packages/grafana-sql/src/components/TableSelector.tsx
+++ b/packages/grafana-sql/src/components/TableSelector.tsx
@@ -12,9 +12,10 @@ export interface TableSelectorProps extends ResourceSelectorProps {
   table: string | undefined;
   dataset: string | undefined;
   onChange: (v: SelectableValue) => void;
+  inputId?: string | undefined;
 }
 
-export const TableSelector = ({ db, dataset, table, className, onChange }: TableSelectorProps) => {
+export const TableSelector = ({ db, dataset, table, className, onChange, inputId }: TableSelectorProps) => {
   const state = useAsync(async () => {
     // No need to attempt to fetch tables for an unknown dataset.
     if (!dataset) {
@@ -30,6 +31,7 @@ export const TableSelector = ({ db, dataset, table, className, onChange }: Table
       className={className}
       disabled={state.loading}
       aria-label="Table selector"
+      inputId={inputId}
       data-testid={selectors.components.SQLQueryEditor.headerTableSelector}
       value={table}
       options={state.value}