From 108c52f65581832ce5080f80c9ccf3ec4c03d020 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Wed, 3 Mar 2021 05:58:49 -0500
Subject: [PATCH] [uptime] Fix anomaly alert edit (#93025) (#93383)

Co-authored-by: Shahzad <shahzad.muhammad@elastic.co>
---
 .../alerts/uptime_edit_alert_flyout.tsx       | 12 ++++-----
 .../components/monitor/ml/manage_ml_job.tsx   | 26 ++++++++++++-------
 .../uptime/public/state/selectors/index.ts    |  8 +++---
 3 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/x-pack/plugins/uptime/public/components/common/alerts/uptime_edit_alert_flyout.tsx b/x-pack/plugins/uptime/public/components/common/alerts/uptime_edit_alert_flyout.tsx
index 304b5882fb0a8c..aab08bf225b055 100644
--- a/x-pack/plugins/uptime/public/components/common/alerts/uptime_edit_alert_flyout.tsx
+++ b/x-pack/plugins/uptime/public/components/common/alerts/uptime_edit_alert_flyout.tsx
@@ -10,7 +10,7 @@ import { useKibana } from '../../../../../../../src/plugins/kibana_react/public'
 import {
   Alert,
   TriggersAndActionsUIPublicPluginStart,
-} from '../../../../../../plugins/triggers_actions_ui/public';
+} from '../../../../../triggers_actions_ui/public';
 
 interface Props {
   alertFlyoutVisible: boolean;
@@ -27,19 +27,17 @@ export const UptimeEditAlertFlyoutComponent = ({
   initialAlert,
   setAlertFlyoutVisibility,
 }: Props) => {
-  const onClose = () => {
-    setAlertFlyoutVisibility(false);
-  };
   const { triggersActionsUi } = useKibana<KibanaDeps>().services;
 
   const EditAlertFlyout = useMemo(
     () =>
       triggersActionsUi.getEditAlertFlyout({
         initialAlert,
-        onClose,
+        onClose: () => {
+          setAlertFlyoutVisibility(false);
+        },
       }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
+    [initialAlert, setAlertFlyoutVisibility, triggersActionsUi]
   );
   return <>{alertFlyoutVisible && EditAlertFlyout}</>;
 };
diff --git a/x-pack/plugins/uptime/public/components/monitor/ml/manage_ml_job.tsx b/x-pack/plugins/uptime/public/components/monitor/ml/manage_ml_job.tsx
index d94918c7659cc9..719bc329c626a5 100644
--- a/x-pack/plugins/uptime/public/components/monitor/ml/manage_ml_job.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/ml/manage_ml_job.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useContext, useState } from 'react';
+import React, { useCallback, useContext, useState } from 'react';
 
 import { EuiButton, EuiContextMenu, EuiIcon, EuiPopover } from '@elastic/eui';
 import { useSelector, useDispatch } from 'react-redux';
@@ -14,6 +14,7 @@ import {
   canDeleteMLJobSelector,
   hasMLJobSelector,
   isMLJobCreatingSelector,
+  mlCapabilitiesSelector,
 } from '../../../state/selectors';
 import { UptimeSettingsContext } from '../../../contexts';
 import * as labels from './translations';
@@ -49,6 +50,7 @@ export const ManageMLJobComponent = ({ hasMLJob, onEnableJob, onJobDelete }: Pro
   const isAlertDeleting = useSelector(isAnomalyAlertDeleting);
 
   const { loading: isMLJobLoading } = useSelector(hasMLJobSelector);
+  const { loading: isCapbilityLoading } = useSelector(mlCapabilitiesSelector);
 
   const { dateRangeStart, dateRangeEnd } = useGetUrlParams();
 
@@ -63,7 +65,7 @@ export const ManageMLJobComponent = ({ hasMLJob, onEnableJob, onJobDelete }: Pro
   const deleteAnomalyAlert = () =>
     dispatch(deleteAnomalyAlertAction.get({ alertId: anomalyAlert?.id as string }));
 
-  const showLoading = isMLJobCreating || isMLJobLoading || isAlertDeleting;
+  const showLoading = isMLJobCreating || isMLJobLoading || isAlertDeleting || isCapbilityLoading;
 
   const btnText = hasMLJob ? labels.ANOMALY_DETECTION : labels.ENABLE_ANOMALY_DETECTION;
 
@@ -149,6 +151,11 @@ export const ManageMLJobComponent = ({ hasMLJob, onEnableJob, onJobDelete }: Pro
     },
   ];
 
+  const onCloseFlyout = useCallback(() => {
+    setIsFlyoutOpen(false);
+    dispatch(getAnomalyAlertAction.get({ monitorId }));
+  }, [dispatch, monitorId]);
+
   return (
     <>
       <EuiPopover
@@ -174,14 +181,13 @@ export const ManageMLJobComponent = ({ hasMLJob, onEnableJob, onJobDelete }: Pro
           }}
         />
       )}
-      <UptimeEditAlertFlyoutComponent
-        initialAlert={anomalyAlert!}
-        alertFlyoutVisible={isFlyoutOpen}
-        setAlertFlyoutVisibility={() => {
-          setIsFlyoutOpen(false);
-          dispatch(getAnomalyAlertAction.get({ monitorId }));
-        }}
-      />
+      {isFlyoutOpen && (
+        <UptimeEditAlertFlyoutComponent
+          initialAlert={anomalyAlert!}
+          alertFlyoutVisible={isFlyoutOpen}
+          setAlertFlyoutVisibility={onCloseFlyout}
+        />
+      )}
     </>
   );
 };
diff --git a/x-pack/plugins/uptime/public/state/selectors/index.ts b/x-pack/plugins/uptime/public/state/selectors/index.ts
index afe4f25b7b18f6..53aaa5ca30ea6d 100644
--- a/x-pack/plugins/uptime/public/state/selectors/index.ts
+++ b/x-pack/plugins/uptime/public/state/selectors/index.ts
@@ -37,22 +37,22 @@ export const selectPingList = ({ pingList }: AppState) => pingList;
 
 export const snapshotDataSelector = ({ snapshot }: AppState) => snapshot;
 
-const mlCapabilitiesSelector = (state: AppState) => state.ml.mlCapabilities.data;
+export const mlCapabilitiesSelector = (state: AppState) => state.ml.mlCapabilities;
 
 export const hasMLFeatureSelector = createSelector(
   mlCapabilitiesSelector,
   (mlCapabilities) =>
-    mlCapabilities?.isPlatinumOrTrialLicense && mlCapabilities?.mlFeatureEnabledInSpace
+    mlCapabilities?.data?.isPlatinumOrTrialLicense && mlCapabilities?.data?.mlFeatureEnabledInSpace
 );
 
 export const canCreateMLJobSelector = createSelector(
   mlCapabilitiesSelector,
-  (mlCapabilities) => mlCapabilities?.capabilities.canCreateJob
+  (mlCapabilities) => mlCapabilities?.data?.capabilities?.canCreateJob
 );
 
 export const canDeleteMLJobSelector = createSelector(
   mlCapabilitiesSelector,
-  (mlCapabilities) => mlCapabilities?.capabilities.canDeleteJob
+  (mlCapabilities) => mlCapabilities?.data?.capabilities?.canDeleteJob
 );
 
 export const hasMLJobSelector = ({ ml }: AppState) => ml.mlJob;