Templating: Fixes digest issues in Template Variable Editor (#21079)

* Fix: Adds extra digest after promises

* Feature: Adds promise to digest utility

public/app/core/utils/promiseToDigest.test.ts

+import { IScope } from 'angular';
+import { promiseToDigest } from './promiseToDigest';
+
+describe('promiseToDigest', () => {
+  describe('when called with a promise that resolves', () => {
+    it('then evalAsync should be called on $scope', async () => {
+      const $scope: IScope = ({ $evalAsync: jest.fn() } as any) as IScope;
+
+      await promiseToDigest($scope)(Promise.resolve(123));
+
+      expect($scope.$evalAsync).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('when called with a promise that rejects', () => {
+    it('then evalAsync should be called on $scope', async () => {
+      const $scope: IScope = ({ $evalAsync: jest.fn() } as any) as IScope;
+
+      try {
+        await promiseToDigest($scope)(Promise.reject(123));
+      } catch (error) {
+        expect(error).toEqual(123);
+        expect($scope.$evalAsync).toHaveBeenCalledTimes(1);
+      }
+    });
+  });
+});

public/app/core/utils/promiseToDigest.ts

+import { IScope } from 'angular';
+
+export const promiseToDigest = ($scope: IScope) => (promise: Promise<any>) => promise.finally($scope.$evalAsync);

public/app/features/templating/editor_ctrl.ts

@@ -6,6 +6,7 @@ import DatasourceSrv from '../plugins/datasource_srv';
 import { VariableSrv } from './all';
 import { TemplateSrv } from './template_srv';
 import { AppEvents } from '@grafana/data';
+import { promiseToDigest } from '../../core/utils/promiseToDigest';
 
 export class VariableEditorCtrl {
   /** @ngInject */
@@ -122,11 +123,13 @@ export class VariableEditorCtrl {
       $scope.infoText = '';
       if ($scope.current.type === 'adhoc' && $scope.current.datasource !== null) {
         $scope.infoText = 'Adhoc filters are applied automatically to all queries that target this datasource';
+        promiseToDigest($scope)(
           datasourceSrv.get($scope.current.datasource).then(ds => {
             if (!ds.getTagKeys) {
               $scope.infoText = 'This datasource does not support adhoc filters yet.';
             }
-        });
+          })
+        );
       }
     };
 
@@ -154,9 +157,11 @@ export class VariableEditorCtrl {
       $scope.currentIsNew = false;
       $scope.mode = 'edit';
       $scope.validate();
+      promiseToDigest($scope)(
         datasourceSrv.get($scope.current.datasource).then(ds => {
           $scope.currentDatasource = ds;
-      });
+        })
+      );
     };
 
     $scope.duplicate = (variable: { getSaveModel: () => void; name: string }) => {
@@ -168,11 +173,13 @@ export class VariableEditorCtrl {
 
     $scope.update = () => {
       if ($scope.isValid()) {
+        promiseToDigest($scope)(
           $scope.runQuery().then(() => {
             $scope.reset();
             $scope.mode = 'list';
             templateSrv.updateIndex();
-        });
+          })
+        );
       }
     };
 
@@ -218,10 +225,12 @@ export class VariableEditorCtrl {
     };
 
     $scope.datasourceChanged = async () => {
+      promiseToDigest($scope)(
         datasourceSrv.get($scope.current.datasource).then(ds => {
           $scope.current.query = '';
           $scope.currentDatasource = ds;
-      });
+        })
+      );
     };
   }
 }