Remove confirm modal directive and factory (#56846)

* Graph: replace confirmModal * Remove confirmModal from visualize * Remove confirmModal from dashboard * Remove confirm_modal * Remove confirmModalPromises * Replace confirmModal * FIx TS * Add data-test-subj for graph confirm modal * Update public.api.md * Remove unused translation * Update mock test
elastic · Feb 10, 2020 · 56571ba · 56571ba
1 parent bdba16d
commit 56571ba
Show file tree

Hide file tree

Showing 34 changed files with 137 additions and 662 deletions.
diff --git a/src/core/public/overlays/modal/modal_service.tsx b/src/core/public/overlays/modal/modal_service.tsx
@@ -20,7 +20,7 @@
 /* eslint-disable max-classes-per-file */
 
 import { i18n as t } from '@kbn/i18n';
-import { EuiModal, EuiConfirmModal, EuiOverlayMask } from '@elastic/eui';
+import { EuiModal, EuiConfirmModal, EuiOverlayMask, EuiConfirmModalProps } from '@elastic/eui';
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { Subject } from 'rxjs';
@@ -68,6 +68,7 @@ export interface OverlayModalConfirmOptions {
   className?: string;
   closeButtonAriaLabel?: string;
   'data-test-subj'?: string;
+  defaultFocusedButton?: EuiConfirmModalProps['defaultFocusedButton'];
 }
 
 /**

diff --git a/src/core/public/public.api.md b/src/core/public/public.api.md
@@ -6,6 +6,7 @@
 
 import { Breadcrumb } from '@elastic/eui';
 import { EuiButtonEmptyProps } from '@elastic/eui';
+import { EuiConfirmModalProps } from '@elastic/eui';
 import { EuiGlobalToastListToast } from '@elastic/eui';
 import { ExclusiveUnion } from '@elastic/eui';
 import { IconType } from '@elastic/eui';

diff --git a/src/legacy/core_plugins/kibana/public/dashboard/legacy_imports.ts b/src/legacy/core_plugins/kibana/public/dashboard/legacy_imports.ts
@@ -30,15 +30,11 @@ export const legacyChrome = chrome;
 export { SavedObjectSaveOpts } from 'ui/saved_objects/types';
 export { npSetup, npStart } from 'ui/new_platform';
 export { subscribeWithScope } from 'ui/utils/subscribe_with_scope';
-// @ts-ignore
-export { ConfirmationButtonTypes } from 'ui/modals/confirm_modal';
 export { KbnUrl } from 'ui/url/kbn_url';
 // @ts-ignore
 export { createTopNavDirective, createTopNavHelper } from 'ui/kbn_top_nav/kbn_top_nav';
 // @ts-ignore
 export { KbnUrlProvider, RedirectWhenMissingProvider } from 'ui/url/index';
-// @ts-ignore
-export { confirmModalFactory } from 'ui/modals/confirm_modal';
 export { IInjector } from 'ui/chrome';
 export { SavedObjectLoader } from 'ui/saved_objects';
 export { VISUALIZE_EMBEDDABLE_TYPE } from '../../../visualizations/public/embeddable';

diff --git a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/application.ts b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/application.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { EuiConfirmModal, EuiIcon } from '@elastic/eui';
+import { EuiIcon } from '@elastic/eui';
 import angular, { IModule } from 'angular';
 import { i18nDirective, i18nFilter, I18nProvider } from '@kbn/i18n/angular';
 import {
@@ -30,7 +30,6 @@ import {
 import { Storage } from '../../../../../../plugins/kibana_utils/public';
 import {
   configureAppAngularModule,
-  confirmModalFactory,
   createTopNavDirective,
   createTopNavHelper,
   IPrivate,
@@ -111,7 +110,6 @@ function createLocalAngularModule(core: AppMountContext['core'], navigation: Nav
   createLocalConfigModule(core);
   createLocalKbnUrlModule();
   createLocalTopNavModule(navigation);
-  createLocalConfirmModalModule();
   createLocalIconModule();
 
   const dashboardAngularModule = angular.module(moduleName, [
@@ -122,7 +120,6 @@ function createLocalAngularModule(core: AppMountContext['core'], navigation: Nav
     'app/dashboard/TopNav',
     'app/dashboard/KbnUrl',
     'app/dashboard/Promise',
-    'app/dashboard/ConfirmModal',
     'app/dashboard/icon',
   ]);
   return dashboardAngularModule;
@@ -134,13 +131,6 @@ function createLocalIconModule() {
     .directive('icon', reactDirective => reactDirective(EuiIcon));
 }
 
-function createLocalConfirmModalModule() {
-  angular
-    .module('app/dashboard/ConfirmModal', ['react'])
-    .factory('confirmModal', confirmModalFactory)
-    .directive('confirmModal', reactDirective => reactDirective(EuiConfirmModal));
-}
-
 function createLocalKbnUrlModule() {
   angular
     .module('app/dashboard/KbnUrl', ['app/dashboard/Private', 'ngRoute'])

diff --git a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.tsx b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.tsx
@@ -25,7 +25,7 @@ import { IInjector } from '../legacy_imports';
 
 import { ViewMode } from '../../../../embeddable_api/public/np_ready/public';
 import { SavedObjectDashboard } from '../saved_dashboard/saved_dashboard';
-import { DashboardAppState, SavedDashboardPanel, ConfirmModalFn } from './types';
+import { DashboardAppState, SavedDashboardPanel } from './types';
 import {
   IIndexPattern,
   TimeRange,
@@ -87,8 +87,6 @@ export interface DashboardAppScope extends ng.IScope {
 
 export function initDashboardAppDirective(app: any, deps: RenderDeps) {
   app.directive('dashboardApp', function($injector: IInjector) {
-    const confirmModal = $injector.get<ConfirmModalFn>('confirmModal');
-
     return {
       restrict: 'E',
       controllerAs: 'dashboardApp',
@@ -105,7 +103,6 @@ export function initDashboardAppDirective(app: any, deps: RenderDeps) {
           $route,
           $scope,
           $routeParams,
-          confirmModal,
           indexPatterns: deps.npDataStart.indexPatterns,
           kbnUrlStateStorage,
           history,

diff --git a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app_controller.tsx b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app_controller.tsx
@@ -19,6 +19,7 @@
 
 import _, { uniq } from 'lodash';
 import { i18n } from '@kbn/i18n';
+import { EUI_MODAL_CANCEL_BUTTON } from '@elastic/eui';
 import React from 'react';
 import angular from 'angular';
 
@@ -27,12 +28,7 @@ import { map } from 'rxjs/operators';
 import { History } from 'history';
 import { DashboardEmptyScreen, DashboardEmptyScreenProps } from './dashboard_empty_screen';
 
-import {
-  ConfirmationButtonTypes,
-  migrateLegacyQuery,
-  SavedObjectSaveOpts,
-  subscribeWithScope,
-} from '../legacy_imports';
+import { migrateLegacyQuery, SavedObjectSaveOpts, subscribeWithScope } from '../legacy_imports';
 import {
   COMPARE_ALL_OPTIONS,
   compareFilters,
@@ -63,7 +59,7 @@ import {
   openAddPanelFlyout,
   ViewMode,
 } from '../../../../embeddable_api/public/np_ready/public';
-import { ConfirmModalFn, NavAction, SavedDashboardPanel } from './types';
+import { NavAction, SavedDashboardPanel } from './types';
 
 import { showOptionsPopover } from './top_nav/show_options_popover';
 import { DashboardSaveModal } from './top_nav/save_modal';
@@ -90,7 +86,6 @@ export interface DashboardAppControllerDependencies extends RenderDeps {
   $routeParams: any;
   indexPatterns: IndexPatternsContract;
   dashboardConfig: KibanaLegacyStart['dashboardConfig'];
-  confirmModal: ConfirmModalFn;
   history: History;
   kbnUrlStateStorage: IKbnUrlStateStorage;
 }
@@ -108,7 +103,6 @@ export class DashboardAppController {
     dashboardConfig,
     localStorage,
     indexPatterns,
-    confirmModal,
     savedQueryService,
     embeddables,
     share,
@@ -635,27 +629,31 @@ export class DashboardAppController {
         }
       }
 
-      confirmModal(
-        i18n.translate('kbn.dashboard.changeViewModeConfirmModal.discardChangesDescription', {
-          defaultMessage: `Once you discard your changes, there's no getting them back.`,
-        }),
-        {
-          onConfirm: revertChangesAndExitEditMode,
-          onCancel: _.noop,
-          confirmButtonText: i18n.translate(
-            'kbn.dashboard.changeViewModeConfirmModal.confirmButtonLabel',
-            { defaultMessage: 'Discard changes' }
-          ),
-          cancelButtonText: i18n.translate(
-            'kbn.dashboard.changeViewModeConfirmModal.cancelButtonLabel',
-            { defaultMessage: 'Continue editing' }
-          ),
-          defaultFocusedButton: ConfirmationButtonTypes.CANCEL,
-          title: i18n.translate('kbn.dashboard.changeViewModeConfirmModal.discardChangesTitle', {
-            defaultMessage: 'Discard changes to dashboard?',
+      overlays
+        .openConfirm(
+          i18n.translate('kbn.dashboard.changeViewModeConfirmModal.discardChangesDescription', {
+            defaultMessage: `Once you discard your changes, there's no getting them back.`,
           }),
-        }
-      );
+          {
+            confirmButtonText: i18n.translate(
+              'kbn.dashboard.changeViewModeConfirmModal.confirmButtonLabel',
+              { defaultMessage: 'Discard changes' }
+            ),
+            cancelButtonText: i18n.translate(
+              'kbn.dashboard.changeViewModeConfirmModal.cancelButtonLabel',
+              { defaultMessage: 'Continue editing' }
+            ),
+            defaultFocusedButton: EUI_MODAL_CANCEL_BUTTON,
+            title: i18n.translate('kbn.dashboard.changeViewModeConfirmModal.discardChangesTitle', {
+              defaultMessage: 'Discard changes to dashboard?',
+            }),
+          }
+        )
+        .then(isConfirmed => {
+          if (isConfirmed) {
+            revertChangesAndExitEditMode();
+          }
+        });
     };
 
     /**

diff --git a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/types.ts b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/types.ts
@@ -137,15 +137,3 @@ export interface StagedFilter {
   operator: string;
   index: string;
 }
-
-export type ConfirmModalFn = (
-  message: string,
-  confirmOptions: {
-    onConfirm: () => void;
-    onCancel: () => void;
-    confirmButtonText: string;
-    cancelButtonText: string;
-    defaultFocusedButton: string;
-    title: string;
-  }
-) => void;
diff --git a/...gement/sections/index_patterns/create_index_pattern_wizard/create_index_pattern_wizard.js b/...gement/sections/index_patterns/create_index_pattern_wizard/create_index_pattern_wizard.js
@@ -43,6 +43,7 @@ export class CreateIndexPatternWizard extends Component {
       indexPatternCreationType: PropTypes.object.isRequired,
       config: PropTypes.object.isRequired,
       changeUrl: PropTypes.func.isRequired,
+      openConfirm: PropTypes.func.isRequired,
     }).isRequired,
   };
 
@@ -142,12 +143,16 @@ export class CreateIndexPatternWizard extends Component {
         values: { title: this.title },
         defaultMessage: "An index pattern with the title '{title}' already exists.",
       });
-      try {
-        await services.confirmModalPromise(confirmMessage, {
-          confirmButtonText: 'Go to existing pattern',
-        });
+
+      const isConfirmed = await services.openConfirm(confirmMessage, {
+        confirmButtonText: i18n.translate('kbn.management.indexPattern.goToPatternButtonLabel', {
+          defaultMessage: 'Go to existing pattern',
+        }),
+      });
+
+      if (isConfirmed) {
         return services.changeUrl(`/management/kibana/index_patterns/${indexPatternId}`);
-      } catch (err) {
+      } else {
         return false;
       }
     }

diff --git a/...ins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/index.js b/...ins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/index.js
@@ -43,10 +43,10 @@ uiRoutes.when('/management/kibana/index_pattern', {
         $http: npStart.core.http,
         savedObjectsClient: npStart.core.savedObjects.client,
         indexPatternCreationType,
-        confirmModalPromise: $injector.get('confirmModalPromise'),
         changeUrl: url => {
           $scope.$evalAsync(() => kbnUrl.changePath(url));
         },
+        openConfirm: npStart.core.overlays.openConfirm,
       };
 
       const initialQuery = $routeParams.id ? decodeURIComponent($routeParams.id) : undefined;

diff --git a/...kibana/public/management/sections/index_patterns/edit_index_pattern/edit_index_pattern.js b/...kibana/public/management/sections/index_patterns/edit_index_pattern/edit_index_pattern.js
@@ -198,8 +198,7 @@ uiModules
     $route,
     Promise,
     config,
-    Private,
-    confirmModal
+    Private
   ) {
     const {
       startSyncingState,
@@ -290,15 +289,19 @@ uiModules
         confirmButtonText: i18n.translate('kbn.management.editIndexPattern.refreshButton', {
           defaultMessage: 'Refresh',
         }),
-        onConfirm: async () => {
-          await $scope.indexPattern.init(true);
-          $scope.fields = $scope.indexPattern.getNonScriptedFields();
-        },
         title: i18n.translate('kbn.management.editIndexPattern.refreshHeader', {
           defaultMessage: 'Refresh field list?',
         }),
       };
-      confirmModal(confirmMessage, confirmModalOptions);
+
+      npStart.core.overlays
+        .openConfirm(confirmMessage, confirmModalOptions)
+        .then(async isConfirmed => {
+          if (isConfirmed) {
+            await $scope.indexPattern.init(true);
+            $scope.fields = $scope.indexPattern.getNonScriptedFields();
+          }
+        });
     };
 
     $scope.removePattern = function() {
@@ -322,12 +325,16 @@ uiModules
         confirmButtonText: i18n.translate('kbn.management.editIndexPattern.deleteButton', {
           defaultMessage: 'Delete',
         }),
-        onConfirm: doRemove,
         title: i18n.translate('kbn.management.editIndexPattern.deleteHeader', {
           defaultMessage: 'Delete index pattern?',
         }),
       };
-      confirmModal('', confirmModalOptions);
+
+      npStart.core.overlays.openConfirm('', confirmModalOptions).then(isConfirmed => {
+        if (isConfirmed) {
+          doRemove();
+        }
+      });
     };
 
     $scope.setDefaultPattern = function() {

diff --git a/src/legacy/core_plugins/kibana/public/management/sections/objects/_objects.js b/src/legacy/core_plugins/kibana/public/management/sections/objects/_objects.js
@@ -38,7 +38,6 @@ function updateObjectsTable($scope, $injector) {
   const $http = $injector.get('$http');
   const kbnUrl = $injector.get('kbnUrl');
   const config = $injector.get('config');
-  const confirmModalPromise = $injector.get('confirmModalPromise');
 
   const savedObjectsClient = npStart.core.savedObjects.client;
   const services = savedObjectManagementRegistry.all().map(obj => obj.service);
@@ -54,7 +53,7 @@ function updateObjectsTable($scope, $injector) {
       <I18nContext>
         <ObjectsTable
           savedObjectsClient={savedObjectsClient}
-          confirmModalPromise={confirmModalPromise}
+          confirmModalPromise={npStart.core.overlays.openConfirm}
           services={services}
           indexPatterns={indexPatterns}
           $http={$http}

diff --git a/src/legacy/core_plugins/kibana/public/management/sections/objects/_view.js b/src/legacy/core_plugins/kibana/public/management/sections/objects/_view.js
@@ -46,13 +46,14 @@ uiRoutes.when('/management/kibana/objects/:service/:id', {
 
 uiModules
   .get('apps/management', ['monospaced.elastic'])
-  .directive('kbnManagementObjectsView', function(kbnIndex, confirmModal) {
+  .directive('kbnManagementObjectsView', function() {
     return {
       restrict: 'E',
       controller: function($scope, $routeParams, $location, $window, $rootScope, uiCapabilities) {
         const serviceObj = savedObjectManagementRegistry.get($routeParams.service);
         const service = serviceObj.service;
         const savedObjectsClient = npStart.core.savedObjects.client;
+        const { overlays } = npStart.core;
 
         /**
          * Creates a field definition and pushes it to the memo stack. This function
@@ -233,7 +234,6 @@ uiModules
               .catch(error => fatalError(error, location));
           }
           const confirmModalOptions = {
-            onConfirm: doDelete,
             confirmButtonText: i18n.translate(
               'kbn.management.objects.confirmModalOptions.deleteButtonLabel',
               {
@@ -244,12 +244,19 @@ uiModules
               defaultMessage: 'Delete saved Kibana object?',
             }),
           };
-          confirmModal(
-            i18n.translate('kbn.management.objects.confirmModalOptions.modalDescription', {
-              defaultMessage: "You can't recover deleted objects",
-            }),
-            confirmModalOptions
-          );
+
+          overlays
+            .openConfirm(
+              i18n.translate('kbn.management.objects.confirmModalOptions.modalDescription', {
+                defaultMessage: "You can't recover deleted objects",
+              }),
+              confirmModalOptions
+            )
+            .then(isConfirmed => {
+              if (isConfirmed) {
+                doDelete();
+              }
+            });
         };
 
         $scope.submit = function() {