From cec17213b6597d90da673263b6f6c27c9a84e705 Mon Sep 17 00:00:00 2001
From: alyssabull <alyssabull@gmail.com>
Date: Tue, 21 Oct 2025 09:55:38 -0600
Subject: [PATCH 01/14] Update tests and depecreated components

---
 .../queryBuilder/AggregateEditor.test.tsx     |  8 +--
 .../queryBuilder/AggregateEditor.tsx          |  6 +-
 .../queryBuilder/ColumnsEditor.test.tsx       |  8 +--
 .../queryBuilder/DatabaseTableSelect.test.tsx | 12 ++--
 .../queryBuilder/DatabaseTableSelect.tsx      | 34 +++++-----
 .../queryBuilder/DurationUnitSelect.tsx       |  9 ++-
 .../queryBuilder/FilterEditor.test.tsx        |  8 +--
 src/components/queryBuilder/FilterEditor.tsx  | 62 +++++++++++--------
 .../queryBuilder/GroupByEditor.test.tsx       |  4 +-
 .../queryBuilder/LimitEditor.test.tsx         |  4 +-
 .../queryBuilder/ModeSwitch.test.tsx          |  8 +--
 .../queryBuilder/OrderByEditor.test.tsx       | 14 ++---
 src/components/queryBuilder/OrderByEditor.tsx | 48 +++++++-------
 .../queryBuilder/OtelVersionSelect.test.tsx   | 12 ++--
 .../queryBuilder/OtelVersionSelect.tsx        |  7 +--
 src/components/queryBuilder/QueryBuilder.tsx  | 10 +--
 .../queryBuilder/QueryTypeSwitcher.test.tsx   |  4 +-
 .../queryBuilder/views/LogsQueryBuilder.tsx   |  6 +-
 src/data/CHDatasource.test.ts                 |  2 +-
 src/data/CHDatasource.ts                      |  4 +-
 src/data/adHocFilter.ts                       |  2 +-
 src/data/logs.ts                              | 12 ++--
 src/data/utils.ts                             |  4 +-
 23 files changed, 148 insertions(+), 140 deletions(-)

