From 7ee47436ed4119c46052a77dac49178185482c68 Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad.muhammad@elastic.co>
Date: Tue, 31 Mar 2020 15:53:22 +0200
Subject: [PATCH] [7.7] [Uptime] Update ML flyout to add cancel button (#61627)
 (#61861)

* update button

* fix type

* update snaps

* update layout
---
 .../__snapshots__/ml_flyout.test.tsx.snap     | 31 +++++++++++++++++--
 .../monitor_details/ml/ml_flyout.tsx          |  9 ++++--
 .../monitor_details/ml/translations.tsx       |  7 +++++
 3 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/x-pack/legacy/plugins/uptime/public/components/monitor_details/ml/__tests__/__snapshots__/ml_flyout.test.tsx.snap b/x-pack/legacy/plugins/uptime/public/components/monitor_details/ml/__tests__/__snapshots__/ml_flyout.test.tsx.snap
index 354521e7c55b9..ead27425c26f3 100644
--- a/x-pack/legacy/plugins/uptime/public/components/monitor_details/ml/__tests__/__snapshots__/ml_flyout.test.tsx.snap
+++ b/x-pack/legacy/plugins/uptime/public/components/monitor_details/ml/__tests__/__snapshots__/ml_flyout.test.tsx.snap
@@ -53,9 +53,18 @@ exports[`ML Flyout component renders without errors 1`] = `
   </EuiFlyoutBody>
   <EuiFlyoutFooter>
     <EuiFlexGroup
-      alignItems="flexEnd"
       justifyContent="spaceBetween"
     >
+      <EuiFlexItem
+        grow={false}
+      >
+        <EuiButtonEmpty
+          disabled={false}
+          onClick={[Function]}
+        >
+          Cancel
+        </EuiButtonEmpty>
+      </EuiFlexItem>
       <EuiFlexItem
         grow={false}
       >
@@ -206,8 +215,26 @@ exports[`ML Flyout component shows license info if no ml available 1`] = `
         class="euiFlyoutFooter"
       >
         <div
-          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
         >
+          <div
+            class="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <button
+              class="euiButtonEmpty euiButtonEmpty--primary"
+              type="button"
+            >
+              <span
+                class="euiButtonEmpty__content"
+              >
+                <span
+                  class="euiButtonEmpty__text"
+                >
+                  Cancel
+                </span>
+              </span>
+            </button>
+          </div>
           <div
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
diff --git a/x-pack/legacy/plugins/uptime/public/components/monitor_details/ml/ml_flyout.tsx b/x-pack/legacy/plugins/uptime/public/components/monitor_details/ml/ml_flyout.tsx
index 917367f3e8dad..fdecfbf20810c 100644
--- a/x-pack/legacy/plugins/uptime/public/components/monitor_details/ml/ml_flyout.tsx
+++ b/x-pack/legacy/plugins/uptime/public/components/monitor_details/ml/ml_flyout.tsx
@@ -7,6 +7,7 @@
 import React, { useContext } from 'react';
 import {
   EuiButton,
+  EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFlyout,
@@ -64,11 +65,15 @@ export function MLFlyoutView({ isCreatingJob, onClickCreate, onClose, canCreateM
             <em>{labels.TAKE_SOME_TIME_TEXT}</em>
           </p>
         </EuiText>
-
         <EuiSpacer />
       </EuiFlyoutBody>
       <EuiFlyoutFooter>
-        <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd">
+        <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty onClick={() => onClose()} disabled={isCreatingJob || isLoadingMLJob}>
+              {labels.CANCEL_LABEL}
+            </EuiButtonEmpty>
+          </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiButton
               onClick={() => onClickCreate()}
diff --git a/x-pack/legacy/plugins/uptime/public/components/monitor_details/ml/translations.tsx b/x-pack/legacy/plugins/uptime/public/components/monitor_details/ml/translations.tsx
index 570dd9d1bfa26..32374674771e8 100644
--- a/x-pack/legacy/plugins/uptime/public/components/monitor_details/ml/translations.tsx
+++ b/x-pack/legacy/plugins/uptime/public/components/monitor_details/ml/translations.tsx
@@ -124,6 +124,13 @@ export const CREATE_NEW_JOB = i18n.translate(
   }
 );
 
+export const CANCEL_LABEL = i18n.translate(
+  'xpack.uptime.ml.enableAnomalyDetectionPanel.cancelLabel',
+  {
+    defaultMessage: 'Cancel',
+  }
+);
+
 export const CREAT_ML_JOB_DESC = i18n.translate(
   'xpack.uptime.ml.enableAnomalyDetectionPanel.createMLJobDescription',
   {