addded unit tests

This reverts commit c5bff2df50.

packages/grafana-sql/src/SQLVariableSupport.test.tsx

@@ -0,0 +1,199 @@
+import { Field, FieldType } from '@grafana/data';
+import { EditorMode } from '@grafana/plugin-ui';
+
+import { migrateVariableQuery, convertOriginalFieldsToVariableFields } from './SQLVariableSupport';
+import { QueryFormat, SQLQuery, SQLQueryMeta } from './types';
+
+const refId = 'SQLVariableQueryEditor-VariableQuery';
+const sampleQuery = 'SELECT * FROM users';
+
+describe('migrateVariableQuery', () => {
+  it('should handle string query', () => {
+    const result = migrateVariableQuery(sampleQuery);
+    expect(result).toMatchObject({
+      refId,
+      rawSql: sampleQuery,
+      query: sampleQuery,
+      editorMode: EditorMode.Code,
+      format: QueryFormat.Table,
+    });
+  });
+  it('should handle empty string query', () => {
+    const result = migrateVariableQuery('');
+    expect(result).toMatchObject({
+      refId,
+      rawSql: '',
+      query: '',
+      editorMode: EditorMode.Builder,
+      format: QueryFormat.Table,
+    });
+  });
+  it('should handle SQLQuery object with rawSql', () => {
+    const rawQuery: SQLQuery = {
+      refId: 'A',
+      rawSql: sampleQuery,
+      format: QueryFormat.Timeseries,
+      editorMode: EditorMode.Code,
+    };
+    const result = migrateVariableQuery(rawQuery);
+    expect(result).toStrictEqual({ ...rawQuery, query: sampleQuery });
+  });
+  it('should preserve all other properties from SQLQuery', () => {
+    const rawQuery: SQLQuery = {
+      refId: 'C',
+      rawSql: sampleQuery,
+      alias: 'test_alias',
+      dataset: 'test_dataset',
+      table: 'test_table',
+      meta: { textField: 'name', valueField: 'id' },
+    };
+    const result = migrateVariableQuery(rawQuery);
+    expect(result).toStrictEqual({ ...rawQuery, query: sampleQuery });
+  });
+});
+
+const field = (name: string, type: FieldType = FieldType.string, values: unknown[] = [1, 2, 3]): Field => ({
+  name,
+  type,
+  values,
+  config: {},
+});
+
+describe('convertOriginalFieldsToVariableFields', () => {
+  it('should throw error when no fields provided', () => {
+    expect(() => convertOriginalFieldsToVariableFields([])).toThrow('at least one field expected for variable');
+  });
+
+  it('should handle fields with __text and __value names', () => {
+    const fields = [field('__text'), field('__value'), field('other_field')];
+    expect(convertOriginalFieldsToVariableFields(fields).map((r) => r.name)).toStrictEqual([
+      'text',
+      'value',
+      '__text',
+      '__value',
+      'other_field',
+    ]);
+  });
+
+  it('should handle fields with only __text', () => {
+    const fields = [field('__text'), field('other_field')];
+    expect(convertOriginalFieldsToVariableFields(fields).map((r) => r.name)).toStrictEqual([
+      'text',
+      'value',
+      '__text',
+      'other_field',
+    ]);
+  });
+
+  it('should handle fields with only __value', () => {
+    const fields = [field('__value'), field('other_field')];
+    expect(convertOriginalFieldsToVariableFields(fields).map((r) => r.name)).toStrictEqual([
+      'text',
+      'value',
+      '__value',
+      'other_field',
+    ]);
+  });
+
+  it('should use first field when no __text or __value present', () => {
+    const fields = [field('id'), field('name'), field('category')];
+    expect(convertOriginalFieldsToVariableFields(fields).map((r) => r.name)).toStrictEqual([
+      'text',
+      'value',
+      'id',
+      'name',
+      'category',
+    ]);
+  });
+
+  it('should respect meta.textField and meta.valueField', () => {
+    const fields = [field('id', FieldType.number, [3, 4]), field('display_name'), field('category')];
+    const meta: SQLQueryMeta = {
+      textField: 'display_name',
+      valueField: 'id',
+    };
+    const result = convertOriginalFieldsToVariableFields(fields, meta);
+    expect(convertOriginalFieldsToVariableFields(fields).map((r) => r.name)).toStrictEqual([
+      'text',
+      'value',
+      'id',
+      'display_name',
+      'category',
+    ]);
+    expect(result[0]).toStrictEqual({ ...fields[1], name: 'text' }); // display_name -> text
+    expect(result[1]).toStrictEqual({ ...fields[0], name: 'value' }); // id -> value
+  });
+
+  it('should handle meta with non-existent field names', () => {
+    const fields = [field('id'), field('name')];
+    const meta: SQLQueryMeta = {
+      textField: 'non_existent_field',
+      valueField: 'also_non_existent',
+    };
+    const result = convertOriginalFieldsToVariableFields(fields, meta);
+    expect(result.map((r) => r.name)).toStrictEqual(['text', 'value', 'id', 'name']);
+    expect(result[0]).toStrictEqual({ ...fields[0], name: 'text' });
+    expect(result[1]).toStrictEqual({ ...fields[0], name: 'value' });
+  });
+
+  it('should handle partial meta (only textField)', () => {
+    const fields = [field('id'), field('label'), field('description')];
+    const meta: SQLQueryMeta = {
+      textField: 'label',
+    };
+    const result = convertOriginalFieldsToVariableFields(fields, meta);
+    expect(result.map((r) => r.name)).toStrictEqual(['text', 'value', 'id', 'label', 'description']);
+    expect(result[0]).toStrictEqual({ ...fields[1], name: 'text' }); // label -> text
+    expect(result[1]).toStrictEqual({ ...fields[0], name: 'value' }); // fallback to text field
+  });
+
+  it('should handle partial meta (only valueField)', () => {
+    const fields = [field('name'), field('id', FieldType.number), field('type')];
+    const meta: SQLQueryMeta = {
+      valueField: 'id',
+    };
+    const result = convertOriginalFieldsToVariableFields(fields, meta);
+    expect(result.map((r) => r.name)).toStrictEqual(['text', 'value', 'name', 'id', 'type']);
+    expect(result[0]).toStrictEqual({ ...fields[0], name: 'text', type: FieldType.number }); // fallback to value field
+    expect(result[1]).toStrictEqual({ ...fields[1], name: 'value' }); // id -> value
+  });
+
+  it('should not include duplicate "value" or "text" fields in otherFields', () => {
+    const fields = [field('value'), field('text'), field('other')];
+    expect(convertOriginalFieldsToVariableFields(fields).map((r) => r.name)).toStrictEqual(['text', 'value', 'other']);
+  });
+
+  it('should preserve field types and configurations', () => {
+    const fields = [
+      {
+        name: 'id',
+        type: FieldType.number,
+        config: { unit: 'short', displayName: 'ID' },
+        values: [1, 2, 3],
+      },
+      {
+        name: 'name',
+        type: FieldType.string,
+        config: { displayName: 'Name' },
+        values: ['A', 'B', 'C'],
+      },
+    ];
+    const meta: SQLQueryMeta = {
+      textField: 'name',
+      valueField: 'id',
+    };
+    const result = convertOriginalFieldsToVariableFields(fields, meta);
+    expect(result[0]).toStrictEqual({
+      name: 'text',
+      type: FieldType.string,
+      config: { displayName: 'Name' },
+      values: ['A', 'B', 'C'],
+    });
+    expect(result[1]).toStrictEqual({
+      name: 'value',
+      type: FieldType.number,
+      config: { unit: 'short', displayName: 'ID' },
+      values: [1, 2, 3],
+    });
+  });
+});