diff --git a/src/components/queryBuilder/AggregateEditor.test.tsx b/src/components/queryBuilder/AggregateEditor.test.tsx
index d88356bc..fe5e4069 100644
--- a/src/components/queryBuilder/AggregateEditor.test.tsx
+++ b/src/components/queryBuilder/AggregateEditor.test.tsx
@@ -30,8 +30,8 @@ describe('AggregateEditor', () => {
     const addButton = result.getByTestId(selectors.components.QueryBuilder.AggregateEditor.addButton);
     expect(addButton).toBeInTheDocument();
     await userEvent.click(addButton);
-    expect(onAggregatesChange).toBeCalledTimes(1);
-    expect(onAggregatesChange).toBeCalledWith([expect.anything()]);
+    expect(onAggregatesChange).toHaveBeenCalledTimes(1);
+    expect(onAggregatesChange).toHaveBeenCalledWith([expect.anything()]);
   });
 
   it('should call onAggregatesChange when remove aggregate button is clicked', async () => {
@@ -45,7 +45,7 @@ describe('AggregateEditor', () => {
     const removeButton = result.getByTestId(selectors.components.QueryBuilder.AggregateEditor.itemRemoveButton);
     expect(removeButton).toBeInTheDocument();
     await userEvent.click(removeButton);
-    expect(onAggregatesChange).toBeCalledWith([]);
+    expect(onAggregatesChange).toHaveBeenCalledWith([]);
   });
 
   it('should call onAggregatesChange when aggregate is updated', async () => {
@@ -62,6 +62,6 @@ describe('AggregateEditor', () => {
     fireEvent.keyDown(aggregateSelect, { key: 'ArrowDown' });
     fireEvent.keyDown(aggregateSelect, { key: 'ArrowDown' });
     fireEvent.keyDown(aggregateSelect, { key: 'Enter' });
-    expect(onAggregatesChange).toBeCalledWith([expectedAggregate]);
+    expect(onAggregatesChange).toHaveBeenCalledWith([expectedAggregate]);
   });
 });
diff --git a/src/components/queryBuilder/AggregateEditor.tsx b/src/components/queryBuilder/AggregateEditor.tsx
index 0e57ba3f..846632ff 100644
--- a/src/components/queryBuilder/AggregateEditor.tsx
+++ b/src/components/queryBuilder/AggregateEditor.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { SelectableValue } from '@grafana/data';
-import { InlineFormLabel, Select, Button, Input, HorizontalGroup } from '@grafana/ui';
+import { InlineFormLabel, Select, Button, Input, Stack } from '@grafana/ui';
 import { AggregateColumn, AggregateType, TableColumn } from 'types/queryBuilder';
 import labels from 'labels';
 import { selectors } from 'selectors';
@@ -43,7 +43,7 @@ const Aggregate = (props: AggregateProps) => {
   }
 
   return (
-    <HorizontalGroup wrap align="flex-start" justify="flex-start">
+    <Stack wrap alignItems="flex-start" justifyContent="flex-start">
       <Select
         width={20}
         className={styles.Common.inlineSelect}
@@ -83,7 +83,7 @@ const Aggregate = (props: AggregateProps) => {
         icon="trash-alt"
         onClick={() => removeAggregate(index)}
       />
-    </HorizontalGroup>
+    </Stack>
   );
 };
 
diff --git a/src/components/queryBuilder/ColumnsEditor.test.tsx b/src/components/queryBuilder/ColumnsEditor.test.tsx
index 02566931..7f3c2d68 100644
--- a/src/components/queryBuilder/ColumnsEditor.test.tsx
+++ b/src/components/queryBuilder/ColumnsEditor.test.tsx
@@ -49,8 +49,8 @@ describe('ColumnsEditor', () => {
     fireEvent.keyDown(multiSelect, { key: 'ArrowDown' });
     fireEvent.keyDown(multiSelect, { key: 'Enter' });
 
-    expect(onSelectedColumnsChange).toBeCalledTimes(1);
-    expect(onSelectedColumnsChange).toBeCalledWith([expect.any(Object), expect.any(Object)]);
+    expect(onSelectedColumnsChange).toHaveBeenCalledTimes(1);
+    expect(onSelectedColumnsChange).toHaveBeenCalledWith([expect.any(Object), expect.any(Object)]);
   });
 
   it('should call onSelectedColumnsChange when a column is deselected', () => {
@@ -67,8 +67,8 @@ describe('ColumnsEditor', () => {
 
     const removeButton = result.getByTestId('times'); // find by "x" symbol
     fireEvent.click(removeButton);
-    expect(onSelectedColumnsChange).toBeCalledTimes(1);
-    expect(onSelectedColumnsChange).toBeCalledWith([]);
+    expect(onSelectedColumnsChange).toHaveBeenCalledTimes(1);
+    expect(onSelectedColumnsChange).toHaveBeenCalledWith([]);
   });
 
   it('should close when clicked outside', () => {
diff --git a/src/components/queryBuilder/DatabaseTableSelect.test.tsx b/src/components/queryBuilder/DatabaseTableSelect.test.tsx
index 7385a79b..b128e649 100644
--- a/src/components/queryBuilder/DatabaseTableSelect.test.tsx
+++ b/src/components/queryBuilder/DatabaseTableSelect.test.tsx
@@ -41,8 +41,8 @@ describe('DatabaseSelect', () => {
     );
     expect(result.container.firstChild).not.toBeNull();
 
-    expect(onDatabaseChange).toBeCalledTimes(1);
-    expect(onDatabaseChange).toBeCalledWith(defaultDB);
+    expect(onDatabaseChange).toHaveBeenCalledTimes(1);
+    expect(onDatabaseChange).toHaveBeenCalledWith(defaultDB);
   });
 
   it('should call onDatabaseChange when a database is selected', async () => {
@@ -61,8 +61,8 @@ describe('DatabaseSelect', () => {
     fireEvent.keyDown(multiSelect, { key: 'ArrowDown' }); // "other" db, a custom value
     fireEvent.keyDown(multiSelect, { key: 'ArrowDown' }); // "default" db
     fireEvent.keyDown(multiSelect, { key: 'Enter' });
-    expect(onDatabaseChange).toBeCalledTimes(1);
-    expect(onDatabaseChange).toBeCalledWith(defaultDB);
+    expect(onDatabaseChange).toHaveBeenCalledTimes(1);
+    expect(onDatabaseChange).toHaveBeenCalledWith(defaultDB);
   });
 });
 
@@ -116,8 +116,8 @@ describe('TableSelect', () => {
     fireEvent.keyDown(multiSelect, { key: 'ArrowDown' }); // "other" table, a custom value
     fireEvent.keyDown(multiSelect, { key: 'ArrowDown' }); // test table
     fireEvent.keyDown(multiSelect, { key: 'Enter' });
-    expect(onTableChange).toBeCalledTimes(1);
-    expect(onTableChange).toBeCalledWith(testTable);
+    expect(onTableChange).toHaveBeenCalledTimes(1);
+    expect(onTableChange).toHaveBeenCalledWith(testTable);
   });
 });
 
diff --git a/src/components/queryBuilder/DatabaseTableSelect.tsx b/src/components/queryBuilder/DatabaseTableSelect.tsx
index 4ad2ea31..4f981586 100644
--- a/src/components/queryBuilder/DatabaseTableSelect.tsx
+++ b/src/components/queryBuilder/DatabaseTableSelect.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { InlineFormLabel, Select } from '@grafana/ui';
+import { InlineFormLabel, Combobox } from '@grafana/ui';
 import { Datasource } from '../../data/CHDatasource';
 import labels from 'labels';
 import { styles } from '../../styles';
@@ -38,14 +38,14 @@ export const DatabaseSelect = (props: DatabaseSelectProps) => {
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
-      <Select
-        className={`width-15 ${styles.Common.inlineSelect}`}
-        options={options}
-        value={database}
-        onChange={(e) => onDatabaseChange(e.value!)}
-        menuPlacement={'bottom'}
-        allowCustomValue
-      ></Select>
+      <div className={`width-15 ${styles.Common.inlineSelect}`}>
+        <Combobox
+          options={options}
+          value={database}
+          onChange={(e) => onDatabaseChange(e.value!)}
+          createCustomValue={true}
+        ></Combobox>
+      </div>
     </>
   );
 };
@@ -82,14 +82,14 @@ export const TableSelect = (props: TableSelectProps) => {
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
-      <Select
-        className={`width-15 ${styles.Common.inlineSelect}`}
-        options={options}
-        value={table}
-        onChange={(e) => onTableChange(e.value!)}
-        menuPlacement={'bottom'}
-        allowCustomValue
-      ></Select>
+      <div className={`width-15 ${styles.Common.inlineSelect}`}>
+        <Combobox
+          options={options}
+          value={table}
+          onChange={(e) => onTableChange(e.value!)}
+          createCustomValue={true}
+        ></Combobox>
+      </div>
     </>
   );
 };
diff --git a/src/components/queryBuilder/DurationUnitSelect.tsx b/src/components/queryBuilder/DurationUnitSelect.tsx
index 7b7b684a..57fbdee7 100644
--- a/src/components/queryBuilder/DurationUnitSelect.tsx
+++ b/src/components/queryBuilder/DurationUnitSelect.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { TimeUnit } from 'types/queryBuilder';
 import allLabels from 'labels';
-import { InlineFormLabel, Select } from '@grafana/ui';
+import { InlineFormLabel, Combobox, ComboboxOption } from '@grafana/ui';
 import { SelectableValue } from '@grafana/data';
 import { styles } from 'styles';
 
@@ -12,7 +12,7 @@ interface DurationUnitSelectProps {
   inline?: boolean;
 }
 
-const durationUnitOptions: ReadonlyArray<SelectableValue<TimeUnit>> = [
+const durationUnitOptions: ReadonlyArray<ComboboxOption<TimeUnit>> = [
   { label: TimeUnit.Seconds, value: TimeUnit.Seconds },
   { label: TimeUnit.Milliseconds, value: TimeUnit.Milliseconds },
   { label: TimeUnit.Microseconds, value: TimeUnit.Microseconds },
@@ -32,13 +32,12 @@ export const DurationUnitSelect = (props: DurationUnitSelectProps) => {
       >
         {label}
       </InlineFormLabel>
-      <Select<TimeUnit>
+      <Combobox<TimeUnit>
         disabled={disabled}
-        options={durationUnitOptions as Array<SelectableValue<TimeUnit>>}
+        options={durationUnitOptions as Array<ComboboxOption<TimeUnit>>}
         value={unit}
         onChange={(v) => onChange(v.value!)}
         width={inline ? 25 : 30}
-        menuPlacement={'bottom'}
       />
     </div>
   );
diff --git a/src/components/queryBuilder/FilterEditor.test.tsx b/src/components/queryBuilder/FilterEditor.test.tsx
index 0e7db95b..cb34bde6 100644
--- a/src/components/queryBuilder/FilterEditor.test.tsx
+++ b/src/components/queryBuilder/FilterEditor.test.tsx
@@ -31,9 +31,9 @@ describe('FilterEditor', () => {
       expect(result.container.firstChild).not.toBeNull();
       expect(result.getAllByText(selectors.components.QueryEditor.QueryBuilder.WHERE.label).length).toBe(1);
       expect(result.getByTestId('query-builder-filters-add-button')).toBeInTheDocument();
-      expect(onFiltersChange).toBeCalledTimes(0);
+      expect(onFiltersChange).toHaveBeenCalledTimes(0);
       await userEvent.click(result.getByTestId('query-builder-filters-add-button'));
-      expect(onFiltersChange).toBeCalledTimes(1);
+      expect(onFiltersChange).toHaveBeenCalledTimes(1);
       expect(onFiltersChange).toHaveBeenCalledWith([defaultNewFilter]);
     });
     it('should render buttons and labels correctly', async () => {
@@ -105,10 +105,10 @@ describe('FilterEditor', () => {
       expect(result.getAllByTestId('query-builder-filters-inline-add-button').length).toBe(1);
       expect(result.getAllByTestId('query-builder-filters-remove-button').length).toBe(filters.length);
       await userEvent.click(result.getByTestId('query-builder-filters-inline-add-button'));
-      expect(onFiltersChange).toBeCalledTimes(1);
+      expect(onFiltersChange).toHaveBeenCalledTimes(1);
       expect(onFiltersChange).toHaveBeenNthCalledWith(1, [...filters, defaultNewFilter]);
       await userEvent.click(result.getAllByTestId('query-builder-filters-remove-button')[0]);
-      expect(onFiltersChange).toBeCalledTimes(2);
+      expect(onFiltersChange).toHaveBeenCalledTimes(2);
       expect(onFiltersChange).toHaveBeenNthCalledWith(2, [filters[1]]);
     });
   });
diff --git a/src/components/queryBuilder/FilterEditor.tsx b/src/components/queryBuilder/FilterEditor.tsx
index ae6300e3..4893b9b5 100644
--- a/src/components/queryBuilder/FilterEditor.tsx
+++ b/src/components/queryBuilder/FilterEditor.tsx
@@ -1,6 +1,16 @@
 import React, { useState } from 'react';
 import { SelectableValue } from '@grafana/data';
-import { Button, HorizontalGroup, InlineFormLabel, Input, MultiSelect, RadioButtonGroup, Select } from '@grafana/ui';
+import {
+  Button,
+  Stack,
+  InlineFormLabel,
+  Input,
+  MultiSelect,
+  RadioButtonGroup,
+  Combobox,
+  ComboboxOption,
+  Select,
+} from '@grafana/ui';
 import { Filter, FilterOperator, TableColumn, NullFilter } from 'types/queryBuilder';
 import * as utils from 'components/queryBuilder/utils';
 import labels from 'labels';
@@ -16,7 +26,7 @@ const conditions: Array<SelectableValue<'AND' | 'OR'>> = [
   { value: 'AND', label: 'AND' },
   { value: 'OR', label: 'OR' },
 ];
-const filterOperators: Array<SelectableValue<FilterOperator>> = [
+const filterOperators: Array<ComboboxOption<FilterOperator>> = [
   { value: FilterOperator.WithInGrafanaTimeRange, label: 'Within dashboard time range' },
   { value: FilterOperator.OutsideGrafanaTimeRange, label: 'Outside dashboard time range' },
   { value: FilterOperator.IsAnything, label: 'IS ANYTHING' },
@@ -35,7 +45,7 @@ const filterOperators: Array<SelectableValue<FilterOperator>> = [
   { value: FilterOperator.IsNull, label: 'IS NULL' },
   { value: FilterOperator.IsNotNull, label: 'IS NOT NULL' },
 ];
-const standardTimeOptions: Array<SelectableValue<string>> = [
+const standardTimeOptions: Array<ComboboxOption<string>> = [
   { value: 'today()', label: 'TODAY' },
   { value: 'yesterday()', label: 'YESTERDAY' },
   { value: 'now()', label: 'NOW' },
@@ -137,12 +147,12 @@ export const FilterValueEditor = (props: {
 
     return (
       <div data-testid="query-builder-filters-date-value-container">
-        <Select
+        <Combobox
           value={filter.value || 'TODAY'}
           onChange={(e) => onDateFilterValueChange(e.value!)}
           options={dateOptions}
           width={40}
-          allowCustomValue
+          createCustomValue={true}
         />
       </div>
     );
@@ -156,7 +166,7 @@ export const FilterValueEditor = (props: {
     ) {
       return (
         <div data-testid="query-builder-filters-single-picklist-value-container">
-          <Select value={filter.value} onChange={(e) => onStringFilterValueChange(e.value!)} options={getOptions()} />
+          <Combobox value={filter.value} onChange={(e) => onStringFilterValueChange(e.value!)} options={getOptions()} />
         </div>
       );
     }
@@ -227,7 +237,7 @@ export const FilterEditor = (props: {
     }
     return values;
   };
-  const getFilterOperatorsByType = (type = 'string'): Array<SelectableValue<FilterOperator>> => {
+  const getFilterOperatorsByType = (type = 'string'): Array<ComboboxOption<FilterOperator>> => {
     if (utils.isBooleanType(type)) {
       return filterOperators.filter((f) => [FilterOperator.Equals, FilterOperator.NotEquals].includes(f.value!));
     } else if (utils.isNumberType(type)) {
@@ -360,7 +370,7 @@ export const FilterEditor = (props: {
   };
 
   return (
-    <HorizontalGroup wrap align="flex-start" justify="flex-start">
+    <Stack wrap alignItems="flex-start" justifyContent="flex-start">
       {index !== 0 && (
         <RadioButtonGroup options={conditions} value={filter.condition} onChange={(e) => onFilterConditionChange(e!)} />
       )}
@@ -379,25 +389,25 @@ export const FilterEditor = (props: {
         menuPlacement={'bottom'}
       />
       {(isMapType || isJSONType) && (
-        <Select
-          value={filter.mapKey}
-          placeholder={labels.components.FilterEditor.mapKeyPlaceholder}
+        <div className={styles.Common.inlineSelect}>
+          <Combobox
+            value={filter.mapKey}
+            placeholder={labels.components.FilterEditor.mapKeyPlaceholder}
+            width={40}
+            options={mapKeyOptions}
+            onChange={(e) => onFilterMapKeyChange(e.value!)}
+            createCustomValue={true}
+          />
+        </div>
+      )}
+      <div className={styles.Common.inlineSelect}>
+        <Combobox
+          value={filter.operator}
           width={40}
-          className={styles.Common.inlineSelect}
-          options={mapKeyOptions}
-          onChange={(e) => onFilterMapKeyChange(e.value!)}
-          allowCustomValue
-          menuPlacement={'bottom'}
+          options={getFilterOperatorsByType(filter.type)}
+          onChange={(e) => onFilterOperatorChange(e.value!)}
         />
-      )}
-      <Select
-        value={filter.operator}
-        width={40}
-        className={styles.Common.inlineSelect}
-        options={getFilterOperatorsByType(filter.type)}
-        onChange={(e) => onFilterOperatorChange(e.value!)}
-        menuPlacement={'bottom'}
-      />
+      </div>
       <FilterValueEditor filter={filter} onFilterChange={onFilterValueChange} allColumns={fieldsList} />
       <Button
         data-testid="query-builder-filters-remove-button"
@@ -407,7 +417,7 @@ export const FilterEditor = (props: {
         className={styles.Common.smallBtn}
         onClick={() => removeFilter(index)}
       />
-    </HorizontalGroup>
+    </Stack>
   );
 };
 
diff --git a/src/components/queryBuilder/GroupByEditor.test.tsx b/src/components/queryBuilder/GroupByEditor.test.tsx
index 77b4c75d..a443f3e7 100644
--- a/src/components/queryBuilder/GroupByEditor.test.tsx
+++ b/src/components/queryBuilder/GroupByEditor.test.tsx
@@ -33,7 +33,7 @@ describe('GroupByEditor', () => {
     expect(result.queryAllByText('a').length).toBe(1); // is popup open
     fireEvent.keyDown(multiSelect, { key: 'Enter' });
     expect(result.queryAllByText('a').length).toBe(0); // is popup closed
-    expect(onGroupByChange).toBeCalledTimes(1);
-    expect(onGroupByChange).toBeCalledWith(expect.any(Object));
+    expect(onGroupByChange).toHaveBeenCalledTimes(1);
+    expect(onGroupByChange).toHaveBeenCalledWith(expect.any(Object));
   });
 });
diff --git a/src/components/queryBuilder/LimitEditor.test.tsx b/src/components/queryBuilder/LimitEditor.test.tsx
index f7fabe97..71ba00bd 100644
--- a/src/components/queryBuilder/LimitEditor.test.tsx
+++ b/src/components/queryBuilder/LimitEditor.test.tsx
@@ -19,7 +19,7 @@ describe('LimitEditor', () => {
     fireEvent.change(limitInput, { target: { value: 5 } });
     fireEvent.blur(limitInput);
     expect(limitInput).toHaveValue(5);
-    expect(onLimitChange).toBeCalledTimes(1);
-    expect(onLimitChange).toBeCalledWith(5);
+    expect(onLimitChange).toHaveBeenCalledTimes(1);
+    expect(onLimitChange).toHaveBeenCalledWith(5);
   });
 });
diff --git a/src/components/queryBuilder/ModeSwitch.test.tsx b/src/components/queryBuilder/ModeSwitch.test.tsx
index b17c9380..1379b5f6 100644
--- a/src/components/queryBuilder/ModeSwitch.test.tsx
+++ b/src/components/queryBuilder/ModeSwitch.test.tsx
@@ -29,15 +29,15 @@ describe('ModeSwitch', () => {
     expect(buttonB).toBeInTheDocument();
 
     fireEvent.click(buttonB);
-    expect(onChange).toBeCalledTimes(1);
-    expect(onChange).toBeCalledWith(true);
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(true);
 
     result.rerender(
       <ModeSwitch labelA={labelA} labelB={labelB} value={true} onChange={onChange} label={label} tooltip={tooltip} />
     );
 
     fireEvent.click(buttonA);
-    expect(onChange).toBeCalledTimes(2);
-    expect(onChange).toBeCalledWith(false);
+    expect(onChange).toHaveBeenCalledTimes(2);
+    expect(onChange).toHaveBeenCalledWith(false);
   });
 });
diff --git a/src/components/queryBuilder/OrderByEditor.test.tsx b/src/components/queryBuilder/OrderByEditor.test.tsx
index 70afa340..c4fa6433 100644
--- a/src/components/queryBuilder/OrderByEditor.test.tsx
+++ b/src/components/queryBuilder/OrderByEditor.test.tsx
@@ -3,9 +3,9 @@ import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { OrderByEditor, getOrderByOptions } from './OrderByEditor';
 import { AggregateType, BuilderMode, OrderByDirection, QueryType, TableColumn } from 'types/queryBuilder';
-import { SelectableValue } from '@grafana/data';
+import { ComboboxOption } from '@grafana/ui';
 
-const testOptions: Array<SelectableValue<string>> = [
+const testOptions: Array<ComboboxOption<string>> = [
   { label: 'foo', value: 'foo' },
   { label: 'bar', value: 'bar' },
   { label: 'baz', value: 'baz' },
@@ -79,10 +79,10 @@ describe('OrderByEditor', () => {
     expect(result.getByTestId('query-builder-orderby-add-button')).toBeInTheDocument();
     expect(result.queryByTestId('query-builder-orderby-item-wrapper')).not.toBeInTheDocument();
     expect(result.queryByTestId('query-builder-orderby-remove-button')).not.toBeInTheDocument();
-    expect(onOrderByChange).toBeCalledTimes(0);
+    expect(onOrderByChange).toHaveBeenCalledTimes(0);
     await userEvent.click(result.getByTestId('query-builder-orderby-add-button'));
-    expect(onOrderByChange).toBeCalledTimes(1);
-    expect(onOrderByChange).toBeCalledWith([{ name: 'foo', dir: OrderByDirection.ASC }]);
+    expect(onOrderByChange).toHaveBeenCalledTimes(1);
+    expect(onOrderByChange).toHaveBeenCalledWith([{ name: 'foo', dir: OrderByDirection.ASC }]);
   });
   it('should remove items when remove button clicked', async () => {
     const onOrderByChange = jest.fn();
@@ -97,11 +97,11 @@ describe('OrderByEditor', () => {
       />
     );
     expect(result.container.firstChild).not.toBeNull();
-    expect(onOrderByChange).toBeCalledTimes(0);
+    expect(onOrderByChange).toHaveBeenCalledTimes(0);
     await userEvent.click(result.getAllByTestId('query-builder-orderby-remove-button')[1]);
     await userEvent.click(result.getAllByTestId('query-builder-orderby-remove-button')[0]);
     await userEvent.click(result.getAllByTestId('query-builder-orderby-add-button')[0]);
-    expect(onOrderByChange).toBeCalledTimes(3);
+    expect(onOrderByChange).toHaveBeenCalledTimes(3);
     expect(onOrderByChange).toHaveBeenNthCalledWith(1, [{ name: 'foo', dir: OrderByDirection.ASC }]);
     expect(onOrderByChange).toHaveBeenNthCalledWith(2, [{ name: 'bar', dir: OrderByDirection.ASC }]);
     expect(onOrderByChange).toHaveBeenNthCalledWith(3, [
diff --git a/src/components/queryBuilder/OrderByEditor.tsx b/src/components/queryBuilder/OrderByEditor.tsx
index e98c0b96..6be33294 100644
--- a/src/components/queryBuilder/OrderByEditor.tsx
+++ b/src/components/queryBuilder/OrderByEditor.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import { SelectableValue } from '@grafana/data';
-import { Button, InlineFormLabel, Select } from '@grafana/ui';
+import { Button, InlineFormLabel, Combobox, ComboboxOption } from '@grafana/ui';
 import { OrderBy, OrderByDirection, QueryBuilderOptions, TableColumn } from 'types/queryBuilder';
 import allLabels from 'labels';
 import { styles } from 'styles';
 import { isAggregateQuery } from 'data/sqlGenerator';
 
 interface OrderByItemProps {
-  columnOptions: Array<SelectableValue<string>>;
+  columnOptions: Array<ComboboxOption<string>>;
   index: number;
   orderByItem: OrderBy;
   updateOrderByItem: (index: number, orderByItem: OrderBy) => void;
@@ -24,25 +24,25 @@ const OrderByItem = (props: OrderByItemProps) => {
 
   return (
     <>
-      <Select
-        disabled={Boolean(orderByItem.hint)}
-        placeholder={orderByItem.hint ? allLabels.types.ColumnHint[orderByItem.hint] : undefined}
-        value={orderByItem.hint ? undefined : orderByItem.name}
-        className={styles.Common.inlineSelect}
-        width={36}
-        options={columnOptions}
-        onChange={(e) => updateOrderByItem(index, { ...orderByItem, name: e.value! })}
-        allowCustomValue
-        menuPlacement={'bottom'}
-      />
-      <Select<OrderByDirection>
-        value={orderByItem.dir}
-        className={styles.Common.inlineSelect}
-        width={12}
-        options={sortOptions}
-        onChange={(e) => updateOrderByItem(index, { ...orderByItem, dir: e.value! })}
-        menuPlacement={'bottom'}
-      />
+      <div className={styles.Common.inlineSelect}>
+        <Combobox
+          disabled={Boolean(orderByItem.hint)}
+          placeholder={orderByItem.hint ? allLabels.types.ColumnHint[orderByItem.hint] : undefined}
+          value={orderByItem.hint ? undefined : orderByItem.name}
+          width={36}
+          options={columnOptions}
+          onChange={(e) => updateOrderByItem(index, { ...orderByItem, name: e.value! })}
+          createCustomValue={true}
+        />
+      </div>
+      <div className={styles.Common.inlineSelect}>
+        <Combobox<OrderByDirection>
+          value={orderByItem.dir}
+          width={12}
+          options={sortOptions}
+          onChange={(e) => updateOrderByItem(index, { ...orderByItem, dir: e.value! })}
+        />
+      </div>
       <Button
         data-testid="query-builder-orderby-remove-button"
         className={styles.Common.smallBtn}
@@ -56,7 +56,7 @@ const OrderByItem = (props: OrderByItemProps) => {
 };
 
 interface OrderByEditorProps {
-  orderByOptions: Array<SelectableValue<string>>;
+  orderByOptions: Array<ComboboxOption<string>>;
   orderBy: OrderBy[];
   onOrderByChange: (orderBy: OrderBy[]) => void;
 }
@@ -134,8 +134,8 @@ export const OrderByEditor = (props: OrderByEditorProps) => {
 export const getOrderByOptions = (
   builder: QueryBuilderOptions,
   allColumns: readonly TableColumn[]
-): Array<SelectableValue<string>> => {
-  let allOptions: Array<SelectableValue<string>> = [];
+): Array<ComboboxOption<string>> => {
+  let allOptions: Array<ComboboxOption<string>> = [];
 
   if (isAggregateQuery(builder)) {
     builder.columns?.forEach((c) => {
diff --git a/src/components/queryBuilder/OtelVersionSelect.test.tsx b/src/components/queryBuilder/OtelVersionSelect.test.tsx
index c355ed4a..ffa84ddb 100644
--- a/src/components/queryBuilder/OtelVersionSelect.test.tsx
+++ b/src/components/queryBuilder/OtelVersionSelect.test.tsx
@@ -42,8 +42,8 @@ describe('OtelVersionSelect', () => {
     const toggle = result.getByRole('checkbox');
     expect(toggle).toBeInTheDocument();
     fireEvent.click(toggle);
-    expect(onEnabledChange).toBeCalledTimes(1);
-    expect(onEnabledChange).toBeCalledWith(true);
+    expect(onEnabledChange).toHaveBeenCalledTimes(1);
+    expect(onEnabledChange).toHaveBeenCalledWith(true);
   });
 
   it('should call onEnabledChange when the switch is disabled', () => {
@@ -61,8 +61,8 @@ describe('OtelVersionSelect', () => {
     const toggle = result.getByRole('checkbox');
     expect(toggle).toBeInTheDocument();
     fireEvent.click(toggle);
-    expect(onEnabledChange).toBeCalledTimes(1);
-    expect(onEnabledChange).toBeCalledWith(false);
+    expect(onEnabledChange).toHaveBeenCalledTimes(1);
+    expect(onEnabledChange).toHaveBeenCalledWith(false);
   });
 
   it('should call onVersionChange when a new version is selected', () => {
@@ -81,8 +81,8 @@ describe('OtelVersionSelect', () => {
     expect(select).toBeInTheDocument();
     fireEvent.keyDown(select, { key: 'ArrowDown' });
     fireEvent.keyDown(select, { key: 'Enter' });
-    expect(onVersionChange).toBeCalledTimes(1);
-    expect(onVersionChange).toBeCalledWith(expect.any(String));
+    expect(onVersionChange).toHaveBeenCalledTimes(1);
+    expect(onVersionChange).toHaveBeenCalledWith(expect.any(String));
   });
 
   it('should disable version selection when switch is disabled', () => {
diff --git a/src/components/queryBuilder/OtelVersionSelect.tsx b/src/components/queryBuilder/OtelVersionSelect.tsx
index 70014b80..f7aec90f 100644
--- a/src/components/queryBuilder/OtelVersionSelect.tsx
+++ b/src/components/queryBuilder/OtelVersionSelect.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { SelectableValue } from '@grafana/data';
-import { InlineFormLabel, Select, Switch as GrafanaSwitch, useTheme } from '@grafana/ui';
+import { InlineFormLabel, Combobox, Switch as GrafanaSwitch, useTheme, ComboboxOption } from '@grafana/ui';
 import otel from 'otel';
 import selectors from 'labels';
 
@@ -15,7 +15,7 @@ interface OtelVersionSelectProps {
 export const OtelVersionSelect = (props: OtelVersionSelectProps) => {
   const { enabled, onEnabledChange, selectedVersion, onVersionChange, wide } = props;
   const { label, tooltip } = selectors.components.OtelVersionSelect;
-  const options: SelectableValue[] = otel.versions.map((v) => ({
+  const options: ComboboxOption[] = otel.versions.map((v) => ({
     label: v.name,
     value: v.version,
   }));
@@ -48,13 +48,12 @@ export const OtelVersionSelect = (props: OtelVersionSelectProps) => {
           role="checkbox"
         />
       </div>
-      <Select
+      <Combobox
         disabled={!enabled}
         options={options}
         width={20}
         onChange={(e) => onVersionChange(e.value)}
         value={selectedVersion}
-        menuPlacement={'bottom'}
       />
     </div>
   );
diff --git a/src/components/queryBuilder/QueryBuilder.tsx b/src/components/queryBuilder/QueryBuilder.tsx
index fb6adff8..09fd522a 100644
--- a/src/components/queryBuilder/QueryBuilder.tsx
+++ b/src/components/queryBuilder/QueryBuilder.tsx
@@ -18,7 +18,7 @@ import {
   setTable,
 } from 'hooks/useBuilderOptionsState';
 import TraceIdInput from './TraceIdInput';
-import { Alert, Button, VerticalGroup } from '@grafana/ui';
+import { Alert, Button, Stack } from '@grafana/ui';
 import { Components as allSelectors } from 'selectors';
 import allLabels from 'labels';
 
@@ -142,7 +142,7 @@ const MinimizedQueryViewer = (props: MinimizedQueryBuilder) => {
     <div data-testid="query-editor-minimized-viewer">
       {showConfigWarning && (
         <Alert title="" severity="warning">
-          <VerticalGroup>
+          <Stack direction="column">
             <div>
               {`To enable data linking, enter your default ${configQueryType} configuration in your `}
               <a
@@ -152,14 +152,14 @@ const MinimizedQueryViewer = (props: MinimizedQueryBuilder) => {
                 ClickHouse Data Source settings
               </a>
             </div>
-          </VerticalGroup>
+          </Stack>
         </Alert>
       )}
       {!traceId && (
         <Alert title="" severity="warning">
-          <VerticalGroup>
+          <Stack>
             <div>Trace ID is empty</div>
-          </VerticalGroup>
+          </Stack>
         </Alert>
       )}
 
diff --git a/src/components/queryBuilder/QueryTypeSwitcher.test.tsx b/src/components/queryBuilder/QueryTypeSwitcher.test.tsx
index f7aed13f..7d92ad06 100644
--- a/src/components/queryBuilder/QueryTypeSwitcher.test.tsx
+++ b/src/components/queryBuilder/QueryTypeSwitcher.test.tsx
@@ -28,7 +28,7 @@ describe('QueryTypeSwitcher', () => {
     const timeSeriesButton = result.getByLabelText(options.TimeSeries);
     expect(timeSeriesButton).toBeInTheDocument();
     fireEvent.click(timeSeriesButton);
-    expect(onChange).toBeCalledTimes(1);
-    expect(onChange).toBeCalledWith(QueryType.TimeSeries);
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(QueryType.TimeSeries);
   });
 });
diff --git a/src/components/queryBuilder/views/LogsQueryBuilder.tsx b/src/components/queryBuilder/views/LogsQueryBuilder.tsx
index 5f92d1ee..9ba099c9 100644
--- a/src/components/queryBuilder/views/LogsQueryBuilder.tsx
+++ b/src/components/queryBuilder/views/LogsQueryBuilder.tsx
@@ -11,7 +11,7 @@ import { getColumnByHint } from 'data/sqlGenerator';
 import { columnFilterDateTime, columnFilterString } from 'data/columnFilters';
 import { Datasource } from 'data/CHDatasource';
 import { useBuilderOptionChanges } from 'hooks/useBuilderOptionChanges';
-import { Alert, Button, InlineFormLabel, Input, VerticalGroup } from '@grafana/ui';
+import { Alert, Button, InlineFormLabel, Input, Stack } from '@grafana/ui';
 import useColumns from 'hooks/useColumns';
 import { BuilderOptionsReducerAction, setOptions, setOtelEnabled, setOtelVersion } from 'hooks/useBuilderOptionsState';
 import useIsNewQuery from 'hooks/useIsNewQuery';
@@ -121,7 +121,7 @@ export const LogsQueryBuilder = (props: LogsQueryBuilderProps) => {
 
   const configWarning = showConfigWarning && (
     <Alert title="" severity="warning" buttonContent="Close" onRemove={() => setConfigWarningOpen(false)}>
-      <VerticalGroup>
+      <Stack direction="column">
         <div>
           {'To speed up your query building, enter your default logs configuration in your '}
           <a
@@ -131,7 +131,7 @@ export const LogsQueryBuilder = (props: LogsQueryBuilderProps) => {
             ClickHouse Data Source settings
           </a>
         </div>
-      </VerticalGroup>
+      </Stack>
     </Alert>
   );
 
diff --git a/src/data/CHDatasource.test.ts b/src/data/CHDatasource.test.ts
index 8b2339b3..48e58ec7 100644
--- a/src/data/CHDatasource.test.ts
+++ b/src/data/CHDatasource.test.ts
@@ -654,7 +654,7 @@ describe('ClickHouseDatasource', () => {
             range,
           } as any)
         ).toEqual('queryLogsVolumeResponse');
-        expect(queryLogsVolumeSpy).toBeCalledTimes(1);
+        expect(queryLogsVolumeSpy).toHaveBeenCalledTimes(1);
         expect(queryLogsVolumeSpy).toHaveBeenLastCalledWith(
           datasource,
           {
diff --git a/src/data/CHDatasource.ts b/src/data/CHDatasource.ts
index e173c416..95d73ab8 100644
--- a/src/data/CHDatasource.ts
+++ b/src/data/CHDatasource.ts
@@ -228,7 +228,7 @@ export class Datasource
     }
     // convention - assume the first field is an id field
     const ids = frame?.fields[0]?.values;
-    return frame?.fields[1]?.values.map((text, i) => ({ text, value: ids.get(i) }));
+    return frame?.fields[1]?.values.map((text, i) => ({ text, value: ids[i] }));
   }
 
   applyTemplateVariables(query: CHQuery, scoped: ScopedVars, filters: AdHocVariableFilter[] = []): CHQuery {
@@ -940,7 +940,7 @@ export class Datasource
         continue;
       }
 
-      let value = field.values.get(row.rowIndex);
+      let value = field.values[row.rowIndex];
       if (value && field.type === 'other' && isMapKey) {
         value = value[keyName];
       }
diff --git a/src/data/adHocFilter.ts b/src/data/adHocFilter.ts
index f4b07a4c..65d3e56a 100644
--- a/src/data/adHocFilter.ts
+++ b/src/data/adHocFilter.ts
@@ -40,7 +40,7 @@ export class AdHocFilter {
       .map((f, i) => {
         const key = escapeKey(f.key);
         const value = escapeValueBasedOnOperator(f.value, f.operator);
-        const condition = i !== adHocFilters.length - 1 ? (f.condition ? f.condition : 'AND') : '';
+        const condition = i !== adHocFilters.length - 1 ? 'AND' : '';
         const operator = convertOperatorToClickHouseOperator(f.operator);
         return ` ${key} ${operator} ${value} ${condition}`;
       })
diff --git a/src/data/logs.ts b/src/data/logs.ts
index 4466d00d..b3d1dbd6 100644
--- a/src/data/logs.ts
+++ b/src/data/logs.ts
@@ -9,10 +9,10 @@ import {
   FieldType,
   LoadingState,
   LogLevel,
-  MutableDataFrame,
   ScopedVars,
   TimeRange,
   toDataFrame,
+  MutableDataFrame,
 } from '@grafana/data';
 import { from, isObservable, Observable } from 'rxjs';
 import { config } from '@grafana/runtime';
@@ -48,7 +48,7 @@ const LogLevelColor = {
 };
 
 function getThemeColor(dark: string, light: string): string {
-  return config.bootData.user.lightTheme ? light : dark;
+  return config.bootData.user.theme ? light : dark;
 }
 
 /**
@@ -89,14 +89,14 @@ export function queryLogsVolume<TQuery extends DataQuery, TOptions extends DataS
         observer.complete();
       },
       next: (dataQueryResponse: DataQueryResponse) => {
-        const { error } = dataQueryResponse;
-        if (error !== undefined) {
+        const { errors } = dataQueryResponse;
+        if (errors !== undefined) {
           observer.next({
             state: LoadingState.Error,
-            error,
+            errors,
             data: [],
           });
-          observer.error(error);
+          observer.error(errors);
         } else {
           rawLogsVolume = rawLogsVolume.concat(dataQueryResponse.data.map(toDataFrame));
         }
diff --git a/src/data/utils.ts b/src/data/utils.ts
index 51d5d648..163c60dd 100644
--- a/src/data/utils.ts
+++ b/src/data/utils.ts
@@ -334,11 +334,11 @@ export const dataFrameHasLogLabelWithName = (frame: DataFrame | undefined, name:
 
   const logLabelsFieldName = logColumnHintsToAlias.get(ColumnHint.LogLabels);
   const field = frame.fields.find((f) => f.name === logLabelsFieldName);
-  if (!field || !field.values || field.values.length < 1 || !field.values.get(0)) {
+  if (!field || !field.values || field.values.length < 1 || !field.values[0]) {
     return false;
   }
 
-  const labels = (field.values.get(0) || {}) as object;
+  const labels = (field.values[0] || {}) as object;
   const labelKeys = Object.keys(labels);
 
   return labelKeys.includes(name);

From 8e4d1215918c8115eef93168db18fbcce9acc258 Mon Sep 17 00:00:00 2001
From: alyssabull <alyssabull@gmail.com>
Date: Tue, 21 Oct 2025 10:19:55 -0600
Subject: [PATCH 02/14] Replace Select with Combobox and update tests

---
 src/components/SqlEditor.tsx                  |  2 +-
 .../configEditor/HttpHeadersConfig.tsx        |  2 -
 src/components/configEditor/LabeledInput.tsx  |  2 +-
 src/components/configEditor/LogsConfig.tsx    |  2 +-
 .../configEditor/QuerySettingsConfig.tsx      |  2 +-
 .../queryBuilder/AggregateEditor.tsx          | 56 ++++++++---------
 src/components/queryBuilder/ColumnSelect.tsx  | 14 ++---
 src/components/queryBuilder/ColumnsEditor.tsx |  2 +-
 .../queryBuilder/DatabaseTableSelect.tsx      |  2 +-
 .../queryBuilder/DurationUnitSelect.tsx       |  2 +-
 src/components/queryBuilder/FilterEditor.tsx  | 32 +++++-----
 src/components/queryBuilder/GroupByEditor.tsx |  2 +-
 src/components/queryBuilder/LimitEditor.tsx   |  2 +-
 src/components/queryBuilder/ModeSwitch.tsx    |  2 +-
 src/components/queryBuilder/OrderByEditor.tsx |  4 +-
 .../queryBuilder/OtelVersionSelect.tsx        |  9 +--
 src/components/queryBuilder/QueryBuilder.tsx  |  4 +-
 src/components/queryBuilder/SqlPreview.tsx    |  2 +-
 src/components/queryBuilder/Switch.tsx        |  9 +--
 src/components/queryBuilder/TraceIdInput.tsx  |  2 +-
 .../queryBuilder/views/LogsQueryBuilder.tsx   |  6 +-
 .../queryBuilder/views/TraceQueryBuilder.tsx  | 22 +++----
 src/data/CHDatasource.test.ts                 | 61 +++++++------------
 src/data/CHDatasource.ts                      | 55 +++++++++++++++++
 src/data/logs.ts                              | 28 ++++-----
 src/views/CHConfigEditor.tsx                  |  6 --
 src/views/CHQueryEditor.tsx                   |  2 +-
 27 files changed, 170 insertions(+), 164 deletions(-)

diff --git a/src/components/SqlEditor.tsx b/src/components/SqlEditor.tsx
index 937e283c..893b983d 100644
--- a/src/components/SqlEditor.tsx
+++ b/src/components/SqlEditor.tsx
@@ -110,7 +110,7 @@ export const SqlEditor = (props: SqlEditorProps) => {
 
   return (
     <>
-      <div className={'gf-form ' + styles.QueryEditor.queryType}>
+      <div className={styles.QueryEditor.queryType}>
         <QueryTypeSwitcher queryType={queryType} onChange={(queryType) => saveChanges({ queryType })} sqlEditor />
       </div>
       <div className={styles.Common.wrapper}>
diff --git a/src/components/configEditor/HttpHeadersConfig.tsx b/src/components/configEditor/HttpHeadersConfig.tsx
index 165c8321..773b409b 100644
--- a/src/components/configEditor/HttpHeadersConfig.tsx
+++ b/src/components/configEditor/HttpHeadersConfig.tsx
@@ -72,7 +72,6 @@ export const HttpHeadersConfig = (props: HttpHeadersConfigProps) => {
       <Field label={labels.forwardGrafanaHeaders.label} description={labels.forwardGrafanaHeaders.tooltip}>
         <Switch
           data-testid={selectors.forwardGrafanaHeadersSwitch}
-          className={'gf-form'}
           value={forwardGrafanaHeaders}
           onChange={(e) => updateForwardGrafanaHeaders(e.currentTarget.checked)}
         />
@@ -155,7 +154,6 @@ const HttpHeaderEditor = (props: HttpHeaderEditorProps) => {
           <Field label={labels.secureLabel}>
             <Switch
               data-testid={selectors.headerSecureSwitch}
-              className="gf-form"
               value={secure}
               onChange={(e) => setSecure(e.currentTarget.checked)}
               onBlur={() => onUpdate()}
diff --git a/src/components/configEditor/LabeledInput.tsx b/src/components/configEditor/LabeledInput.tsx
index 78650577..e59a78f2 100644
--- a/src/components/configEditor/LabeledInput.tsx
+++ b/src/components/configEditor/LabeledInput.tsx
@@ -14,7 +14,7 @@ export function LabeledInput(props: LabeledInputProps) {
   const { label, tooltip, placeholder, disabled, value, onChange } = props;
 
   return (
-    <div className="gf-form">
+    <div>
       <InlineFormLabel width={12} className="query-keyword" tooltip={tooltip || label}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/configEditor/LogsConfig.tsx b/src/components/configEditor/LogsConfig.tsx
index ca45c9b9..c82c6c21 100644
--- a/src/components/configEditor/LogsConfig.tsx
+++ b/src/components/configEditor/LogsConfig.tsx
@@ -125,7 +125,7 @@ export const LogsConfig = (props: LogsConfigProps) => {
           onChange={onSelectContextColumnsChange}
           wide
         />
-        <div className="gf-form">
+        <div>
           <InlineFormLabel width={12} className="query-keyword" tooltip={labels.contextColumns.columns.tooltip}>
             {labels.contextColumns.columns.label}
           </InlineFormLabel>
diff --git a/src/components/configEditor/QuerySettingsConfig.tsx b/src/components/configEditor/QuerySettingsConfig.tsx
index e6a14dfa..73c42c51 100644
--- a/src/components/configEditor/QuerySettingsConfig.tsx
+++ b/src/components/configEditor/QuerySettingsConfig.tsx
@@ -100,7 +100,7 @@ export const QuerySettingsConfig = (props: QuerySettingsConfigProps) => {
       </Field>
 
       <Field label={labels.validateSql.label} description={labels.validateSql.tooltip}>
-        <Switch className="gf-form" value={validateSql || false} onChange={onValidateSqlChange} role="checkbox" />
+        <Switch value={validateSql || false} onChange={onValidateSqlChange} role="checkbox" />
       </Field>
     </ConfigSection>
   );
diff --git a/src/components/queryBuilder/AggregateEditor.tsx b/src/components/queryBuilder/AggregateEditor.tsx
index 846632ff..2f423692 100644
--- a/src/components/queryBuilder/AggregateEditor.tsx
+++ b/src/components/queryBuilder/AggregateEditor.tsx
@@ -1,20 +1,20 @@
 import React, { useState } from 'react';
 import { SelectableValue } from '@grafana/data';
-import { InlineFormLabel, Select, Button, Input, Stack } from '@grafana/ui';
+import { InlineFormLabel, Combobox, Button, Input, Stack, ComboboxOption } from '@grafana/ui';
 import { AggregateColumn, AggregateType, TableColumn } from 'types/queryBuilder';
 import labels from 'labels';
 import { selectors } from 'selectors';
 import { styles } from 'styles';
 
 interface AggregateProps {
-  columnOptions: Array<SelectableValue<string>>;
+  columnOptions: Array<ComboboxOption<string>>;
   index: number;
   aggregate: AggregateColumn;
   updateAggregate: (index: number, aggregate: AggregateColumn) => void;
   removeAggregate: (index: number) => void;
 }
 
-const allAggregateOptions: Array<SelectableValue<AggregateType>> = [
+const allAggregateOptions: Array<ComboboxOption<AggregateType>> = [
   { label: 'Count', value: AggregateType.Count },
   { label: 'Sum', value: AggregateType.Sum },
   { label: 'Min', value: AggregateType.Min },
@@ -26,7 +26,6 @@ const allAggregateOptions: Array<SelectableValue<AggregateType>> = [
 
 const Aggregate = (props: AggregateProps) => {
   const { index, aggregate, updateAggregate, removeAggregate } = props;
-  const [isOpen, setIsOpen] = useState(false);
   const [alias, setAlias] = useState(aggregate.alias || '');
   const { aliasLabel } = labels.components.AggregatesEditor;
 
@@ -44,27 +43,24 @@ const Aggregate = (props: AggregateProps) => {
 
   return (
     <Stack wrap alignItems="flex-start" justifyContent="flex-start">
-      <Select
-        width={20}
-        className={styles.Common.inlineSelect}
-        options={aggregateOptions}
-        value={aggregate.aggregateType}
-        onChange={(e) => updateAggregate(index, { ...aggregate, aggregateType: e.value! })}
-        menuPlacement={'bottom'}
-        allowCustomValue
-      />
-      <Select<string>
-        width={40}
-        className={styles.Common.inlineSelect}
-        options={columnOptions}
-        isOpen={isOpen}
-        onOpenMenu={() => setIsOpen(true)}
-        onCloseMenu={() => setIsOpen(false)}
-        onChange={(e) => updateAggregate(index, { ...aggregate, column: e.value! })}
-        value={aggregate.column}
-        menuPlacement={'bottom'}
-        allowCustomValue
-      />
+      <div className={styles.Common.inlineSelect}>
+        <Combobox
+          width={20}
+          options={aggregateOptions}
+          value={aggregate.aggregateType}
+          onChange={(e) => updateAggregate(index, { ...aggregate, aggregateType: e.value! })}
+          createCustomValue={true}
+        />
+      </div>
+      <div className={styles.Common.inlineSelect}>
+        <Combobox<string>
+          width={40}
+          options={columnOptions}
+          onChange={(e) => updateAggregate(index, { ...aggregate, column: e.value! })}
+          value={aggregate.column}
+          createCustomValue={true}
+        />
+      </div>
       <InlineFormLabel width={2} className="query-keyword">
         {aliasLabel}
       </InlineFormLabel>
@@ -98,7 +94,7 @@ const allColumnName = '*';
 export const AggregateEditor = (props: AggregateEditorProps) => {
   const { allColumns, aggregates, onAggregatesChange } = props;
   const { label, tooltip, addLabel } = labels.components.AggregatesEditor;
-  const columnOptions: Array<SelectableValue<string>> = allColumns.map((c) => ({
+  const columnOptions: Array<ComboboxOption<string>> = allColumns.map((c) => ({
     label: c.label || c.name,
     value: c.name,
   }));
@@ -137,11 +133,7 @@ export const AggregateEditor = (props: AggregateEditorProps) => {
       {aggregates.map((aggregate, index) => {
         const key = `${index}-${aggregate.column}-${aggregate.aggregateType}-${aggregate.alias}`;
         return (
-          <div
-            className="gf-form"
-            key={key}
-            data-testid={selectors.components.QueryBuilder.AggregateEditor.itemWrapper}
-          >
+          <div key={key} data-testid={selectors.components.QueryBuilder.AggregateEditor.itemWrapper}>
             {index === 0 ? fieldLabel : fieldSpacer}
             <Aggregate
               columnOptions={columnOptions}
@@ -154,7 +146,7 @@ export const AggregateEditor = (props: AggregateEditorProps) => {
         );
       })}
 
-      <div className="gf-form">
+      <div>
         {aggregates.length === 0 ? fieldLabel : fieldSpacer}
         <Button
           data-testid={selectors.components.QueryBuilder.AggregateEditor.addButton}
diff --git a/src/components/queryBuilder/ColumnSelect.tsx b/src/components/queryBuilder/ColumnSelect.tsx
index 59ed3dab..aa5801a5 100644
--- a/src/components/queryBuilder/ColumnSelect.tsx
+++ b/src/components/queryBuilder/ColumnSelect.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { SelectableValue } from '@grafana/data';
-import { InlineFormLabel, Select } from '@grafana/ui';
+import { Combobox, ComboboxOption, InlineFormLabel } from '@grafana/ui';
 import { ColumnHint, SelectedColumn, TableColumn } from 'types/queryBuilder';
 import { styles } from 'styles';
 
@@ -37,7 +37,7 @@ export const ColumnSelect = (props: ColumnSelectProps) => {
     clearable,
   } = props;
   const selectedColumnName = selectedColumn?.name;
-  const columns: Array<SelectableValue<string>> = allColumns
+  const columns: Array<ComboboxOption<string>> = allColumns
     .filter(columnFilterFn || defaultFilterFn)
     .map((c) => ({ label: c.label || c.name, value: c.name }));
 
@@ -48,7 +48,7 @@ export const ColumnSelect = (props: ColumnSelectProps) => {
     staleOption = true;
   }
 
-  const onChange = (selected: SelectableValue<string | undefined>) => {
+  const onChange = (selected: ComboboxOption<string>) => {
     if (!selected || !selected.value) {
       onColumnChange(undefined);
       return;
@@ -71,11 +71,11 @@ export const ColumnSelect = (props: ColumnSelectProps) => {
   const labelStyle = 'query-keyword ' + (inline ? styles.QueryEditor.inlineField : '');
 
   return (
-    <div className="gf-form">
+    <div>
       <InlineFormLabel width={wide ? 12 : 8} className={labelStyle} tooltip={tooltip}>
         {label}
       </InlineFormLabel>
-      <Select<string | undefined>
+      <Combobox<string>
         disabled={disabled}
         invalid={invalid || staleOption}
         options={columns}
@@ -83,9 +83,7 @@ export const ColumnSelect = (props: ColumnSelectProps) => {
         placeholder={selectedColumnName || undefined}
         onChange={onChange}
         width={wide ? 25 : 20}
-        menuPlacement={'bottom'}
-        isClearable={clearable === undefined || clearable}
-        allowCustomValue
+        createCustomValue={true}
       />
     </div>
   );
diff --git a/src/components/queryBuilder/ColumnsEditor.tsx b/src/components/queryBuilder/ColumnsEditor.tsx
index 7f70e65c..001e5132 100644
--- a/src/components/queryBuilder/ColumnsEditor.tsx
+++ b/src/components/queryBuilder/ColumnsEditor.tsx
@@ -79,7 +79,7 @@ export const ColumnsEditor = (props: ColumnsEditorProps) => {
   };
 
   return (
-    <div className="gf-form">
+    <div>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/DatabaseTableSelect.tsx b/src/components/queryBuilder/DatabaseTableSelect.tsx
index 4f981586..52928981 100644
--- a/src/components/queryBuilder/DatabaseTableSelect.tsx
+++ b/src/components/queryBuilder/DatabaseTableSelect.tsx
@@ -106,7 +106,7 @@ export const DatabaseTableSelect = (props: DatabaseTableSelectProps) => {
   const { datasource, database, onDatabaseChange, table, onTableChange } = props;
 
   return (
-    <div className="gf-form">
+    <div>
       <DatabaseSelect datasource={datasource} database={database} onDatabaseChange={onDatabaseChange} />
       <TableSelect datasource={datasource} database={database} table={table} onTableChange={onTableChange} />
     </div>
diff --git a/src/components/queryBuilder/DurationUnitSelect.tsx b/src/components/queryBuilder/DurationUnitSelect.tsx
index 57fbdee7..fa5867cc 100644
--- a/src/components/queryBuilder/DurationUnitSelect.tsx
+++ b/src/components/queryBuilder/DurationUnitSelect.tsx
@@ -24,7 +24,7 @@ export const DurationUnitSelect = (props: DurationUnitSelectProps) => {
   const { label, tooltip } = allLabels.components.TraceQueryBuilder.columns.durationUnit;
 
   return (
-    <div className="gf-form">
+    <div>
       <InlineFormLabel
         width={12}
         className={`query-keyword ${inline ? styles.QueryEditor.inlineField : ''}`}
diff --git a/src/components/queryBuilder/FilterEditor.tsx b/src/components/queryBuilder/FilterEditor.tsx
index 4893b9b5..c70e0e29 100644
--- a/src/components/queryBuilder/FilterEditor.tsx
+++ b/src/components/queryBuilder/FilterEditor.tsx
@@ -9,7 +9,6 @@ import {
   RadioButtonGroup,
   Combobox,
   ComboboxOption,
-  Select,
 } from '@grafana/ui';
 import { Filter, FilterOperator, TableColumn, NullFilter } from 'types/queryBuilder';
 import * as utils from 'components/queryBuilder/utils';
@@ -374,20 +373,17 @@ export const FilterEditor = (props: {
       {index !== 0 && (
         <RadioButtonGroup options={conditions} value={filter.condition} onChange={(e) => onFilterConditionChange(e!)} />
       )}
-      <Select
-        disabled={Boolean(filter.hint)}
-        placeholder={filter.hint ? labels.types.ColumnHint[filter.hint] : undefined}
-        value={filter.key}
-        width={40}
-        className={styles.Common.inlineSelect}
-        options={getFields()}
-        isOpen={isOpen}
-        onOpenMenu={() => setIsOpen(true)}
-        onCloseMenu={() => setIsOpen(false)}
-        onChange={(e) => onFilterNameChange(e.value!)}
-        allowCustomValue
-        menuPlacement={'bottom'}
-      />
+      <div className={styles.Common.inlineSelect}>
+        <Combobox
+          disabled={Boolean(filter.hint)}
+          placeholder={filter.hint ? labels.types.ColumnHint[filter.hint] : undefined}
+          value={filter.key}
+          width={40}
+          options={getFields()}
+          onChange={(e) => onFilterNameChange(e.value!)}
+          createCustomValue={true}
+        />
+      </div>
       {(isMapType || isJSONType) && (
         <div className={styles.Common.inlineSelect}>
           <Combobox
@@ -448,7 +444,7 @@ export const FiltersEditor = (props: {
   return (
     <>
       {filters.length === 0 && (
-        <div className="gf-form">
+        <div>
           <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
             {label}
           </InlineFormLabel>
@@ -466,7 +462,7 @@ export const FiltersEditor = (props: {
       )}
       {filters.map((filter, index) => {
         return (
-          <div className="gf-form" key={index}>
+          <div key={index}>
             {index === 0 ? (
               <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
                 {label}
@@ -488,7 +484,7 @@ export const FiltersEditor = (props: {
         );
       })}
       {filters.length !== 0 && (
-        <div className="gf-form">
+        <div>
           <div className={`width-8 ${styles.Common.firstLabel}`}></div>
           <Button
             data-testid="query-builder-filters-inline-add-button"
diff --git a/src/components/queryBuilder/GroupByEditor.tsx b/src/components/queryBuilder/GroupByEditor.tsx
index e2bab9f9..d6997e31 100644
--- a/src/components/queryBuilder/GroupByEditor.tsx
+++ b/src/components/queryBuilder/GroupByEditor.tsx
@@ -24,7 +24,7 @@ export const GroupByEditor = (props: GroupByEditorProps) => {
   };
 
   return (
-    <div className="gf-form">
+    <div>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/LimitEditor.tsx b/src/components/queryBuilder/LimitEditor.tsx
index f4142d9b..6cfd6ecb 100644
--- a/src/components/queryBuilder/LimitEditor.tsx
+++ b/src/components/queryBuilder/LimitEditor.tsx
@@ -13,7 +13,7 @@ export const LimitEditor = (props: LimitEditorProps) => {
   const { label, tooltip } = labels.components.LimitEditor;
 
   return (
-    <div className="gf-form">
+    <div>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/ModeSwitch.tsx b/src/components/queryBuilder/ModeSwitch.tsx
index eb100691..c817bd36 100644
--- a/src/components/queryBuilder/ModeSwitch.tsx
+++ b/src/components/queryBuilder/ModeSwitch.tsx
@@ -28,7 +28,7 @@ export const ModeSwitch = (props: ModeSwitchProps) => {
   ];
 
   return (
-    <div className="gf-form">
+    <div>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/OrderByEditor.tsx b/src/components/queryBuilder/OrderByEditor.tsx
index 6be33294..27956baa 100644
--- a/src/components/queryBuilder/OrderByEditor.tsx
+++ b/src/components/queryBuilder/OrderByEditor.tsx
@@ -101,7 +101,7 @@ export const OrderByEditor = (props: OrderByEditorProps) => {
       {orderBy.map((orderByItem, index) => {
         const key = `${index}-${orderByItem.name}-${orderByItem.hint || ''}-${orderByItem.dir}`;
         return (
-          <div className="gf-form" key={key} data-testid="query-builder-orderby-item-wrapper">
+          <div key={key} data-testid="query-builder-orderby-item-wrapper">
             {index === 0 ? fieldLabel : fieldSpacer}
             <OrderByItem
               columnOptions={orderByOptions}
@@ -114,7 +114,7 @@ export const OrderByEditor = (props: OrderByEditorProps) => {
         );
       })}
 
-      <div className="gf-form">
+      <div>
         {orderBy.length === 0 ? fieldLabel : fieldSpacer}
         <Button
           data-testid="query-builder-orderby-add-button"
diff --git a/src/components/queryBuilder/OtelVersionSelect.tsx b/src/components/queryBuilder/OtelVersionSelect.tsx
index f7aec90f..db1ff3a0 100644
--- a/src/components/queryBuilder/OtelVersionSelect.tsx
+++ b/src/components/queryBuilder/OtelVersionSelect.tsx
@@ -36,17 +36,12 @@ export const OtelVersionSelect = (props: OtelVersionSelectProps) => {
   };
 
   return (
-    <div className="gf-form">
+    <div>
       <InlineFormLabel width={wide ? 12 : 8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
       <div style={switchContainerStyle}>
-        <GrafanaSwitch
-          className="gf-form"
-          value={enabled}
-          onChange={(e) => onEnabledChange(e.currentTarget.checked)}
-          role="checkbox"
-        />
+        <GrafanaSwitch value={enabled} onChange={(e) => onEnabledChange(e.currentTarget.checked)} role="checkbox" />
       </div>
       <Combobox
         disabled={!enabled}
diff --git a/src/components/queryBuilder/QueryBuilder.tsx b/src/components/queryBuilder/QueryBuilder.tsx
index 09fd522a..916468f5 100644
--- a/src/components/queryBuilder/QueryBuilder.tsx
+++ b/src/components/queryBuilder/QueryBuilder.tsx
@@ -49,7 +49,7 @@ export const QueryBuilder = (props: QueryBuilderProps) => {
 
   return (
     <div data-testid="query-editor-section-builder">
-      <div className={'gf-form ' + styles.QueryEditor.queryType}>
+      <div className={styles.QueryEditor.queryType}>
         <DatabaseTableSelect
           datasource={datasource}
           database={builderOptions.database}
@@ -58,7 +58,7 @@ export const QueryBuilder = (props: QueryBuilderProps) => {
           onTableChange={onTableChange}
         />
       </div>
-      <div className={'gf-form ' + styles.QueryEditor.queryType}>
+      <div className={styles.QueryEditor.queryType}>
         <QueryTypeSwitcher queryType={builderOptions.queryType} onChange={onQueryTypeChange} />
       </div>
 
diff --git a/src/components/queryBuilder/SqlPreview.tsx b/src/components/queryBuilder/SqlPreview.tsx
index 1bffd7e6..ef6d0988 100644
--- a/src/components/queryBuilder/SqlPreview.tsx
+++ b/src/components/queryBuilder/SqlPreview.tsx
@@ -11,7 +11,7 @@ export const SqlPreview = (props: SqlPreviewProps) => {
   const { label, tooltip } = labels.components.SqlPreview;
 
   return (
-    <div className="gf-form">
+    <div>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/Switch.tsx b/src/components/queryBuilder/Switch.tsx
index 973d60f5..47887b46 100644
--- a/src/components/queryBuilder/Switch.tsx
+++ b/src/components/queryBuilder/Switch.tsx
@@ -26,17 +26,12 @@ export const Switch = (props: SwitchProps) => {
   const labelStyle = 'query-keyword ' + (inline ? styles.QueryEditor.inlineField : '');
 
   return (
-    <div className="gf-form">
+    <div>
       <InlineFormLabel width={wide ? 12 : 8} className={labelStyle} tooltip={tooltip}>
         {label}
       </InlineFormLabel>
       <div style={switchContainerStyle}>
-        <GrafanaSwitch
-          disabled={disabled}
-          className="gf-form"
-          value={value}
-          onChange={(e) => onChange(e.currentTarget.checked)}
-        />
+        <GrafanaSwitch disabled={disabled} value={value} onChange={(e) => onChange(e.currentTarget.checked)} />
       </div>
     </div>
   );
diff --git a/src/components/queryBuilder/TraceIdInput.tsx b/src/components/queryBuilder/TraceIdInput.tsx
index 24a27834..7462d735 100644
--- a/src/components/queryBuilder/TraceIdInput.tsx
+++ b/src/components/queryBuilder/TraceIdInput.tsx
@@ -19,7 +19,7 @@ const TraceIdInput = (props: TraceIdInputProps) => {
   }, [traceId]);
 
   return (
-    <div className="gf-form">
+    <div>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/views/LogsQueryBuilder.tsx b/src/components/queryBuilder/views/LogsQueryBuilder.tsx
index 9ba099c9..ba25f692 100644
--- a/src/components/queryBuilder/views/LogsQueryBuilder.tsx
+++ b/src/components/queryBuilder/views/LogsQueryBuilder.tsx
@@ -150,7 +150,7 @@ export const LogsQueryBuilder = (props: LogsQueryBuilderProps) => {
         selectedColumns={builderState.selectedColumns}
         onSelectedColumnsChange={onOptionChange('selectedColumns')}
       />
-      <div className="gf-form">
+      <div>
         <ColumnSelect
           disabled={builderState.otelEnabled}
           allColumns={allColumns}
@@ -175,7 +175,7 @@ export const LogsQueryBuilder = (props: LogsQueryBuilderProps) => {
           inline
         />
       </div>
-      <div className="gf-form">
+      <div>
         <ColumnSelect
           disabled={builderState.otelEnabled}
           allColumns={allColumns}
@@ -240,7 +240,7 @@ const LogMessageLikeInput = (props: LogMessageLikeInputProps) => {
   }, [logMessageLike]);
 
   return (
-    <div className="gf-form">
+    <div>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/views/TraceQueryBuilder.tsx b/src/components/queryBuilder/views/TraceQueryBuilder.tsx
index ed8d421d..c310dfef 100644
--- a/src/components/queryBuilder/views/TraceQueryBuilder.tsx
+++ b/src/components/queryBuilder/views/TraceQueryBuilder.tsx
@@ -180,7 +180,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
           onVersionChange={(v) => builderOptionsDispatch(setOtelVersion(v))}
           wide
         />
-        <div className="gf-form">
+        <div>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -205,7 +205,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             inline
           />
         </div>
-        <div className="gf-form">
+        <div>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -230,7 +230,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             inline
           />
         </div>
-        <div className="gf-form">
+        <div>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -255,7 +255,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             inline
           />
         </div>
-        <div className="gf-form">
+        <div>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -274,7 +274,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             inline
           />
         </div>
-        <div className="gf-form">
+        <div>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -299,7 +299,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             inline
           />
         </div>
-        <div className="gf-form">
+        <div>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -324,7 +324,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             inline
           />
         </div>
-        <div className="gf-form">
+        <div>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -349,7 +349,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             inline
           />
         </div>
-        <div className="gf-form">
+        <div>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -374,7 +374,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             inline
           />
         </div>
-        <div className="gf-form">
+        <div>
           <Switch
             disabled={builderState.otelEnabled}
             label={labels.columns.flattenNested.label}
@@ -384,7 +384,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             wide
           />
         </div>
-        <div className="gf-form">
+        <div>
           <LabeledInput
             disabled={builderState.otelEnabled}
             label={labels.columns.eventsPrefix.label}
@@ -393,7 +393,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             onChange={onOptionChange('traceEventsColumnPrefix')}
           />
         </div>
-        <div className="gf-form">
+        <div>
           <LabeledInput
             disabled={builderState.otelEnabled}
             label={labels.columns.linksPrefix.label}
diff --git a/src/data/CHDatasource.test.ts b/src/data/CHDatasource.test.ts
index 48e58ec7..501cf8bb 100644
--- a/src/data/CHDatasource.test.ts
+++ b/src/data/CHDatasource.test.ts
@@ -2,14 +2,13 @@ import {
   arrayToDataFrame,
   CoreApp,
   DataQueryRequest,
-  DataQueryResponse,
   SupplementaryQueryType,
   TimeRange,
   TypedVariableModel,
   toDataFrame,
 } from '@grafana/data';
 import { DataQuery } from '@grafana/schema';
-import { Observable, of } from 'rxjs';
+import { of } from 'rxjs';
 import { DataSourceWithBackend } from '@grafana/runtime';
 import { mockDatasource } from '__mocks__/datasource';
 import { CHBuilderQuery, CHQuery, CHSqlQuery, EditorType } from 'types/sql';
@@ -619,14 +618,14 @@ describe('ClickHouseDatasource', () => {
 
     describe('getDataProvider', () => {
       it('should not support LogsSample yet', async () => {
-        expect(datasource.getDataProvider(SupplementaryQueryType.LogsSample, {} as any)).toBeUndefined();
+        expect(datasource.getSupplementaryQueryRequest(SupplementaryQueryType.LogsSample, {} as any)).toBeUndefined();
       });
 
       it('should do nothing if there are no supplementary queries for targets', async () => {
         jest.spyOn(Datasource.prototype, 'getSupplementaryLogsVolumeQuery').mockReturnValue(undefined);
         jest.spyOn(logs, 'getIntervalInfo').mockReturnValue({ interval: '1d' });
         expect(
-          datasource.getDataProvider(SupplementaryQueryType.LogsVolume, {
+          datasource.getSupplementaryQueryRequest(SupplementaryQueryType.LogsVolume, {
             scopedVars: {
               __interval: {},
             },
@@ -635,42 +634,26 @@ describe('ClickHouseDatasource', () => {
         ).toBeUndefined();
       });
 
-      it('should call logVolumeQuery if there are supplementary log volume queries for targets', async () => {
-        const range = ['from', 'to'];
-        const supplementaryQuery = {
-          rawSql: 'supplementaryQuery',
-        } as CHSqlQuery;
+      it('should build a LogsVolume request when supplementary targets exist', async () => {
+        const range = ['from', 'to'] as any;
+        const supplementaryQuery = { rawSql: 'supplementaryQuery' } as CHSqlQuery;
+
         jest.spyOn(Datasource.prototype, 'getSupplementaryLogsVolumeQuery').mockReturnValue(supplementaryQuery);
-        jest.spyOn(logs, 'getIntervalInfo').mockReturnValue({ interval: '1d' });
-        const queryLogsVolumeSpy = jest
-          .spyOn(logs, 'queryLogsVolume')
-          .mockReturnValue('queryLogsVolumeResponse' as unknown as Observable<DataQueryResponse>);
-        expect(
-          datasource.getDataProvider(SupplementaryQueryType.LogsVolume, {
-            scopedVars: {
-              __interval: {},
-            },
-            targets: ['initialTarget'],
-            range,
-          } as any)
-        ).toEqual('queryLogsVolumeResponse');
-        expect(queryLogsVolumeSpy).toHaveBeenCalledTimes(1);
-        expect(queryLogsVolumeSpy).toHaveBeenLastCalledWith(
-          datasource,
-          {
-            hideFromInspector: true,
-            interval: '1d',
-            scopedVars: {
-              __interval: {
-                text: '1d',
-                value: '1d',
-              },
-            },
-            targets: [supplementaryQuery],
-            range,
-          },
-          { range, targets: ['initialTarget'] }
-        );
+        jest.spyOn(logs, 'getIntervalInfo').mockReturnValue({ interval: '1d' } as any);
+
+        const req = datasource.getSupplementaryQueryRequest(SupplementaryQueryType.LogsVolume, {
+          scopedVars: { __interval: {} },
+          targets: ['initialTarget'] as any,
+          range,
+        } as any);
+
+        expect(req).toEqual({
+          hideFromInspector: true,
+          interval: '1d',
+          scopedVars: { __interval: { text: '1d', value: '1d' } },
+          targets: [supplementaryQuery],
+          range,
+        });
       });
     });
   });
diff --git a/src/data/CHDatasource.ts b/src/data/CHDatasource.ts
index 95d73ab8..658a4b38 100644
--- a/src/data/CHDatasource.ts
+++ b/src/data/CHDatasource.ts
@@ -202,6 +202,61 @@ export class Datasource
     };
   }
 
+  // REMOVE this whole method
+  // getDataProvider(type: SupplementaryQueryType, request: DataQueryRequest<CHQuery>): Observable<DataQueryResponse> | undefined { ... }
+
+  // ADD this instead:
+  getSupplementaryQueryRequest(
+    type: SupplementaryQueryType,
+    request: DataQueryRequest<CHQuery>
+  ): DataQueryRequest<CHQuery> | undefined {
+    if (!this.getSupportedSupplementaryQueryTypes().includes(type)) {
+      return undefined;
+    }
+
+    switch (type) {
+      case SupplementaryQueryType.LogsVolume: {
+        const logsVolumeRequest = cloneDeep(request);
+
+        // derive interval + scoped vars
+        const intervalInfo = getIntervalInfo(logsVolumeRequest.scopedVars);
+        logsVolumeRequest.interval = intervalInfo.interval;
+        logsVolumeRequest.scopedVars = {
+          ...logsVolumeRequest.scopedVars,
+          __interval: { value: intervalInfo.interval, text: intervalInfo.interval },
+        };
+        logsVolumeRequest.hideFromInspector = true;
+
+        if (intervalInfo.intervalMs !== undefined) {
+          logsVolumeRequest.intervalMs = intervalInfo.intervalMs;
+          logsVolumeRequest.scopedVars.__interval_ms = {
+            value: intervalInfo.intervalMs,
+            text: intervalInfo.intervalMs,
+          };
+        }
+
+        // build supplementary targets
+        const targets: CHQuery[] = [];
+        for (const target of logsVolumeRequest.targets) {
+          const supplementaryQuery = this.getSupplementaryLogsVolumeQuery(logsVolumeRequest, target);
+          if (supplementaryQuery) {
+            targets.push(supplementaryQuery);
+          }
+        }
+
+        if (!targets.length) {
+          return undefined;
+        }
+
+        // return a request Grafana will execute
+        return { ...logsVolumeRequest, targets };
+      }
+
+      default:
+        return undefined;
+    }
+  }
+
   getSupplementaryQuery(options: SupplementaryQueryOptions, originalQuery: CHQuery): CHQuery | undefined {
     return undefined;
   }
diff --git a/src/data/logs.ts b/src/data/logs.ts
index b3d1dbd6..c4272a36 100644
--- a/src/data/logs.ts
+++ b/src/data/logs.ts
@@ -12,7 +12,6 @@ import {
   ScopedVars,
   TimeRange,
   toDataFrame,
-  MutableDataFrame,
 } from '@grafana/data';
 import { from, isObservable, Observable } from 'rxjs';
 import { config } from '@grafana/runtime';
@@ -131,22 +130,23 @@ export function aggregateRawLogsVolume(rawLogsVolume: DataFrame[]): DataFrame[]
   }
 
   const oneLevelDetected = levelFields.length === 1 && levelFields[0].name === DEFAULT_LOGS_ALIAS;
-  if (oneLevelDetected) {
-    levelFields[0].name = 'logs';
-  }
 
-  const totalLength = timeField.values.length;
   return levelFields.map((field) => {
-    const logLevel = LogLevel[field.name as keyof typeof LogLevel] || LogLevel.unknown;
-    const df = new MutableDataFrame();
-    df.addField({ name: 'Time', type: FieldType.time, values: timeField.values }, totalLength);
-    df.addField({
-      name: 'Value',
-      type: FieldType.number,
-      config: getLogVolumeFieldConfig(logLevel, oneLevelDetected),
-      values: field.values,
+    const effectiveName = oneLevelDetected && field.name === DEFAULT_LOGS_ALIAS ? 'logs' : field.name;
+
+    const logLevel = LogLevel[effectiveName as keyof typeof LogLevel] ?? LogLevel.unknown;
+
+    return toDataFrame({
+      fields: [
+        { name: 'Time', type: FieldType.time, values: timeField.values },
+        {
+          name: 'Value',
+          type: FieldType.number,
+          config: getLogVolumeFieldConfig(logLevel, oneLevelDetected),
+          values: field.values,
+        },
+      ],
     });
-    return df;
   });
 }
 
diff --git a/src/views/CHConfigEditor.tsx b/src/views/CHConfigEditor.tsx
index 015743ca..e587b933 100644
--- a/src/views/CHConfigEditor.tsx
+++ b/src/views/CHConfigEditor.tsx
@@ -284,7 +284,6 @@ export const ConfigEditor: React.FC<ConfigEditorProps> = (props) => {
         <Field label={labels.secure.label} description={labels.secure.tooltip}>
           <Switch
             id="secure"
-            className="gf-form"
             value={jsonData.secure || false}
             onChange={(e) => {
               trackingV1.trackClickhouseConfigV1SecureConnectionToggleClicked({
@@ -326,7 +325,6 @@ export const ConfigEditor: React.FC<ConfigEditorProps> = (props) => {
       <ConfigSection title="TLS / SSL Settings">
         <Field label={labels.tlsSkipVerify.label} description={labels.tlsSkipVerify.tooltip}>
           <Switch
-            className="gf-form"
             value={jsonData.tlsSkipVerify || false}
             onChange={(e) => {
               trackingV1.trackClickhouseConfigV1SkipTLSVerifyToggleClicked({
@@ -338,7 +336,6 @@ export const ConfigEditor: React.FC<ConfigEditorProps> = (props) => {
         </Field>
         <Field label={labels.tlsClientAuth.label} description={labels.tlsClientAuth.tooltip}>
           <Switch
-            className="gf-form"
             value={jsonData.tlsAuth || false}
             onChange={(e) => {
               trackingV1.trackClickhouseConfigV1TLSClientAuthToggleClicked({
@@ -350,7 +347,6 @@ export const ConfigEditor: React.FC<ConfigEditorProps> = (props) => {
         </Field>
         <Field label={labels.tlsAuthWithCACert.label} description={labels.tlsAuthWithCACert.tooltip}>
           <Switch
-            className="gf-form"
             value={jsonData.tlsAuthWithCACert || false}
             onChange={(e) => {
               trackingV1.trackClickhouseConfigV1WithCACertToggleClicked({ caCertToggle: e.currentTarget.checked });
@@ -613,7 +609,6 @@ export const ConfigEditor: React.FC<ConfigEditorProps> = (props) => {
         <Divider />
         <Field label={labels.enableRowLimit.label} description={labels.enableRowLimit.tooltip}>
           <Switch
-            className="gf-form"
             value={jsonData.enableRowLimit || false}
             data-testid={labels.enableRowLimit.testid}
             onChange={(e) => {
@@ -625,7 +620,6 @@ export const ConfigEditor: React.FC<ConfigEditorProps> = (props) => {
         {config.secureSocksDSProxyEnabled && versionGte(config.buildInfo.version, '10.0.0') && (
           <Field label={labels.secureSocksProxy.label} description={labels.secureSocksProxy.tooltip}>
             <Switch
-              className="gf-form"
               value={jsonData.enableSecureSocksProxy || false}
               onChange={(e) => onSwitchToggle('enableSecureSocksProxy', e.currentTarget.checked)}
             />
diff --git a/src/views/CHQueryEditor.tsx b/src/views/CHQueryEditor.tsx
index f75d38f2..f498ff74 100644
--- a/src/views/CHQueryEditor.tsx
+++ b/src/views/CHQueryEditor.tsx
@@ -25,7 +25,7 @@ export const CHQueryEditor = (props: CHQueryEditorProps) => {
 
   return (
     <>
-      <div className={'gf-form ' + styles.QueryEditor.queryType}>
+      <div className={styles.QueryEditor.queryType}>
         <EditorTypeSwitcher {...props} query={query} datasource={datasource} />
         <Button onClick={() => onRunQuery()}>Run Query</Button>
       </div>

From 31ead8d6d56cf316f3122dd4b86a03bc534b9852 Mon Sep 17 00:00:00 2001
From: alyssabull <alyssabull@gmail.com>
Date: Tue, 21 Oct 2025 10:26:15 -0600
Subject: [PATCH 03/14] Remove unused vars and hide overflow on sidebar

---
 src/components/queryBuilder/AggregateEditor.tsx    | 1 -
 src/components/queryBuilder/ColumnSelect.tsx       | 2 --
 src/components/queryBuilder/DurationUnitSelect.tsx | 1 -
 src/components/queryBuilder/FilterEditor.tsx       | 2 --
 src/components/queryBuilder/OrderByEditor.tsx      | 1 -
 src/components/queryBuilder/OtelVersionSelect.tsx  | 1 -
 src/views/config-v2/CHConfigEditor.tsx             | 2 +-
 src/views/config-v2/constants.ts                   | 2 +-
 8 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/components/queryBuilder/AggregateEditor.tsx b/src/components/queryBuilder/AggregateEditor.tsx
index 2f423692..ff22e2aa 100644
--- a/src/components/queryBuilder/AggregateEditor.tsx
+++ b/src/components/queryBuilder/AggregateEditor.tsx
@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { SelectableValue } from '@grafana/data';
 import { InlineFormLabel, Combobox, Button, Input, Stack, ComboboxOption } from '@grafana/ui';
 import { AggregateColumn, AggregateType, TableColumn } from 'types/queryBuilder';
 import labels from 'labels';
diff --git a/src/components/queryBuilder/ColumnSelect.tsx b/src/components/queryBuilder/ColumnSelect.tsx
index aa5801a5..e132d3ef 100644
--- a/src/components/queryBuilder/ColumnSelect.tsx
+++ b/src/components/queryBuilder/ColumnSelect.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { SelectableValue } from '@grafana/data';
 import { Combobox, ComboboxOption, InlineFormLabel } from '@grafana/ui';
 import { ColumnHint, SelectedColumn, TableColumn } from 'types/queryBuilder';
 import { styles } from 'styles';
@@ -34,7 +33,6 @@ export const ColumnSelect = (props: ColumnSelectProps) => {
     invalid,
     wide,
     inline,
-    clearable,
   } = props;
   const selectedColumnName = selectedColumn?.name;
   const columns: Array<ComboboxOption<string>> = allColumns
diff --git a/src/components/queryBuilder/DurationUnitSelect.tsx b/src/components/queryBuilder/DurationUnitSelect.tsx
index fa5867cc..2ca1bbad 100644
--- a/src/components/queryBuilder/DurationUnitSelect.tsx
+++ b/src/components/queryBuilder/DurationUnitSelect.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { TimeUnit } from 'types/queryBuilder';
 import allLabels from 'labels';
 import { InlineFormLabel, Combobox, ComboboxOption } from '@grafana/ui';
-import { SelectableValue } from '@grafana/data';
 import { styles } from 'styles';
 
 interface DurationUnitSelectProps {
diff --git a/src/components/queryBuilder/FilterEditor.tsx b/src/components/queryBuilder/FilterEditor.tsx
index c70e0e29..54f907ac 100644
--- a/src/components/queryBuilder/FilterEditor.tsx
+++ b/src/components/queryBuilder/FilterEditor.tsx
@@ -210,7 +210,6 @@ export const FilterEditor = (props: {
   table: string;
 }) => {
   const { index, filter, allColumns: fieldsList, onFilterChange, removeFilter } = props;
-  const [isOpen, setIsOpen] = useState(false);
   const isMapType = filter.type.startsWith('Map');
   const isJSONType = filter.type.startsWith('JSON');
   const mapKeys = useUniqueMapKeys(props.datasource, isMapType ? filter.key : '', props.database, props.table);
@@ -292,7 +291,6 @@ export const FilterEditor = (props: {
     }
   };
   const onFilterNameChange = (fieldName: string) => {
-    setIsOpen(false);
     const matchingField = fieldsList.find((f) => f.name === fieldName);
     const filterData = {
       key: matchingField?.name || fieldName,
diff --git a/src/components/queryBuilder/OrderByEditor.tsx b/src/components/queryBuilder/OrderByEditor.tsx
index 27956baa..f35ebbd8 100644
--- a/src/components/queryBuilder/OrderByEditor.tsx
+++ b/src/components/queryBuilder/OrderByEditor.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { SelectableValue } from '@grafana/data';
 import { Button, InlineFormLabel, Combobox, ComboboxOption } from '@grafana/ui';
 import { OrderBy, OrderByDirection, QueryBuilderOptions, TableColumn } from 'types/queryBuilder';
 import allLabels from 'labels';
diff --git a/src/components/queryBuilder/OtelVersionSelect.tsx b/src/components/queryBuilder/OtelVersionSelect.tsx
index db1ff3a0..191eaea1 100644
--- a/src/components/queryBuilder/OtelVersionSelect.tsx
+++ b/src/components/queryBuilder/OtelVersionSelect.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect } from 'react';
-import { SelectableValue } from '@grafana/data';
 import { InlineFormLabel, Combobox, Switch as GrafanaSwitch, useTheme, ComboboxOption } from '@grafana/ui';
 import otel from 'otel';
 import selectors from 'labels';
diff --git a/src/views/config-v2/CHConfigEditor.tsx b/src/views/config-v2/CHConfigEditor.tsx
index 3a3ebfd3..19e661ca 100644
--- a/src/views/config-v2/CHConfigEditor.tsx
+++ b/src/views/config-v2/CHConfigEditor.tsx
@@ -71,7 +71,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     top: '100px',
     alignSelf: 'flex-start',
     maxHeight: 'calc(100vh - 100px)',
-    overflowY: 'auto',
+    overflow: 'hidden',
   }),
   requiredFields: css({
     marginBottom: theme.spacing(2),
diff --git a/src/views/config-v2/constants.ts b/src/views/config-v2/constants.ts
index a82f52ff..b1bebb59 100644
--- a/src/views/config-v2/constants.ts
+++ b/src/views/config-v2/constants.ts
@@ -11,7 +11,7 @@ export const CONFIG_SECTION_HEADERS = [
   { label: 'Server and encryption', id: 'server', isOpen: true, isOptional: false },
   { label: 'Database credentials', id: 'credentials', isOpen: true, isOptional: false },
   { label: 'TLS/SSL settings', id: 'tls', isOpen: false, isOptional: true },
-  { label: 'Additional settings', id: 'additional', isOpen: false, isOptional: true },
+  { label: 'Private data source connect', id: 'additional', isOpen: false, isOptional: true },
   { label: 'Save & test', id: `${selectors.pages.DataSource.saveAndTest}`, isOpen: undefined, isOptional: null },
 ];
 

From 5846e29a2032963558a401bf8f4a4c02df4ace9d Mon Sep 17 00:00:00 2001
From: alyssabull <alyssabull@gmail.com>
Date: Tue, 21 Oct 2025 10:39:56 -0600
Subject: [PATCH 04/14] Add back in gf-form temporarily to make sure design
 matches

---
 src/components/SqlEditor.tsx                  |  2 +-
 .../configEditor/HttpHeadersConfig.tsx        |  2 ++
 src/components/configEditor/LabeledInput.tsx  |  2 +-
 src/components/configEditor/LogsConfig.tsx    |  2 +-
 .../configEditor/QuerySettingsConfig.tsx      |  2 +-
 .../queryBuilder/AggregateEditor.tsx          |  8 +++++--
 src/components/queryBuilder/ColumnSelect.tsx  |  2 +-
 src/components/queryBuilder/ColumnsEditor.tsx |  2 +-
 .../queryBuilder/DatabaseTableSelect.tsx      |  2 +-
 .../queryBuilder/DurationUnitSelect.tsx       |  2 +-
 src/components/queryBuilder/FilterEditor.tsx  |  6 ++---
 src/components/queryBuilder/GroupByEditor.tsx |  2 +-
 src/components/queryBuilder/LimitEditor.tsx   |  2 +-
 src/components/queryBuilder/ModeSwitch.tsx    |  2 +-
 src/components/queryBuilder/OrderByEditor.tsx |  2 +-
 .../queryBuilder/OtelVersionSelect.tsx        |  2 +-
 src/components/queryBuilder/QueryBuilder.tsx  |  4 ++--
 src/components/queryBuilder/SqlPreview.tsx    |  2 +-
 src/components/queryBuilder/Switch.tsx        |  9 ++++++--
 src/components/queryBuilder/TraceIdInput.tsx  |  2 +-
 .../queryBuilder/views/LogsQueryBuilder.tsx   |  6 ++---
 .../queryBuilder/views/TraceQueryBuilder.tsx  | 22 +++++++++----------
 src/views/CHConfigEditor.tsx                  |  6 +++++
 src/views/CHQueryEditor.tsx                   |  2 +-
 24 files changed, 56 insertions(+), 39 deletions(-)

diff --git a/src/components/SqlEditor.tsx b/src/components/SqlEditor.tsx
index 893b983d..937e283c 100644
--- a/src/components/SqlEditor.tsx
+++ b/src/components/SqlEditor.tsx
@@ -110,7 +110,7 @@ export const SqlEditor = (props: SqlEditorProps) => {
 
   return (
     <>
-      <div className={styles.QueryEditor.queryType}>
+      <div className={'gf-form ' + styles.QueryEditor.queryType}>
         <QueryTypeSwitcher queryType={queryType} onChange={(queryType) => saveChanges({ queryType })} sqlEditor />
       </div>
       <div className={styles.Common.wrapper}>
diff --git a/src/components/configEditor/HttpHeadersConfig.tsx b/src/components/configEditor/HttpHeadersConfig.tsx
index 773b409b..7a28dbea 100644
--- a/src/components/configEditor/HttpHeadersConfig.tsx
+++ b/src/components/configEditor/HttpHeadersConfig.tsx
@@ -72,6 +72,7 @@ export const HttpHeadersConfig = (props: HttpHeadersConfigProps) => {
       <Field label={labels.forwardGrafanaHeaders.label} description={labels.forwardGrafanaHeaders.tooltip}>
         <Switch
           data-testid={selectors.forwardGrafanaHeadersSwitch}
+          className={'gf-form'}
           value={forwardGrafanaHeaders}
           onChange={(e) => updateForwardGrafanaHeaders(e.currentTarget.checked)}
         />
@@ -154,6 +155,7 @@ const HttpHeaderEditor = (props: HttpHeaderEditorProps) => {
           <Field label={labels.secureLabel}>
             <Switch
               data-testid={selectors.headerSecureSwitch}
+              className={'gf-form'}
               value={secure}
               onChange={(e) => setSecure(e.currentTarget.checked)}
               onBlur={() => onUpdate()}
diff --git a/src/components/configEditor/LabeledInput.tsx b/src/components/configEditor/LabeledInput.tsx
index e59a78f2..78650577 100644
--- a/src/components/configEditor/LabeledInput.tsx
+++ b/src/components/configEditor/LabeledInput.tsx
@@ -14,7 +14,7 @@ export function LabeledInput(props: LabeledInputProps) {
   const { label, tooltip, placeholder, disabled, value, onChange } = props;
 
   return (
-    <div>
+    <div className="gf-form">
       <InlineFormLabel width={12} className="query-keyword" tooltip={tooltip || label}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/configEditor/LogsConfig.tsx b/src/components/configEditor/LogsConfig.tsx
index c82c6c21..ca45c9b9 100644
--- a/src/components/configEditor/LogsConfig.tsx
+++ b/src/components/configEditor/LogsConfig.tsx
@@ -125,7 +125,7 @@ export const LogsConfig = (props: LogsConfigProps) => {
           onChange={onSelectContextColumnsChange}
           wide
         />
-        <div>
+        <div className="gf-form">
           <InlineFormLabel width={12} className="query-keyword" tooltip={labels.contextColumns.columns.tooltip}>
             {labels.contextColumns.columns.label}
           </InlineFormLabel>
diff --git a/src/components/configEditor/QuerySettingsConfig.tsx b/src/components/configEditor/QuerySettingsConfig.tsx
index 73c42c51..e6a14dfa 100644
--- a/src/components/configEditor/QuerySettingsConfig.tsx
+++ b/src/components/configEditor/QuerySettingsConfig.tsx
@@ -100,7 +100,7 @@ export const QuerySettingsConfig = (props: QuerySettingsConfigProps) => {
       </Field>
 
       <Field label={labels.validateSql.label} description={labels.validateSql.tooltip}>
-        <Switch value={validateSql || false} onChange={onValidateSqlChange} role="checkbox" />
+        <Switch className="gf-form" value={validateSql || false} onChange={onValidateSqlChange} role="checkbox" />
       </Field>
     </ConfigSection>
   );
diff --git a/src/components/queryBuilder/AggregateEditor.tsx b/src/components/queryBuilder/AggregateEditor.tsx
index ff22e2aa..55279d51 100644
--- a/src/components/queryBuilder/AggregateEditor.tsx
+++ b/src/components/queryBuilder/AggregateEditor.tsx
@@ -132,7 +132,11 @@ export const AggregateEditor = (props: AggregateEditorProps) => {
       {aggregates.map((aggregate, index) => {
         const key = `${index}-${aggregate.column}-${aggregate.aggregateType}-${aggregate.alias}`;
         return (
-          <div key={key} data-testid={selectors.components.QueryBuilder.AggregateEditor.itemWrapper}>
+          <div
+            className="gf-form"
+            key={key}
+            data-testid={selectors.components.QueryBuilder.AggregateEditor.itemWrapper}
+          >
             {index === 0 ? fieldLabel : fieldSpacer}
             <Aggregate
               columnOptions={columnOptions}
@@ -145,7 +149,7 @@ export const AggregateEditor = (props: AggregateEditorProps) => {
         );
       })}
 
-      <div>
+      <div className="gf-form">
         {aggregates.length === 0 ? fieldLabel : fieldSpacer}
         <Button
           data-testid={selectors.components.QueryBuilder.AggregateEditor.addButton}
diff --git a/src/components/queryBuilder/ColumnSelect.tsx b/src/components/queryBuilder/ColumnSelect.tsx
index e132d3ef..6c3629d3 100644
--- a/src/components/queryBuilder/ColumnSelect.tsx
+++ b/src/components/queryBuilder/ColumnSelect.tsx
@@ -69,7 +69,7 @@ export const ColumnSelect = (props: ColumnSelectProps) => {
   const labelStyle = 'query-keyword ' + (inline ? styles.QueryEditor.inlineField : '');
 
   return (
-    <div>
+    <div className="gf-form">
       <InlineFormLabel width={wide ? 12 : 8} className={labelStyle} tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/ColumnsEditor.tsx b/src/components/queryBuilder/ColumnsEditor.tsx
index 001e5132..7f70e65c 100644
--- a/src/components/queryBuilder/ColumnsEditor.tsx
+++ b/src/components/queryBuilder/ColumnsEditor.tsx
@@ -79,7 +79,7 @@ export const ColumnsEditor = (props: ColumnsEditorProps) => {
   };
 
   return (
-    <div>
+    <div className="gf-form">
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/DatabaseTableSelect.tsx b/src/components/queryBuilder/DatabaseTableSelect.tsx
index 52928981..4f981586 100644
--- a/src/components/queryBuilder/DatabaseTableSelect.tsx
+++ b/src/components/queryBuilder/DatabaseTableSelect.tsx
@@ -106,7 +106,7 @@ export const DatabaseTableSelect = (props: DatabaseTableSelectProps) => {
   const { datasource, database, onDatabaseChange, table, onTableChange } = props;
 
   return (
-    <div>
+    <div className="gf-form">
       <DatabaseSelect datasource={datasource} database={database} onDatabaseChange={onDatabaseChange} />
       <TableSelect datasource={datasource} database={database} table={table} onTableChange={onTableChange} />
     </div>
diff --git a/src/components/queryBuilder/DurationUnitSelect.tsx b/src/components/queryBuilder/DurationUnitSelect.tsx
index 2ca1bbad..d2535915 100644
--- a/src/components/queryBuilder/DurationUnitSelect.tsx
+++ b/src/components/queryBuilder/DurationUnitSelect.tsx
@@ -23,7 +23,7 @@ export const DurationUnitSelect = (props: DurationUnitSelectProps) => {
   const { label, tooltip } = allLabels.components.TraceQueryBuilder.columns.durationUnit;
 
   return (
-    <div>
+    <div className="gf-form">
       <InlineFormLabel
         width={12}
         className={`query-keyword ${inline ? styles.QueryEditor.inlineField : ''}`}
diff --git a/src/components/queryBuilder/FilterEditor.tsx b/src/components/queryBuilder/FilterEditor.tsx
index 54f907ac..4dd291c4 100644
--- a/src/components/queryBuilder/FilterEditor.tsx
+++ b/src/components/queryBuilder/FilterEditor.tsx
@@ -442,7 +442,7 @@ export const FiltersEditor = (props: {
   return (
     <>
       {filters.length === 0 && (
-        <div>
+        <div className="gf-form">
           <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
             {label}
           </InlineFormLabel>
@@ -460,7 +460,7 @@ export const FiltersEditor = (props: {
       )}
       {filters.map((filter, index) => {
         return (
-          <div key={index}>
+          <div className="gf-form" key={index}>
             {index === 0 ? (
               <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
                 {label}
@@ -482,7 +482,7 @@ export const FiltersEditor = (props: {
         );
       })}
       {filters.length !== 0 && (
-        <div>
+        <div className="gf-form">
           <div className={`width-8 ${styles.Common.firstLabel}`}></div>
           <Button
             data-testid="query-builder-filters-inline-add-button"
diff --git a/src/components/queryBuilder/GroupByEditor.tsx b/src/components/queryBuilder/GroupByEditor.tsx
index d6997e31..e2bab9f9 100644
--- a/src/components/queryBuilder/GroupByEditor.tsx
+++ b/src/components/queryBuilder/GroupByEditor.tsx
@@ -24,7 +24,7 @@ export const GroupByEditor = (props: GroupByEditorProps) => {
   };
 
   return (
-    <div>
+    <div className="gf-form">
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/LimitEditor.tsx b/src/components/queryBuilder/LimitEditor.tsx
index 6cfd6ecb..f4142d9b 100644
--- a/src/components/queryBuilder/LimitEditor.tsx
+++ b/src/components/queryBuilder/LimitEditor.tsx
@@ -13,7 +13,7 @@ export const LimitEditor = (props: LimitEditorProps) => {
   const { label, tooltip } = labels.components.LimitEditor;
 
   return (
-    <div>
+    <div className="gf-form">
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/ModeSwitch.tsx b/src/components/queryBuilder/ModeSwitch.tsx
index c817bd36..eb100691 100644
--- a/src/components/queryBuilder/ModeSwitch.tsx
+++ b/src/components/queryBuilder/ModeSwitch.tsx
@@ -28,7 +28,7 @@ export const ModeSwitch = (props: ModeSwitchProps) => {
   ];
 
   return (
-    <div>
+    <div className="gf-form">
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/OrderByEditor.tsx b/src/components/queryBuilder/OrderByEditor.tsx
index f35ebbd8..eb209f64 100644
--- a/src/components/queryBuilder/OrderByEditor.tsx
+++ b/src/components/queryBuilder/OrderByEditor.tsx
@@ -113,7 +113,7 @@ export const OrderByEditor = (props: OrderByEditorProps) => {
         );
       })}
 
-      <div>
+      <div className="gf-form">
         {orderBy.length === 0 ? fieldLabel : fieldSpacer}
         <Button
           data-testid="query-builder-orderby-add-button"
diff --git a/src/components/queryBuilder/OtelVersionSelect.tsx b/src/components/queryBuilder/OtelVersionSelect.tsx
index 191eaea1..c9302494 100644
--- a/src/components/queryBuilder/OtelVersionSelect.tsx
+++ b/src/components/queryBuilder/OtelVersionSelect.tsx
@@ -35,7 +35,7 @@ export const OtelVersionSelect = (props: OtelVersionSelectProps) => {
   };
 
   return (
-    <div>
+    <div className="gf-form">
       <InlineFormLabel width={wide ? 12 : 8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/QueryBuilder.tsx b/src/components/queryBuilder/QueryBuilder.tsx
index 916468f5..09fd522a 100644
--- a/src/components/queryBuilder/QueryBuilder.tsx
+++ b/src/components/queryBuilder/QueryBuilder.tsx
@@ -49,7 +49,7 @@ export const QueryBuilder = (props: QueryBuilderProps) => {
 
   return (
     <div data-testid="query-editor-section-builder">
-      <div className={styles.QueryEditor.queryType}>
+      <div className={'gf-form ' + styles.QueryEditor.queryType}>
         <DatabaseTableSelect
           datasource={datasource}
           database={builderOptions.database}
@@ -58,7 +58,7 @@ export const QueryBuilder = (props: QueryBuilderProps) => {
           onTableChange={onTableChange}
         />
       </div>
-      <div className={styles.QueryEditor.queryType}>
+      <div className={'gf-form ' + styles.QueryEditor.queryType}>
         <QueryTypeSwitcher queryType={builderOptions.queryType} onChange={onQueryTypeChange} />
       </div>
 
diff --git a/src/components/queryBuilder/SqlPreview.tsx b/src/components/queryBuilder/SqlPreview.tsx
index ef6d0988..1bffd7e6 100644
--- a/src/components/queryBuilder/SqlPreview.tsx
+++ b/src/components/queryBuilder/SqlPreview.tsx
@@ -11,7 +11,7 @@ export const SqlPreview = (props: SqlPreviewProps) => {
   const { label, tooltip } = labels.components.SqlPreview;
 
   return (
-    <div>
+    <div className="gf-form">
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/Switch.tsx b/src/components/queryBuilder/Switch.tsx
index 47887b46..2dca35b2 100644
--- a/src/components/queryBuilder/Switch.tsx
+++ b/src/components/queryBuilder/Switch.tsx
@@ -26,12 +26,17 @@ export const Switch = (props: SwitchProps) => {
   const labelStyle = 'query-keyword ' + (inline ? styles.QueryEditor.inlineField : '');
 
   return (
-    <div>
+    <div className="gf-form">
       <InlineFormLabel width={wide ? 12 : 8} className={labelStyle} tooltip={tooltip}>
         {label}
       </InlineFormLabel>
       <div style={switchContainerStyle}>
-        <GrafanaSwitch disabled={disabled} value={value} onChange={(e) => onChange(e.currentTarget.checked)} />
+        <GrafanaSwitch
+          className="gf-form"
+          disabled={disabled}
+          value={value}
+          onChange={(e) => onChange(e.currentTarget.checked)}
+        />
       </div>
     </div>
   );
diff --git a/src/components/queryBuilder/TraceIdInput.tsx b/src/components/queryBuilder/TraceIdInput.tsx
index 7462d735..24a27834 100644
--- a/src/components/queryBuilder/TraceIdInput.tsx
+++ b/src/components/queryBuilder/TraceIdInput.tsx
@@ -19,7 +19,7 @@ const TraceIdInput = (props: TraceIdInputProps) => {
   }, [traceId]);
 
   return (
-    <div>
+    <div className="gf-form">
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/views/LogsQueryBuilder.tsx b/src/components/queryBuilder/views/LogsQueryBuilder.tsx
index ba25f692..9ba099c9 100644
--- a/src/components/queryBuilder/views/LogsQueryBuilder.tsx
+++ b/src/components/queryBuilder/views/LogsQueryBuilder.tsx
@@ -150,7 +150,7 @@ export const LogsQueryBuilder = (props: LogsQueryBuilderProps) => {
         selectedColumns={builderState.selectedColumns}
         onSelectedColumnsChange={onOptionChange('selectedColumns')}
       />
-      <div>
+      <div className="gf-form">
         <ColumnSelect
           disabled={builderState.otelEnabled}
           allColumns={allColumns}
@@ -175,7 +175,7 @@ export const LogsQueryBuilder = (props: LogsQueryBuilderProps) => {
           inline
         />
       </div>
-      <div>
+      <div className="gf-form">
         <ColumnSelect
           disabled={builderState.otelEnabled}
           allColumns={allColumns}
@@ -240,7 +240,7 @@ const LogMessageLikeInput = (props: LogMessageLikeInputProps) => {
   }, [logMessageLike]);
 
   return (
-    <div>
+    <div className="gf-form">
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/views/TraceQueryBuilder.tsx b/src/components/queryBuilder/views/TraceQueryBuilder.tsx
index c310dfef..ed8d421d 100644
--- a/src/components/queryBuilder/views/TraceQueryBuilder.tsx
+++ b/src/components/queryBuilder/views/TraceQueryBuilder.tsx
@@ -180,7 +180,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
           onVersionChange={(v) => builderOptionsDispatch(setOtelVersion(v))}
           wide
         />
-        <div>
+        <div className="gf-form">
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -205,7 +205,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             inline
           />
         </div>
-        <div>
+        <div className="gf-form">
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -230,7 +230,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             inline
           />
         </div>
-        <div>
+        <div className="gf-form">
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -255,7 +255,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             inline
           />
         </div>
-        <div>
+        <div className="gf-form">
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -274,7 +274,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             inline
           />
         </div>
-        <div>
+        <div className="gf-form">
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -299,7 +299,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             inline
           />
         </div>
-        <div>
+        <div className="gf-form">
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -324,7 +324,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             inline
           />
         </div>
-        <div>
+        <div className="gf-form">
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -349,7 +349,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             inline
           />
         </div>
-        <div>
+        <div className="gf-form">
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -374,7 +374,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             inline
           />
         </div>
-        <div>
+        <div className="gf-form">
           <Switch
             disabled={builderState.otelEnabled}
             label={labels.columns.flattenNested.label}
@@ -384,7 +384,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             wide
           />
         </div>
-        <div>
+        <div className="gf-form">
           <LabeledInput
             disabled={builderState.otelEnabled}
             label={labels.columns.eventsPrefix.label}
@@ -393,7 +393,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             onChange={onOptionChange('traceEventsColumnPrefix')}
           />
         </div>
-        <div>
+        <div className="gf-form">
           <LabeledInput
             disabled={builderState.otelEnabled}
             label={labels.columns.linksPrefix.label}
diff --git a/src/views/CHConfigEditor.tsx b/src/views/CHConfigEditor.tsx
index e587b933..015743ca 100644
--- a/src/views/CHConfigEditor.tsx
+++ b/src/views/CHConfigEditor.tsx
@@ -284,6 +284,7 @@ export const ConfigEditor: React.FC<ConfigEditorProps> = (props) => {
         <Field label={labels.secure.label} description={labels.secure.tooltip}>
           <Switch
             id="secure"
+            className="gf-form"
             value={jsonData.secure || false}
             onChange={(e) => {
               trackingV1.trackClickhouseConfigV1SecureConnectionToggleClicked({
@@ -325,6 +326,7 @@ export const ConfigEditor: React.FC<ConfigEditorProps> = (props) => {
       <ConfigSection title="TLS / SSL Settings">
         <Field label={labels.tlsSkipVerify.label} description={labels.tlsSkipVerify.tooltip}>
           <Switch
+            className="gf-form"
             value={jsonData.tlsSkipVerify || false}
             onChange={(e) => {
               trackingV1.trackClickhouseConfigV1SkipTLSVerifyToggleClicked({
@@ -336,6 +338,7 @@ export const ConfigEditor: React.FC<ConfigEditorProps> = (props) => {
         </Field>
         <Field label={labels.tlsClientAuth.label} description={labels.tlsClientAuth.tooltip}>
           <Switch
+            className="gf-form"
             value={jsonData.tlsAuth || false}
             onChange={(e) => {
               trackingV1.trackClickhouseConfigV1TLSClientAuthToggleClicked({
@@ -347,6 +350,7 @@ export const ConfigEditor: React.FC<ConfigEditorProps> = (props) => {
         </Field>
         <Field label={labels.tlsAuthWithCACert.label} description={labels.tlsAuthWithCACert.tooltip}>
           <Switch
+            className="gf-form"
             value={jsonData.tlsAuthWithCACert || false}
             onChange={(e) => {
               trackingV1.trackClickhouseConfigV1WithCACertToggleClicked({ caCertToggle: e.currentTarget.checked });
@@ -609,6 +613,7 @@ export const ConfigEditor: React.FC<ConfigEditorProps> = (props) => {
         <Divider />
         <Field label={labels.enableRowLimit.label} description={labels.enableRowLimit.tooltip}>
           <Switch
+            className="gf-form"
             value={jsonData.enableRowLimit || false}
             data-testid={labels.enableRowLimit.testid}
             onChange={(e) => {
@@ -620,6 +625,7 @@ export const ConfigEditor: React.FC<ConfigEditorProps> = (props) => {
         {config.secureSocksDSProxyEnabled && versionGte(config.buildInfo.version, '10.0.0') && (
           <Field label={labels.secureSocksProxy.label} description={labels.secureSocksProxy.tooltip}>
             <Switch
+              className="gf-form"
               value={jsonData.enableSecureSocksProxy || false}
               onChange={(e) => onSwitchToggle('enableSecureSocksProxy', e.currentTarget.checked)}
             />
diff --git a/src/views/CHQueryEditor.tsx b/src/views/CHQueryEditor.tsx
index f498ff74..f75d38f2 100644
--- a/src/views/CHQueryEditor.tsx
+++ b/src/views/CHQueryEditor.tsx
@@ -25,7 +25,7 @@ export const CHQueryEditor = (props: CHQueryEditorProps) => {
 
   return (
     <>
-      <div className={styles.QueryEditor.queryType}>
+      <div className={'gf-form ' + styles.QueryEditor.queryType}>
         <EditorTypeSwitcher {...props} query={query} datasource={datasource} />
         <Button onClick={() => onRunQuery()}>Run Query</Button>
       </div>

From 62ca9d40d3d3d33daf4043c9e0331e19b49827de Mon Sep 17 00:00:00 2001
From: alyssabull <alyssabull@gmail.com>
Date: Tue, 21 Oct 2025 10:41:40 -0600
Subject: [PATCH 05/14] Lint

---
 src/components/configEditor/HttpHeadersConfig.tsx | 2 +-
 src/components/queryBuilder/OrderByEditor.tsx     | 2 +-
 src/components/queryBuilder/OtelVersionSelect.tsx | 7 ++++++-
 src/components/queryBuilder/Switch.tsx            | 2 +-
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/configEditor/HttpHeadersConfig.tsx b/src/components/configEditor/HttpHeadersConfig.tsx
index 7a28dbea..165c8321 100644
--- a/src/components/configEditor/HttpHeadersConfig.tsx
+++ b/src/components/configEditor/HttpHeadersConfig.tsx
@@ -155,7 +155,7 @@ const HttpHeaderEditor = (props: HttpHeaderEditorProps) => {
           <Field label={labels.secureLabel}>
             <Switch
               data-testid={selectors.headerSecureSwitch}
-              className={'gf-form'}
+              className="gf-form"
               value={secure}
               onChange={(e) => setSecure(e.currentTarget.checked)}
               onBlur={() => onUpdate()}
diff --git a/src/components/queryBuilder/OrderByEditor.tsx b/src/components/queryBuilder/OrderByEditor.tsx
index eb209f64..7ae447c5 100644
--- a/src/components/queryBuilder/OrderByEditor.tsx
+++ b/src/components/queryBuilder/OrderByEditor.tsx
@@ -100,7 +100,7 @@ export const OrderByEditor = (props: OrderByEditorProps) => {
       {orderBy.map((orderByItem, index) => {
         const key = `${index}-${orderByItem.name}-${orderByItem.hint || ''}-${orderByItem.dir}`;
         return (
-          <div key={key} data-testid="query-builder-orderby-item-wrapper">
+          <div className="gf-form" key={key} data-testid="query-builder-orderby-item-wrapper">
             {index === 0 ? fieldLabel : fieldSpacer}
             <OrderByItem
               columnOptions={orderByOptions}
diff --git a/src/components/queryBuilder/OtelVersionSelect.tsx b/src/components/queryBuilder/OtelVersionSelect.tsx
index c9302494..58a228a7 100644
--- a/src/components/queryBuilder/OtelVersionSelect.tsx
+++ b/src/components/queryBuilder/OtelVersionSelect.tsx
@@ -40,7 +40,12 @@ export const OtelVersionSelect = (props: OtelVersionSelectProps) => {
         {label}
       </InlineFormLabel>
       <div style={switchContainerStyle}>
-        <GrafanaSwitch value={enabled} onChange={(e) => onEnabledChange(e.currentTarget.checked)} role="checkbox" />
+        <GrafanaSwitch
+          className="gf-form"
+          value={enabled}
+          onChange={(e) => onEnabledChange(e.currentTarget.checked)}
+          role="checkbox"
+        />
       </div>
       <Combobox
         disabled={!enabled}
diff --git a/src/components/queryBuilder/Switch.tsx b/src/components/queryBuilder/Switch.tsx
index 2dca35b2..973d60f5 100644
--- a/src/components/queryBuilder/Switch.tsx
+++ b/src/components/queryBuilder/Switch.tsx
@@ -32,8 +32,8 @@ export const Switch = (props: SwitchProps) => {
       </InlineFormLabel>
       <div style={switchContainerStyle}>
         <GrafanaSwitch
-          className="gf-form"
           disabled={disabled}
+          className="gf-form"
           value={value}
           onChange={(e) => onChange(e.currentTarget.checked)}
         />

From f9b0f0a38dbbda83cf7a89d5c4f125ccb20dc918 Mon Sep 17 00:00:00 2001
From: alyssabull <alyssabull@gmail.com>
Date: Tue, 21 Oct 2025 15:06:34 -0600
Subject: [PATCH 06/14] Remove gf-form and fix validatesql toggle

---
 src/components/SqlEditor.tsx                  |   2 +-
 .../configEditor/HttpHeadersConfig.tsx        |   2 -
 src/components/configEditor/LabeledInput.tsx  |   2 +-
 src/components/configEditor/LogsConfig.tsx    |   2 +-
 .../configEditor/QuerySettingsConfig.tsx      |   2 +-
 .../queryBuilder/AggregateEditor.tsx          |   4 +-
 src/components/queryBuilder/ColumnSelect.tsx  |  27 ++---
 src/components/queryBuilder/ColumnsEditor.tsx |   2 +-
 .../queryBuilder/DatabaseTableSelect.tsx      |   2 +-
 .../queryBuilder/DurationUnitSelect.tsx       |   5 +-
 src/components/queryBuilder/FilterEditor.tsx  |  97 ++++++++-------
 src/components/queryBuilder/GroupByEditor.tsx |   2 +-
 src/components/queryBuilder/LimitEditor.tsx   |   2 +-
 src/components/queryBuilder/ModeSwitch.tsx    |   2 +-
 src/components/queryBuilder/OrderByEditor.tsx |   5 +-
 .../queryBuilder/OtelVersionSelect.tsx        |  10 +-
 src/components/queryBuilder/QueryBuilder.tsx  |   4 +-
 src/components/queryBuilder/SqlPreview.tsx    |   2 +-
 src/components/queryBuilder/Switch.tsx        |   9 +-
 src/components/queryBuilder/TraceIdInput.tsx  |   2 +-
 .../queryBuilder/views/LogsQueryBuilder.tsx   | 114 +++++++++---------
 .../queryBuilder/views/TraceQueryBuilder.tsx  |  30 ++---
 src/labels.ts                                 |   2 +-
 src/module.ts                                 |   2 +-
 src/views/CHConfigEditor.tsx                  |   6 -
 src/views/CHQueryEditor.tsx                   |   2 +-
 .../config-v2/AdditionalSettingsSection.tsx   |  15 ++-
 src/views/config-v2/constants.ts              |   2 +-
 28 files changed, 171 insertions(+), 187 deletions(-)

diff --git a/src/components/SqlEditor.tsx b/src/components/SqlEditor.tsx
index 937e283c..893b983d 100644
--- a/src/components/SqlEditor.tsx
+++ b/src/components/SqlEditor.tsx
@@ -110,7 +110,7 @@ export const SqlEditor = (props: SqlEditorProps) => {
 
   return (
     <>
-      <div className={'gf-form ' + styles.QueryEditor.queryType}>
+      <div className={styles.QueryEditor.queryType}>
         <QueryTypeSwitcher queryType={queryType} onChange={(queryType) => saveChanges({ queryType })} sqlEditor />
       </div>
       <div className={styles.Common.wrapper}>
diff --git a/src/components/configEditor/HttpHeadersConfig.tsx b/src/components/configEditor/HttpHeadersConfig.tsx
index 165c8321..773b409b 100644
--- a/src/components/configEditor/HttpHeadersConfig.tsx
+++ b/src/components/configEditor/HttpHeadersConfig.tsx
@@ -72,7 +72,6 @@ export const HttpHeadersConfig = (props: HttpHeadersConfigProps) => {
       <Field label={labels.forwardGrafanaHeaders.label} description={labels.forwardGrafanaHeaders.tooltip}>
         <Switch
           data-testid={selectors.forwardGrafanaHeadersSwitch}
-          className={'gf-form'}
           value={forwardGrafanaHeaders}
           onChange={(e) => updateForwardGrafanaHeaders(e.currentTarget.checked)}
         />
@@ -155,7 +154,6 @@ const HttpHeaderEditor = (props: HttpHeaderEditorProps) => {
           <Field label={labels.secureLabel}>
             <Switch
               data-testid={selectors.headerSecureSwitch}
-              className="gf-form"
               value={secure}
               onChange={(e) => setSecure(e.currentTarget.checked)}
               onBlur={() => onUpdate()}
diff --git a/src/components/configEditor/LabeledInput.tsx b/src/components/configEditor/LabeledInput.tsx
index 78650577..3025d3a8 100644
--- a/src/components/configEditor/LabeledInput.tsx
+++ b/src/components/configEditor/LabeledInput.tsx
@@ -14,7 +14,7 @@ export function LabeledInput(props: LabeledInputProps) {
   const { label, tooltip, placeholder, disabled, value, onChange } = props;
 
   return (
-    <div className="gf-form">
+    <div style={{ display: 'flex', marginBottom: '4px' }}>
       <InlineFormLabel width={12} className="query-keyword" tooltip={tooltip || label}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/configEditor/LogsConfig.tsx b/src/components/configEditor/LogsConfig.tsx
index ca45c9b9..5b152a1e 100644
--- a/src/components/configEditor/LogsConfig.tsx
+++ b/src/components/configEditor/LogsConfig.tsx
@@ -125,7 +125,7 @@ export const LogsConfig = (props: LogsConfigProps) => {
           onChange={onSelectContextColumnsChange}
           wide
         />
-        <div className="gf-form">
+        <div style={{ display: 'flex' }}>
           <InlineFormLabel width={12} className="query-keyword" tooltip={labels.contextColumns.columns.tooltip}>
             {labels.contextColumns.columns.label}
           </InlineFormLabel>
diff --git a/src/components/configEditor/QuerySettingsConfig.tsx b/src/components/configEditor/QuerySettingsConfig.tsx
index e6a14dfa..73c42c51 100644
--- a/src/components/configEditor/QuerySettingsConfig.tsx
+++ b/src/components/configEditor/QuerySettingsConfig.tsx
@@ -100,7 +100,7 @@ export const QuerySettingsConfig = (props: QuerySettingsConfigProps) => {
       </Field>
 
       <Field label={labels.validateSql.label} description={labels.validateSql.tooltip}>
-        <Switch className="gf-form" value={validateSql || false} onChange={onValidateSqlChange} role="checkbox" />
+        <Switch value={validateSql || false} onChange={onValidateSqlChange} role="checkbox" />
       </Field>
     </ConfigSection>
   );
diff --git a/src/components/queryBuilder/AggregateEditor.tsx b/src/components/queryBuilder/AggregateEditor.tsx
index 55279d51..4ac4e95d 100644
--- a/src/components/queryBuilder/AggregateEditor.tsx
+++ b/src/components/queryBuilder/AggregateEditor.tsx
@@ -133,7 +133,7 @@ export const AggregateEditor = (props: AggregateEditorProps) => {
         const key = `${index}-${aggregate.column}-${aggregate.aggregateType}-${aggregate.alias}`;
         return (
           <div
-            className="gf-form"
+            style={{ display: 'flex' }}
             key={key}
             data-testid={selectors.components.QueryBuilder.AggregateEditor.itemWrapper}
           >
@@ -149,7 +149,7 @@ export const AggregateEditor = (props: AggregateEditorProps) => {
         );
       })}
 
-      <div className="gf-form">
+      <div style={{ display: 'flex', marginBottom: '4px' }}>
         {aggregates.length === 0 ? fieldLabel : fieldSpacer}
         <Button
           data-testid={selectors.components.QueryBuilder.AggregateEditor.addButton}
diff --git a/src/components/queryBuilder/ColumnSelect.tsx b/src/components/queryBuilder/ColumnSelect.tsx
index 6c3629d3..cbdc901b 100644
--- a/src/components/queryBuilder/ColumnSelect.tsx
+++ b/src/components/queryBuilder/ColumnSelect.tsx
@@ -30,7 +30,6 @@ export const ColumnSelect = (props: ColumnSelectProps) => {
     label,
     tooltip,
     disabled,
-    invalid,
     wide,
     inline,
   } = props;
@@ -39,11 +38,8 @@ export const ColumnSelect = (props: ColumnSelectProps) => {
     .filter(columnFilterFn || defaultFilterFn)
     .map((c) => ({ label: c.label || c.name, value: c.name }));
 
-  // Select component WILL NOT display the value if it isn't present in the options.
-  let staleOption = false;
   if (selectedColumn && !columns.find((c) => c.value === selectedColumn.name)) {
     columns.push({ label: selectedColumn.alias || selectedColumn.name, value: selectedColumn.name });
-    staleOption = true;
   }
 
   const onChange = (selected: ComboboxOption<string>) => {
@@ -69,20 +65,21 @@ export const ColumnSelect = (props: ColumnSelectProps) => {
   const labelStyle = 'query-keyword ' + (inline ? styles.QueryEditor.inlineField : '');
 
   return (
-    <div className="gf-form">
+    <div style={{ display: 'flex', marginBottom: '4px' }}>
       <InlineFormLabel width={wide ? 12 : 8} className={labelStyle} tooltip={tooltip}>
         {label}
       </InlineFormLabel>
-      <Combobox<string>
-        disabled={disabled}
-        invalid={invalid || staleOption}
-        options={columns}
-        value={selectedColumnName}
-        placeholder={selectedColumnName || undefined}
-        onChange={onChange}
-        width={wide ? 25 : 20}
-        createCustomValue={true}
-      />
+      <div style={{ marginRight: '8px' }}>
+        <Combobox<string>
+          disabled={disabled}
+          options={columns}
+          value={selectedColumnName}
+          placeholder={selectedColumnName || 'Choose'}
+          onChange={onChange}
+          width={25}
+          createCustomValue={true}
+        />
+      </div>
     </div>
   );
 };
diff --git a/src/components/queryBuilder/ColumnsEditor.tsx b/src/components/queryBuilder/ColumnsEditor.tsx
index 7f70e65c..673fa704 100644
--- a/src/components/queryBuilder/ColumnsEditor.tsx
+++ b/src/components/queryBuilder/ColumnsEditor.tsx
@@ -79,7 +79,7 @@ export const ColumnsEditor = (props: ColumnsEditorProps) => {
   };
 
   return (
-    <div className="gf-form">
+    <div style={{ display: 'flex', marginBottom: '4px' }}>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/DatabaseTableSelect.tsx b/src/components/queryBuilder/DatabaseTableSelect.tsx
index 4f981586..346106b1 100644
--- a/src/components/queryBuilder/DatabaseTableSelect.tsx
+++ b/src/components/queryBuilder/DatabaseTableSelect.tsx
@@ -106,7 +106,7 @@ export const DatabaseTableSelect = (props: DatabaseTableSelectProps) => {
   const { datasource, database, onDatabaseChange, table, onTableChange } = props;
 
   return (
-    <div className="gf-form">
+    <div style={{ display: 'flex', marginBottom: '4px' }}>
       <DatabaseSelect datasource={datasource} database={database} onDatabaseChange={onDatabaseChange} />
       <TableSelect datasource={datasource} database={database} table={table} onTableChange={onTableChange} />
     </div>
diff --git a/src/components/queryBuilder/DurationUnitSelect.tsx b/src/components/queryBuilder/DurationUnitSelect.tsx
index d2535915..37d72525 100644
--- a/src/components/queryBuilder/DurationUnitSelect.tsx
+++ b/src/components/queryBuilder/DurationUnitSelect.tsx
@@ -23,7 +23,7 @@ export const DurationUnitSelect = (props: DurationUnitSelectProps) => {
   const { label, tooltip } = allLabels.components.TraceQueryBuilder.columns.durationUnit;
 
   return (
-    <div className="gf-form">
+    <div style={{ display: 'flex', marginBottom: '4px' }}>
       <InlineFormLabel
         width={12}
         className={`query-keyword ${inline ? styles.QueryEditor.inlineField : ''}`}
@@ -36,7 +36,8 @@ export const DurationUnitSelect = (props: DurationUnitSelectProps) => {
         options={durationUnitOptions as Array<ComboboxOption<TimeUnit>>}
         value={unit}
         onChange={(v) => onChange(v.value!)}
-        width={inline ? 25 : 30}
+        width={25}
+        placeholder="Choose"
       />
     </div>
   );
diff --git a/src/components/queryBuilder/FilterEditor.tsx b/src/components/queryBuilder/FilterEditor.tsx
index 4dd291c4..9d205eaf 100644
--- a/src/components/queryBuilder/FilterEditor.tsx
+++ b/src/components/queryBuilder/FilterEditor.tsx
@@ -1,15 +1,6 @@
 import React, { useState } from 'react';
 import { SelectableValue } from '@grafana/data';
-import {
-  Button,
-  Stack,
-  InlineFormLabel,
-  Input,
-  MultiSelect,
-  RadioButtonGroup,
-  Combobox,
-  ComboboxOption,
-} from '@grafana/ui';
+import { Button, InlineFormLabel, Input, MultiSelect, RadioButtonGroup, Combobox, ComboboxOption } from '@grafana/ui';
 import { Filter, FilterOperator, TableColumn, NullFilter } from 'types/queryBuilder';
 import * as utils from 'components/queryBuilder/utils';
 import labels from 'labels';
@@ -367,51 +358,57 @@ export const FilterEditor = (props: {
   };
 
   return (
-    <Stack wrap alignItems="flex-start" justifyContent="flex-start">
-      {index !== 0 && (
-        <RadioButtonGroup options={conditions} value={filter.condition} onChange={(e) => onFilterConditionChange(e!)} />
-      )}
-      <div className={styles.Common.inlineSelect}>
-        <Combobox
-          disabled={Boolean(filter.hint)}
-          placeholder={filter.hint ? labels.types.ColumnHint[filter.hint] : undefined}
-          value={filter.key}
-          width={40}
-          options={getFields()}
-          onChange={(e) => onFilterNameChange(e.value!)}
-          createCustomValue={true}
-        />
-      </div>
-      {(isMapType || isJSONType) && (
+    <div>
+      <div style={{ display: 'flex' }}>
+        {index !== 0 && (
+          <RadioButtonGroup
+            options={conditions}
+            value={filter.condition}
+            onChange={(e) => onFilterConditionChange(e!)}
+          />
+        )}
         <div className={styles.Common.inlineSelect}>
           <Combobox
-            value={filter.mapKey}
-            placeholder={labels.components.FilterEditor.mapKeyPlaceholder}
+            disabled={Boolean(filter.hint)}
+            placeholder={filter.hint ? labels.types.ColumnHint[filter.hint] : undefined}
+            value={filter.key}
             width={40}
-            options={mapKeyOptions}
-            onChange={(e) => onFilterMapKeyChange(e.value!)}
+            options={getFields()}
+            onChange={(e) => onFilterNameChange(e.value!)}
             createCustomValue={true}
           />
         </div>
-      )}
-      <div className={styles.Common.inlineSelect}>
-        <Combobox
-          value={filter.operator}
-          width={40}
-          options={getFilterOperatorsByType(filter.type)}
-          onChange={(e) => onFilterOperatorChange(e.value!)}
+        {(isMapType || isJSONType) && (
+          <div className={styles.Common.inlineSelect}>
+            <Combobox
+              value={filter.mapKey}
+              placeholder={labels.components.FilterEditor.mapKeyPlaceholder}
+              width={40}
+              options={mapKeyOptions}
+              onChange={(e) => onFilterMapKeyChange(e.value!)}
+              createCustomValue={true}
+            />
+          </div>
+        )}
+        <div className={styles.Common.inlineSelect}>
+          <Combobox
+            value={filter.operator}
+            width={40}
+            options={getFilterOperatorsByType(filter.type)}
+            onChange={(e) => onFilterOperatorChange(e.value!)}
+          />
+        </div>
+        <FilterValueEditor filter={filter} onFilterChange={onFilterValueChange} allColumns={fieldsList} />
+        <Button
+          data-testid="query-builder-filters-remove-button"
+          icon="trash-alt"
+          variant="destructive"
+          size="sm"
+          className={styles.Common.smallBtn}
+          onClick={() => removeFilter(index)}
         />
       </div>
-      <FilterValueEditor filter={filter} onFilterChange={onFilterValueChange} allColumns={fieldsList} />
-      <Button
-        data-testid="query-builder-filters-remove-button"
-        icon="trash-alt"
-        variant="destructive"
-        size="sm"
-        className={styles.Common.smallBtn}
-        onClick={() => removeFilter(index)}
-      />
-    </Stack>
+    </div>
   );
 };
 
@@ -442,7 +439,7 @@ export const FiltersEditor = (props: {
   return (
     <>
       {filters.length === 0 && (
-        <div className="gf-form">
+        <div style={{ display: 'flex', marginBottom: '4px' }}>
           <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
             {label}
           </InlineFormLabel>
@@ -460,7 +457,7 @@ export const FiltersEditor = (props: {
       )}
       {filters.map((filter, index) => {
         return (
-          <div className="gf-form" key={index}>
+          <div style={{ display: 'flex', marginBottom: '4px' }} key={index}>
             {index === 0 ? (
               <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
                 {label}
@@ -482,7 +479,7 @@ export const FiltersEditor = (props: {
         );
       })}
       {filters.length !== 0 && (
-        <div className="gf-form">
+        <div style={{ display: 'flex', marginBottom: '4px' }}>
           <div className={`width-8 ${styles.Common.firstLabel}`}></div>
           <Button
             data-testid="query-builder-filters-inline-add-button"
diff --git a/src/components/queryBuilder/GroupByEditor.tsx b/src/components/queryBuilder/GroupByEditor.tsx
index e2bab9f9..d6997e31 100644
--- a/src/components/queryBuilder/GroupByEditor.tsx
+++ b/src/components/queryBuilder/GroupByEditor.tsx
@@ -24,7 +24,7 @@ export const GroupByEditor = (props: GroupByEditorProps) => {
   };
 
   return (
-    <div className="gf-form">
+    <div>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/LimitEditor.tsx b/src/components/queryBuilder/LimitEditor.tsx
index f4142d9b..746dd1a2 100644
--- a/src/components/queryBuilder/LimitEditor.tsx
+++ b/src/components/queryBuilder/LimitEditor.tsx
@@ -13,7 +13,7 @@ export const LimitEditor = (props: LimitEditorProps) => {
   const { label, tooltip } = labels.components.LimitEditor;
 
   return (
-    <div className="gf-form">
+    <div style={{ display: 'flex', marginBottom: '4px' }}>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/ModeSwitch.tsx b/src/components/queryBuilder/ModeSwitch.tsx
index eb100691..1665cc0c 100644
--- a/src/components/queryBuilder/ModeSwitch.tsx
+++ b/src/components/queryBuilder/ModeSwitch.tsx
@@ -28,7 +28,7 @@ export const ModeSwitch = (props: ModeSwitchProps) => {
   ];
 
   return (
-    <div className="gf-form">
+    <div style={{ display: 'flex', marginBottom: '4px' }}>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/OrderByEditor.tsx b/src/components/queryBuilder/OrderByEditor.tsx
index 7ae447c5..5fb8adb0 100644
--- a/src/components/queryBuilder/OrderByEditor.tsx
+++ b/src/components/queryBuilder/OrderByEditor.tsx
@@ -100,7 +100,7 @@ export const OrderByEditor = (props: OrderByEditorProps) => {
       {orderBy.map((orderByItem, index) => {
         const key = `${index}-${orderByItem.name}-${orderByItem.hint || ''}-${orderByItem.dir}`;
         return (
-          <div className="gf-form" key={key} data-testid="query-builder-orderby-item-wrapper">
+          <div style={{ display: 'flex' }} key={key} data-testid="query-builder-orderby-item-wrapper">
             {index === 0 ? fieldLabel : fieldSpacer}
             <OrderByItem
               columnOptions={orderByOptions}
@@ -113,7 +113,7 @@ export const OrderByEditor = (props: OrderByEditorProps) => {
         );
       })}
 
-      <div className="gf-form">
+      <div style={{ display: 'flex', marginBottom: '4px' }}>
         {orderBy.length === 0 ? fieldLabel : fieldSpacer}
         <Button
           data-testid="query-builder-orderby-add-button"
@@ -122,6 +122,7 @@ export const OrderByEditor = (props: OrderByEditorProps) => {
           size="sm"
           onClick={addOrderByItem}
           className={styles.Common.smallBtn}
+          style={{ margin: '4px 0 0 0' }}
         >
           {addLabel}
         </Button>
diff --git a/src/components/queryBuilder/OtelVersionSelect.tsx b/src/components/queryBuilder/OtelVersionSelect.tsx
index 58a228a7..b94d76b5 100644
--- a/src/components/queryBuilder/OtelVersionSelect.tsx
+++ b/src/components/queryBuilder/OtelVersionSelect.tsx
@@ -32,20 +32,16 @@ export const OtelVersionSelect = (props: OtelVersionSelectProps) => {
     height: `${theme.spacing.formInputHeight}px`,
     display: 'flex',
     alignItems: 'center',
+    marginBottom: '4px',
   };
 
   return (
-    <div className="gf-form">
+    <div style={{ display: 'flex' }}>
       <InlineFormLabel width={wide ? 12 : 8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
       <div style={switchContainerStyle}>
-        <GrafanaSwitch
-          className="gf-form"
-          value={enabled}
-          onChange={(e) => onEnabledChange(e.currentTarget.checked)}
-          role="checkbox"
-        />
+        <GrafanaSwitch value={enabled} onChange={(e) => onEnabledChange(e.currentTarget.checked)} role="checkbox" />
       </div>
       <Combobox
         disabled={!enabled}
diff --git a/src/components/queryBuilder/QueryBuilder.tsx b/src/components/queryBuilder/QueryBuilder.tsx
index 09fd522a..62e813a4 100644
--- a/src/components/queryBuilder/QueryBuilder.tsx
+++ b/src/components/queryBuilder/QueryBuilder.tsx
@@ -49,7 +49,7 @@ export const QueryBuilder = (props: QueryBuilderProps) => {
 
   return (
     <div data-testid="query-editor-section-builder">
-      <div className={'gf-form ' + styles.QueryEditor.queryType}>
+      <div className={styles.QueryEditor.queryType}>
         <DatabaseTableSelect
           datasource={datasource}
           database={builderOptions.database}
@@ -58,7 +58,7 @@ export const QueryBuilder = (props: QueryBuilderProps) => {
           onTableChange={onTableChange}
         />
       </div>
-      <div className={'gf-form ' + styles.QueryEditor.queryType}>
+      <div className={styles.QueryEditor.queryType} style={{ marginBottom: '4px' }}>
         <QueryTypeSwitcher queryType={builderOptions.queryType} onChange={onQueryTypeChange} />
       </div>
 
diff --git a/src/components/queryBuilder/SqlPreview.tsx b/src/components/queryBuilder/SqlPreview.tsx
index 1bffd7e6..b6ad734e 100644
--- a/src/components/queryBuilder/SqlPreview.tsx
+++ b/src/components/queryBuilder/SqlPreview.tsx
@@ -11,7 +11,7 @@ export const SqlPreview = (props: SqlPreviewProps) => {
   const { label, tooltip } = labels.components.SqlPreview;
 
   return (
-    <div className="gf-form">
+    <div style={{ display: 'flex' }}>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/Switch.tsx b/src/components/queryBuilder/Switch.tsx
index 973d60f5..22b439f1 100644
--- a/src/components/queryBuilder/Switch.tsx
+++ b/src/components/queryBuilder/Switch.tsx
@@ -26,17 +26,12 @@ export const Switch = (props: SwitchProps) => {
   const labelStyle = 'query-keyword ' + (inline ? styles.QueryEditor.inlineField : '');
 
   return (
-    <div className="gf-form">
+    <div style={{ display: 'flex', marginBottom: '4px' }}>
       <InlineFormLabel width={wide ? 12 : 8} className={labelStyle} tooltip={tooltip}>
         {label}
       </InlineFormLabel>
       <div style={switchContainerStyle}>
-        <GrafanaSwitch
-          disabled={disabled}
-          className="gf-form"
-          value={value}
-          onChange={(e) => onChange(e.currentTarget.checked)}
-        />
+        <GrafanaSwitch disabled={disabled} value={value} onChange={(e) => onChange(e.currentTarget.checked)} />
       </div>
     </div>
   );
diff --git a/src/components/queryBuilder/TraceIdInput.tsx b/src/components/queryBuilder/TraceIdInput.tsx
index 24a27834..16751b68 100644
--- a/src/components/queryBuilder/TraceIdInput.tsx
+++ b/src/components/queryBuilder/TraceIdInput.tsx
@@ -19,7 +19,7 @@ const TraceIdInput = (props: TraceIdInputProps) => {
   }, [traceId]);
 
   return (
-    <div className="gf-form">
+    <div style={{ display: 'flex', marginBottom: '4px' }}>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/views/LogsQueryBuilder.tsx b/src/components/queryBuilder/views/LogsQueryBuilder.tsx
index 9ba099c9..860cb3e7 100644
--- a/src/components/queryBuilder/views/LogsQueryBuilder.tsx
+++ b/src/components/queryBuilder/views/LogsQueryBuilder.tsx
@@ -150,61 +150,61 @@ export const LogsQueryBuilder = (props: LogsQueryBuilderProps) => {
         selectedColumns={builderState.selectedColumns}
         onSelectedColumnsChange={onOptionChange('selectedColumns')}
       />
-      <div className="gf-form">
-        <ColumnSelect
-          disabled={builderState.otelEnabled}
-          allColumns={allColumns}
-          selectedColumn={builderState.timeColumn}
-          invalid={!builderState.timeColumn}
-          onColumnChange={onOptionChange('timeColumn')}
-          columnFilterFn={columnFilterDateTime}
-          columnHint={ColumnHint.Time}
-          label={labels.logTimeColumn.label}
-          tooltip={labels.logTimeColumn.tooltip}
-        />
-        <ColumnSelect
-          disabled={builderState.otelEnabled}
-          allColumns={allColumns}
-          selectedColumn={builderState.logLevelColumn}
-          invalid={!builderState.logLevelColumn}
-          onColumnChange={onOptionChange('logLevelColumn')}
-          columnFilterFn={columnFilterString}
-          columnHint={ColumnHint.LogLevel}
-          label={labels.logLevelColumn.label}
-          tooltip={labels.logLevelColumn.tooltip}
-          inline
-        />
-      </div>
-      <div className="gf-form">
-        <ColumnSelect
-          disabled={builderState.otelEnabled}
-          allColumns={allColumns}
-          selectedColumn={builderState.messageColumn}
-          invalid={!builderState.messageColumn}
-          onColumnChange={onOptionChange('messageColumn')}
-          columnFilterFn={columnFilterString}
-          columnHint={ColumnHint.LogMessage}
-          label={labels.logMessageColumn.label}
-          tooltip={labels.logMessageColumn.tooltip}
-        />
-        <ColumnSelect
-          disabled={builderState.otelEnabled}
-          allColumns={allColumns}
-          selectedColumn={builderState.labelsColumn}
-          invalid={!builderState.labelsColumn}
-          onColumnChange={onOptionChange('labelsColumn')}
-          columnHint={ColumnHint.LogLabels}
-          label={labels.logLabelsColumn.label}
-          tooltip={labels.logLabelsColumn.tooltip}
-          inline
-        />
-        {/* <Switch
-          value={builderState.liveView}
-          onChange={onOptionChange('liveView')}
-          label={labels.liveView.label}
-          tooltip={labels.liveView.tooltip}
-          inline
-        /> */}
+      <div style={{ display: 'flex' }}>
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <ColumnSelect
+            disabled={builderState.otelEnabled}
+            allColumns={allColumns}
+            selectedColumn={builderState.timeColumn}
+            invalid={!builderState.timeColumn}
+            onColumnChange={onOptionChange('timeColumn')}
+            columnFilterFn={columnFilterDateTime}
+            columnHint={ColumnHint.Time}
+            label={labels.logTimeColumn.label}
+            tooltip={labels.logTimeColumn.tooltip}
+          />
+          <ColumnSelect
+            disabled={builderState.otelEnabled}
+            allColumns={allColumns}
+            selectedColumn={builderState.logLevelColumn}
+            invalid={!builderState.logLevelColumn}
+            onColumnChange={onOptionChange('logLevelColumn')}
+            columnFilterFn={columnFilterString}
+            columnHint={ColumnHint.LogLevel}
+            label={labels.logLevelColumn.label}
+            tooltip={labels.logLevelColumn.tooltip}
+          />
+        </div>
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <ColumnSelect
+            disabled={builderState.otelEnabled}
+            allColumns={allColumns}
+            selectedColumn={builderState.messageColumn}
+            invalid={!builderState.messageColumn}
+            onColumnChange={onOptionChange('messageColumn')}
+            columnFilterFn={columnFilterString}
+            columnHint={ColumnHint.LogMessage}
+            label={labels.logMessageColumn.label}
+            tooltip={labels.logMessageColumn.tooltip}
+          />
+          <ColumnSelect
+            disabled={builderState.otelEnabled}
+            allColumns={allColumns}
+            selectedColumn={builderState.labelsColumn}
+            invalid={!builderState.labelsColumn}
+            onColumnChange={onOptionChange('labelsColumn')}
+            columnHint={ColumnHint.LogLabels}
+            label={labels.logLabelsColumn.label}
+            tooltip={labels.logLabelsColumn.tooltip}
+          />
+          {/* <Switch
+            value={builderState.liveView}
+            onChange={onOptionChange('liveView')}
+            label={labels.liveView.label}
+            tooltip={labels.liveView.tooltip}
+            inline
+          /> */}
+        </div>
       </div>
       <OrderByEditor
         orderByOptions={getOrderByOptions(builderOptions, allColumns)}
@@ -240,12 +240,12 @@ const LogMessageLikeInput = (props: LogMessageLikeInputProps) => {
   }, [logMessageLike]);
 
   return (
-    <div className="gf-form">
+    <div style={{ display: 'flex', marginBottom: '4px' }}>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
       <Input
-        width={200}
+        // width={200}
         value={input}
         type="string"
         onChange={(e) => setInput(e.currentTarget.value)}
diff --git a/src/components/queryBuilder/views/TraceQueryBuilder.tsx b/src/components/queryBuilder/views/TraceQueryBuilder.tsx
index ed8d421d..6a0f26e9 100644
--- a/src/components/queryBuilder/views/TraceQueryBuilder.tsx
+++ b/src/components/queryBuilder/views/TraceQueryBuilder.tsx
@@ -180,7 +180,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
           onVersionChange={(v) => builderOptionsDispatch(setOtelVersion(v))}
           wide
         />
-        <div className="gf-form">
+        <div style={{ display: 'flex', marginBottom: '4px' }}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -202,10 +202,9 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             label={labels.columns.spanId.label}
             tooltip={labels.columns.spanId.tooltip}
             wide
-            inline
           />
         </div>
-        <div className="gf-form">
+        <div style={{ display: 'flex', marginBottom: '4px' }}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -227,10 +226,9 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             label={labels.columns.serviceName.label}
             tooltip={labels.columns.serviceName.tooltip}
             wide
-            inline
           />
         </div>
-        <div className="gf-form">
+        <div style={{ display: 'flex', marginBottom: '4px' }}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -252,10 +250,9 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             label={labels.columns.startTime.label}
             tooltip={labels.columns.startTime.tooltip}
             wide
-            inline
           />
         </div>
-        <div className="gf-form">
+        <div style={{ display: 'flex', marginBottom: '4px' }}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -271,10 +268,9 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             disabled={builderState.otelEnabled}
             unit={builderState.durationUnit}
             onChange={onOptionChange('durationUnit')}
-            inline
           />
         </div>
-        <div className="gf-form">
+        <div style={{ display: 'flex', marginBottom: '4px' }}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -296,10 +292,9 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             label={labels.columns.serviceTags.label}
             tooltip={labels.columns.serviceTags.tooltip}
             wide
-            inline
           />
         </div>
-        <div className="gf-form">
+        <div style={{ display: 'flex', marginBottom: '4px' }}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -321,10 +316,9 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             label={labels.columns.statusCode.label}
             tooltip={labels.columns.statusCode.tooltip}
             wide
-            inline
           />
         </div>
-        <div className="gf-form">
+        <div style={{ display: 'flex', marginBottom: '4px' }}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -346,10 +340,9 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             label={labels.columns.state.label}
             tooltip={labels.columns.state.tooltip}
             wide
-            inline
           />
         </div>
-        <div className="gf-form">
+        <div style={{ display: 'flex', marginBottom: '4px' }}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -371,10 +364,9 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             label={labels.columns.instrumentationLibraryVersion.label}
             tooltip={labels.columns.instrumentationLibraryVersion.tooltip}
             wide
-            inline
           />
         </div>
-        <div className="gf-form">
+        <div>
           <Switch
             disabled={builderState.otelEnabled}
             label={labels.columns.flattenNested.label}
@@ -384,7 +376,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             wide
           />
         </div>
-        <div className="gf-form">
+        <div>
           <LabeledInput
             disabled={builderState.otelEnabled}
             label={labels.columns.eventsPrefix.label}
@@ -393,7 +385,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             onChange={onOptionChange('traceEventsColumnPrefix')}
           />
         </div>
-        <div className="gf-form">
+        <div>
           <LabeledInput
             disabled={builderState.otelEnabled}
             label={labels.columns.linksPrefix.label}
diff --git a/src/labels.ts b/src/labels.ts
index f422e091..e3370ce9 100644
--- a/src/labels.ts
+++ b/src/labels.ts
@@ -157,7 +157,7 @@ export default {
         },
         validateSql: {
           label: 'Validate SQL',
-          tooltip: 'Validate SQL in the editor.',
+          tooltip: 'Validate SQL in the editor',
         },
       },
       TracesConfig: {
diff --git a/src/module.ts b/src/module.ts
index 319dc276..394dd2fb 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -12,7 +12,7 @@ import clickhouseVersion from '../package.json';
 
 // ConfigEditorV2 is the new design for the Clickhouse configuration page
 const configEditor = config.featureToggles['newClickhouseConfigPageDesign' as keyof FeatureToggles]
-  ? ConfigEditorV2
+  ? ConfigEditorV1
   : ConfigEditorV1;
 
 export const plugin = new DataSourcePlugin<Datasource, CHQuery, CHConfig>(Datasource)
diff --git a/src/views/CHConfigEditor.tsx b/src/views/CHConfigEditor.tsx
index 015743ca..e587b933 100644
--- a/src/views/CHConfigEditor.tsx
+++ b/src/views/CHConfigEditor.tsx
@@ -284,7 +284,6 @@ export const ConfigEditor: React.FC<ConfigEditorProps> = (props) => {
         <Field label={labels.secure.label} description={labels.secure.tooltip}>
           <Switch
             id="secure"
-            className="gf-form"
             value={jsonData.secure || false}
             onChange={(e) => {
               trackingV1.trackClickhouseConfigV1SecureConnectionToggleClicked({
@@ -326,7 +325,6 @@ export const ConfigEditor: React.FC<ConfigEditorProps> = (props) => {
       <ConfigSection title="TLS / SSL Settings">
         <Field label={labels.tlsSkipVerify.label} description={labels.tlsSkipVerify.tooltip}>
           <Switch
-            className="gf-form"
             value={jsonData.tlsSkipVerify || false}
             onChange={(e) => {
               trackingV1.trackClickhouseConfigV1SkipTLSVerifyToggleClicked({
@@ -338,7 +336,6 @@ export const ConfigEditor: React.FC<ConfigEditorProps> = (props) => {
         </Field>
         <Field label={labels.tlsClientAuth.label} description={labels.tlsClientAuth.tooltip}>
           <Switch
-            className="gf-form"
             value={jsonData.tlsAuth || false}
             onChange={(e) => {
               trackingV1.trackClickhouseConfigV1TLSClientAuthToggleClicked({
@@ -350,7 +347,6 @@ export const ConfigEditor: React.FC<ConfigEditorProps> = (props) => {
         </Field>
         <Field label={labels.tlsAuthWithCACert.label} description={labels.tlsAuthWithCACert.tooltip}>
           <Switch
-            className="gf-form"
             value={jsonData.tlsAuthWithCACert || false}
             onChange={(e) => {
               trackingV1.trackClickhouseConfigV1WithCACertToggleClicked({ caCertToggle: e.currentTarget.checked });
@@ -613,7 +609,6 @@ export const ConfigEditor: React.FC<ConfigEditorProps> = (props) => {
         <Divider />
         <Field label={labels.enableRowLimit.label} description={labels.enableRowLimit.tooltip}>
           <Switch
-            className="gf-form"
             value={jsonData.enableRowLimit || false}
             data-testid={labels.enableRowLimit.testid}
             onChange={(e) => {
@@ -625,7 +620,6 @@ export const ConfigEditor: React.FC<ConfigEditorProps> = (props) => {
         {config.secureSocksDSProxyEnabled && versionGte(config.buildInfo.version, '10.0.0') && (
           <Field label={labels.secureSocksProxy.label} description={labels.secureSocksProxy.tooltip}>
             <Switch
-              className="gf-form"
               value={jsonData.enableSecureSocksProxy || false}
               onChange={(e) => onSwitchToggle('enableSecureSocksProxy', e.currentTarget.checked)}
             />
diff --git a/src/views/CHQueryEditor.tsx b/src/views/CHQueryEditor.tsx
index f75d38f2..675ce3b6 100644
--- a/src/views/CHQueryEditor.tsx
+++ b/src/views/CHQueryEditor.tsx
@@ -25,7 +25,7 @@ export const CHQueryEditor = (props: CHQueryEditorProps) => {
 
   return (
     <>
-      <div className={'gf-form ' + styles.QueryEditor.queryType}>
+      <div className={styles.QueryEditor.queryType} style={{ display: 'flex' }}>
         <EditorTypeSwitcher {...props} query={query} datasource={datasource} />
         <Button onClick={() => onRunQuery()}>Run Query</Button>
       </div>
diff --git a/src/views/config-v2/AdditionalSettingsSection.tsx b/src/views/config-v2/AdditionalSettingsSection.tsx
index 3a36b98e..60bd5230 100644
--- a/src/views/config-v2/AdditionalSettingsSection.tsx
+++ b/src/views/config-v2/AdditionalSettingsSection.tsx
@@ -106,6 +106,19 @@ export const AdditionalSettingsSection = (props: Props) => {
     });
   };
 
+  const onSwitchToggle = (
+    key: keyof Pick<CHConfig, 'secure' | 'validateSql' | 'enableSecureSocksProxy' | 'forwardGrafanaHeaders'>,
+    value: boolean
+  ) => {
+    onOptionsChange({
+      ...options,
+      jsonData: {
+        ...options.jsonData,
+        [key]: value,
+      },
+    });
+  };
+
   return (
     <Box
       borderStyle="solid"
@@ -166,7 +179,7 @@ export const AdditionalSettingsSection = (props: Props) => {
           }}
           onValidateSqlChange={(e) => {
             trackClickhouseConfigV2QuerySettings({ validateSql: e.currentTarget.checked });
-            onUpdateDatasourceJsonDataOption(props, 'validateSql')(e);
+            onSwitchToggle('validateSql', e.currentTarget.checked);
           }}
         />
         <Divider />
diff --git a/src/views/config-v2/constants.ts b/src/views/config-v2/constants.ts
index b1bebb59..a82f52ff 100644
--- a/src/views/config-v2/constants.ts
+++ b/src/views/config-v2/constants.ts
@@ -11,7 +11,7 @@ export const CONFIG_SECTION_HEADERS = [
   { label: 'Server and encryption', id: 'server', isOpen: true, isOptional: false },
   { label: 'Database credentials', id: 'credentials', isOpen: true, isOptional: false },
   { label: 'TLS/SSL settings', id: 'tls', isOpen: false, isOptional: true },
-  { label: 'Private data source connect', id: 'additional', isOpen: false, isOptional: true },
+  { label: 'Additional settings', id: 'additional', isOpen: false, isOptional: true },
   { label: 'Save & test', id: `${selectors.pages.DataSource.saveAndTest}`, isOpen: undefined, isOptional: null },
 ];
 

From 3f800332fa4f683ac4f4a3ed18ab3adc4aa9cb12 Mon Sep 17 00:00:00 2001
From: alyssabull <alyssabull@gmail.com>
Date: Tue, 21 Oct 2025 15:13:12 -0600
Subject: [PATCH 07/14] Update styles

---
 src/components/configEditor/LabeledInput.tsx    |  3 ++-
 src/components/configEditor/LogsConfig.tsx      |  3 ++-
 src/components/queryBuilder/AggregateEditor.tsx |  4 ++--
 src/components/queryBuilder/ColumnSelect.tsx    |  2 +-
 src/components/queryBuilder/ColumnsEditor.tsx   |  2 +-
 .../queryBuilder/DatabaseTableSelect.tsx        |  2 +-
 .../queryBuilder/DurationUnitSelect.tsx         |  2 +-
 src/components/queryBuilder/FilterEditor.tsx    |  8 ++++----
 src/components/queryBuilder/LimitEditor.tsx     |  3 ++-
 src/components/queryBuilder/ModeSwitch.tsx      |  3 ++-
 src/components/queryBuilder/OrderByEditor.tsx   |  4 ++--
 .../queryBuilder/OtelVersionSelect.tsx          |  3 ++-
 src/components/queryBuilder/SqlPreview.tsx      |  3 ++-
 src/components/queryBuilder/Switch.tsx          |  2 +-
 src/components/queryBuilder/TraceIdInput.tsx    |  3 ++-
 .../queryBuilder/views/LogsQueryBuilder.tsx     |  8 ++++----
 .../queryBuilder/views/TraceQueryBuilder.tsx    | 17 +++++++++--------
 src/styles.ts                                   | 11 +++++++++++
 src/views/CHQueryEditor.tsx                     |  2 +-
 19 files changed, 52 insertions(+), 33 deletions(-)

diff --git a/src/components/configEditor/LabeledInput.tsx b/src/components/configEditor/LabeledInput.tsx
index 3025d3a8..33bc8281 100644
--- a/src/components/configEditor/LabeledInput.tsx
+++ b/src/components/configEditor/LabeledInput.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Input, InlineFormLabel } from '@grafana/ui';
+import { styles } from 'styles';
 
 interface LabeledInputProps {
   label: string;
@@ -14,7 +15,7 @@ export function LabeledInput(props: LabeledInputProps) {
   const { label, tooltip, placeholder, disabled, value, onChange } = props;
 
   return (
-    <div style={{ display: 'flex', marginBottom: '4px' }}>
+    <div className={styles.Common.flexContainer}>
       <InlineFormLabel width={12} className="query-keyword" tooltip={tooltip || label}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/configEditor/LogsConfig.tsx b/src/components/configEditor/LogsConfig.tsx
index 5b152a1e..996e2913 100644
--- a/src/components/configEditor/LogsConfig.tsx
+++ b/src/components/configEditor/LogsConfig.tsx
@@ -9,6 +9,7 @@ import { CHLogsConfig } from 'types/config';
 import allLabels from 'labels';
 import { columnLabelToPlaceholder } from 'data/utils';
 import { Switch } from 'components/queryBuilder/Switch';
+import { styles } from 'styles';
 
 interface LogsConfigProps {
   logsConfig?: CHLogsConfig;
@@ -125,7 +126,7 @@ export const LogsConfig = (props: LogsConfigProps) => {
           onChange={onSelectContextColumnsChange}
           wide
         />
-        <div style={{ display: 'flex' }}>
+        <div className={styles.Common.flex}>
           <InlineFormLabel width={12} className="query-keyword" tooltip={labels.contextColumns.columns.tooltip}>
             {labels.contextColumns.columns.label}
           </InlineFormLabel>
diff --git a/src/components/queryBuilder/AggregateEditor.tsx b/src/components/queryBuilder/AggregateEditor.tsx
index 4ac4e95d..76889ced 100644
--- a/src/components/queryBuilder/AggregateEditor.tsx
+++ b/src/components/queryBuilder/AggregateEditor.tsx
@@ -133,7 +133,7 @@ export const AggregateEditor = (props: AggregateEditorProps) => {
         const key = `${index}-${aggregate.column}-${aggregate.aggregateType}-${aggregate.alias}`;
         return (
           <div
-            style={{ display: 'flex' }}
+            className={styles.Common.flex}
             key={key}
             data-testid={selectors.components.QueryBuilder.AggregateEditor.itemWrapper}
           >
@@ -149,7 +149,7 @@ export const AggregateEditor = (props: AggregateEditorProps) => {
         );
       })}
 
-      <div style={{ display: 'flex', marginBottom: '4px' }}>
+      <div className={styles.Common.flexContainer}>
         {aggregates.length === 0 ? fieldLabel : fieldSpacer}
         <Button
           data-testid={selectors.components.QueryBuilder.AggregateEditor.addButton}
diff --git a/src/components/queryBuilder/ColumnSelect.tsx b/src/components/queryBuilder/ColumnSelect.tsx
index cbdc901b..0343d330 100644
--- a/src/components/queryBuilder/ColumnSelect.tsx
+++ b/src/components/queryBuilder/ColumnSelect.tsx
@@ -65,7 +65,7 @@ export const ColumnSelect = (props: ColumnSelectProps) => {
   const labelStyle = 'query-keyword ' + (inline ? styles.QueryEditor.inlineField : '');
 
   return (
-    <div style={{ display: 'flex', marginBottom: '4px' }}>
+    <div className={styles.Common.flexContainer}>
       <InlineFormLabel width={wide ? 12 : 8} className={labelStyle} tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/ColumnsEditor.tsx b/src/components/queryBuilder/ColumnsEditor.tsx
index 673fa704..a8d38331 100644
--- a/src/components/queryBuilder/ColumnsEditor.tsx
+++ b/src/components/queryBuilder/ColumnsEditor.tsx
@@ -79,7 +79,7 @@ export const ColumnsEditor = (props: ColumnsEditorProps) => {
   };
 
   return (
-    <div style={{ display: 'flex', marginBottom: '4px' }}>
+    <div className={styles.Common.flexContainer}>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/DatabaseTableSelect.tsx b/src/components/queryBuilder/DatabaseTableSelect.tsx
index 346106b1..ad35413b 100644
--- a/src/components/queryBuilder/DatabaseTableSelect.tsx
+++ b/src/components/queryBuilder/DatabaseTableSelect.tsx
@@ -106,7 +106,7 @@ export const DatabaseTableSelect = (props: DatabaseTableSelectProps) => {
   const { datasource, database, onDatabaseChange, table, onTableChange } = props;
 
   return (
-    <div style={{ display: 'flex', marginBottom: '4px' }}>
+    <div className={styles.Common.flexContainer}>
       <DatabaseSelect datasource={datasource} database={database} onDatabaseChange={onDatabaseChange} />
       <TableSelect datasource={datasource} database={database} table={table} onTableChange={onTableChange} />
     </div>
diff --git a/src/components/queryBuilder/DurationUnitSelect.tsx b/src/components/queryBuilder/DurationUnitSelect.tsx
index 37d72525..44ea74a1 100644
--- a/src/components/queryBuilder/DurationUnitSelect.tsx
+++ b/src/components/queryBuilder/DurationUnitSelect.tsx
@@ -23,7 +23,7 @@ export const DurationUnitSelect = (props: DurationUnitSelectProps) => {
   const { label, tooltip } = allLabels.components.TraceQueryBuilder.columns.durationUnit;
 
   return (
-    <div style={{ display: 'flex', marginBottom: '4px' }}>
+    <div className={styles.Common.flexContainer}>
       <InlineFormLabel
         width={12}
         className={`query-keyword ${inline ? styles.QueryEditor.inlineField : ''}`}
diff --git a/src/components/queryBuilder/FilterEditor.tsx b/src/components/queryBuilder/FilterEditor.tsx
index 9d205eaf..f0377789 100644
--- a/src/components/queryBuilder/FilterEditor.tsx
+++ b/src/components/queryBuilder/FilterEditor.tsx
@@ -359,7 +359,7 @@ export const FilterEditor = (props: {
 
   return (
     <div>
-      <div style={{ display: 'flex' }}>
+      <div className={styles.Common.flex}>
         {index !== 0 && (
           <RadioButtonGroup
             options={conditions}
@@ -439,7 +439,7 @@ export const FiltersEditor = (props: {
   return (
     <>
       {filters.length === 0 && (
-        <div style={{ display: 'flex', marginBottom: '4px' }}>
+        <div className={styles.Common.flexContainer}>
           <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
             {label}
           </InlineFormLabel>
@@ -457,7 +457,7 @@ export const FiltersEditor = (props: {
       )}
       {filters.map((filter, index) => {
         return (
-          <div style={{ display: 'flex', marginBottom: '4px' }} key={index}>
+          <div className={styles.Common.flexContainer} key={index}>
             {index === 0 ? (
               <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
                 {label}
@@ -479,7 +479,7 @@ export const FiltersEditor = (props: {
         );
       })}
       {filters.length !== 0 && (
-        <div style={{ display: 'flex', marginBottom: '4px' }}>
+        <div className={styles.Common.flexContainer}>
           <div className={`width-8 ${styles.Common.firstLabel}`}></div>
           <Button
             data-testid="query-builder-filters-inline-add-button"
diff --git a/src/components/queryBuilder/LimitEditor.tsx b/src/components/queryBuilder/LimitEditor.tsx
index 746dd1a2..0329a6ac 100644
--- a/src/components/queryBuilder/LimitEditor.tsx
+++ b/src/components/queryBuilder/LimitEditor.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { InlineFormLabel, Input } from '@grafana/ui';
 import labels from 'labels';
 import { selectors } from 'selectors';
+import { styles } from 'styles';
 
 interface LimitEditorProps {
   limit: number;
@@ -13,7 +14,7 @@ export const LimitEditor = (props: LimitEditorProps) => {
   const { label, tooltip } = labels.components.LimitEditor;
 
   return (
-    <div style={{ display: 'flex', marginBottom: '4px' }}>
+    <div className={styles.Common.flexContainer}>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/ModeSwitch.tsx b/src/components/queryBuilder/ModeSwitch.tsx
index 1665cc0c..59e75fe8 100644
--- a/src/components/queryBuilder/ModeSwitch.tsx
+++ b/src/components/queryBuilder/ModeSwitch.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { RadioButtonGroup, InlineFormLabel } from '@grafana/ui';
+import { styles } from 'styles';
 
 export interface ModeSwitchProps {
   labelA: string;
@@ -28,7 +29,7 @@ export const ModeSwitch = (props: ModeSwitchProps) => {
   ];
 
   return (
-    <div style={{ display: 'flex', marginBottom: '4px' }}>
+    <div className={styles.Common.flexContainer}>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/OrderByEditor.tsx b/src/components/queryBuilder/OrderByEditor.tsx
index 5fb8adb0..c2b3dade 100644
--- a/src/components/queryBuilder/OrderByEditor.tsx
+++ b/src/components/queryBuilder/OrderByEditor.tsx
@@ -100,7 +100,7 @@ export const OrderByEditor = (props: OrderByEditorProps) => {
       {orderBy.map((orderByItem, index) => {
         const key = `${index}-${orderByItem.name}-${orderByItem.hint || ''}-${orderByItem.dir}`;
         return (
-          <div style={{ display: 'flex' }} key={key} data-testid="query-builder-orderby-item-wrapper">
+          <div className={styles.Common.flex} key={key} data-testid="query-builder-orderby-item-wrapper">
             {index === 0 ? fieldLabel : fieldSpacer}
             <OrderByItem
               columnOptions={orderByOptions}
@@ -113,7 +113,7 @@ export const OrderByEditor = (props: OrderByEditorProps) => {
         );
       })}
 
-      <div style={{ display: 'flex', marginBottom: '4px' }}>
+      <div className={styles.Common.flexContainer}>
         {orderBy.length === 0 ? fieldLabel : fieldSpacer}
         <Button
           data-testid="query-builder-orderby-add-button"
diff --git a/src/components/queryBuilder/OtelVersionSelect.tsx b/src/components/queryBuilder/OtelVersionSelect.tsx
index b94d76b5..97e8ee56 100644
--- a/src/components/queryBuilder/OtelVersionSelect.tsx
+++ b/src/components/queryBuilder/OtelVersionSelect.tsx
@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { InlineFormLabel, Combobox, Switch as GrafanaSwitch, useTheme, ComboboxOption } from '@grafana/ui';
 import otel from 'otel';
 import selectors from 'labels';
+import { styles } from 'styles';
 
 interface OtelVersionSelectProps {
   enabled: boolean;
@@ -36,7 +37,7 @@ export const OtelVersionSelect = (props: OtelVersionSelectProps) => {
   };
 
   return (
-    <div style={{ display: 'flex' }}>
+    <div className={styles.Common.flex}>
       <InlineFormLabel width={wide ? 12 : 8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/SqlPreview.tsx b/src/components/queryBuilder/SqlPreview.tsx
index b6ad734e..70ee00a6 100644
--- a/src/components/queryBuilder/SqlPreview.tsx
+++ b/src/components/queryBuilder/SqlPreview.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { InlineFormLabel } from '@grafana/ui';
 import labels from 'labels';
+import { styles } from 'styles';
 
 interface SqlPreviewProps {
   sql: string;
@@ -11,7 +12,7 @@ export const SqlPreview = (props: SqlPreviewProps) => {
   const { label, tooltip } = labels.components.SqlPreview;
 
   return (
-    <div style={{ display: 'flex' }}>
+    <div className={styles.Common.flex}>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/Switch.tsx b/src/components/queryBuilder/Switch.tsx
index 22b439f1..5c7b1e9d 100644
--- a/src/components/queryBuilder/Switch.tsx
+++ b/src/components/queryBuilder/Switch.tsx
@@ -26,7 +26,7 @@ export const Switch = (props: SwitchProps) => {
   const labelStyle = 'query-keyword ' + (inline ? styles.QueryEditor.inlineField : '');
 
   return (
-    <div style={{ display: 'flex', marginBottom: '4px' }}>
+    <div className={styles.Common.flexContainer}>
       <InlineFormLabel width={wide ? 12 : 8} className={labelStyle} tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/TraceIdInput.tsx b/src/components/queryBuilder/TraceIdInput.tsx
index 16751b68..48c4376f 100644
--- a/src/components/queryBuilder/TraceIdInput.tsx
+++ b/src/components/queryBuilder/TraceIdInput.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import allLabels from 'labels';
 import { InlineFormLabel, Input } from '@grafana/ui';
 import { selectors } from 'selectors';
+import { styles } from 'styles';
 
 interface TraceIdInputProps {
   traceId: string;
@@ -19,7 +20,7 @@ const TraceIdInput = (props: TraceIdInputProps) => {
   }, [traceId]);
 
   return (
-    <div style={{ display: 'flex', marginBottom: '4px' }}>
+    <div className={styles.Common.flexContainer}>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/views/LogsQueryBuilder.tsx b/src/components/queryBuilder/views/LogsQueryBuilder.tsx
index 860cb3e7..f9573217 100644
--- a/src/components/queryBuilder/views/LogsQueryBuilder.tsx
+++ b/src/components/queryBuilder/views/LogsQueryBuilder.tsx
@@ -150,8 +150,8 @@ export const LogsQueryBuilder = (props: LogsQueryBuilderProps) => {
         selectedColumns={builderState.selectedColumns}
         onSelectedColumnsChange={onOptionChange('selectedColumns')}
       />
-      <div style={{ display: 'flex' }}>
-        <div style={{ display: 'flex', flexDirection: 'column' }}>
+      <div className={styles.Common.flex}>
+        <div className={styles.Common.flexColumn}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -175,7 +175,7 @@ export const LogsQueryBuilder = (props: LogsQueryBuilderProps) => {
             tooltip={labels.logLevelColumn.tooltip}
           />
         </div>
-        <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <div className={styles.Common.flexColumn}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -240,7 +240,7 @@ const LogMessageLikeInput = (props: LogMessageLikeInputProps) => {
   }, [logMessageLike]);
 
   return (
-    <div style={{ display: 'flex', marginBottom: '4px' }}>
+    <div className={styles.Common.flexContainer}>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/views/TraceQueryBuilder.tsx b/src/components/queryBuilder/views/TraceQueryBuilder.tsx
index 6a0f26e9..a8eadebe 100644
--- a/src/components/queryBuilder/views/TraceQueryBuilder.tsx
+++ b/src/components/queryBuilder/views/TraceQueryBuilder.tsx
@@ -19,6 +19,7 @@ import { OrderByEditor, getOrderByOptions } from '../OrderByEditor';
 import { LimitEditor } from '../LimitEditor';
 import { LabeledInput } from 'components/configEditor/LabeledInput';
 import { Switch } from '../Switch';
+import { styles } from 'styles';
 
 interface TraceQueryBuilderProps {
   datasource: Datasource;
@@ -180,7 +181,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
           onVersionChange={(v) => builderOptionsDispatch(setOtelVersion(v))}
           wide
         />
-        <div style={{ display: 'flex', marginBottom: '4px' }}>
+        <div className={styles.Common.flexContainer}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -204,7 +205,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             wide
           />
         </div>
-        <div style={{ display: 'flex', marginBottom: '4px' }}>
+        <div className={styles.Common.flexContainer}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -228,7 +229,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             wide
           />
         </div>
-        <div style={{ display: 'flex', marginBottom: '4px' }}>
+        <div className={styles.Common.flexContainer}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -252,7 +253,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             wide
           />
         </div>
-        <div style={{ display: 'flex', marginBottom: '4px' }}>
+        <div className={styles.Common.flexContainer}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -270,7 +271,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             onChange={onOptionChange('durationUnit')}
           />
         </div>
-        <div style={{ display: 'flex', marginBottom: '4px' }}>
+        <div className={styles.Common.flexContainer}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -294,7 +295,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             wide
           />
         </div>
-        <div style={{ display: 'flex', marginBottom: '4px' }}>
+        <div className={styles.Common.flexContainer}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -318,7 +319,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             wide
           />
         </div>
-        <div style={{ display: 'flex', marginBottom: '4px' }}>
+        <div className={styles.Common.flexContainer}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -342,7 +343,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             wide
           />
         </div>
-        <div style={{ display: 'flex', marginBottom: '4px' }}>
+        <div className={styles.Common.flexContainer}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
diff --git a/src/styles.ts b/src/styles.ts
index 9d7fe2a6..f855cbe0 100644
--- a/src/styles.ts
+++ b/src/styles.ts
@@ -29,6 +29,17 @@ export const styles = {
       z-index: 100;
       color: gray;
     `,
+    flexContainer: css`
+      display: 'flex', 
+      marginBottom: '4px'
+    `,
+    flex: css`
+      display: flex;
+    `,
+    flexColumn: css`
+      display: flex;
+      flex-direction: column;
+    `,
   },
   ConfigEditor: {
     container: css`
diff --git a/src/views/CHQueryEditor.tsx b/src/views/CHQueryEditor.tsx
index 675ce3b6..126b6363 100644
--- a/src/views/CHQueryEditor.tsx
+++ b/src/views/CHQueryEditor.tsx
@@ -25,7 +25,7 @@ export const CHQueryEditor = (props: CHQueryEditorProps) => {
 
   return (
     <>
-      <div className={styles.QueryEditor.queryType} style={{ display: 'flex' }}>
+      <div className={`${styles.QueryEditor.queryType} ${styles.Common.flex}`}>
         <EditorTypeSwitcher {...props} query={query} datasource={datasource} />
         <Button onClick={() => onRunQuery()}>Run Query</Button>
       </div>

From 371df9cf532da88b3bbed3c382013941675afb8b Mon Sep 17 00:00:00 2001
From: alyssabull <alyssabull@gmail.com>
Date: Tue, 21 Oct 2025 15:21:31 -0600
Subject: [PATCH 08/14] Move config bug fixes to separate PR

---
 src/views/config-v2/AdditionalSettingsSection.tsx | 15 +--------------
 src/views/config-v2/CHConfigEditor.tsx            |  2 +-
 2 files changed, 2 insertions(+), 15 deletions(-)

diff --git a/src/views/config-v2/AdditionalSettingsSection.tsx b/src/views/config-v2/AdditionalSettingsSection.tsx
index 60bd5230..3a36b98e 100644
--- a/src/views/config-v2/AdditionalSettingsSection.tsx
+++ b/src/views/config-v2/AdditionalSettingsSection.tsx
@@ -106,19 +106,6 @@ export const AdditionalSettingsSection = (props: Props) => {
     });
   };
 
-  const onSwitchToggle = (
-    key: keyof Pick<CHConfig, 'secure' | 'validateSql' | 'enableSecureSocksProxy' | 'forwardGrafanaHeaders'>,
-    value: boolean
-  ) => {
-    onOptionsChange({
-      ...options,
-      jsonData: {
-        ...options.jsonData,
-        [key]: value,
-      },
-    });
-  };
-
   return (
     <Box
       borderStyle="solid"
@@ -179,7 +166,7 @@ export const AdditionalSettingsSection = (props: Props) => {
           }}
           onValidateSqlChange={(e) => {
             trackClickhouseConfigV2QuerySettings({ validateSql: e.currentTarget.checked });
-            onSwitchToggle('validateSql', e.currentTarget.checked);
+            onUpdateDatasourceJsonDataOption(props, 'validateSql')(e);
           }}
         />
         <Divider />
diff --git a/src/views/config-v2/CHConfigEditor.tsx b/src/views/config-v2/CHConfigEditor.tsx
index 19e661ca..3a3ebfd3 100644
--- a/src/views/config-v2/CHConfigEditor.tsx
+++ b/src/views/config-v2/CHConfigEditor.tsx
@@ -71,7 +71,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     top: '100px',
     alignSelf: 'flex-start',
     maxHeight: 'calc(100vh - 100px)',
-    overflow: 'hidden',
+    overflowY: 'auto',
   }),
   requiredFields: css({
     marginBottom: theme.spacing(2),

From 062f71372e213e35c43b3da6cab1dc8be1b0408b Mon Sep 17 00:00:00 2001
From: alyssabull <alyssabull@gmail.com>
Date: Tue, 21 Oct 2025 15:25:05 -0600
Subject: [PATCH 09/14] Fix module.ts bug

---
 src/module.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/module.ts b/src/module.ts
index 394dd2fb..319dc276 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -12,7 +12,7 @@ import clickhouseVersion from '../package.json';
 
 // ConfigEditorV2 is the new design for the Clickhouse configuration page
 const configEditor = config.featureToggles['newClickhouseConfigPageDesign' as keyof FeatureToggles]
-  ? ConfigEditorV1
+  ? ConfigEditorV2
   : ConfigEditorV1;
 
 export const plugin = new DataSourcePlugin<Datasource, CHQuery, CHConfig>(Datasource)

From 336b382a5b5f092b9b465c188ce967608f77367f Mon Sep 17 00:00:00 2001
From: alyssabull <alyssabull@gmail.com>
Date: Tue, 21 Oct 2025 15:44:30 -0600
Subject: [PATCH 10/14] Fix toggle bug

---
 src/views/config-v2/TLSSSLSettingsSection.tsx | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/views/config-v2/TLSSSLSettingsSection.tsx b/src/views/config-v2/TLSSSLSettingsSection.tsx
index 493763e9..785e8833 100644
--- a/src/views/config-v2/TLSSSLSettingsSection.tsx
+++ b/src/views/config-v2/TLSSSLSettingsSection.tsx
@@ -1,4 +1,4 @@
-import { DataSourcePluginOptionsEditorProps, onUpdateDatasourceJsonDataOption } from '@grafana/data';
+import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
 import { Box, CollapsableSection, CertificationKey, Text, useStyles2, Checkbox, Stack, Badge } from '@grafana/ui';
 import React from 'react';
 import { CHConfig, CHSecureConfig } from 'types/config';
@@ -46,6 +46,19 @@ export const TLSSSLSettingsSection = (props: Props) => {
     });
   };
 
+  const onTLSSettingsChange = (
+    key: keyof Pick<CHConfig, 'tlsSkipVerify' | 'tlsAuth' | 'tlsAuthWithCACert'>,
+    value: boolean
+  ) => {
+    onOptionsChange({
+      ...options,
+      jsonData: {
+        ...options.jsonData,
+        [key]: value,
+      },
+    });
+  };
+
   return (
     <Box
       borderStyle="solid"
@@ -79,7 +92,7 @@ export const TLSSSLSettingsSection = (props: Props) => {
               value={jsonData.tlsSkipVerify || false}
               onChange={(e) => {
                 trackClickhouseConfigV2SkipTLSVerifyToggleClicked({ skipTlsVerifyToggle: e.currentTarget.checked });
-                onUpdateDatasourceJsonDataOption(props, 'tlsSkipVerify')(e);
+                onTLSSettingsChange('tlsSkipVerify', e.currentTarget.checked);
               }}
             />
             <Checkbox
@@ -88,7 +101,7 @@ export const TLSSSLSettingsSection = (props: Props) => {
               value={jsonData.tlsAuth || false}
               onChange={(e) => {
                 trackClickhouseConfigV2TLSClientAuthToggleClicked({ clientAuthToggle: e.currentTarget.checked });
-                onUpdateDatasourceJsonDataOption(props, 'tlsAuth')(e);
+                onTLSSettingsChange('tlsAuth', e.currentTarget.checked);
               }}
             />
             {jsonData.tlsAuth && (
@@ -116,7 +129,7 @@ export const TLSSSLSettingsSection = (props: Props) => {
               value={jsonData.tlsAuthWithCACert || false}
               onChange={(e) => {
                 trackClickhouseConfigV2WithCACertToggleClicked({ caCertToggle: e.currentTarget.checked });
-                onUpdateDatasourceJsonDataOption(props, 'tlsAuthWithCACert')(e);
+                onTLSSettingsChange('tlsAuthWithCACert', e.currentTarget.checked);
               }}
             />
             <div className={styles.certsSection}>

From 35bd14c656df761ed4413c82cc4a4552a78af462 Mon Sep 17 00:00:00 2001
From: alyssabull <alyssabull@gmail.com>
Date: Tue, 21 Oct 2025 20:43:42 -0600
Subject: [PATCH 11/14] Remove change from this PR

---
 src/views/config-v2/TLSSSLSettingsSection.tsx | 21 ++++---------------
 1 file changed, 4 insertions(+), 17 deletions(-)

diff --git a/src/views/config-v2/TLSSSLSettingsSection.tsx b/src/views/config-v2/TLSSSLSettingsSection.tsx
index 785e8833..493763e9 100644
--- a/src/views/config-v2/TLSSSLSettingsSection.tsx
+++ b/src/views/config-v2/TLSSSLSettingsSection.tsx
@@ -1,4 +1,4 @@
-import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
+import { DataSourcePluginOptionsEditorProps, onUpdateDatasourceJsonDataOption } from '@grafana/data';
 import { Box, CollapsableSection, CertificationKey, Text, useStyles2, Checkbox, Stack, Badge } from '@grafana/ui';
 import React from 'react';
 import { CHConfig, CHSecureConfig } from 'types/config';
@@ -46,19 +46,6 @@ export const TLSSSLSettingsSection = (props: Props) => {
     });
   };
 
-  const onTLSSettingsChange = (
-    key: keyof Pick<CHConfig, 'tlsSkipVerify' | 'tlsAuth' | 'tlsAuthWithCACert'>,
-    value: boolean
-  ) => {
-    onOptionsChange({
-      ...options,
-      jsonData: {
-        ...options.jsonData,
-        [key]: value,
-      },
-    });
-  };
-
   return (
     <Box
       borderStyle="solid"
@@ -92,7 +79,7 @@ export const TLSSSLSettingsSection = (props: Props) => {
               value={jsonData.tlsSkipVerify || false}
               onChange={(e) => {
                 trackClickhouseConfigV2SkipTLSVerifyToggleClicked({ skipTlsVerifyToggle: e.currentTarget.checked });
-                onTLSSettingsChange('tlsSkipVerify', e.currentTarget.checked);
+                onUpdateDatasourceJsonDataOption(props, 'tlsSkipVerify')(e);
               }}
             />
             <Checkbox
@@ -101,7 +88,7 @@ export const TLSSSLSettingsSection = (props: Props) => {
               value={jsonData.tlsAuth || false}
               onChange={(e) => {
                 trackClickhouseConfigV2TLSClientAuthToggleClicked({ clientAuthToggle: e.currentTarget.checked });
-                onTLSSettingsChange('tlsAuth', e.currentTarget.checked);
+                onUpdateDatasourceJsonDataOption(props, 'tlsAuth')(e);
               }}
             />
             {jsonData.tlsAuth && (
@@ -129,7 +116,7 @@ export const TLSSSLSettingsSection = (props: Props) => {
               value={jsonData.tlsAuthWithCACert || false}
               onChange={(e) => {
                 trackClickhouseConfigV2WithCACertToggleClicked({ caCertToggle: e.currentTarget.checked });
-                onTLSSettingsChange('tlsAuthWithCACert', e.currentTarget.checked);
+                onUpdateDatasourceJsonDataOption(props, 'tlsAuthWithCACert')(e);
               }}
             />
             <div className={styles.certsSection}>

From fef88a7c3fb71707bff826b9c7f8016b29c1b717 Mon Sep 17 00:00:00 2001
From: alyssabull <alyssabull@gmail.com>
Date: Wed, 22 Oct 2025 09:45:30 -0600
Subject: [PATCH 12/14] Update styles

---
 src/components/configEditor/LabeledInput.tsx  |   2 +-
 .../queryBuilder/DatabaseTableSelect.tsx      |   4 +-
 .../queryBuilder/EditorTypeSwitcher.tsx       |   3 +-
 src/components/queryBuilder/OrderByEditor.tsx |   1 -
 .../queryBuilder/views/TraceQueryBuilder.tsx  |  16 +--
 src/styles.ts                                 | 132 +++++++++---------
 6 files changed, 79 insertions(+), 79 deletions(-)

diff --git a/src/components/configEditor/LabeledInput.tsx b/src/components/configEditor/LabeledInput.tsx
index 33bc8281..a4b688b0 100644
--- a/src/components/configEditor/LabeledInput.tsx
+++ b/src/components/configEditor/LabeledInput.tsx
@@ -15,7 +15,7 @@ export function LabeledInput(props: LabeledInputProps) {
   const { label, tooltip, placeholder, disabled, value, onChange } = props;
 
   return (
-    <div className={styles.Common.flexContainer}>
+    <div className={styles.Common.flex}>
       <InlineFormLabel width={12} className="query-keyword" tooltip={tooltip || label}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/DatabaseTableSelect.tsx b/src/components/queryBuilder/DatabaseTableSelect.tsx
index ad35413b..c53aeed6 100644
--- a/src/components/queryBuilder/DatabaseTableSelect.tsx
+++ b/src/components/queryBuilder/DatabaseTableSelect.tsx
@@ -34,7 +34,7 @@ export const DatabaseSelect = (props: DatabaseSelectProps) => {
   }, [datasource, database, onDatabaseChange]);
 
   return (
-    <>
+    <div className={styles.Common.flex}>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
@@ -46,7 +46,7 @@ export const DatabaseSelect = (props: DatabaseSelectProps) => {
           createCustomValue={true}
         ></Combobox>
       </div>
-    </>
+    </div>
   );
 };
 
diff --git a/src/components/queryBuilder/EditorTypeSwitcher.tsx b/src/components/queryBuilder/EditorTypeSwitcher.tsx
index e6d51887..b7f509ba 100644
--- a/src/components/queryBuilder/EditorTypeSwitcher.tsx
+++ b/src/components/queryBuilder/EditorTypeSwitcher.tsx
@@ -8,6 +8,7 @@ import { EditorType, CHQuery, defaultCHBuilderQuery } from 'types/sql';
 import { QueryBuilderOptions } from 'types/queryBuilder';
 import { mapQueryTypeToGrafanaFormat } from 'data/utils';
 import { Datasource } from 'data/CHDatasource';
+import { styles } from 'styles';
 
 interface CHEditorTypeSwitcherProps {
   query: CHQuery;
@@ -85,7 +86,7 @@ export const EditorTypeSwitcher = (props: CHEditorTypeSwitcherProps) => {
     setCannotConvertModalState(false);
   };
   return (
-    <span>
+    <span className={styles.Common.flexContainer}>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/OrderByEditor.tsx b/src/components/queryBuilder/OrderByEditor.tsx
index c2b3dade..ebd00769 100644
--- a/src/components/queryBuilder/OrderByEditor.tsx
+++ b/src/components/queryBuilder/OrderByEditor.tsx
@@ -122,7 +122,6 @@ export const OrderByEditor = (props: OrderByEditorProps) => {
           size="sm"
           onClick={addOrderByItem}
           className={styles.Common.smallBtn}
-          style={{ margin: '4px 0 0 0' }}
         >
           {addLabel}
         </Button>
diff --git a/src/components/queryBuilder/views/TraceQueryBuilder.tsx b/src/components/queryBuilder/views/TraceQueryBuilder.tsx
index a8eadebe..efdc9ec0 100644
--- a/src/components/queryBuilder/views/TraceQueryBuilder.tsx
+++ b/src/components/queryBuilder/views/TraceQueryBuilder.tsx
@@ -181,7 +181,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
           onVersionChange={(v) => builderOptionsDispatch(setOtelVersion(v))}
           wide
         />
-        <div className={styles.Common.flexContainer}>
+        <div className={styles.Common.flex}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -205,7 +205,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             wide
           />
         </div>
-        <div className={styles.Common.flexContainer}>
+        <div className={styles.Common.flex}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -229,7 +229,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             wide
           />
         </div>
-        <div className={styles.Common.flexContainer}>
+        <div className={styles.Common.flex}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -253,7 +253,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             wide
           />
         </div>
-        <div className={styles.Common.flexContainer}>
+        <div className={styles.Common.flex}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -271,7 +271,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             onChange={onOptionChange('durationUnit')}
           />
         </div>
-        <div className={styles.Common.flexContainer}>
+        <div className={styles.Common.flex}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -295,7 +295,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             wide
           />
         </div>
-        <div className={styles.Common.flexContainer}>
+        <div className={styles.Common.flex}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -319,7 +319,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             wide
           />
         </div>
-        <div className={styles.Common.flexContainer}>
+        <div className={styles.Common.flex}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -343,7 +343,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             wide
           />
         </div>
-        <div className={styles.Common.flexContainer}>
+        <div className={styles.Common.flex}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
diff --git a/src/styles.ts b/src/styles.ts
index f855cbe0..1f580a01 100644
--- a/src/styles.ts
+++ b/src/styles.ts
@@ -2,78 +2,78 @@ import { css } from '@emotion/css';
 
 export const styles = {
   Common: {
-    check: css`
-      margin-top: 5px;
-    `,
-    wrapper: css`
-      position: relative;
-      width: 100%;
-    `,
-    smallBtn: css`
-      margin-top: 5px;
-      margin-inline: 5px;
-    `,
-    selectWrapper: css`
-      width: 100%;
-    `,
-    inlineSelect: css`
-      margin-right: 5px;
-    `,
-    firstLabel: css`
-      margin-right: 5px;
-    `,
-    expand: css`
-      position: absolute;
-      top: 2px;
-      left: 6px;
-      z-index: 100;
-      color: gray;
-    `,
-    flexContainer: css`
-      display: 'flex', 
-      marginBottom: '4px'
-    `,
-    flex: css`
-      display: flex;
-    `,
-    flexColumn: css`
-      display: flex;
-      flex-direction: column;
-    `,
+    check: css({
+      marginTop: '5px',
+    }),
+    wrapper: css({
+      position: 'relative',
+      width: '100%',
+    }),
+    smallBtn: css({
+      marginTop: '5px',
+      marginInline: '5px',
+    }),
+    selectWrapper: css({
+      width: '100%',
+    }),
+    inlineSelect: css({
+      marginRight: '5px',
+    }),
+    firstLabel: css({
+      marginRight: '5px',
+    }),
+    expand: css({
+      position: 'absolute',
+      top: '2px',
+      left: '6px',
+      zIndex: 100,
+      color: 'gray',
+    }),
+    flexContainer: css({
+      display: 'flex',
+      marginBottom: '4px',
+    }),
+    flex: css({
+      display: 'flex',
+    }),
+    flexColumn: css({
+      display: 'flex',
+      flexDirection: 'column',
+    }),
   },
   ConfigEditor: {
-    container: css`
-      justify-content: space-between;
-      h5 {
-        line-height: 34px;
-        margin-bottom: 5px;
-      }
-      button {
-        margin-right: 5px;
-      }
-    `,
-    wide: css`
-      width: 75%;
-    `,
-    subHeader: css`
-      padding: 5px 0 5px 0;
-    `,
+    container: css({
+      justifyContent: 'space-between',
+      '& h5': {
+        lineHeight: '34px',
+        marginBottom: '5px',
+      },
+      '& button': {
+        marginRight: '5px',
+      },
+    }),
+    wide: css({
+      width: '75%',
+    }),
+    subHeader: css({
+      padding: '5px 0 5px 0',
+    }),
   },
   QueryEditor: {
-    queryType: css`
-      justify-content: space-between;
-      span {
-        display: flex;
-      }
-    `,
-    inlineField: css`
-      margin-left: 7px;
-    `,
+    queryType: css({
+      justifyContent: 'space-between',
+      '& span': {
+        display: 'flex',
+      },
+    }),
+    inlineField: css({
+      marginLeft: '7px',
+    }),
   },
   FormatSelector: {
-    formatSelector: css`
-      display: flex;
-    `,
+    formatSelector: css({
+      display: 'flex',
+    }),
   },
   VariablesEditor: {},
 };

From 36a1b19ddd10384defa2e316f139b578b00d4a11 Mon Sep 17 00:00:00 2001
From: alyssabull <alyssabull@gmail.com>
Date: Thu, 23 Oct 2025 11:42:17 -0600
Subject: [PATCH 13/14] Revert Combobox changes

---
 src/components/SqlEditor.tsx                  |   2 +-
 .../queryBuilder/AggregateEditor.tsx          |  53 ++++----
 src/components/queryBuilder/ColumnSelect.tsx  |  37 +++---
 .../queryBuilder/DatabaseTableSelect.tsx      |  40 +++---
 .../queryBuilder/DurationUnitSelect.tsx       |  15 +--
 src/components/queryBuilder/FilterEditor.tsx  | 119 +++++++++---------
 .../queryBuilder/OrderByEditor.test.tsx       |   4 +-
 src/components/queryBuilder/OrderByEditor.tsx |  53 ++++----
 .../queryBuilder/OtelVersionSelect.tsx        |  19 +--
 9 files changed, 180 insertions(+), 162 deletions(-)

diff --git a/src/components/SqlEditor.tsx b/src/components/SqlEditor.tsx
index 893b983d..d03e0cf2 100644
--- a/src/components/SqlEditor.tsx
+++ b/src/components/SqlEditor.tsx
@@ -110,7 +110,7 @@ export const SqlEditor = (props: SqlEditorProps) => {
 
   return (
     <>
-      <div className={styles.QueryEditor.queryType}>
+      <div className={`${styles.QueryEditor.queryType} ${styles.Common.flexContainer}`}>
         <QueryTypeSwitcher queryType={queryType} onChange={(queryType) => saveChanges({ queryType })} sqlEditor />
       </div>
       <div className={styles.Common.wrapper}>
diff --git a/src/components/queryBuilder/AggregateEditor.tsx b/src/components/queryBuilder/AggregateEditor.tsx
index 76889ced..846632ff 100644
--- a/src/components/queryBuilder/AggregateEditor.tsx
+++ b/src/components/queryBuilder/AggregateEditor.tsx
@@ -1,19 +1,20 @@
 import React, { useState } from 'react';
-import { InlineFormLabel, Combobox, Button, Input, Stack, ComboboxOption } from '@grafana/ui';
+import { SelectableValue } from '@grafana/data';
+import { InlineFormLabel, Select, Button, Input, Stack } from '@grafana/ui';
 import { AggregateColumn, AggregateType, TableColumn } from 'types/queryBuilder';
 import labels from 'labels';
 import { selectors } from 'selectors';
 import { styles } from 'styles';
 
 interface AggregateProps {
-  columnOptions: Array<ComboboxOption<string>>;
+  columnOptions: Array<SelectableValue<string>>;
   index: number;
   aggregate: AggregateColumn;
   updateAggregate: (index: number, aggregate: AggregateColumn) => void;
   removeAggregate: (index: number) => void;
 }
 
-const allAggregateOptions: Array<ComboboxOption<AggregateType>> = [
+const allAggregateOptions: Array<SelectableValue<AggregateType>> = [
   { label: 'Count', value: AggregateType.Count },
   { label: 'Sum', value: AggregateType.Sum },
   { label: 'Min', value: AggregateType.Min },
@@ -25,6 +26,7 @@ const allAggregateOptions: Array<ComboboxOption<AggregateType>> = [
 
 const Aggregate = (props: AggregateProps) => {
   const { index, aggregate, updateAggregate, removeAggregate } = props;
+  const [isOpen, setIsOpen] = useState(false);
   const [alias, setAlias] = useState(aggregate.alias || '');
   const { aliasLabel } = labels.components.AggregatesEditor;
 
@@ -42,24 +44,27 @@ const Aggregate = (props: AggregateProps) => {
 
   return (
     <Stack wrap alignItems="flex-start" justifyContent="flex-start">
-      <div className={styles.Common.inlineSelect}>
-        <Combobox
-          width={20}
-          options={aggregateOptions}
-          value={aggregate.aggregateType}
-          onChange={(e) => updateAggregate(index, { ...aggregate, aggregateType: e.value! })}
-          createCustomValue={true}
-        />
-      </div>
-      <div className={styles.Common.inlineSelect}>
-        <Combobox<string>
-          width={40}
-          options={columnOptions}
-          onChange={(e) => updateAggregate(index, { ...aggregate, column: e.value! })}
-          value={aggregate.column}
-          createCustomValue={true}
-        />
-      </div>
+      <Select
+        width={20}
+        className={styles.Common.inlineSelect}
+        options={aggregateOptions}
+        value={aggregate.aggregateType}
+        onChange={(e) => updateAggregate(index, { ...aggregate, aggregateType: e.value! })}
+        menuPlacement={'bottom'}
+        allowCustomValue
+      />
+      <Select<string>
+        width={40}
+        className={styles.Common.inlineSelect}
+        options={columnOptions}
+        isOpen={isOpen}
+        onOpenMenu={() => setIsOpen(true)}
+        onCloseMenu={() => setIsOpen(false)}
+        onChange={(e) => updateAggregate(index, { ...aggregate, column: e.value! })}
+        value={aggregate.column}
+        menuPlacement={'bottom'}
+        allowCustomValue
+      />
       <InlineFormLabel width={2} className="query-keyword">
         {aliasLabel}
       </InlineFormLabel>
@@ -93,7 +98,7 @@ const allColumnName = '*';
 export const AggregateEditor = (props: AggregateEditorProps) => {
   const { allColumns, aggregates, onAggregatesChange } = props;
   const { label, tooltip, addLabel } = labels.components.AggregatesEditor;
-  const columnOptions: Array<ComboboxOption<string>> = allColumns.map((c) => ({
+  const columnOptions: Array<SelectableValue<string>> = allColumns.map((c) => ({
     label: c.label || c.name,
     value: c.name,
   }));
@@ -133,7 +138,7 @@ export const AggregateEditor = (props: AggregateEditorProps) => {
         const key = `${index}-${aggregate.column}-${aggregate.aggregateType}-${aggregate.alias}`;
         return (
           <div
-            className={styles.Common.flex}
+            className="gf-form"
             key={key}
             data-testid={selectors.components.QueryBuilder.AggregateEditor.itemWrapper}
           >
@@ -149,7 +154,7 @@ export const AggregateEditor = (props: AggregateEditorProps) => {
         );
       })}
 
-      <div className={styles.Common.flexContainer}>
+      <div className="gf-form">
         {aggregates.length === 0 ? fieldLabel : fieldSpacer}
         <Button
           data-testid={selectors.components.QueryBuilder.AggregateEditor.addButton}
diff --git a/src/components/queryBuilder/ColumnSelect.tsx b/src/components/queryBuilder/ColumnSelect.tsx
index 0343d330..59ed3dab 100644
--- a/src/components/queryBuilder/ColumnSelect.tsx
+++ b/src/components/queryBuilder/ColumnSelect.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Combobox, ComboboxOption, InlineFormLabel } from '@grafana/ui';
+import { SelectableValue } from '@grafana/data';
+import { InlineFormLabel, Select } from '@grafana/ui';
 import { ColumnHint, SelectedColumn, TableColumn } from 'types/queryBuilder';
 import { styles } from 'styles';
 
@@ -30,19 +31,24 @@ export const ColumnSelect = (props: ColumnSelectProps) => {
     label,
     tooltip,
     disabled,
+    invalid,
     wide,
     inline,
+    clearable,
   } = props;
   const selectedColumnName = selectedColumn?.name;
-  const columns: Array<ComboboxOption<string>> = allColumns
+  const columns: Array<SelectableValue<string>> = allColumns
     .filter(columnFilterFn || defaultFilterFn)
     .map((c) => ({ label: c.label || c.name, value: c.name }));
 
+  // Select component WILL NOT display the value if it isn't present in the options.
+  let staleOption = false;
   if (selectedColumn && !columns.find((c) => c.value === selectedColumn.name)) {
     columns.push({ label: selectedColumn.alias || selectedColumn.name, value: selectedColumn.name });
+    staleOption = true;
   }
 
-  const onChange = (selected: ComboboxOption<string>) => {
+  const onChange = (selected: SelectableValue<string | undefined>) => {
     if (!selected || !selected.value) {
       onColumnChange(undefined);
       return;
@@ -65,21 +71,22 @@ export const ColumnSelect = (props: ColumnSelectProps) => {
   const labelStyle = 'query-keyword ' + (inline ? styles.QueryEditor.inlineField : '');
 
   return (
-    <div className={styles.Common.flexContainer}>
+    <div className="gf-form">
       <InlineFormLabel width={wide ? 12 : 8} className={labelStyle} tooltip={tooltip}>
         {label}
       </InlineFormLabel>
-      <div style={{ marginRight: '8px' }}>
-        <Combobox<string>
-          disabled={disabled}
-          options={columns}
-          value={selectedColumnName}
-          placeholder={selectedColumnName || 'Choose'}
-          onChange={onChange}
-          width={25}
-          createCustomValue={true}
-        />
-      </div>
+      <Select<string | undefined>
+        disabled={disabled}
+        invalid={invalid || staleOption}
+        options={columns}
+        value={selectedColumnName}
+        placeholder={selectedColumnName || undefined}
+        onChange={onChange}
+        width={wide ? 25 : 20}
+        menuPlacement={'bottom'}
+        isClearable={clearable === undefined || clearable}
+        allowCustomValue
+      />
     </div>
   );
 };
diff --git a/src/components/queryBuilder/DatabaseTableSelect.tsx b/src/components/queryBuilder/DatabaseTableSelect.tsx
index c53aeed6..4ad2ea31 100644
--- a/src/components/queryBuilder/DatabaseTableSelect.tsx
+++ b/src/components/queryBuilder/DatabaseTableSelect.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { InlineFormLabel, Combobox } from '@grafana/ui';
+import { InlineFormLabel, Select } from '@grafana/ui';
 import { Datasource } from '../../data/CHDatasource';
 import labels from 'labels';
 import { styles } from '../../styles';
@@ -34,19 +34,19 @@ export const DatabaseSelect = (props: DatabaseSelectProps) => {
   }, [datasource, database, onDatabaseChange]);
 
   return (
-    <div className={styles.Common.flex}>
+    <>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
-      <div className={`width-15 ${styles.Common.inlineSelect}`}>
-        <Combobox
-          options={options}
-          value={database}
-          onChange={(e) => onDatabaseChange(e.value!)}
-          createCustomValue={true}
-        ></Combobox>
-      </div>
-    </div>
+      <Select
+        className={`width-15 ${styles.Common.inlineSelect}`}
+        options={options}
+        value={database}
+        onChange={(e) => onDatabaseChange(e.value!)}
+        menuPlacement={'bottom'}
+        allowCustomValue
+      ></Select>
+    </>
   );
 };
 
@@ -82,14 +82,14 @@ export const TableSelect = (props: TableSelectProps) => {
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
-      <div className={`width-15 ${styles.Common.inlineSelect}`}>
-        <Combobox
-          options={options}
-          value={table}
-          onChange={(e) => onTableChange(e.value!)}
-          createCustomValue={true}
-        ></Combobox>
-      </div>
+      <Select
+        className={`width-15 ${styles.Common.inlineSelect}`}
+        options={options}
+        value={table}
+        onChange={(e) => onTableChange(e.value!)}
+        menuPlacement={'bottom'}
+        allowCustomValue
+      ></Select>
     </>
   );
 };
@@ -106,7 +106,7 @@ export const DatabaseTableSelect = (props: DatabaseTableSelectProps) => {
   const { datasource, database, onDatabaseChange, table, onTableChange } = props;
 
   return (
-    <div className={styles.Common.flexContainer}>
+    <div className="gf-form">
       <DatabaseSelect datasource={datasource} database={database} onDatabaseChange={onDatabaseChange} />
       <TableSelect datasource={datasource} database={database} table={table} onTableChange={onTableChange} />
     </div>
diff --git a/src/components/queryBuilder/DurationUnitSelect.tsx b/src/components/queryBuilder/DurationUnitSelect.tsx
index 44ea74a1..7b7b684a 100644
--- a/src/components/queryBuilder/DurationUnitSelect.tsx
+++ b/src/components/queryBuilder/DurationUnitSelect.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { TimeUnit } from 'types/queryBuilder';
 import allLabels from 'labels';
-import { InlineFormLabel, Combobox, ComboboxOption } from '@grafana/ui';
+import { InlineFormLabel, Select } from '@grafana/ui';
+import { SelectableValue } from '@grafana/data';
 import { styles } from 'styles';
 
 interface DurationUnitSelectProps {
@@ -11,7 +12,7 @@ interface DurationUnitSelectProps {
   inline?: boolean;
 }
 
-const durationUnitOptions: ReadonlyArray<ComboboxOption<TimeUnit>> = [
+const durationUnitOptions: ReadonlyArray<SelectableValue<TimeUnit>> = [
   { label: TimeUnit.Seconds, value: TimeUnit.Seconds },
   { label: TimeUnit.Milliseconds, value: TimeUnit.Milliseconds },
   { label: TimeUnit.Microseconds, value: TimeUnit.Microseconds },
@@ -23,7 +24,7 @@ export const DurationUnitSelect = (props: DurationUnitSelectProps) => {
   const { label, tooltip } = allLabels.components.TraceQueryBuilder.columns.durationUnit;
 
   return (
-    <div className={styles.Common.flexContainer}>
+    <div className="gf-form">
       <InlineFormLabel
         width={12}
         className={`query-keyword ${inline ? styles.QueryEditor.inlineField : ''}`}
@@ -31,13 +32,13 @@ export const DurationUnitSelect = (props: DurationUnitSelectProps) => {
       >
         {label}
       </InlineFormLabel>
-      <Combobox<TimeUnit>
+      <Select<TimeUnit>
         disabled={disabled}
-        options={durationUnitOptions as Array<ComboboxOption<TimeUnit>>}
+        options={durationUnitOptions as Array<SelectableValue<TimeUnit>>}
         value={unit}
         onChange={(v) => onChange(v.value!)}
-        width={25}
-        placeholder="Choose"
+        width={inline ? 25 : 30}
+        menuPlacement={'bottom'}
       />
     </div>
   );
diff --git a/src/components/queryBuilder/FilterEditor.tsx b/src/components/queryBuilder/FilterEditor.tsx
index f0377789..374d96ba 100644
--- a/src/components/queryBuilder/FilterEditor.tsx
+++ b/src/components/queryBuilder/FilterEditor.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { SelectableValue } from '@grafana/data';
-import { Button, InlineFormLabel, Input, MultiSelect, RadioButtonGroup, Combobox, ComboboxOption } from '@grafana/ui';
+import { Button, InlineFormLabel, Input, MultiSelect, RadioButtonGroup, Select, Stack } from '@grafana/ui';
 import { Filter, FilterOperator, TableColumn, NullFilter } from 'types/queryBuilder';
 import * as utils from 'components/queryBuilder/utils';
 import labels from 'labels';
@@ -16,7 +16,7 @@ const conditions: Array<SelectableValue<'AND' | 'OR'>> = [
   { value: 'AND', label: 'AND' },
   { value: 'OR', label: 'OR' },
 ];
-const filterOperators: Array<ComboboxOption<FilterOperator>> = [
+const filterOperators: Array<SelectableValue<FilterOperator>> = [
   { value: FilterOperator.WithInGrafanaTimeRange, label: 'Within dashboard time range' },
   { value: FilterOperator.OutsideGrafanaTimeRange, label: 'Outside dashboard time range' },
   { value: FilterOperator.IsAnything, label: 'IS ANYTHING' },
@@ -35,7 +35,7 @@ const filterOperators: Array<ComboboxOption<FilterOperator>> = [
   { value: FilterOperator.IsNull, label: 'IS NULL' },
   { value: FilterOperator.IsNotNull, label: 'IS NOT NULL' },
 ];
-const standardTimeOptions: Array<ComboboxOption<string>> = [
+const standardTimeOptions: Array<SelectableValue<string>> = [
   { value: 'today()', label: 'TODAY' },
   { value: 'yesterday()', label: 'YESTERDAY' },
   { value: 'now()', label: 'NOW' },
@@ -137,12 +137,12 @@ export const FilterValueEditor = (props: {
 
     return (
       <div data-testid="query-builder-filters-date-value-container">
-        <Combobox
+        <Select
           value={filter.value || 'TODAY'}
           onChange={(e) => onDateFilterValueChange(e.value!)}
           options={dateOptions}
           width={40}
-          createCustomValue={true}
+          allowCustomValue
         />
       </div>
     );
@@ -156,7 +156,7 @@ export const FilterValueEditor = (props: {
     ) {
       return (
         <div data-testid="query-builder-filters-single-picklist-value-container">
-          <Combobox value={filter.value} onChange={(e) => onStringFilterValueChange(e.value!)} options={getOptions()} />
+          <Select value={filter.value} onChange={(e) => onStringFilterValueChange(e.value!)} options={getOptions()} />
         </div>
       );
     }
@@ -201,6 +201,7 @@ export const FilterEditor = (props: {
   table: string;
 }) => {
   const { index, filter, allColumns: fieldsList, onFilterChange, removeFilter } = props;
+  const [isOpen, setIsOpen] = useState(false);
   const isMapType = filter.type.startsWith('Map');
   const isJSONType = filter.type.startsWith('JSON');
   const mapKeys = useUniqueMapKeys(props.datasource, isMapType ? filter.key : '', props.database, props.table);
@@ -226,7 +227,7 @@ export const FilterEditor = (props: {
     }
     return values;
   };
-  const getFilterOperatorsByType = (type = 'string'): Array<ComboboxOption<FilterOperator>> => {
+  const getFilterOperatorsByType = (type = 'string'): Array<SelectableValue<FilterOperator>> => {
     if (utils.isBooleanType(type)) {
       return filterOperators.filter((f) => [FilterOperator.Equals, FilterOperator.NotEquals].includes(f.value!));
     } else if (utils.isNumberType(type)) {
@@ -282,6 +283,7 @@ export const FilterEditor = (props: {
     }
   };
   const onFilterNameChange = (fieldName: string) => {
+    setIsOpen(false);
     const matchingField = fieldsList.find((f) => f.name === fieldName);
     const filterData = {
       key: matchingField?.name || fieldName,
@@ -358,57 +360,54 @@ export const FilterEditor = (props: {
   };
 
   return (
-    <div>
-      <div className={styles.Common.flex}>
-        {index !== 0 && (
-          <RadioButtonGroup
-            options={conditions}
-            value={filter.condition}
-            onChange={(e) => onFilterConditionChange(e!)}
-          />
-        )}
-        <div className={styles.Common.inlineSelect}>
-          <Combobox
-            disabled={Boolean(filter.hint)}
-            placeholder={filter.hint ? labels.types.ColumnHint[filter.hint] : undefined}
-            value={filter.key}
-            width={40}
-            options={getFields()}
-            onChange={(e) => onFilterNameChange(e.value!)}
-            createCustomValue={true}
-          />
-        </div>
-        {(isMapType || isJSONType) && (
-          <div className={styles.Common.inlineSelect}>
-            <Combobox
-              value={filter.mapKey}
-              placeholder={labels.components.FilterEditor.mapKeyPlaceholder}
-              width={40}
-              options={mapKeyOptions}
-              onChange={(e) => onFilterMapKeyChange(e.value!)}
-              createCustomValue={true}
-            />
-          </div>
-        )}
-        <div className={styles.Common.inlineSelect}>
-          <Combobox
-            value={filter.operator}
-            width={40}
-            options={getFilterOperatorsByType(filter.type)}
-            onChange={(e) => onFilterOperatorChange(e.value!)}
-          />
-        </div>
-        <FilterValueEditor filter={filter} onFilterChange={onFilterValueChange} allColumns={fieldsList} />
-        <Button
-          data-testid="query-builder-filters-remove-button"
-          icon="trash-alt"
-          variant="destructive"
-          size="sm"
-          className={styles.Common.smallBtn}
-          onClick={() => removeFilter(index)}
+    <Stack wrap alignItems="flex-start" justifyContent="flex-start">
+      {index !== 0 && (
+        <RadioButtonGroup options={conditions} value={filter.condition} onChange={(e) => onFilterConditionChange(e!)} />
+      )}
+      <Select
+        disabled={Boolean(filter.hint)}
+        placeholder={filter.hint ? labels.types.ColumnHint[filter.hint] : undefined}
+        value={filter.key}
+        width={40}
+        className={styles.Common.inlineSelect}
+        options={getFields()}
+        isOpen={isOpen}
+        onOpenMenu={() => setIsOpen(true)}
+        onCloseMenu={() => setIsOpen(false)}
+        onChange={(e) => onFilterNameChange(e.value!)}
+        allowCustomValue
+        menuPlacement={'bottom'}
+      />
+      {(isMapType || isJSONType) && (
+        <Select
+          value={filter.mapKey}
+          placeholder={labels.components.FilterEditor.mapKeyPlaceholder}
+          width={40}
+          className={styles.Common.inlineSelect}
+          options={mapKeyOptions}
+          onChange={(e) => onFilterMapKeyChange(e.value!)}
+          allowCustomValue
+          menuPlacement={'bottom'}
         />
-      </div>
-    </div>
+      )}
+      <Select
+        value={filter.operator}
+        width={40}
+        className={styles.Common.inlineSelect}
+        options={getFilterOperatorsByType(filter.type)}
+        onChange={(e) => onFilterOperatorChange(e.value!)}
+        menuPlacement={'bottom'}
+      />
+      <FilterValueEditor filter={filter} onFilterChange={onFilterValueChange} allColumns={fieldsList} />
+      <Button
+        data-testid="query-builder-filters-remove-button"
+        icon="trash-alt"
+        variant="destructive"
+        size="sm"
+        className={styles.Common.smallBtn}
+        onClick={() => removeFilter(index)}
+      />
+    </Stack>
   );
 };
 
@@ -439,7 +438,7 @@ export const FiltersEditor = (props: {
   return (
     <>
       {filters.length === 0 && (
-        <div className={styles.Common.flexContainer}>
+        <div className="gf-form">
           <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
             {label}
           </InlineFormLabel>
@@ -457,7 +456,7 @@ export const FiltersEditor = (props: {
       )}
       {filters.map((filter, index) => {
         return (
-          <div className={styles.Common.flexContainer} key={index}>
+          <div className="gf-form" key={index}>
             {index === 0 ? (
               <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
                 {label}
@@ -479,7 +478,7 @@ export const FiltersEditor = (props: {
         );
       })}
       {filters.length !== 0 && (
-        <div className={styles.Common.flexContainer}>
+        <div className="gf-form">
           <div className={`width-8 ${styles.Common.firstLabel}`}></div>
           <Button
             data-testid="query-builder-filters-inline-add-button"
diff --git a/src/components/queryBuilder/OrderByEditor.test.tsx b/src/components/queryBuilder/OrderByEditor.test.tsx
index c4fa6433..7c911372 100644
--- a/src/components/queryBuilder/OrderByEditor.test.tsx
+++ b/src/components/queryBuilder/OrderByEditor.test.tsx
@@ -3,9 +3,9 @@ import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { OrderByEditor, getOrderByOptions } from './OrderByEditor';
 import { AggregateType, BuilderMode, OrderByDirection, QueryType, TableColumn } from 'types/queryBuilder';
-import { ComboboxOption } from '@grafana/ui';
+import { SelectableValue } from '@grafana/data';
 
-const testOptions: Array<ComboboxOption<string>> = [
+const testOptions: Array<SelectableValue<string>> = [
   { label: 'foo', value: 'foo' },
   { label: 'bar', value: 'bar' },
   { label: 'baz', value: 'baz' },
diff --git a/src/components/queryBuilder/OrderByEditor.tsx b/src/components/queryBuilder/OrderByEditor.tsx
index ebd00769..e98c0b96 100644
--- a/src/components/queryBuilder/OrderByEditor.tsx
+++ b/src/components/queryBuilder/OrderByEditor.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
-import { Button, InlineFormLabel, Combobox, ComboboxOption } from '@grafana/ui';
+import { SelectableValue } from '@grafana/data';
+import { Button, InlineFormLabel, Select } from '@grafana/ui';
 import { OrderBy, OrderByDirection, QueryBuilderOptions, TableColumn } from 'types/queryBuilder';
 import allLabels from 'labels';
 import { styles } from 'styles';
 import { isAggregateQuery } from 'data/sqlGenerator';
 
 interface OrderByItemProps {
-  columnOptions: Array<ComboboxOption<string>>;
+  columnOptions: Array<SelectableValue<string>>;
   index: number;
   orderByItem: OrderBy;
   updateOrderByItem: (index: number, orderByItem: OrderBy) => void;
@@ -23,25 +24,25 @@ const OrderByItem = (props: OrderByItemProps) => {
 
   return (
     <>
-      <div className={styles.Common.inlineSelect}>
-        <Combobox
-          disabled={Boolean(orderByItem.hint)}
-          placeholder={orderByItem.hint ? allLabels.types.ColumnHint[orderByItem.hint] : undefined}
-          value={orderByItem.hint ? undefined : orderByItem.name}
-          width={36}
-          options={columnOptions}
-          onChange={(e) => updateOrderByItem(index, { ...orderByItem, name: e.value! })}
-          createCustomValue={true}
-        />
-      </div>
-      <div className={styles.Common.inlineSelect}>
-        <Combobox<OrderByDirection>
-          value={orderByItem.dir}
-          width={12}
-          options={sortOptions}
-          onChange={(e) => updateOrderByItem(index, { ...orderByItem, dir: e.value! })}
-        />
-      </div>
+      <Select
+        disabled={Boolean(orderByItem.hint)}
+        placeholder={orderByItem.hint ? allLabels.types.ColumnHint[orderByItem.hint] : undefined}
+        value={orderByItem.hint ? undefined : orderByItem.name}
+        className={styles.Common.inlineSelect}
+        width={36}
+        options={columnOptions}
+        onChange={(e) => updateOrderByItem(index, { ...orderByItem, name: e.value! })}
+        allowCustomValue
+        menuPlacement={'bottom'}
+      />
+      <Select<OrderByDirection>
+        value={orderByItem.dir}
+        className={styles.Common.inlineSelect}
+        width={12}
+        options={sortOptions}
+        onChange={(e) => updateOrderByItem(index, { ...orderByItem, dir: e.value! })}
+        menuPlacement={'bottom'}
+      />
       <Button
         data-testid="query-builder-orderby-remove-button"
         className={styles.Common.smallBtn}
@@ -55,7 +56,7 @@ const OrderByItem = (props: OrderByItemProps) => {
 };
 
 interface OrderByEditorProps {
-  orderByOptions: Array<ComboboxOption<string>>;
+  orderByOptions: Array<SelectableValue<string>>;
   orderBy: OrderBy[];
   onOrderByChange: (orderBy: OrderBy[]) => void;
 }
@@ -100,7 +101,7 @@ export const OrderByEditor = (props: OrderByEditorProps) => {
       {orderBy.map((orderByItem, index) => {
         const key = `${index}-${orderByItem.name}-${orderByItem.hint || ''}-${orderByItem.dir}`;
         return (
-          <div className={styles.Common.flex} key={key} data-testid="query-builder-orderby-item-wrapper">
+          <div className="gf-form" key={key} data-testid="query-builder-orderby-item-wrapper">
             {index === 0 ? fieldLabel : fieldSpacer}
             <OrderByItem
               columnOptions={orderByOptions}
@@ -113,7 +114,7 @@ export const OrderByEditor = (props: OrderByEditorProps) => {
         );
       })}
 
-      <div className={styles.Common.flexContainer}>
+      <div className="gf-form">
         {orderBy.length === 0 ? fieldLabel : fieldSpacer}
         <Button
           data-testid="query-builder-orderby-add-button"
@@ -133,8 +134,8 @@ export const OrderByEditor = (props: OrderByEditorProps) => {
 export const getOrderByOptions = (
   builder: QueryBuilderOptions,
   allColumns: readonly TableColumn[]
-): Array<ComboboxOption<string>> => {
-  let allOptions: Array<ComboboxOption<string>> = [];
+): Array<SelectableValue<string>> => {
+  let allOptions: Array<SelectableValue<string>> = [];
 
   if (isAggregateQuery(builder)) {
     builder.columns?.forEach((c) => {
diff --git a/src/components/queryBuilder/OtelVersionSelect.tsx b/src/components/queryBuilder/OtelVersionSelect.tsx
index 97e8ee56..70014b80 100644
--- a/src/components/queryBuilder/OtelVersionSelect.tsx
+++ b/src/components/queryBuilder/OtelVersionSelect.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
-import { InlineFormLabel, Combobox, Switch as GrafanaSwitch, useTheme, ComboboxOption } from '@grafana/ui';
+import { SelectableValue } from '@grafana/data';
+import { InlineFormLabel, Select, Switch as GrafanaSwitch, useTheme } from '@grafana/ui';
 import otel from 'otel';
 import selectors from 'labels';
-import { styles } from 'styles';
 
 interface OtelVersionSelectProps {
   enabled: boolean;
@@ -15,7 +15,7 @@ interface OtelVersionSelectProps {
 export const OtelVersionSelect = (props: OtelVersionSelectProps) => {
   const { enabled, onEnabledChange, selectedVersion, onVersionChange, wide } = props;
   const { label, tooltip } = selectors.components.OtelVersionSelect;
-  const options: ComboboxOption[] = otel.versions.map((v) => ({
+  const options: SelectableValue[] = otel.versions.map((v) => ({
     label: v.name,
     value: v.version,
   }));
@@ -33,23 +33,28 @@ export const OtelVersionSelect = (props: OtelVersionSelectProps) => {
     height: `${theme.spacing.formInputHeight}px`,
     display: 'flex',
     alignItems: 'center',
-    marginBottom: '4px',
   };
 
   return (
-    <div className={styles.Common.flex}>
+    <div className="gf-form">
       <InlineFormLabel width={wide ? 12 : 8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
       <div style={switchContainerStyle}>
-        <GrafanaSwitch value={enabled} onChange={(e) => onEnabledChange(e.currentTarget.checked)} role="checkbox" />
+        <GrafanaSwitch
+          className="gf-form"
+          value={enabled}
+          onChange={(e) => onEnabledChange(e.currentTarget.checked)}
+          role="checkbox"
+        />
       </div>
-      <Combobox
+      <Select
         disabled={!enabled}
         options={options}
         width={20}
         onChange={(e) => onVersionChange(e.value)}
         value={selectedVersion}
+        menuPlacement={'bottom'}
       />
     </div>
   );

From 0ae50b275f7b89bc55a4bace0c8a1a858c0df00e Mon Sep 17 00:00:00 2001
From: alyssabull <alyssabull@gmail.com>
Date: Thu, 23 Oct 2025 12:19:49 -0600
Subject: [PATCH 14/14] Revert get() change

---
 src/data/utils.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/data/utils.ts b/src/data/utils.ts
index 163c60dd..51d5d648 100644
--- a/src/data/utils.ts
+++ b/src/data/utils.ts
@@ -334,11 +334,11 @@ export const dataFrameHasLogLabelWithName = (frame: DataFrame | undefined, name:
 
   const logLabelsFieldName = logColumnHintsToAlias.get(ColumnHint.LogLabels);
   const field = frame.fields.find((f) => f.name === logLabelsFieldName);
-  if (!field || !field.values || field.values.length < 1 || !field.values[0]) {
+  if (!field || !field.values || field.values.length < 1 || !field.values.get(0)) {
     return false;
   }
 
-  const labels = (field.values[0] || {}) as object;
+  const labels = (field.values.get(0) || {}) as object;
   const labelKeys = Object.keys(labels);
 
   return labelKeys.includes(name);