replace KuiConfirmModal with EuiConfirmModal in confirm-modal directi…

…ve (#15693)

* replace KuiConfirmModal with EuiConfirmModal

* add titles to confirm modals. Update modal text and button text

* updates for newest version of EUI

* use EUI class in overlay and EUI button constants

* remove logic about changed filters in cancel dashboard editing modal, clean up wording for import saved objects modal

* fix broken function test - management delete index pattern

* wrap names in single quotes

src/core_plugins/kibana/public/dashboard/dashboard_app.js

@@ -6,7 +6,7 @@ import { applyTheme } from 'ui/theme';
 
 import 'ui/query_bar';
 
-import { getDashboardTitle, getUnsavedChangesWarningMessage } from './dashboard_strings';
+import { getDashboardTitle } from './dashboard_strings';
 import { DashboardViewMode } from './dashboard_view_mode';
 import { TopNavIds } from './top_nav/top_nav_ids';
 import { ConfirmationButtonTypes } from 'ui/modals/confirm_modal';
@@ -244,13 +244,14 @@ app.directive('dashboardApp', function ($injector) {
         }
 
         confirmModal(
-          getUnsavedChangesWarningMessage(dashboardStateManager.getChangedFilterTypes(timefilter)),
+          `Once you discard your changes, there's no getting them back.`,
           {
             onConfirm: revertChangesAndExitEditMode,
             onCancel: _.noop,
-            confirmButtonText: 'Yes, lose changes',
-            cancelButtonText: 'No, keep working',
-            defaultFocusedButton: ConfirmationButtonTypes.CANCEL
+            confirmButtonText: 'Discard changes',
+            cancelButtonText: 'Continue editing',
+            defaultFocusedButton: ConfirmationButtonTypes.CANCEL,
+            title: 'Discard changes to dashboard?'
           }
         );
       };

src/core_plugins/kibana/public/dashboard/dashboard_strings.js

@@ -1,31 +1,4 @@
 import { DashboardViewMode } from './dashboard_view_mode';
-import _ from 'lodash';
-
-/**
- * @param list {Array.<string>}
- * @returns {string} The list of strings concatenated with commas so it can be used in a message.
- * E.g. ['a', 'b', 'c'] returns 'a, b, and c'.
- */
-export function createStringList(list) {
-  const listClone = _.clone(list);
-  const isPlural = list.length > 1;
-  const lastEntry = isPlural ? `, and ${list[list.length - 1]}` : '';
-  if (isPlural) listClone.splice(-1, 1);
-
-  return `${listClone.join(', ')}${lastEntry}`;
-}
-
-/**
- * @param changedFilters {Array.<string>} An optional list of filter types that have changed.
- * @returns {string} A warning message to display to the user that they are going to lose changes.
- */
-export function getUnsavedChangesWarningMessage(changedFilters) {
-  const changedFilterList = createStringList(changedFilters);
-
-  return changedFilterList ?
-    `Are you sure you want to cancel and lose changes, including changes made to your ${changedFilterList}?` :
-    `Are you sure you want to cancel and lose changes?`;
-}
 
 /**
  * @param title {string} the current title of the dashboard

src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js

@@ -132,11 +132,12 @@ export function DashboardListingController($injector, $scope, $location) {
     };
 
     confirmModal(
-      'Are you sure you want to delete the selected dashboards? This action is irreversible!',
+      `You can't recover deleted dashboards.`,
       {
         confirmButtonText: 'Delete',
         onConfirm: doDelete,
-        defaultFocusedButton: ConfirmationButtonTypes.CANCEL
+        defaultFocusedButton: ConfirmationButtonTypes.CANCEL,
+        title: 'Delete selected dashboards?'
       });
   };
 

src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/edit_index_pattern.js

@@ -92,11 +92,12 @@ uiModules.get('apps/management')
 
     $scope.refreshFields = function () {
       const confirmModalOptions = {
-        confirmButtonText: 'Refresh fields',
-        onConfirm: () => { $scope.indexPattern.refreshFields(); }
+        confirmButtonText: 'Refresh',
+        onConfirm: () => { $scope.indexPattern.refreshFields(); },
+        title: 'Refresh field list?'
       };
       confirmModal(
-        'This will reset the field popularity counters. Are you sure you want to refresh your fields?',
+        'This action resets the popularity counter of each field.',
         confirmModalOptions
       );
     };
@@ -119,10 +120,11 @@ uiModules.get('apps/management')
       }
 
       const confirmModalOptions = {
-        confirmButtonText: 'Remove index pattern',
-        onConfirm: doRemove
+        confirmButtonText: 'Delete',
+        onConfirm: doRemove,
+        title: 'Delete index pattern?'
       };
-      confirmModal('Are you sure you want to remove this index pattern?', confirmModalOptions);
+      confirmModal('', confirmModalOptions);
     };
 
     $scope.setDefaultPattern = function () {

src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/scripted_fields_table.js

@@ -109,10 +109,11 @@ uiModules.get('apps/management')
 
         $scope.remove = function (field) {
           const confirmModalOptions = {
-            confirmButtonText: 'Delete field',
-            onConfirm: () => { $scope.indexPattern.removeScriptedField(field.name); }
+            confirmButtonText: 'Delete',
+            onConfirm: () => { $scope.indexPattern.removeScriptedField(field.name); },
+            title: `Delete scripted field '${field.name}'?`
           };
-          confirmModal(`Are you sure want to delete ${field.name}? This action is irreversible!`, confirmModalOptions);
+          confirmModal(`You can't recover scripted fields.`, confirmModalOptions);
         };
 
         function getLanguagesInUse() {

src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/source_filters_table/source_filters_table.js

@@ -102,10 +102,11 @@ uiModules.get('kibana')
           };
 
           const confirmModalOptions = {
-            confirmButtonText: 'Delete filter',
-            onConfirm: doDelete
+            confirmButtonText: 'Delete',
+            onConfirm: doDelete,
+            title: 'Delete source filter?'
           };
-          confirmModal(`Are you sure want to delete this filter?`, confirmModalOptions);
+          confirmModal('', confirmModalOptions);
         }
 
         create() {

src/core_plugins/kibana/public/management/sections/objects/_objects.js

@@ -130,11 +130,12 @@ uiModules.get('apps/management')
           }
 
           const confirmModalOptions = {
-            confirmButtonText: `Delete ${$scope.currentTab.title}`,
-            onConfirm: doBulkDelete
+            confirmButtonText: 'Delete',
+            onConfirm: doBulkDelete,
+            title: `Delete selected ${$scope.currentTab.title}?`
           };
           confirmModal(
-            `Are you sure you want to delete the selected ${$scope.currentTab.title}? This action is irreversible!`,
+            `You can't recover deleted ${$scope.currentTab.title}.`,
             confirmModalOptions
           );
         };
@@ -195,11 +196,12 @@ uiModules.get('apps/management')
 
           return new Promise((resolve) => {
             confirmModal(
-              `If any of the objects already exist, do you want to automatically overwrite them?`, {
-                confirmButtonText: `Yes, overwrite all`,
-                cancelButtonText: `No, prompt me for each one`,
+              '', {
+                confirmButtonText: `Yes, overwrite all objects`,
+                cancelButtonText: `No, prompt for each object`,
                 onConfirm: () => resolve(true),
                 onCancel: () => resolve(false),
+                title: 'Automatically overwrite all saved objects?'
               }
             );
           })

src/core_plugins/kibana/public/management/sections/objects/_view.js

@@ -177,10 +177,11 @@ uiModules.get('apps/management')
           }
           const confirmModalOptions = {
             onConfirm: doDelete,
-            confirmButtonText: 'Delete object'
+            confirmButtonText: 'Delete',
+            title: 'Delete saved Kibana object?'
           };
           confirmModal(
-            'Are you sure want to delete this object? This action is irreversible!',
+            `You can't recover deleted objects`,
             confirmModalOptions
           );
         };

src/core_plugins/kibana/public/visualize/listing/visualize_listing_table.js

@@ -2,21 +2,24 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 
-import { SortableProperties } from '@elastic/eui';
 import { Pager } from 'ui/pager';
 import { NoVisualizationsPrompt } from './no_visualizations_prompt';
 
 import {
   KuiPager,
-  KuiModalOverlay,
-  KuiConfirmModal,
   KuiListingTableDeleteButton,
   KuiListingTableCreateButton,
   KuiListingTable,
   KuiListingTableNoMatchesPrompt,
   KuiListingTableLoadingPrompt
 } from 'ui_framework/components';
 
+import {
+  EuiOverlayMask,
+  EuiConfirmModal,
+  SortableProperties,
+} from '@elastic/eui';
+
 export class VisualizeListingTable extends Component {
 
   constructor(props) {
@@ -186,16 +189,17 @@ export class VisualizeListingTable extends Component {
 
   renderConfirmDeleteModal() {
     return (
-      <KuiModalOverlay>
-        <KuiConfirmModal
-          message="Are you sure you want to delete the selected visualizations? This action is irreversible!"
-          title="Warning"
+      <EuiOverlayMask>
+        <EuiConfirmModal
+          title="Delete selected visualizations?"
           onCancel={this.closeModal}
           onConfirm={this.deleteSelectedItems}
           cancelButtonText="Cancel"
           confirmButtonText="Delete"
-        />
-      </KuiModalOverlay>
+        >
+          <p>{`You can't recover deleted visualizations.`}</p>
+        </EuiConfirmModal>
+      </EuiOverlayMask>
     );
   }
 

src/core_plugins/timelion/public/app.js

@@ -117,9 +117,10 @@ app.controller('timelion', function (
 
       const confirmModalOptions = {
         onConfirm: doDelete,
-        confirmButtonText: 'Delete sheet'
+        confirmButtonText: 'Delete',
+        title: `Delete Timelion sheet '${title}'?`
       };
-      confirmModal(`Are you sure you want to delete the sheet ${title}?`, confirmModalOptions);
+      confirmModal(`You can't recover deleted sheets.`, confirmModalOptions);
     },
     testId: 'timelionDeleteButton',
   }, {

src/ui/public/field_editor/field_editor.js

@@ -99,11 +99,12 @@ uiModules
               });
           }
           const confirmModalOptions = {
-            confirmButtonText: 'Delete field',
-            onConfirm: doDelete
+            confirmButtonText: 'Delete',
+            onConfirm: doDelete,
+            title: `Delete field '${self.field.name}'?`
           };
           confirmModal(
-            `Are you sure want to delete '${self.field.name}'? This action is irreversible!`,
+            `You can't recover a deleted field.`,
             confirmModalOptions
           );
         };

src/ui/public/modals/confirm_modal.js

@@ -7,9 +7,9 @@ import { ModalOverlay } from './modal_overlay';
 const module = uiModules.get('kibana');
 
 import {
-  KUI_MODAL_CONFIRM_BUTTON as CONFIRM_BUTTON,
-  KUI_MODAL_CANCEL_BUTTON as CANCEL_BUTTON,
-} from 'ui_framework/components';
+  EUI_MODAL_CONFIRM_BUTTON as CONFIRM_BUTTON,
+  EUI_MODAL_CANCEL_BUTTON as CANCEL_BUTTON,
+} from '@elastic/eui';
 
 export const ConfirmationButtonTypes = {
   CONFIRM: CONFIRM_BUTTON,

src/ui/public/modals/modal_overlay.html

@@ -1 +1 @@
-<div class="kuiModalOverlay" data-test-subj="modalOverlay"></div>
+<div class="euiOverlayMask" data-test-subj="modalOverlay"></div>

src/ui/public/react_components.js

@@ -2,15 +2,18 @@ import 'ngreact';
 
 import {
   KuiToolBarSearchBox,
-  KuiConfirmModal,
 } from 'ui_framework/components';
 
+import {
+  EuiConfirmModal,
+} from '@elastic/eui';
+
 import { uiModules } from 'ui/modules';
 
 const app = uiModules.get('app/kibana', ['react']);
 app.directive('toolBarSearchBox', function (reactDirective) {
   return reactDirective(KuiToolBarSearchBox);
 });
 app.directive('confirmModal', function (reactDirective) {
-  return reactDirective(KuiConfirmModal);
+  return reactDirective(EuiConfirmModal);
 });

test/functional/apps/management/_index_pattern_create_delete.js

@@ -72,7 +72,7 @@ export default function ({ getService, getPageObjects }) {
 
     describe('index pattern deletion', function indexDelete() {
       before(function () {
-        const expectedAlertText = 'Are you sure you want to remove this index pattern?';
+        const expectedAlertText = 'Delete index pattern?';
         return PageObjects.settings.removeIndexPattern()
           .then(function (alertText) {
             expect(alertText).to.be(expectedAlertText);

test/functional/apps/management/_kibana_settings.js

@@ -5,7 +5,7 @@ export default function ({ getService, getPageObjects }) {
   const remote = getService('remote');
   const PageObjects = getPageObjects(['settings', 'common', 'dashboard', 'header']);
 
-  describe('creating and deleting default index', function describeIndexTests() {
+  describe('kibana settings', function describeIndexTests() {
     before(async function () {
       // delete .kibana index and then wait for Kibana to re-create it
       await kibanaServer.uiSettings.replace({});

test/functional/page_objects/settings_page.js

@@ -355,7 +355,7 @@ export function SettingsPageProvider({ getService, getPageObjects }) {
       });
       await retry.try(async () => {
         log.debug('getAlertText');
-        alertText = await testSubjects.getVisibleText('confirmModalBodyText');
+        alertText = await testSubjects.getVisibleText('confirmModalTitleText');
       });
       await retry.try(async () => {
         log.debug('acceptConfirmation');