Pulled from main.

Author: duncan771

package.json

@@ -40,8 +40,7 @@
     "react-use": "^17.3.1",
     "react-virtualized-auto-sizer": "^1.0.6",
     "sql-formatter-plus": "^1.3.6",
-    "tslib": "2.5.3",
-    "uuid": "^8.3.2"
+    "tslib": "2.5.3"
   },
   "devDependencies": {
     "@babel/core": "^7.21.4",
@@ -58,7 +57,6 @@
     "@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,6 +12,7 @@ interface DatasetSelectorProps extends ResourceSelectorProps {
   applyDefault?: boolean;
   disabled?: boolean;
   onChange: (v: SelectableValue) => void;
+  inputId?: string;
 }
 
 export const DatasetSelector: React.FC<DatasetSelectorProps> = ({
@@ -23,6 +24,7 @@ export const DatasetSelector: React.FC<DatasetSelectorProps> = ({
   disabled,
   className,
   applyDefault,
+  inputId,
 }) => {
   const state = useAsync(async () => {
     const datasets = await apiClient.getDatasets(location, project);
@@ -52,6 +54,7 @@ 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,9 +10,16 @@ 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 }) => {
+export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
+  apiClient,
+  value,
+  onChange,
+  applyDefault,
+  inputId,
+}) => {
   const theme = useTheme2();
   const state = useAsync(async () => {
     const projects = await apiClient.getProjects();
@@ -63,6 +70,7 @@ export const ProjectSelector: React.FC<ProjectSelectorProps> = ({ apiClient, val
       <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, useState } from 'react';
+import React, { useCallback, useId, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { toRawSql } from 'utils/sql.utils';
 import { PROCESSING_LOCATIONS, QUERY_FORMAT_OPTIONS } from '../constants';
@@ -11,7 +11,6 @@ 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;
@@ -42,6 +41,7 @@ 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-${uuidv4()}}`}
+              id={`bq-filter-${htmlId}}`}
               label="Filter"
               transparent={true}
               showLabel={true}
@@ -172,7 +172,7 @@ export function QueryHeader({
             />
 
             <InlineSwitch
-              id={`bq-group-${uuidv4()}}`}
+              id={`bq-group-${htmlId}}`}
               label="Group"
               transparent={true}
               showLabel={true}
@@ -184,7 +184,7 @@ export function QueryHeader({
             />
 
             <InlineSwitch
-              id={`bq-order-${uuidv4()}}`}
+              id={`bq-order-${htmlId}}`}
               label="Order"
               transparent={true}
               showLabel={true}
@@ -196,7 +196,7 @@ export function QueryHeader({
             />
 
             <InlineSwitch
-              id={`bq-preview-${uuidv4()}}`}
+              id={`bq-preview-${htmlId}}`}
               label="Preview"
               transparent={true}
               showLabel={true}
@@ -243,12 +243,19 @@ export function QueryHeader({
           <Space v={0.5} />
 
           <EditorRow>
-            <ProjectSelector apiClient={apiClient} value={query.project} onChange={onProjectChange} applyDefault />
+            <ProjectSelector
+              apiClient={apiClient}
+              value={query.project}
+              onChange={onProjectChange}
+              applyDefault
+              inputId={`bq-project-${htmlId}`}
+            />
 
             <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}
@@ -259,6 +266,7 @@ 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,9 +9,17 @@ 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 }) => {
+export const TableSelector: React.FC<TableSelectorProps> = ({
+  apiClient,
+  query,
+  value,
+  className,
+  onChange,
+  inputId,
+}) => {
   const state = useAsync(async () => {
     if (!query.dataset) {
       return [];
@@ -24,6 +32,7 @@ export const TableSelector: React.FC<TableSelectorProps> = ({ apiClient, query,
     <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.1", "@types/uuid@^8.3.3":
+"@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==