simplify shim and pull confirmModal in

elastic · Oct 21, 2019 · c816050 · c816050
1 parent 976d51f
commit c816050
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 109 deletions.
diff --git a/src/legacy/ui/public/modals/confirm_modal.js b/src/legacy/ui/public/modals/confirm_modal.js
@@ -36,16 +36,7 @@ export const ConfirmationButtonTypes = {
   CANCEL: CANCEL_BUTTON
 };
 
-/**
- * @typedef {Object} ConfirmModalOptions
- * @property {String} confirmButtonText
- * @property {String=} cancelButtonText
- * @property {function} onConfirm
- * @property {function=} onCancel
- * @property {String=} title - If given, shows a title on the confirm modal.
- */
-
-module.factory('confirmModal', function ($rootScope, $compile) {
+export function confirmModalFactory($rootScope, $compile) {
   let modalPopover;
   const confirmQueue = [];
 
@@ -114,4 +105,15 @@ module.factory('confirmModal', function ($rootScope, $compile) {
       }
     }
   };
-});
+}
+
+/**
+ * @typedef {Object} ConfirmModalOptions
+ * @property {String} confirmButtonText
+ * @property {String=} cancelButtonText
+ * @property {function} onConfirm
+ * @property {function=} onCancel
+ * @property {String=} title - If given, shows a title on the confirm modal.
+ */
+
+module.factory('confirmModal', confirmModalFactory);
diff --git a/x-pack/legacy/plugins/graph/public/app.js b/x-pack/legacy/plugins/graph/public/app.js
@@ -43,24 +43,21 @@ import {
 export function initGraphApp(angularModule, deps) {
   const {
     xpackInfo,
-    fatalError,
     chrome,
     savedGraphWorkspaces,
     toastNotifications,
-    savedObjectsClient, //Private(SavedObjectsClientProvider)
-    indexPatterns, //data.indexPatterns.indexPatterns
+    savedObjectsClient,
+    indexPatterns,
     kbnBaseUrl,
     addBasePath,
     getBasePath,
     npData,
-    config, //uiSettings?
-    savedObjectRegistry, //Private(SavedObjectRegistryProvider)
+    config,
+    savedObjectRegistry,
     capabilities,
-    coreStart, //coreStart
-    confirmModal,
-    $http, //$http
+    coreStart,
+    $http,
     Storage,
-    KbnUrlProvider,
     canEditDrillDownUrls,
     graphSavePolicy,
   } = deps;
@@ -188,7 +185,7 @@ export function initGraphApp(angularModule, deps) {
 
 
   //========  Controller for basic UI ==================
-  app.controller('graphuiPlugin', function ($scope, $route, $location) {
+  app.controller('graphuiPlugin', function ($scope, $route, $location, confirmModal) {
     checkLicense(kbnBaseUrl);
 
     function handleError(err) {

diff --git a/x-pack/legacy/plugins/graph/public/index.ts b/x-pack/legacy/plugins/graph/public/index.ts
@@ -12,13 +12,10 @@ import 'uiExports/autocompleteProviders';
 import 'ui/autoload/all';
 import chrome from 'ui/chrome';
 import { IPrivate } from 'ui/private';
-import { fatalError } from 'ui/notify';
 // @ts-ignore
 import { xpackInfo } from 'plugins/xpack_main/services/xpack_info';
 import { Storage } from 'ui/storage';
 // @ts-ignore
-import { SavedObjectsClientProvider } from 'ui/saved_objects';
-// @ts-ignore
 import { SavedObjectRegistryProvider } from 'ui/saved_objects/saved_object_registry';
 
 import { npSetup, npStart } from 'ui/new_platform';
@@ -40,11 +37,9 @@ async function getAngularInjectedDependencies(): Promise<LegacyAngularInjectedDe
 
   return {
     $http: injector.get('$http'),
-    confirmModal: injector.get('confirmModal'),
     savedObjectRegistry: Private(SavedObjectRegistryProvider),
     kbnBaseUrl: injector.get('kbnBaseUrl'),
     savedGraphWorkspaces: Private(SavedWorkspacesProvider),
-    savedObjectsClient: Private(SavedObjectsClientProvider),
   };
 }
 
@@ -54,7 +49,6 @@ async function getAngularInjectedDependencies(): Promise<LegacyAngularInjectedDe
     __LEGACY: {
       xpackInfo,
       Storage,
-      fatalError,
     },
   });
   instance.start(npStart.core, {

diff --git a/x-pack/legacy/plugins/graph/public/plugin.ts b/x-pack/legacy/plugins/graph/public/plugin.ts
@@ -5,7 +5,7 @@
  */
 
 // NP type imports
-import { CoreSetup, CoreStart, Plugin } from 'src/core/public';
+import { CoreSetup, CoreStart, Plugin, SavedObjectsClientContract } from 'src/core/public';
 import { DataStart } from 'src/legacy/core_plugins/data/public';
 import { Plugin as DataPlugin } from 'src/plugins/data/public';
 import { LegacyAngularInjectedDependencies } from './render_app';
@@ -19,7 +19,6 @@ export interface GraphPluginSetupDependencies {
   __LEGACY: {
     Storage: any;
     xpackInfo: any;
-    fatalError: any;
   };
 }
 
@@ -32,50 +31,48 @@ export interface GraphPluginStartDependencies {
 export class GraphPlugin implements Plugin {
   private dataStart: DataStart | null = null;
   private npDataStart: ReturnType<DataPlugin['start']> | null = null;
+  private savedObjectsClient: SavedObjectsClientContract | null = null;
   private angularDependencies: LegacyAngularInjectedDependencies | null = null;
 
-  setup(
-    core: CoreSetup,
-    { __LEGACY: { fatalError, xpackInfo, Storage } }: GraphPluginSetupDependencies
-  ) {
+  setup(core: CoreSetup, { __LEGACY: { xpackInfo, Storage } }: GraphPluginSetupDependencies) {
     core.application.register({
       id: 'graph',
       title: 'Graph',
-      order: 9000,
-      icon: 'plugins/graph/icon.png',
-      euiIconType: 'graphApp',
-      mount: async (context, params) => {
+      mount: async ({ core: contextCore }, params) => {
         const { renderApp } = await import('./render_app');
-        return renderApp(
-          context,
-          {
-            ...params,
-            data: this.dataStart!,
-            npData: this.npDataStart!,
-            fatalError,
-            xpackInfo,
-            addBasePath: core.http.basePath.prepend,
-            getBasePath: core.http.basePath.get,
-            canEditDrillDownUrls: core.injectedMetadata.getInjectedVar(
-              'canEditDrillDownUrls'
-            ) as boolean,
-            graphSavePolicy: core.injectedMetadata.getInjectedVar('graphSavePolicy') as string,
-            Storage,
-          },
-          this.angularDependencies!
-        );
+        return renderApp({
+          ...params,
+          npData: this.npDataStart!,
+          savedObjectsClient: this.savedObjectsClient!,
+          xpackInfo,
+          addBasePath: core.http.basePath.prepend,
+          getBasePath: core.http.basePath.get,
+          canEditDrillDownUrls: core.injectedMetadata.getInjectedVar(
+            'canEditDrillDownUrls'
+          ) as boolean,
+          graphSavePolicy: core.injectedMetadata.getInjectedVar('graphSavePolicy') as string,
+          Storage,
+          capabilities: contextCore.application.capabilities.graph,
+          coreStart: contextCore,
+          chrome: contextCore.chrome,
+          config: contextCore.uiSettings,
+          toastNotifications: contextCore.notifications.toasts,
+          indexPatterns: this.dataStart!.indexPatterns.indexPatterns,
+          ...this.angularDependencies!,
+        });
       },
     });
   }
 
   start(
-    _core: CoreStart,
+    core: CoreStart,
     { data, npData, __LEGACY: { angularDependencies } }: GraphPluginStartDependencies
   ) {
     // TODO is this really the right way? I though the app context would give us those
     this.dataStart = data;
     this.npDataStart = npData;
     this.angularDependencies = angularDependencies;
+    this.savedObjectsClient = core.savedObjects.client;
   }
 
   stop() {}

diff --git a/x-pack/legacy/plugins/graph/public/render_app.ts b/x-pack/legacy/plugins/graph/public/render_app.ts
@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { EuiConfirmModal } from '@elastic/eui';
+
 // inner angular imports
 // these are necessary to bootstrap the local angular.
 // They can stay even after NP cutover
@@ -16,14 +18,17 @@ import { configureAppAngularModule } from 'ui/legacy_compat';
 // @ts-ignore
 import { createTopNavDirective, createTopNavHelper } from 'ui/kbn_top_nav/kbn_top_nav';
 // @ts-ignore
-import { PromiseServiceCreator } from 'ui/promises/promises';
-// @ts-ignore
-import { KbnUrlProvider } from 'ui/url';
+import { confirmModalFactory } from 'ui/modals/confirm_modal';
 
 // type imports
 import { DataStart } from 'src/legacy/core_plugins/data/public';
-import { AppMountContext } from 'kibana/public';
-import { AngularHttpError } from 'ui/notify/lib/format_angular_http_error';
+import {
+  AppMountContext,
+  ChromeStart,
+  SavedObjectsClientContract,
+  ToastsStart,
+  UiSettingsClientContract,
+} from 'kibana/public';
 // @ts-ignore
 import { initGraphApp } from './app';
 import { Plugin as DataPlugin } from '../../../../../src/plugins/data/public';
@@ -34,12 +39,17 @@ import { Plugin as DataPlugin } from '../../../../../src/plugins/data/public';
  * plugins in LP-world, but if they are migrated only the import path in the plugin
  * itself changes
  */
-export interface GraphDependencies {
+export interface GraphDependencies extends LegacyAngularInjectedDependencies {
   element: HTMLElement;
   appBasePath: string;
-  data: DataStart;
+  capabilities: Record<string, boolean | Record<string, boolean>>;
+  coreStart: AppMountContext['core'];
+  chrome: ChromeStart;
+  config: UiSettingsClientContract;
+  toastNotifications: ToastsStart;
+  indexPatterns: DataStart['indexPatterns']['indexPatterns'];
   npData: ReturnType<DataPlugin['start']>;
-  fatalError: (error: AngularHttpError | Error | string, location?: string) => void;
+  savedObjectsClient: SavedObjectsClientContract;
   xpackInfo: { get(path: string): unknown };
   addBasePath: (url: string) => string;
   getBasePath: () => string;
@@ -57,10 +67,6 @@ export interface LegacyAngularInjectedDependencies {
    * angular $http service
    */
   $http: any;
-  /**
-   * Instance of `src/legacy/ui/public/modals/confirm_modal.js`
-   */
-  confirmModal: any;
   /**
    * Instance of SavedObjectRegistryProvider
    */
@@ -70,49 +76,10 @@ export interface LegacyAngularInjectedDependencies {
    * Instance of SavedWorkspacesProvider
    */
   savedGraphWorkspaces: any;
-  /**
-   * Private(SavedObjectsClientProvider)
-   */
-  savedObjectsClient: any;
 }
 
-export const renderApp = (
-  { core }: AppMountContext,
-  {
-    element,
-    appBasePath,
-    data,
-    npData,
-    fatalError,
-    xpackInfo,
-    addBasePath,
-    getBasePath,
-    Storage,
-    canEditDrillDownUrls,
-    graphSavePolicy,
-  }: GraphDependencies,
-  angularDeps: LegacyAngularInjectedDependencies
-) => {
-  const deps = {
-    capabilities: core.application.capabilities.graph,
-    coreStart: core,
-    chrome: core.chrome,
-    config: core.uiSettings,
-    toastNotifications: core.notifications.toasts,
-    indexPatterns: data.indexPatterns.indexPatterns,
-    npData,
-    fatalError,
-    xpackInfo,
-    addBasePath,
-    getBasePath,
-    KbnUrlProvider,
-    Storage,
-    canEditDrillDownUrls,
-    graphSavePolicy,
-    ...angularDeps,
-  };
-
-  const graphAngularModule = createLocalAngularModule(core);
+export const renderApp = ({ appBasePath, element, ...deps }: GraphDependencies) => {
+  const graphAngularModule = createLocalAngularModule(deps.coreStart);
   configureAppAngularModule(graphAngularModule);
   initGraphApp(graphAngularModule, deps);
   const $injector = mountGraphApp(appBasePath, element);
@@ -144,15 +111,24 @@ function mountGraphApp(appBasePath: string, element: HTMLElement) {
 function createLocalAngularModule(core: AppMountContext['core']) {
   createLocalI18nModule();
   createLocalTopNavModule();
+  createLocalConfirmModalModule();
 
   const graphAngularModule = angular.module(moduleName, [
     ...thirdPartyAngularDependencies,
     'graphI18n',
     'graphTopNav',
+    'graphConfirmModal',
   ]);
   return graphAngularModule;
 }
 
+function createLocalConfirmModalModule() {
+  angular
+    .module('graphConfirmModal', ['react'])
+    .factory('confirmModal', confirmModalFactory)
+    .directive('confirmModal', reactDirective => reactDirective(EuiConfirmModal));
+}
+
 function createLocalTopNavModule() {
   angular
     .module('graphTopNav', ['react'])