Angular: Isolate angular modal support from react modal support (#41788)

* Angular: Isolate angular modal support from react modal support

* remove unrealted change

public/app/angular/GrafanaCtrl.ts

@@ -13,7 +13,7 @@ import { AngularLoader } from 'app/angular/services/AngularLoader';
 
 // Types
 import { CoreEvents, AppEventEmitter, AppEventConsumer } from 'app/types';
-import { UtilSrv } from 'app/core/services/util_srv';
+import { UtilSrv } from './services/UtilSrv';
 import { ContextSrv } from 'app/core/services/context_srv';
 import { IRootScopeService, IAngularEvent, auto } from 'angular';
 import { AppEvent } from '@grafana/data';

public/app/angular/registerComponents.ts

@@ -5,6 +5,7 @@ import { validationSrv } from 'app/features/manage-dashboards/services/Validatio
 import { getLinkSrv } from 'app/features/panel/panellinks/link_srv';
 import coreModule from './core_module';
 import { AnnotationsSrv } from './services/annotations_srv';
+import { UtilSrv } from './services/UtilSrv';
 
 export function registerComponents() {
   coreModule.factory('backendSrv', () => getBackendSrv());
@@ -14,4 +15,5 @@ export function registerComponents() {
   coreModule.factory('linkSrv', () => getLinkSrv());
   coreModule.factory('validationSrv', () => validationSrv);
   coreModule.service('annotationsSrv', AnnotationsSrv);
+  coreModule.service('utilSrv', UtilSrv);
 }

public/app/angular/services/UtilSrv.ts

@@ -0,0 +1,64 @@
+import { GrafanaRootScope } from 'app/angular/GrafanaCtrl';
+import { HideModalEvent, ShowModalEvent } from '../../types/events';
+import { deprecationWarning } from '@grafana/data';
+import { appEvents } from 'app/core/app_events';
+
+/**
+ * Old legacy utilSrv exposed to angular services and handles angular modals.
+ * Not used by any core or known external plugin.
+ */
+export class UtilSrv {
+  modalScope: any;
+
+  /** @ngInject */
+  constructor(private $rootScope: GrafanaRootScope, private $modal: any) {}
+
+  init() {
+    appEvents.subscribe(ShowModalEvent, (e) => this.showModal(e.payload));
+    appEvents.subscribe(HideModalEvent, this.hideModal.bind(this));
+  }
+
+  /**
+   * @deprecated use showModalReact instead that has this capability built in
+   */
+  hideModal() {
+    deprecationWarning('UtilSrv', 'hideModal', 'showModalReact');
+    if (this.modalScope && this.modalScope.dismiss) {
+      this.modalScope.dismiss();
+    }
+  }
+
+  /**
+   * @deprecated use showModalReact instead
+   */
+  showModal(options: any) {
+    deprecationWarning('UtilSrv', 'showModal', 'showModalReact');
+    if (this.modalScope && this.modalScope.dismiss) {
+      this.modalScope.dismiss();
+    }
+
+    this.modalScope = options.scope;
+
+    if (options.model) {
+      this.modalScope = this.$rootScope.$new();
+      this.modalScope.model = options.model;
+    } else if (!this.modalScope) {
+      this.modalScope = this.$rootScope.$new();
+    }
+
+    const modal = this.$modal({
+      modalClass: options.modalClass,
+      template: options.src,
+      templateHtml: options.templateHtml,
+      persist: false,
+      show: false,
+      scope: this.modalScope,
+      keyboard: false,
+      backdrop: options.backdrop,
+    });
+
+    Promise.resolve(modal).then((modalEl) => {
+      modalEl.modal('show');
+    });
+  }
+}

public/app/app.ts

@@ -62,6 +62,7 @@ import { getAllOptionEditors } from './core/components/editors/registry';
 import { backendSrv } from './core/services/backend_srv';
 import { DatasourceSrv } from './features/plugins/datasource_srv';
 import { AngularApp } from './angular';
+import { ModalManager } from './core/services/ModalManager';
 
 // add move to lodash for backward compatabilty with plugins
 // @ts-ignore
@@ -121,6 +122,10 @@ export class GrafanaApp {
       dataSourceSrv.init(config.datasources, config.defaultDatasource);
       setDataSourceSrv(dataSourceSrv);
 
+      // init modal manager
+      const modalManager = new ModalManager();
+      modalManager.init();
+
       // Init angular
       this.angularApp.init();
 

public/app/core/core.ts

@@ -1,7 +1,6 @@
 import './jquery_extended';
 import './services/search_srv';
 import { colors, JsonExplorer } from '@grafana/ui/';
-import 'app/core/services/all';
 import appEvents from './app_events';
 import { assignModelProperties } from './utils/model_utils';
 import { contextSrv } from './services/context_srv';

public/app/core/services/ModalManager.ts

@@ -1,36 +1,20 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import coreModule from 'app/angular/core_module';
 import appEvents from 'app/core/app_events';
-import { GrafanaRootScope } from 'app/angular/GrafanaCtrl';
 import { AngularModalProxy } from '../components/modals/AngularModalProxy';
 import { provideTheme } from '../utils/ConfigProvider';
-import {
-  HideModalEvent,
-  ShowConfirmModalEvent,
-  ShowConfirmModalPayload,
-  ShowModalEvent,
-  ShowModalReactEvent,
-} from '../../types/events';
+import { ShowConfirmModalEvent, ShowConfirmModalPayload, ShowModalReactEvent } from '../../types/events';
 import { ConfirmModal, ConfirmModalProps } from '@grafana/ui';
-import { deprecationWarning, textUtil } from '@grafana/data';
+import { textUtil } from '@grafana/data';
 import { CopyPanelEvent } from '@grafana/runtime';
 import { copyPanel } from 'app/features/dashboard/utils/panel';
 
-export class UtilSrv {
-  modalScope: any;
+export class ModalManager {
   reactModalRoot = document.body;
   reactModalNode = document.createElement('div');
 
-  /** @ngInject */
-  constructor(private $rootScope: GrafanaRootScope, private $modal: any) {
-    this.reactModalNode.setAttribute('id', 'angular2ReactModalRoot');
-  }
-
   init() {
-    appEvents.subscribe(ShowModalEvent, (e) => this.showModal(e.payload));
-    appEvents.subscribe(HideModalEvent, this.hideModal.bind(this));
     appEvents.subscribe(ShowConfirmModalEvent, (e) => this.showConfirmModal(e.payload));
     appEvents.subscribe(ShowModalReactEvent, (e) => this.showModalReact(e.payload));
     appEvents.subscribe(CopyPanelEvent, (e) => copyPanel(e.payload));
@@ -57,50 +41,6 @@ export class UtilSrv {
     this.reactModalRoot.removeChild(this.reactModalNode);
   };
 
-  /**
-   * @deprecated use showModalReact instead that has this capability built in
-   */
-  hideModal() {
-    deprecationWarning('UtilSrv', 'hideModal', 'showModalReact');
-    if (this.modalScope && this.modalScope.dismiss) {
-      this.modalScope.dismiss();
-    }
-  }
-
-  /**
-   * @deprecated use showModalReact instead
-   */
-  showModal(options: any) {
-    deprecationWarning('UtilSrv', 'showModal', 'showModalReact');
-    if (this.modalScope && this.modalScope.dismiss) {
-      this.modalScope.dismiss();
-    }
-
-    this.modalScope = options.scope;
-
-    if (options.model) {
-      this.modalScope = this.$rootScope.$new();
-      this.modalScope.model = options.model;
-    } else if (!this.modalScope) {
-      this.modalScope = this.$rootScope.$new();
-    }
-
-    const modal = this.$modal({
-      modalClass: options.modalClass,
-      template: options.src,
-      templateHtml: options.templateHtml,
-      persist: false,
-      show: false,
-      scope: this.modalScope,
-      keyboard: false,
-      backdrop: options.backdrop,
-    });
-
-    Promise.resolve(modal).then((modalEl) => {
-      modalEl.modal('show');
-    });
-  }
-
   showConfirmModal(payload: ShowConfirmModalPayload) {
     const {
       confirmText,
@@ -147,5 +87,3 @@ export class UtilSrv {
     ReactDOM.render(elem, this.reactModalNode);
   }
 }
-
-coreModule.service('utilSrv', UtilSrv);

public/app/core/services/all.ts

@@ -1,3 +0,0 @@
-import './util_srv';
-import './context_srv';
-import './backend_srv';

public/app/core/services/keybindingSrv.ts

@@ -9,11 +9,9 @@ import { SaveDashboardModalProxy } from 'app/features/dashboard/components/SaveD
 import { locationService } from '@grafana/runtime';
 import { exitKioskMode, toggleKioskMode } from '../navigation/kiosk';
 import {
-  HideModalEvent,
   RemovePanelEvent,
   ShiftTimeEvent,
   ShiftTimeEventPayload,
-  ShowModalEvent,
   ShowModalReactEvent,
   ZoomOutEvent,
 } from '../../types/events';
@@ -25,12 +23,6 @@ import { withFocusedPanel } from './withFocusedPanelId';
 import { HelpModal } from '../components/help/HelpModal';
 
 export class KeybindingSrv {
-  modalOpen = false;
-
-  constructor() {
-    appEvents.subscribe(ShowModalEvent, () => (this.modalOpen = true));
-  }
-
   reset() {
     Mousetrap.reset();
   }
@@ -102,13 +94,6 @@ export class KeybindingSrv {
   }
 
   private exit() {
-    appEvents.publish(new HideModalEvent());
-
-    if (this.modalOpen) {
-      this.modalOpen = false;
-      return;
-    }
-
     const search = locationService.getSearchObject();
 
     if (search.editview) {