From c8160503fd33701bfc0ac8591a10f6cb828e5fde Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Mon, 21 Oct 2019 14:10:01 +0200 Subject: [PATCH] simplify shim and pull confirmModal in --- src/legacy/ui/public/modals/confirm_modal.js | 24 +++--- x-pack/legacy/plugins/graph/public/app.js | 17 ++-- x-pack/legacy/plugins/graph/public/index.ts | 6 -- x-pack/legacy/plugins/graph/public/plugin.ts | 55 ++++++------- .../legacy/plugins/graph/public/render_app.ts | 82 +++++++------------ 5 files changed, 75 insertions(+), 109 deletions(-) diff --git a/src/legacy/ui/public/modals/confirm_modal.js b/src/legacy/ui/public/modals/confirm_modal.js index 6d5abfca64aaf..9c3f46da4e927 100644 --- 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 index a6b731ef4153a..fb089cbff14cf 100644 --- 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 index 685b9a9007833..0249ca74035d6 100644 --- 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 | 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 index 51004c9c0410e..8625e20ab9c52 100644 --- 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>; + coreStart: AppMountContext['core']; + chrome: ChromeStart; + config: UiSettingsClientContract; + toastNotifications: ToastsStart; + indexPatterns: DataStart['indexPatterns']['indexPatterns']; npData: ReturnType; - 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'])