packages/grafana-sql/src/SQLVariableSupport.tsx

@@ -0,0 +1,155 @@
+import { useEffect, useState } from 'react';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import {
+  CustomVariableSupport,
+  DataQueryRequest,
+  DataQueryResponse,
+  QueryEditorProps,
+  Field,
+  DataFrame,
+} from '@grafana/data';
+import { t } from '@grafana/i18n';
+import { EditorMode, EditorRows, EditorRow, EditorField } from '@grafana/plugin-ui';
+import { Combobox, ComboboxOption } from '@grafana/ui';
+
+import { SqlQueryEditorLazy } from './components/QueryEditorLazy';
+import { SqlDatasource } from './datasource/SqlDatasource';
+import { applyQueryDefaults } from './defaults';
+import { QueryFormat, type SQLQuery, type SQLOptions, type SQLQueryMeta } from './types';
+
+type SQLVariableQuery = { query: string } & SQLQuery;
+
+const refId = 'SQLVariableQueryEditor-VariableQuery';
+
+export class SQLVariableSupport extends CustomVariableSupport<SqlDatasource, SQLQuery> {
+  constructor(readonly datasource: SqlDatasource) {
+    super();
+  }
+  editor = SQLVariablesQueryEditor;
+  query(request: DataQueryRequest<SQLQuery>): Observable<DataQueryResponse> {
+    if (request.targets.length < 1) {
+      throw new Error('no variable query found');
+    }
+    const updatedQuery = migrateVariableQuery(request.targets[0]);
+    return this.datasource.query({ ...request, targets: [updatedQuery] }).pipe(
+      map((d: DataQueryResponse) => {
+        return {
+          ...d,
+          data: (d.data || []).map((frame: DataFrame) => ({
+            ...frame,
+            fields: convertOriginalFieldsToVariableFields(frame.fields, updatedQuery.meta),
+          })),
+        };
+      })
+    );
+  }
+  getDefaultQuery(): Partial<SQLQuery> {
+    return applyQueryDefaults({ refId, editorMode: EditorMode.Builder, format: QueryFormat.Table });
+  }
+}
+
+type SQLVariableQueryEditorProps = QueryEditorProps<SqlDatasource, SQLQuery, SQLOptions>;
+
+const SQLVariablesQueryEditor = (props: SQLVariableQueryEditorProps) => {
+  const query = migrateVariableQuery(props.query);
+  return (
+    <>
+      <SqlQueryEditorLazy {...props} query={query} />
+      <FieldMapping {...props} query={query} />
+    </>
+  );
+};
+
+const FieldMapping = (props: SQLVariableQueryEditorProps) => {
+  const { query, datasource, onChange } = props;
+  const [choices, setChoices] = useState<ComboboxOption[]>([]);
+  useEffect(() => {
+    let isActive = true;
+    // eslint-disable-next-line
+    const subscription = datasource.query({ targets: [query] } as DataQueryRequest<SQLQuery>).subscribe({
+      next: (response) => {
+        if (!isActive) {
+          return;
+        }
+        const fieldNames = (response.data[0] || { fields: [] }).fields.map((f: Field) => f.name);
+        setChoices(fieldNames.map((f: Field) => ({ value: f, label: f })));
+      },
+      error: () => {
+        if (isActive) {
+          setChoices([]);
+        }
+      },
+    });
+    return () => {
+      isActive = false;
+      subscription.unsubscribe();
+    };
+  }, [datasource, query]);
+  const onMetaPropChange = <Key extends keyof SQLQueryMeta, Value extends SQLQueryMeta[Key]>(
+    key: Key,
+    value: Value,
+    meta = query.meta || {}
+  ) => {
+    onChange({ ...query, meta: { ...meta, [key]: value } });
+  };
+  return (
+    <EditorRows>
+      <EditorRow>
+        <EditorField label={t('grafana-sql.components.query-meta.variables.valueField', 'Value Field')}>
+          <Combobox
+            isClearable
+            value={query.meta?.valueField}
+            onChange={(e) => onMetaPropChange('valueField', e?.value)}
+            width={40}
+            options={choices}
+          />
+        </EditorField>
+        <EditorField label={t('grafana-sql.components.query-meta.variables.textField', 'Text Field')}>
+          <Combobox
+            isClearable
+            value={query.meta?.textField}
+            onChange={(e) => onMetaPropChange('textField', e?.value)}
+            width={40}
+            options={choices}
+          />
+        </EditorField>
+      </EditorRow>
+    </EditorRows>
+  );
+};
+
+export const migrateVariableQuery = (rawQuery: string | SQLQuery): SQLVariableQuery => {
+  if (typeof rawQuery !== 'string') {
+    return {
+      ...rawQuery,
+      refId: rawQuery.refId || refId,
+      query: rawQuery.rawSql || '',
+    };
+  }
+  return {
+    ...applyQueryDefaults({
+      refId,
+      rawSql: rawQuery,
+      editorMode: rawQuery ? EditorMode.Code : EditorMode.Builder,
+    }),
+    query: rawQuery,
+  };
+};
+
+export const convertOriginalFieldsToVariableFields = (original_fields: Field[], meta?: SQLQueryMeta): Field[] => {
+  if (original_fields.length < 1) {
+    throw new Error('at least one field expected for variable');
+  }
+  let tf = original_fields.find((f) => f.name === '__text');
+  let vf = original_fields.find((f) => f.name === '__value');
+  if (meta) {
+    tf = meta.textField ? original_fields.find((f) => f.name === meta.textField) : undefined;
+    vf = meta.valueField ? original_fields.find((f) => f.name === meta.valueField) : undefined;
+  }
+  const textField = tf || vf || original_fields[0];
+  const valueField = vf || tf || original_fields[0];
+  const otherFields = original_fields.filter((f: Field) => f.name !== 'value' && f.name !== 'text');
+  return [{ ...textField, name: 'text' }, { ...valueField, name: 'value' }, ...otherFields];
+};

