chore: bump @grafana/create-plugin configuration to 6.7.1 (#2167)

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

src/datasource/components/ConfigEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { getDataSourceSrv, config } from '@grafana/runtime';
 import { DataSourcePluginOptionsEditorProps, DataSourceSettings, GrafanaTheme2, SelectableValue } from '@grafana/data';
 import {
@@ -42,8 +42,19 @@ export const ConfigEditor = (props: Props) => {
   const styles = useStyles2(getStyles);
   const { options, onOptionsChange } = props;
 
-  const [selectedDBDatasource, setSelectedDBDatasource] = useState(null);
-  const [currentDSType, setCurrentDSType] = useState('');
+  // Derive selectedDBDatasource and currentDSType from options
+  const { selectedDBDatasource, currentDSType } = useMemo(() => {
+    if (!options.jsonData.dbConnectionEnable || !options.jsonData.dbConnectionDatasourceId) {
+      return { selectedDBDatasource: null, currentDSType: '' };
+    }
+    const selectedDs = getDirectDBDatasources().find(
+      (dsOption) => dsOption.id === options.jsonData.dbConnectionDatasourceId
+    );
+    return {
+      selectedDBDatasource: selectedDs ? { label: selectedDs.name, value: selectedDs.id } : null,
+      currentDSType: selectedDs?.type || '',
+    };
+  }, [options.jsonData.dbConnectionEnable, options.jsonData.dbConnectionDatasourceId]);
 
   // Apply some defaults on initial render
   useEffect(() => {
@@ -73,32 +84,22 @@ export const ConfigEditor = (props: Props) => {
       secureJsonData: { ...newSecureJsonData },
     });
 
-    if (options.jsonData.dbConnectionEnable) {
-      if (!options.jsonData.dbConnectionDatasourceId) {
-        const dsName = options.jsonData.dbConnectionDatasourceName;
-        getDataSourceSrv()
-          .get(dsName)
-          .then((ds) => {
-            if (ds) {
-              const selectedDs = getDirectDBDatasources().find((dsOption) => dsOption.id === ds.id);
-              setSelectedDBDatasource({ label: selectedDs?.name, value: selectedDs?.id });
-              setCurrentDSType(selectedDs?.type);
-              onOptionsChange({
-                ...options,
-                jsonData: {
-                  ...options.jsonData,
-                  dbConnectionDatasourceId: ds.id,
-                },
-              });
-            }
-          });
-      } else {
-        const selectedDs = getDirectDBDatasources().find(
-          (dsOption) => dsOption.id === options.jsonData.dbConnectionDatasourceId
-        );
-        setSelectedDBDatasource({ label: selectedDs?.name, value: selectedDs?.id });
-        setCurrentDSType(selectedDs?.type);
-      }
+    // Handle async lookup when dbConnectionDatasourceId is not set but name is available
+    if (options.jsonData.dbConnectionEnable && !options.jsonData.dbConnectionDatasourceId) {
+      const dsName = options.jsonData.dbConnectionDatasourceName;
+      getDataSourceSrv()
+        .get(dsName)
+        .then((ds) => {
+          if (ds) {
+            onOptionsChange({
+              ...options,
+              jsonData: {
+                ...options.jsonData,
+                dbConnectionDatasourceId: ds.id,
+              },
+            });
+          }
+        });
     }
   }, []);
 
@@ -318,12 +319,7 @@ export const ConfigEditor = (props: Props) => {
                   width={40}
                   value={selectedDBDatasource}
                   options={getDirectDBDSOptions()}
-                  onChange={directDBDatasourceChanegeHandler(
-                    options,
-                    onOptionsChange,
-                    setSelectedDBDatasource,
-                    setCurrentDSType
-                  )}
+                  onChange={directDBDatasourceChanegeHandler(options, onOptionsChange)}
                   placeholder="Select a DB datasource (MySQL, PostgreSQL, InfluxDB)"
                 />
               </Field>
@@ -480,16 +476,8 @@ const resetSecureJsonField =
   };
 
 const directDBDatasourceChanegeHandler =
-  (
-    options: DataSourceSettings<ZabbixDSOptions, ZabbixSecureJSONData>,
-    onChange: Props['onOptionsChange'],
-    setSelectedDS: React.Dispatch<any>,
-    setSelectedDSType: React.Dispatch<any>
-  ) =>
+  (options: DataSourceSettings<ZabbixDSOptions, ZabbixSecureJSONData>, onChange: Props['onOptionsChange']) =>
   (value: SelectableValue<number>) => {
-    const selectedDs = getDirectDBDatasources().find((dsOption) => dsOption.id === value.value);
-    setSelectedDS({ label: selectedDs.name, value: selectedDs.id });
-    setSelectedDSType(selectedDs.type);
     onChange({
       ...options,
       jsonData: {

src/datasource/components/QueryEditor.tsx

@@ -111,8 +111,11 @@ function getProblemsQueryDefaults(): Partial<ZabbixMetricsQuery> {
   };
 }
 
-export interface ZabbixQueryEditorProps
-  extends QueryEditorProps<ZabbixDatasource, ZabbixMetricsQuery, ZabbixDSOptions> {}
+export interface ZabbixQueryEditorProps extends QueryEditorProps<
+  ZabbixDatasource,
+  ZabbixMetricsQuery,
+  ZabbixDSOptions
+> {}
 
 export const QueryEditor = ({ query, datasource, onChange, onRunQuery, range }: ZabbixQueryEditorProps) => {
   const [itemCount, setItemCount] = useState(0);

src/datasource/components/QueryEditor/QueryFunctionsEditor.tsx

@@ -14,10 +14,14 @@ export interface Props {
 
 export const QueryFunctionsEditor = ({ query, onChange }: Props) => {
   const onFuncParamChange = (func: MetricFunc, index: number, value: string) => {
-    func.params[index] = value;
-    const funcIndex = query.functions.findIndex((f) => f === func);
-    const functions = query.functions;
-    functions[funcIndex] = func;
+    const functions = query.functions.map((f) => {
+      if (f === func) {
+        const newParams = [...f.params];
+        newParams[index] = value;
+        return { ...f, params: newParams };
+      }
+      return f;
+    });
     onChange({ ...query, functions });
   };
 

src/datasource/hooks/useInterpolatedQuery.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import { ScopedVars } from '@grafana/data';
 import { ZabbixDatasource } from '../datasource';
 import { ZabbixMetricsQuery } from '../types/query';
@@ -10,12 +10,10 @@ export const useInterpolatedQuery = (
   query: ZabbixMetricsQuery,
   scopedVars?: ScopedVars
 ): ZabbixMetricsQuery => {
-  const [interpolatedQuery, setInterpolatedQuery] = useState<ZabbixMetricsQuery>(query);
-  const resolvedScopedVars = useMemo(() => scopedVars ?? EMPTY_SCOPED_VARS, [scopedVars]);
+  const resolvedScopedVars = scopedVars ?? EMPTY_SCOPED_VARS;
 
-  useEffect(() => {
-    const replacedQuery = datasource.interpolateVariablesInQueries([query], resolvedScopedVars)[0];
-    setInterpolatedQuery(replacedQuery);
+  const interpolatedQuery = useMemo(() => {
+    return datasource.interpolateVariablesInQueries([query], resolvedScopedVars)[0];
   }, [datasource, query, resolvedScopedVars]);
 
   return interpolatedQuery;

src/datasource/specs/datasource.spec.ts

@@ -13,7 +13,6 @@ jest.mock(
     // Provide a custom query implementation that resolves backend + frontend + db + annotations
     // so tests relying on merged results receive expected data.
     if (actual && actual.DataSourceWithBackend && actual.DataSourceWithBackend.prototype) {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       actual.DataSourceWithBackend.prototype.query = function (request: any) {
         const that: any = this;