Annotations: Fixes this.templateSrv.replace is not a function error for Grafana datasource (#21778)

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

 import _ from 'lodash';
-import { TemplateSrv } from 'app/features/templating/template_srv';
 import { getBackendSrv } from '@grafana/runtime';
+import { DataSourceApi, DataSourceInstanceSettings } from '@grafana/data';
 
-class GrafanaDatasource {
+import templateSrv from 'app/features/templating/template_srv';
+
+class GrafanaDatasource extends DataSourceApi<any> {
   /** @ngInject */
-  constructor(private templateSrv: TemplateSrv) {}
+  constructor(instanceSettings: DataSourceInstanceSettings) {
+    super(instanceSettings);
+  }
 
   query(options: any) {
     return getBackendSrv()
@@ -33,7 +37,7 @@ class GrafanaDatasource {
   }
 
   metricFindQuery(options: any) {
-    return Promise.resolve({ data: [] });
+    return Promise.resolve([]);
   }
 
   annotationQuery(options: any) {
@@ -62,7 +66,7 @@ class GrafanaDatasource {
       const delimiter = '__delimiter__';
       const tags = [];
       for (const t of params.tags) {
-        const renderedValues = this.templateSrv.replace(t, {}, (value: any) => {
+        const renderedValues = templateSrv.replace(t, {}, (value: any) => {
           if (typeof value === 'string') {
             return value;
           }
@@ -78,6 +82,10 @@ class GrafanaDatasource {
 
     return getBackendSrv().get('/api/annotations', params);
   }
+
+  testDatasource() {
+    return Promise.resolve();
+  }
 }
 
 export { GrafanaDatasource };

public/app/plugins/datasource/grafana/specs/datasource.test.ts

-import { dateTime } from '@grafana/data';
+import { DataSourceInstanceSettings, dateTime } from '@grafana/data';
 import { backendSrv } from 'app/core/services/backend_srv'; // will use the version in __mocks__
 import { GrafanaDatasource } from '../datasource';
 
@@ -7,6 +7,12 @@ jest.mock('@grafana/runtime', () => ({
   getBackendSrv: () => backendSrv,
 }));
 
+jest.mock('app/features/templating/template_srv', () => ({
+  replace: (val: string) => {
+    return val.replace('$var2', 'replaced__delimiter__replaced2').replace('$var', 'replaced');
+  },
+}));
+
 describe('grafana data source', () => {
   const getMock = jest.spyOn(backendSrv, 'get');
 
@@ -16,7 +22,6 @@ describe('grafana data source', () => {
 
   describe('when executing an annotations query', () => {
     let calledBackendSrvParams: any;
-    let templateSrvStub: any;
     let ds: GrafanaDatasource;
     beforeEach(() => {
       getMock.mockImplementation((url: string, options: any) => {
@@ -24,13 +29,7 @@ describe('grafana data source', () => {
         return Promise.resolve([]);
       });
 
-      templateSrvStub = {
-        replace: (val: string) => {
-          return val.replace('$var2', 'replaced__delimiter__replaced2').replace('$var', 'replaced');
-        },
-      };
-
-      ds = new GrafanaDatasource(templateSrvStub as any);
+      ds = new GrafanaDatasource({} as DataSourceInstanceSettings);
     });
 
     describe('with tags that have template variables', () => {