chore(query-editor): replace deprecated select with combobox [WIP]

docker-compose.yaml

@@ -6,7 +6,7 @@ services:
     build:
       context: ./.config
       args:
-        grafana_version: ${GRAFANA_VERSION:-11.0.0}
+        grafana_version: ${GRAFANA_VERSION:-11.6.0}
         development: ${DEVELOPMENT:-false}
     ports:
       - 2999:3000/tcp

src/components/resourceSelect.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { SelectableValue } from '@grafana/data';
-import { AsyncSelect, InlineFormLabel, LegacyForms } from '@grafana/ui';
+import { Combobox, ComboboxOption, InlineFormLabel, LegacyForms } from '@grafana/ui';
 import { targetToIdEither } from '../cdf/client';
 import { IdEither, Resource } from '../cdf/types';
 import { resource2DropdownOption } from '../datasource';
@@ -28,22 +27,22 @@ export function ResourceSelect(props: {
   resourceType: Tab.Timeseries | Tab.Asset;
   onTargetQueryChange: (patch: CogniteTargetObj, shouldRunQuery?: boolean) => void;
   fetchSingleResource: (id: IdEither) => Promise<Resource[]>;
-  searchResource: (query: string) => Promise<Resource[]>;
+  searchResource: (query: string) => Promise<Array<ComboboxOption<string> & Resource>>;
 }) {
   const { query, onTargetQueryChange, resourceType, searchResource, fetchSingleResource } = props;
 
-  const [current, setCurrent] = useState<SelectableValue<string | number> & Partial<Resource>>({});
+  const [current, setCurrent] = useState<ComboboxOption<string | number> & Partial<Resource>>(null);
   const [externalIdField, setExternalIdField] = useState<string>();
 
-  const onDropdown = (value: SelectableValue<string | number> & Resource) => {
-    setExternalIdField(value.externalId);
+  const onDropdown = (value: ComboboxOption<string | number> & Partial<Resource>) => {
+    setExternalIdField(value?.externalId);
     setCurrent(value);
     onTargetQueryChange(optionalIdsToTargetObj(value));
   };
 
   const onExternalIdField = async (externalId: string) => {
     const resource = await fetchDropdownResource({ externalId });
-    const currentOption = resource ? resource2DropdownOption(resource) : {};
+    const currentOption = resource ? resource2DropdownOption(resource) : null;
     setCurrent(currentOption);
     onTargetQueryChange(optionalIdsToTargetObj({ externalId }));
   };
@@ -79,14 +78,13 @@ export function ResourceSelect(props: {
   return (
     <div className="gf-form gf-form-inline">
       <InlineFormLabel width={7} tooltip={`${resourceType} name`}>
-        {current.value ? 'Name' : 'Search'}
+        {current?.value ? 'Name' : 'Search'}
       </InlineFormLabel>
-      <AsyncSelect
-        loadOptions={searchResource}
-        defaultOptions
-        value={current.value ? current : null}
+      <Combobox
+        width={20}
+        options={searchResource}
+        value={current?.value ? current : null}
         placeholder={`Search ${resourceType.toLowerCase()} by name/description`}
-        className="cognite-dropdown width-20"
         onChange={onDropdown}
       />
       <FormField
@@ -96,7 +94,7 @@ export function ResourceSelect(props: {
         onBlur={({ target }) => onExternalIdField(target.value)}
         onChange={({ target }) => setExternalIdField(target.value)}
         value={externalIdField || ''}
-        placeholder={current.value ? 'No external id present' : 'Insert external id'}
+        placeholder={current?.value ? 'No external id present' : 'Insert external id'}
         tooltip={`${resourceType} external id`}
       />
     </div>

src/datasource.ts

@@ -45,6 +45,7 @@ import {
 } from './datasources';
 import AnnotationsQueryEditor from 'components/annotationsQueryEditor';
 import { lastValueFrom, Observable, from, map } from 'rxjs';
+import { ComboboxOption } from '@grafana/ui';
 
 export default class CogniteDatasource extends DataSourceWithBackend<
   CogniteQuery,
@@ -345,7 +346,7 @@ export default class CogniteDatasource extends DataSourceWithBackend<
     query: string,
     type?: string,
     options?: any
-  ): Promise<Array<SelectableValue<string> & Resource>> {
+  ): Promise<Array<ComboboxOption<string> & Resource>> {
     const resources = {
       [Tab.Asset]: 'assets',
       [Tab.Timeseries]: 'timeseries',
@@ -503,7 +504,7 @@ export function filterEmptyQueryTargets(targets: CogniteQuery[]): QueryTarget[]
   }) as QueryTarget[];
 }
 
-export function resource2DropdownOption(resource: Resource): SelectableValue<string> & Resource {
+export function resource2DropdownOption(resource: Resource): ComboboxOption<string> & Resource {
   const { id, name, externalId, description } = resource;
   const value = id.toString();
   const label = name || externalId || value;

src/plugin.json

@@ -35,7 +35,7 @@
   },
 
   "dependencies": {
-    "grafanaDependency": ">=10.0.0",
+    "grafanaDependency": ">=11.6.0",
     "plugins": []
   },