Update grafana dependencies, fix secure socks feature check

.nvmrc

@@ -1 +1 @@
-18
+20

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.6",
   "description": "QuestDB Datasource for Grafana",
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   },
   "scripts": {
     "build": "webpack -c ./.config/webpack/webpack.config.ts --env production",
@@ -21,21 +21,23 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@babel/core": "^7.21.4",
-    "@grafana/e2e": "9.4.3",
-    "@grafana/e2e-selectors": "9.4.3",
+    "@grafana/e2e-selectors": "^12.2.1",
     "@grafana/eslint-config": "^6.0.0",
-    "@grafana/tsconfig": "^1.2.0-rc1",
+    "@grafana/tsconfig": "^2.0.1",
     "@swc/core": "1.3.75",
     "@swc/helpers": "^0.5.3",
     "@swc/jest": "^0.2.26",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/glob": "^8.0.0",
     "@types/jest": "^29.5.0",
     "@types/lodash": "^4.14.194",
     "@types/node": "^18.15.11",
+    "@types/react": "^18.2.0",
     "@types/react-router-dom": "^5.3.3",
+    "@types/semver": "^7.7.1",
     "@types/webpack-livereload-plugin": "^2.3.6",
     "copy-webpack-plugin": "^11.0.0",
     "cspell": "^8.0.0",
@@ -65,13 +67,12 @@
   },
   "dependencies": {
     "@emotion/css": "^11.1.3",
-    "@grafana/data": "9.4.3",
-    "@grafana/experimental": "^1.7.0",
-    "@grafana/plugin-ui": "^0.7.2",
-    "@grafana/runtime": "9.4.3",
-    "@grafana/ui": "10.1.0",
+    "@grafana/data": "^12.2.1",
+    "@grafana/plugin-ui": "^0.11.1",
+    "@grafana/runtime": "^12.2.1",
+    "@grafana/ui": "^12.2.1",
     "@questdb/sql-ast-parser": "0.1.1",
-    "@questdb/sql-grammar": "1.0.15",
+    "@questdb/sql-grammar": "1.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^5.2.0",

src/components/queryBuilder/Filters.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { SelectableValue } from '@grafana/data';
-import { Button, Input, MultiSelect, RadioButtonGroup, Select } from '@grafana/ui';
-import { Filter, FilterOperator, FullField, NullFilter } from '../../types';
+import { Button, Input, MultiCombobox, RadioButtonGroup, Combobox, ComboboxOption } from '@grafana/ui';
+import { DateFilterWithValue, Filter, FilterOperator, FullField, NullFilter } from '../../types';
 import * as utils from './utils';
 import { selectors } from '../../selectors';
 import { styles } from '../../styles';
@@ -11,11 +11,11 @@ const boolValues: Array<SelectableValue<boolean>> = [
   { value: true, label: 'True' },
   { value: false, label: 'False' },
 ];
-const conditions: Array<SelectableValue<'AND' | 'OR'>> = [
+const conditions: Array<ComboboxOption<'AND' | 'OR'>> = [
   { value: 'AND', label: 'AND' },
   { value: 'OR', label: 'OR' },
 ];
-const filterOperators: Array<SelectableValue<FilterOperator>> = [
+const filterOperators: Array<ComboboxOption<FilterOperator>> = [
   { value: FilterOperator.Equals, label: '=' },
   { value: FilterOperator.NotEquals, label: '!=' },
   { value: FilterOperator.LessThan, label: '<' },
@@ -37,7 +37,7 @@ const filterOperators: Array<SelectableValue<FilterOperator>> = [
   { value: FilterOperator.WithInGrafanaTimeRange, label: 'WITHIN DASHBOARD TIME RANGE' },
   { value: FilterOperator.OutsideGrafanaTimeRange, label: 'OUTSIDE DASHBOARD TIME RANGE' },
 ];
-const standardTimeOptions: Array<SelectableValue<string>> = [
+const standardTimeOptions: Array<ComboboxOption<string>> = [
   { value: "date_trunc('day', now())", label: 'TODAY' },
   { value: "date_trunc('day', dateadd('d', -1, now()))", label: 'YESTERDAY' },
   { value: 'now()', label: 'NOW' },
@@ -117,7 +117,7 @@ export const FilterValueEditor = (props: {
     if (filter.type === 'picklist') {
       return (
         <div data-testid="query-builder-filters-multi-picklist-value-container">
-          <MultiSelect
+          <MultiCombobox
             value={filter.value}
             options={getOptions()}
             onChange={(e) => onMultiFilterValueChange(e.map((v) => v.value!))}
@@ -139,15 +139,15 @@ export const FilterValueEditor = (props: {
     return <FilterValueNumberItem value={filter.value} onChange={(value) => onFilterChange({ ...filter, value })} />;
   } else if (utils.isDateFilter(filter)) {
     const onDateFilterValueChange = (value: string) => {
-      onFilterChange({ ...filter, value });
+      onFilterChange({ ...filter, value } as DateFilterWithValue);
     };
     //
     return utils.isDateFilterWithOutValue(filter) ? null : (
       <div data-testid="query-builder-filters-date-value-container">
-        <Select
+        <Combobox
           value={filter.value}
-          onChange={(e) => onDateFilterValueChange(e.value!)}
-          allowCustomValue={true}
+          onChange={(e) => onDateFilterValueChange(e.value)}
+          createCustomValue={true}
           options={[...standardTimeOptions]}
         />
       </div>
@@ -162,7 +162,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>
       );
     }
@@ -185,7 +185,6 @@ export const FilterEditor = (props: {
   onFilterChange: (index: number, filter: Filter) => void;
 }) => {
   const { index, filter, fieldsList, onFilterChange } = props;
-  const [isOpen, setIsOpen] = useState(false);
   const getFields = () => {
     const values = (filter.restrictToFields || fieldsList).map((f) => {
       return { label: f.label, value: f.name };
@@ -197,7 +196,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.isGeoHashType(type)) {
@@ -284,7 +283,6 @@ export const FilterEditor = (props: {
     }
   };
   const onFilterNameChange = (fieldName: string) => {
-    setIsOpen(false);
     const matchingField = fieldsList.find((f) => f.name === fieldName);
     let filterData: { key: string; type: string } | null = null;
 
@@ -346,6 +344,14 @@ export const FilterEditor = (props: {
       if (!Array.isArray(newFilter.value)) {
         newFilter.value = [newFilter.value || ''];
       }
+    } else {
+      if ('value' in newFilter && Array.isArray(newFilter.value)) {
+        if (utils.isDateType(newFilter.type)) {
+          newFilter.value = '';
+        } else {
+          newFilter.value = newFilter.value[0] || '';
+        }
+      }
     }
     onFilterChange(index, newFilter);
   };
@@ -362,17 +368,14 @@ export const FilterEditor = (props: {
       {index !== 0 && (
         <RadioButtonGroup options={conditions} value={filter.condition} onChange={(e) => onFilterConditionChange(e!)} />
       )}
-      <Select
+      <Combobox
         value={filter.key}
         width={30}
         options={getFields()}
-        isOpen={isOpen}
-        onOpenMenu={() => setIsOpen(true)}
-        onCloseMenu={() => setIsOpen(false)}
         onChange={(e) => onFilterNameChange(e.value!)}
-        allowCustomValue={true}
+        createCustomValue={true}
       />
-      <Select
+      <Combobox
         value={filter.operator}
         width={30}
         options={getFilterOperatorsByType(filter.type)}

src/components/queryBuilder/OrderBy.tsx

@@ -140,7 +140,7 @@ export const getOrderByFields = (
       (builder.fields || []).forEach((f) =>{uniqueValues.add(f)} );
       ((builder.metrics as BuilderMetricField[]) || []).forEach((m)=>{uniqueValues.add(`${m.aggregation}(${m.field})`)});
       ((builder.groupBy as string[]) || []).forEach((g)=>{uniqueValues.add(g) });
-      uniqueValues.forEach((uv)=>{values.add({ value: uv, label: uv })});
+      uniqueValues.forEach((uv)=>{values.push({ value: uv, label: uv })});
       break;
     case BuilderMode.List:
     default:

src/views/QuestDBConfigEditor.test.tsx

@@ -10,7 +10,7 @@ jest.mock('@grafana/runtime', () => {
   const original = jest.requireActual('@grafana/runtime');
   return {
     ...original,
-    config: { buildInfo: { version: '10.0.0' }, featureToggles: { secureSocksDSProxyEnabled: true } },
+    config: { buildInfo: { version: '10.0.0' }, secureSocksDSProxyEnabled: true },
   };
 });
 

src/views/QuestDBConfigEditor.tsx

@@ -9,10 +9,10 @@ import { Field, Input, SecretInput, Select, Switch } from '@grafana/ui';
 import { CertificationKey } from '../components/ui/CertificationKey';
 import { Components } from './../selectors';
 import { PostgresTLSModes, QuestDBConfig, QuestDBSecureConfig } from './../types';
-import { gte } from 'semver';
-import { ConfigSection, DataSourceDescription } from '@grafana/experimental';
+import { ConfigSection, DataSourceDescription } from '@grafana/plugin-ui';
 import { config } from '@grafana/runtime';
 import { Divider } from 'components/Divider';
+import { gte } from 'semver';
 
 export interface Props extends DataSourcePluginOptionsEditorProps<QuestDBConfig> {}
 
@@ -277,7 +277,7 @@ export const ConfigEditor: React.FC<Props> = (props) => {
         </Field>
       </ConfigSection>
 
-      {config.featureToggles['secureSocksDSProxyEnabled'] && gte(config.buildInfo.version, '10.0.0') && (
+      {config.secureSocksDSProxyEnabled && gte(config.buildInfo.version, '10.0.0') && (
         <>
           <Divider />