packages/grafana-sql/src/index.ts

@@ -21,6 +21,7 @@ export { TLSSecretsConfig } from './components/configuration/TLSSecretsConfig';
 export { useMigrateDatabaseFields } from './components/configuration/useMigrateDatabaseFields';
 export { SqlQueryEditorLazy } from './components/QueryEditorLazy';
 export type { QueryHeaderProps } from './components/QueryHeader';
+export { SQLVariableSupport } from './SQLVariableSupport';
 export { createSelectClause, haveColumns } from './utils/sql.utils';
 export { applyQueryDefaults } from './defaults';
 export { makeVariable } from './utils/testHelpers';

packages/grafana-sql/src/locales/en-US/grafana-sql.json

@@ -69,6 +69,12 @@
         "placeholder-select-format": "Select format",
         "run-query": "Run query"
       },
+      "query-meta": {
+        "variables": {
+          "textField": "Text Field",
+          "valueField": "Value Field"
+        }
+      },
       "query-toolbox": {
         "content-hit-ctrlcmdreturn-to-run-query": "Hit CTRL/CMD+Return to run query",
         "tooltip-collapse": "Collapse editor",

packages/grafana-sql/src/types.ts

@@ -50,6 +50,8 @@ export enum QueryFormat {
   Table = 'table',
 }
 
+export type SQLQueryMeta = { valueField?: string; textField?: string };
+
 export interface SQLQuery extends DataQuery {
   alias?: string;
   format?: QueryFormat;
@@ -59,6 +61,7 @@ export interface SQLQuery extends DataQuery {
   sql?: SQLExpression;
   editorMode?: EditorMode;
   rawQuery?: boolean;
+  meta?: SQLQueryMeta;
 }
 
 export interface NameValue {

public/app/plugins/datasource/grafana-postgresql-datasource/datasource.ts

@@ -11,6 +11,7 @@ import {
   SQLQuery,
   SQLSelectableValue,
   SqlDatasource,
+  SQLVariableSupport,
   formatSQL,
 } from '@grafana/sql';
 
@@ -25,6 +26,7 @@ export class PostgresDatasource extends SqlDatasource {
 
   constructor(instanceSettings: DataSourceInstanceSettings<PostgresOptions>) {
     super(instanceSettings);
+    this.variables = new SQLVariableSupport(this);
   }
 
   getQueryModel(target?: SQLQuery, templateSrv?: TemplateSrv, scopedVars?: ScopedVars): PostgresQueryModel {