replaced the deprecated variables editor (#453)

This PR replace the deprecated legacy variable editor to the
StandardVariableSupport method.

Author: yesoreyeram

.changeset/four-drinks-argue.md

@@ -0,0 +1,5 @@
+---
+'grafana-github-datasource': patch
+---
+
+Removed unused annotations method (replaced with new annotations support in [#196](https://github.com/grafana/github-datasource/pull/196))

.changeset/tricky-parrots-marry.md

@@ -0,0 +1,5 @@
+---
+'grafana-github-datasource': patch
+---
+
+Replaced the deprecated `setVariableQueryEditor` with `CustomVariableSupport`

src/DataSource.test.ts

@@ -1,46 +1,77 @@
-import { DataQueryResponse, DataSourceInstanceSettings, toDataFrame } from '@grafana/data';
-import { of } from 'rxjs';
+import { DataQueryRequest, DataQueryResponse, DataSourceInstanceSettings, toDataFrame } from '@grafana/data';
+import { lastValueFrom, of } from 'rxjs';
+import { GithubVariableSupport } from 'variables';
 import { GitHubDataSource } from 'DataSource';
 import type { GitHubVariableQuery } from 'types/query';
 
 describe('DataSource', () => {
-  describe('metricFindQuery', () => {
+  describe('GithubVariableSupport', () => {
+    const SAMPLE_RESPONSE_WITH_MULTIPLE_FIELDS = [
+      toDataFrame({
+        fields: [
+          { name: 'test', values: ['value1', 'value2'] },
+          { name: 'foo', values: ['foo1', 'foo2'] },
+          { name: 'bar', values: ['bar1', 'bar2'] },
+        ],
+      }),
+    ];
     it('should return empty array if data in response is empty array', async () => {
       const ds = new GitHubDataSource({} as DataSourceInstanceSettings);
+      const vs = new GithubVariableSupport(ds);
       const query = {} as GitHubVariableQuery;
-
       jest.spyOn(ds, 'query').mockReturnValue(of({ data: [] }));
-      const res = await ds.metricFindQuery(query, {});
-      expect(res).toEqual([]);
+      const res = await lastValueFrom(vs.query({ targets: [query] } as DataQueryRequest));
+      expect(res?.data.map((d) => d.value)).toEqual([]);
+      expect(res?.data.map((d) => d.text)).toEqual([]);
     });
-
     it('should return empty array if no data in response', async () => {
       const ds = new GitHubDataSource({} as DataSourceInstanceSettings);
+      const vs = new GithubVariableSupport(ds);
       const query = {} as GitHubVariableQuery;
-
       jest.spyOn(ds, 'query').mockReturnValue(of({} as DataQueryResponse));
-      const res = await ds.metricFindQuery(query, {});
-      expect(res).toEqual([]);
+      const res = await lastValueFrom(vs.query({ targets: [query] } as DataQueryRequest));
+      expect(res?.data.map((d) => d.value)).toEqual([]);
+      expect(res?.data.map((d) => d.text)).toEqual([]);
     });
-
     it('should return array with values if response has data', async () => {
       const ds = new GitHubDataSource({} as DataSourceInstanceSettings);
+      const vs = new GithubVariableSupport(ds);
       const query = { key: 'test', field: 'test' } as GitHubVariableQuery;
-
-      jest.spyOn(ds, 'query').mockReturnValue(
-        of({
-          data: [
-            toDataFrame({
-              fields: [{ name: 'test', values: ['value1', 'value2'] }],
-            }),
-          ],
-        } as DataQueryResponse)
-      );
-      const res = await ds.metricFindQuery(query, {});
-      expect(res).toEqual([
-        { value: 'value1', text: 'value1' },
-        { value: 'value2', text: 'value2' },
-      ]);
+      const data = [toDataFrame({ fields: [{ name: 'test', values: ['value1', 'value2'] }] })];
+      jest.spyOn(ds, 'query').mockReturnValue(of({ data }));
+      const res = await lastValueFrom(vs.query({ targets: [query] } as DataQueryRequest));
+      expect(res?.data.map((d) => d.value)).toEqual(['value1', 'value2']);
+      expect(res?.data.map((d) => d.text)).toEqual(['value1', 'value2']);
+    });
+    it('mapping of key', async () => {
+      const ds = new GitHubDataSource({} as DataSourceInstanceSettings);
+      const vs = new GithubVariableSupport(ds);
+      const query = { key: 'foo' } as GitHubVariableQuery;
+      const data = SAMPLE_RESPONSE_WITH_MULTIPLE_FIELDS;
+      jest.spyOn(ds, 'query').mockReturnValue(of({ data }));
+      const res = await lastValueFrom(vs.query({ targets: [query] } as DataQueryRequest));
+      expect(res?.data.map((d) => d.value)).toEqual(['foo1', 'foo2']);
+      expect(res?.data.map((d) => d.text)).toEqual(['foo1', 'foo2']);
+    });
+    it('mapping of key and field', async () => {
+      const ds = new GitHubDataSource({} as DataSourceInstanceSettings);
+      const vs = new GithubVariableSupport(ds);
+      const query = { key: 'bar', field: 'foo' } as GitHubVariableQuery;
+      const data = SAMPLE_RESPONSE_WITH_MULTIPLE_FIELDS;
+      jest.spyOn(ds, 'query').mockReturnValue(of({ data }));
+      const res = await lastValueFrom(vs.query({ targets: [query] } as DataQueryRequest));
+      expect(res?.data.map((d) => d.value)).toEqual(['bar1', 'bar2']);
+      expect(res?.data.map((d) => d.text)).toEqual(['foo1', 'foo2']);
+    });
+    it('mapping of field', async () => {
+      const ds = new GitHubDataSource({} as DataSourceInstanceSettings);
+      const vs = new GithubVariableSupport(ds);
+      const query = { field: 'foo' } as GitHubVariableQuery;
+      const data = SAMPLE_RESPONSE_WITH_MULTIPLE_FIELDS;
+      jest.spyOn(ds, 'query').mockReturnValue(of({ data }));
+      const res = await lastValueFrom(vs.query({ targets: [query] } as DataQueryRequest));
+      expect(res?.data.map((d) => d.value)).toEqual(['foo1', 'foo2']);
+      expect(res?.data.map((d) => d.text)).toEqual(['foo1', 'foo2']);
     });
   });
 });

src/DataSource.ts

@@ -1,22 +1,11 @@
-import {
-  AnnotationEvent,
-  DataFrame,
-  DataFrameView,
-  DataQueryRequest,
-  DataQueryResponse,
-  DataSourceInstanceSettings,
-  LegacyMetricFindQueryOptions,
-  MetricFindValue,
-  ScopedVars,
-} from '@grafana/data';
+import { DataQueryRequest, DataQueryResponse, DataSourceInstanceSettings, ScopedVars } from '@grafana/data';
 import { DataSourceWithBackend, getTemplateSrv } from '@grafana/runtime';
-import { replaceVariables } from './variables';
+import { replaceVariables, GithubVariableSupport } from './variables';
 import { isValid } from './validation';
-import { getAnnotationsFromFrame } from 'common/annotationsFromDataFrame';
 import { prepareAnnotation } from 'migrations';
-import { Observable } from 'rxjs';
+import { Observable, lastValueFrom } from 'rxjs';
 import { trackRequest } from 'tracking';
-import type { GitHubQuery, GitHubVariableQuery } from './types/query';
+import type { GitHubQuery } from './types/query';
 import type { GitHubDataSourceOptions } from './types/config';
 
 export class GitHubDataSource extends DataSourceWithBackend<GitHubQuery, GitHubDataSourceOptions> {
@@ -27,6 +16,7 @@ export class GitHubDataSource extends DataSourceWithBackend<GitHubQuery, GitHubD
     this.annotations = {
       prepareAnnotation,
     };
+    this.variables = new GithubVariableSupport(this);
   }
 
   // Required by DataSourceApi. It executes queries based on the provided DataQueryRequest.
@@ -46,39 +36,6 @@ export class GitHubDataSource extends DataSourceWithBackend<GitHubQuery, GitHubD
     return replaceVariables(this.templateSrv, query, scoped);
   }
 
-  /**
-   * Implemented as part of the DataSourceAPI. It allows the datasource to serve as a source of annotations for a dashboard.
-   * @returns A promise that resolves to an array of AnnotationEvent objects representing the annotations for the dashboard.
-   * @todo This is deprecated and it is recommended to use the `AnnotationSupport` feature for annotations.
-   */
-  async annotationQuery(request: any): Promise<AnnotationEvent[]> {
-    const { annotation } = request.annotation;
-
-    const query = {
-      targets: [
-        {
-          ...annotation,
-          datasourceId: this.id,
-          refId: this.name,
-        },
-      ],
-      range: request.range,
-      interval: request.interval,
-    } as DataQueryRequest<GitHubQuery>;
-
-    const res = await this.query(query).toPromise();
-
-    if (!res?.data?.length) {
-      return [];
-    }
-    return getAnnotationsFromFrame(res.data[0], {
-      field: {
-        time: annotation.timeField, // or first time field
-        text: annotation.field || 'name',
-      },
-    });
-  }
-
   // Used in VariableQueryEditor to get the choices for variables
   async getChoices(query: GitHubQuery): Promise<string[]> {
     const request = {
@@ -95,40 +52,11 @@ export class GitHubDataSource extends DataSourceWithBackend<GitHubQuery, GitHubD
     } as DataQueryRequest;
 
     try {
-      const res = await this.query(request).toPromise();
+      const res = await lastValueFrom(this.query(request));
       const columns = (res?.data[0]?.fields || []).map((f: any) => f.name) || [];
       return columns;
     } catch (err) {
       return Promise.reject(err);
     }
   }
-
-  // Implemented as part of DataSourceAPI and used for template variable queries
-  async metricFindQuery(query: GitHubVariableQuery, options: LegacyMetricFindQueryOptions): Promise<MetricFindValue[]> {
-    const request = {
-      targets: [
-        {
-          ...query,
-          refId: 'metricFindQuery',
-        },
-      ],
-      range: options.range,
-    } as DataQueryRequest;
-    try {
-      const res = await this.query(request).toPromise();
-      if (!res?.data?.length) {
-        return [];
-      }
-      const view = new DataFrameView(res.data[0] as DataFrame);
-      return view.map((item) => {
-        const value = item[query.key || ''] || item[query.field || 'name'];
-        return {
-          value,
-          text: item[query.field || 'name'],
-        };
-      });
-    } catch (ex) {
-      return Promise.reject(ex);
-    }
-  }
 }