Revert "Fix: Editor labels not clickable (#256)" (#273)

This reverts commit 8ec159d.

Author: gabor

package.json

@@ -40,7 +40,8 @@
     "react-use": "^17.3.1",
     "react-virtualized-auto-sizer": "^1.0.6",
     "sql-formatter-plus": "^1.3.6",
-    "tslib": "2.5.3"
+    "tslib": "2.5.3",
+    "uuid": "^8.3.2"
   },
   "devDependencies": {
     "@babel/core": "^7.21.4",
@@ -57,6 +58,7 @@
     "@types/node": "^20.8.7",
     "@types/react-router-dom": "^5.2.0",
     "@types/testing-library__jest-dom": "5.14.8",
+    "@types/uuid": "^8.3.1",
     "@typescript-eslint/eslint-plugin": "^5.42.1",
     "@typescript-eslint/parser": "^5.42.1",
     "copy-webpack-plugin": "^11.0.0",

src/components/DatasetSelector.tsx

@@ -12,7 +12,6 @@ interface DatasetSelectorProps extends ResourceSelectorProps {
   applyDefault?: boolean;
   disabled?: boolean;
   onChange: (v: SelectableValue) => void;
-  inputId?: string;
 }
 
 export const DatasetSelector: React.FC<DatasetSelectorProps> = ({
@@ -24,7 +23,6 @@ export const DatasetSelector: React.FC<DatasetSelectorProps> = ({
   disabled,
   className,
   applyDefault,
-  inputId,
 }) => {
   const state = useAsync(async () => {
     const datasets = await apiClient.getDatasets(location, project);
@@ -54,7 +52,6 @@ export const DatasetSelector: React.FC<DatasetSelectorProps> = ({
     <Select
       className={className}
       aria-label="Dataset selector"
-      inputId={inputId}
       value={value}
       options={state.value}
       onChange={onChange}

src/components/ProjectSelector.tsx

@@ -10,16 +10,9 @@ interface ProjectSelectorProps extends Omit<ResourceSelectorProps, 'location'> {
   value?: string;
   applyDefault?: boolean;
   onChange: (v: SelectableValue) => void;
-  inputId?: string;
 }
 
-export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
-  apiClient,
-  value,
-  onChange,
-  applyDefault,
-  inputId,
-}) => {
+export const ProjectSelector: React.FC<ProjectSelectorProps> = ({ apiClient, value, onChange, applyDefault }) => {
   const theme = useTheme2();
   const state = useAsync(async () => {
     const projects = await apiClient.getProjects();
@@ -70,7 +63,6 @@ export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
       <EditorField label="Project" width={25} error={getErrorMessage()} invalid={!!state.error}>
         <Select
           aria-label="Project selector"
-          inputId={inputId}
           value={state.loading ? null : value}
           options={state.loading ? [] : state.value || [{ label: value, value }]}
           onChange={onChange}

src/components/QueryHeader.tsx

@@ -2,7 +2,7 @@ import { SelectableValue } from '@grafana/data';
 import { EditorField, EditorHeader, EditorMode, EditorRow, FlexItem, InlineSelect, Space } from '@grafana/experimental';
 import { Button, InlineSwitch, RadioButtonGroup, Tooltip } from '@grafana/ui';
 import { BigQueryAPI } from 'api';
-import React, { useCallback, useId, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { toRawSql } from 'utils/sql.utils';
 import { PROCESSING_LOCATIONS, QUERY_FORMAT_OPTIONS } from '../constants';
@@ -11,6 +11,7 @@ import { ConfirmModal } from './ConfirmModal';
 import { DatasetSelector } from './DatasetSelector';
 import { ProjectSelector } from './ProjectSelector';
 import { TableSelector } from './TableSelector';
+import { v4 as uuidv4 } from 'uuid';
 
 interface QueryHeaderProps {
   query: QueryWithDefaults;
@@ -41,7 +42,6 @@ export function QueryHeader({
   const { location, editorMode } = query;
   const [_, copyToClipboard] = useCopyToClipboard();
   const [showConfirm, setShowConfirm] = useState(false);
-  const htmlId = useId();
 
   const onEditorModeChange = useCallback(
     (newEditorMode: EditorMode) => {
@@ -160,7 +160,7 @@ export function QueryHeader({
         {editorMode === EditorMode.Builder && (
           <>
             <InlineSwitch
-              id={`bq-filter-${htmlId}}`}
+              id={`bq-filter-${uuidv4()}}`}
               label="Filter"
               transparent={true}
               showLabel={true}
@@ -172,7 +172,7 @@ export function QueryHeader({
             />
 
             <InlineSwitch
-              id={`bq-group-${htmlId}}`}
+              id={`bq-group-${uuidv4()}}`}
               label="Group"
               transparent={true}
               showLabel={true}
@@ -184,7 +184,7 @@ export function QueryHeader({
             />
 
             <InlineSwitch
-              id={`bq-order-${htmlId}}`}
+              id={`bq-order-${uuidv4()}}`}
               label="Order"
               transparent={true}
               showLabel={true}
@@ -196,7 +196,7 @@ export function QueryHeader({
             />
 
             <InlineSwitch
-              id={`bq-preview-${htmlId}}`}
+              id={`bq-preview-${uuidv4()}}`}
               label="Preview"
               transparent={true}
               showLabel={true}
@@ -243,19 +243,12 @@ export function QueryHeader({
           <Space v={0.5} />
 
           <EditorRow>
-            <ProjectSelector
-              apiClient={apiClient}
-              value={query.project}
-              onChange={onProjectChange}
-              applyDefault
-              inputId={`bq-project-${htmlId}`}
-            />
+            <ProjectSelector apiClient={apiClient} value={query.project} onChange={onProjectChange} applyDefault />
 
             <EditorField label="Dataset" width={25}>
               <DatasetSelector
                 apiClient={apiClient}
                 location={query.location}
-                inputId={`bq-dataset-${htmlId}`}
                 value={query.dataset === undefined ? null : query.dataset}
                 project={query.project}
                 onChange={onDatasetChange}
@@ -266,7 +259,6 @@ export function QueryHeader({
               <TableSelector
                 apiClient={apiClient}
                 query={query}
-                inputId={`bq-table-${htmlId}`}
                 value={query.table === undefined ? null : query.table}
                 onChange={onTableChange}
                 applyDefault

src/components/TableSelector.tsx

@@ -9,17 +9,9 @@ interface TableSelectorProps extends ResourceSelectorProps {
   value: string | null;
   query: QueryWithDefaults;
   onChange: (v: SelectableValue) => void;
-  inputId?: string;
 }
 
-export const TableSelector: React.FC<TableSelectorProps> = ({
-  apiClient,
-  query,
-  value,
-  className,
-  onChange,
-  inputId,
-}) => {
+export const TableSelector: React.FC<TableSelectorProps> = ({ apiClient, query, value, className, onChange }) => {
   const state = useAsync(async () => {
     if (!query.dataset) {
       return [];
@@ -32,7 +24,6 @@ export const TableSelector: React.FC<TableSelectorProps> = ({
     <Select
       className={className}
       disabled={state.loading}
-      inputId={inputId}
       aria-label="Table selector"
       value={value}
       options={state.value}

yarn.lock

@@ -2335,7 +2335,7 @@
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.3.tgz#3d06b6769518450871fbc40770b7586334bdfd90"
   integrity sha512-THo502dA5PzG/sfQH+42Lw3fvmYkceefOspdCwpHRul8ik2Jv1K8I5OZz1AT3/rs46kwgMCe9bSBmDLYkkOMGg==
 
-"@types/uuid@^8.3.3":
+"@types/uuid@^8.3.1", "@types/uuid@^8.3.3":
   version "8.3.4"
   resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.4.tgz#bd86a43617df0594787d38b735f55c805becf1bc"
   integrity sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==