[ML] Display a confirmation modal before deleting an annotation. (#27377)

* [ML] Display a confirmation modal before deleting an annotation.
* [ML] Remove testing reliquia.

x-pack/plugins/ml/public/timeseriesexplorer/components/delete_annotation_modal/index.js

@@ -0,0 +1,46 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import {
+  EuiConfirmModal,
+  EuiOverlayMask,
+  EUI_MODAL_CONFIRM_BUTTON,
+} from '@elastic/eui';
+
+export function DeleteAnnotationModal({
+  cancelAction,
+  deleteAction,
+  isVisible
+}) {
+  return (
+    <React.Fragment>
+      {isVisible === true &&
+        <EuiOverlayMask>
+          <EuiConfirmModal
+            title="Delete this annotation?"
+            onCancel={cancelAction}
+            onConfirm={deleteAction}
+            cancelButtonText="Cancel"
+            confirmButtonText="Delete"
+            buttonColor="danger"
+            defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON}
+            className="eui-textBreakWord"
+          />
+        </EuiOverlayMask>
+      }
+    </React.Fragment>
+  );
+}
+
+DeleteAnnotationModal.propTypes = {
+  cancelAction: PropTypes.func.isRequired,
+  deleteAction: PropTypes.func.isRequired,
+  isVisible: PropTypes.bool.isRequired
+};

x-pack/plugins/ml/public/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js

@@ -26,6 +26,7 @@ import {
   getMultiBucketImpactLabel,
 } from '../../../../common/util/anomaly_utils';
 import { AnnotationFlyout } from '../annotation_flyout';
+import { DeleteAnnotationModal } from '../delete_annotation_modal';
 import { formatValue } from '../../../formatters/format_value';
 import {
   LINE_CHART_ANOMALY_RADIUS,
@@ -122,10 +123,14 @@ export class TimeseriesChart extends React.Component {
     this.state = {
       annotation: {},
       isFlyoutVisible: false,
-      isSwitchChecked: true,
+      isDeleteModalVisible: false,
     };
   }
 
+  closeDeleteModal = () => {
+    this.setState({ isDeleteModalVisible: false });
+  }
+
   closeFlyout = () => {
     const chartElement = d3.select(this.rootNode);
     chartElement.select('g.mlAnnotationBrush').call(this.annotateBrush.extent([0, 0]));
@@ -147,24 +152,31 @@ export class TimeseriesChart extends React.Component {
     });
   }
 
-  deleteAnnotation = (annotation) => {
+  deleteAnnotation = () => {
+    this.setState({ isDeleteModalVisible: true });
+  }
+
+  deleteAnnotationConfirmation = async () => {
     const {
       deleteAnnotation,
       refresh,
       toastNotifications
     } = this.props;
 
+    const { annotation } = this.state;
+
+    try {
+      await deleteAnnotation(annotation._id);
+      toastNotifications.addSuccess(`Deleted annotation for job with ID ${annotation.job_id}.`);
+    } catch (err) {
+      toastNotifications
+        .addDanger(`An error occured deleting the annotation for job with ID ${annotation.job_id}: ${JSON.stringify(err)}`);
+    }
+
+    this.closeDeleteModal();
     this.closeFlyout();
 
-    deleteAnnotation(annotation._id)
-      .then(() => {
-        refresh();
-        toastNotifications.addSuccess(`Deleted annotation for job with ID ${annotation.job_id}.`);
-      })
-      .catch((resp) => {
-        toastNotifications
-          .addDanger(`An error occured deleting the annotation for job with ID ${annotation.job_id}: ${JSON.stringify(resp)}`);
-      });
+    refresh();
   }
 
   indexAnnotation = (annotation) => {
@@ -1416,19 +1428,27 @@ export class TimeseriesChart extends React.Component {
   }
 
   render() {
-    const { annotation, isFlyoutVisible } = this.state;
+    const { annotation, isDeleteModalVisible, isFlyoutVisible } = this.state;
 
     return (
       <React.Fragment>
         <div className="ml-timeseries-chart-react" ref={this.setRef.bind(this)} />
         {mlAnnotationsEnabled && isFlyoutVisible &&
-          <AnnotationFlyout
-            annotation={annotation}
-            cancelAction={this.closeFlyout}
-            controlFunc={this.handleAnnotationChange}
-            deleteAction={this.deleteAnnotation}
-            saveAction={this.indexAnnotation}
-          />
+          <React.Fragment>
+            <AnnotationFlyout
+              annotation={annotation}
+              cancelAction={this.closeFlyout}
+              controlFunc={this.handleAnnotationChange}
+              deleteAction={this.deleteAnnotation}
+              saveAction={this.indexAnnotation}
+            />
+            <DeleteAnnotationModal
+              annotation={annotation}
+              cancelAction={this.closeDeleteModal}
+              deleteAction={this.deleteAnnotationConfirmation}
+              isVisible={isDeleteModalVisible}
+            />
+          </React.Fragment>
         }
       </React.Fragment>
     );