Chore: Remove angular dependency from backendSrv (#20999)

* Chore: Remove angular dependency from backendSrv

* Refactor: Naive soultion for logging out unauthorized users

* Refactor: Restructures to different streams

* Refactor: Restructures datasourceRequest

* Refactor: Flipped back if statement

* Refactor: Extracted getFromFetchStream

* Refactor: Extracts toFailureStream operation

* Refactor: Fixes issue when options.params contains arrays

* Refactor: Fixes broken test (but we need a lot more)

* Refactor: Adds explaining comments

* Refactor: Adds latest RxJs version so cancellations work

* Refactor: Cleans up the takeUntil code

* Refactor: Adds tests for request function

* Refactor: Separates into smaller functions

* Refactor: Adds last error tests

* Started to changed so we require getBackendSrv from the @grafana-runtime when applicable.

* Using the getBackendSrv from @grafana/runtime.

* Changed so we use the getBackendSrv from the @grafana-runtime when possible.

* Fixed so Server Admin -> Orgs works again.

* Removed unused dependency.

* Fixed digest issues on the Server Admin -> Users page.

* Fix: Fixes digest problems in Playlists

* Fix: Fixes digest issues in VersionHistory

* Tests: Fixes broken tests

* Fix: Fixes digest issues in Alerting => Notification channels

* Fixed digest issues on the Intive page.

* Fixed so we run digest after password reset email sent.

* Fixed digest issue when trying to sign up account.

* Fixed so the Server Admin -> Edit Org works with backendSrv

* Fixed so Server Admin -> Users works with backend srv.

* Fixed digest issues in Server Admin -> Orgs

* Fix: Fixes digest issues in DashList plugin

* Fixed digest issues on Server Admin -> users.

* Fix: Fixes digest issues with Snapshots

* Fixed digest issue when deleting a user.

* Fix: Fixes digest issues with dashLink

* Chore: Changes RxJs version to 6.5.4 which includes the same cancellation fix

* Fix: Fixes digest issue when toggling folder in manage dashboards

* Fix: Fixes bug in executeInOrder

* Fix: Fixes digest issue with CreateFolderCtrl and FolderDashboardsCtrl

* Fix: Fixes tslint error in test

* Refactor: Changes default behaviour for emitted messages as before migration

* Fix: Fixes various digest issues when saving, starring or deleting dashboards

* Fix: Fixes digest issues with FolderPickerCtrl

* Fixed digest issue.

* Fixed digest issues.

* Fixed issues with angular digest.

* Removed the this.digest pattern.

Co-authored-by: Hugo Häggmark <hugo.haggmark@gmail.com>
Co-authored-by: Marcus Andersson <systemvetaren@gmail.com>

public/app/core/components/Select/DashboardPicker.tsx

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import { AsyncSelect } from '@grafana/ui';
 import { SelectableValue } from '@grafana/data';
 import { debounce } from 'lodash';
-import { getBackendSrv } from 'app/core/services/backend_srv';
+import { backendSrv } from 'app/core/services/backend_srv';
 import { DashboardSearchHit, DashboardDTO } from 'app/types';
 
 export interface Props {
@@ -33,20 +33,16 @@ export class DashboardPicker extends PureComponent<Props, State> {
 
   getDashboards = (query = '') => {
     this.setState({ isLoading: true });
-    return getBackendSrv()
-      .search({ type: 'dash-db', query })
-      .then((result: DashboardSearchHit[]) => {
-        const dashboards = result.map((item: DashboardSearchHit) => {
-          return {
-            id: item.id,
-            value: item.id,
-            label: `${item.folderTitle ? item.folderTitle : 'General'}/${item.title}`,
-          };
-        });
+    return backendSrv.search({ type: 'dash-db', query }).then((result: DashboardSearchHit[]) => {
+      const dashboards = result.map((item: DashboardSearchHit) => ({
+        id: item.id,
+        value: item.id,
+        label: `${item.folderTitle ? item.folderTitle : 'General'}/${item.title}`,
+      }));
 
-        this.setState({ isLoading: false });
-        return dashboards;
-      });
+      this.setState({ isLoading: false });
+      return dashboards;
+    });
   };
 
   render() {

public/app/core/components/Select/TeamPicker.test.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import { TeamPicker } from './TeamPicker';
 
-jest.mock('app/core/services/backend_srv', () => ({
+jest.mock('@grafana/runtime', () => ({
   getBackendSrv: () => {
     return {
       get: () => {

public/app/core/components/Select/TeamPicker.tsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import _ from 'lodash';
 import { AsyncSelect } from '@grafana/ui';
 import { debounce } from 'lodash';
-import { getBackendSrv } from 'app/core/services/backend_srv';
+import { getBackendSrv } from '@grafana/runtime';
 
 export interface Team {
   id: number;
@@ -35,27 +35,28 @@ export class TeamPicker extends Component<Props, State> {
   }
 
   search(query?: string) {
-    const backendSrv = getBackendSrv();
     this.setState({ isLoading: true });
 
     if (_.isNil(query)) {
       query = '';
     }
 
-    return backendSrv.get(`/api/teams/search?perpage=100&page=1&query=${query}`).then((result: any) => {
-      const teams = result.teams.map((team: any) => {
-        return {
-          id: team.id,
-          value: team.id,
-          label: team.name,
-          name: team.name,
-          imgUrl: team.avatarUrl,
-        };
-      });
+    return getBackendSrv()
+      .get(`/api/teams/search?perpage=100&page=1&query=${query}`)
+      .then((result: any) => {
+        const teams = result.teams.map((team: any) => {
+          return {
+            id: team.id,
+            value: team.id,
+            label: team.name,
+            name: team.name,
+            imgUrl: team.avatarUrl,
+          };
+        });
 
-      this.setState({ isLoading: false });
-      return teams;
-    });
+        this.setState({ isLoading: false });
+        return teams;
+      });
   }
 
   render() {

public/app/core/components/Select/UserPicker.test.tsx

@@ -3,14 +3,8 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import { UserPicker } from './UserPicker';
 
-jest.mock('app/core/services/backend_srv', () => ({
-  getBackendSrv: () => {
-    return {
-      get: () => {
-        return Promise.resolve([]);
-      },
-    };
-  },
+jest.mock('@grafana/runtime', () => ({
+  getBackendSrv: () => ({ get: jest.fn().mockResolvedValue([]) }),
 }));
 
 describe('UserPicker', () => {

public/app/core/components/Select/UserPicker.tsx

@@ -7,7 +7,7 @@ import { AsyncSelect } from '@grafana/ui';
 
 // Utils & Services
 import { debounce } from 'lodash';
-import { getBackendSrv } from 'app/core/services/backend_srv';
+import { getBackendSrv } from '@grafana/runtime';
 
 // Types
 import { User } from 'app/types';
@@ -36,14 +36,13 @@ export class UserPicker extends Component<Props, State> {
   }
 
   search(query?: string) {
-    const backendSrv = getBackendSrv();
     this.setState({ isLoading: true });
 
     if (_.isNil(query)) {
       query = '';
     }
 
-    return backendSrv
+    return getBackendSrv()
       .get(`/api/org/users/lookup?query=${query}&limit=10`)
       .then((result: any) => {
         return result.map((user: any) => ({

public/app/core/components/SharedPreferences/SharedPreferences.tsx

@@ -3,7 +3,7 @@ import React, { PureComponent } from 'react';
 import { FormLabel, Select } from '@grafana/ui';
 
 import { DashboardSearchHit, DashboardSearchHitType } from 'app/types';
-import { getBackendSrv } from 'app/core/services/backend_srv';
+import { backendSrv } from 'app/core/services/backend_srv';
 
 export interface Props {
   resourceUri: string;
@@ -29,7 +29,7 @@ const timezones = [
 ];
 
 export class SharedPreferences extends PureComponent<Props, State> {
-  backendSrv = getBackendSrv();
+  backendSrv = backendSrv;
 
   constructor(props: Props) {
     super(props);
@@ -43,8 +43,8 @@ export class SharedPreferences extends PureComponent<Props, State> {
   }
 
   async componentDidMount() {
-    const prefs = await this.backendSrv.get(`/api/${this.props.resourceUri}/preferences`);
-    const dashboards = await this.backendSrv.search({ starred: true });
+    const prefs = await backendSrv.get(`/api/${this.props.resourceUri}/preferences`);
+    const dashboards = await backendSrv.search({ starred: true });
     const defaultDashboardHit: DashboardSearchHit = {
       id: 0,
       title: 'Default',
@@ -62,7 +62,7 @@ export class SharedPreferences extends PureComponent<Props, State> {
     };
 
     if (prefs.homeDashboardId > 0 && !dashboards.find(d => d.id === prefs.homeDashboardId)) {
-      const missing = await this.backendSrv.search({ dashboardIds: [prefs.homeDashboardId] });
+      const missing = await backendSrv.search({ dashboardIds: [prefs.homeDashboardId] });
       if (missing && missing.length > 0) {
         dashboards.push(missing[0]);
       }
@@ -81,7 +81,7 @@ export class SharedPreferences extends PureComponent<Props, State> {
 
     const { homeDashboardId, theme, timezone } = this.state;
 
-    await this.backendSrv.put(`/api/${this.props.resourceUri}/preferences`, {
+    await backendSrv.put(`/api/${this.props.resourceUri}/preferences`, {
       homeDashboardId,
       theme,
       timezone,

public/app/core/components/dashboard_selector.ts

@@ -1,5 +1,5 @@
 import coreModule from 'app/core/core_module';
-import { BackendSrv } from '../services/backend_srv';
+import { backendSrv } from '../services/backend_srv';
 
 const template = `
 <select class="gf-form-input" ng-model="ctrl.model" ng-options="f.value as f.text for f in ctrl.options"></select>
@@ -9,13 +9,10 @@ export class DashboardSelectorCtrl {
   model: any;
   options: any;
 
-  /** @ngInject */
-  constructor(private backendSrv: BackendSrv) {}
-
   $onInit() {
     this.options = [{ value: 0, text: 'Default' }];
 
-    return this.backendSrv.search({ starred: true }).then(res => {
+    return backendSrv.search({ starred: true }).then(res => {
       res.forEach(dash => {
         this.options.push({ value: dash.id, text: dash.title });
       });

public/app/core/components/manage_dashboards/manage_dashboards.ts

@@ -3,9 +3,10 @@ import _ from 'lodash';
 import coreModule from 'app/core/core_module';
 import appEvents from 'app/core/app_events';
 import { SearchSrv } from 'app/core/services/search_srv';
-import { BackendSrv } from 'app/core/services/backend_srv';
+import { backendSrv } from 'app/core/services/backend_srv';
 import { ContextSrv } from 'app/core/services/context_srv';
 import { CoreEvents } from 'app/types';
+import { promiseToDigest } from '../../utils/promiseToDigest';
 
 export interface Section {
   id: number;
@@ -69,12 +70,7 @@ export class ManageDashboardsCtrl {
   hasEditPermissionInFolders: boolean;
 
   /** @ngInject */
-  constructor(
-    private $scope: IScope,
-    private backendSrv: BackendSrv,
-    private searchSrv: SearchSrv,
-    private contextSrv: ContextSrv
-  ) {
+  constructor(private $scope: IScope, private searchSrv: SearchSrv, private contextSrv: ContextSrv) {
     this.isEditor = this.contextSrv.isEditor;
     this.hasEditPermissionInFolders = this.contextSrv.hasEditPermissionInFolders;
 
@@ -108,10 +104,10 @@ export class ManageDashboardsCtrl {
       .then(() => {
         if (!this.folderUid) {
           this.$scope.$digest();
-          return;
+          return undefined;
         }
 
-        return this.backendSrv.getFolderByUid(this.folderUid).then((folder: any) => {
+        return backendSrv.getFolderByUid(this.folderUid).then((folder: any) => {
           this.canSave = folder.canSave;
           if (!this.canSave) {
             this.hasEditPermissionInFolders = false;
@@ -216,9 +212,11 @@ export class ManageDashboardsCtrl {
   }
 
   private deleteFoldersAndDashboards(folderUids: string[], dashboardUids: string[]) {
-    this.backendSrv.deleteFoldersAndDashboards(folderUids, dashboardUids).then(() => {
-      this.refreshList();
-    });
+    promiseToDigest(this.$scope)(
+      backendSrv.deleteFoldersAndDashboards(folderUids, dashboardUids).then(() => {
+        this.refreshList();
+      })
+    );
   }
 
   getDashboardsToMove() {

public/app/core/components/search/search_results.ts

@@ -1,9 +1,11 @@
 import _ from 'lodash';
+import { ILocationService, IScope } from 'angular';
 import { e2e } from '@grafana/e2e';
 
 import coreModule from '../../core_module';
 import appEvents from 'app/core/app_events';
 import { CoreEvents } from 'app/types';
+import { promiseToDigest } from '../../utils/promiseToDigest';
 
 export class SearchResultsCtrl {
   results: any;
@@ -14,7 +16,7 @@ export class SearchResultsCtrl {
   selectors: typeof e2e.pages.Dashboards.selectors;
 
   /** @ngInject */
-  constructor(private $location: any) {
+  constructor(private $location: ILocationService, private $scope: IScope) {
     this.selectors = e2e.pages.Dashboards.selectors;
   }
 
@@ -24,19 +26,21 @@ export class SearchResultsCtrl {
         this.onFolderExpanding();
       }
 
-      section.toggle(section).then((f: any) => {
-        if (this.editable && f.expanded) {
-          if (f.items) {
-            _.each(f.items, i => {
-              i.checked = f.checked;
-            });
+      promiseToDigest(this.$scope)(
+        section.toggle(section).then((f: any) => {
+          if (this.editable && f.expanded) {
+            if (f.items) {
+              _.each(f.items, i => {
+                i.checked = f.checked;
+              });
 
-            if (this.onSelectionChanged) {
-              this.onSelectionChanged();
+              if (this.onSelectionChanged) {
+                this.onSelectionChanged();
+              }
             }
           }
-        }
-      });
+        })
+      );
     }
   }