From 0a10def84703619e94a97c3f875edb1d8c7a3945 Mon Sep 17 00:00:00 2001
From: Justin Kambic <justin.kambic@elastic.co>
Date: Wed, 18 Dec 2019 16:01:20 -0500
Subject: [PATCH] Update new useEffect hooks that are missing dependencies.

---
 .../location_map/embeddables/embedded_map.tsx | 42 +++++++++----------
 .../monitor_list_drawer.tsx                   | 10 +++--
 .../monitor_status_details.tsx                |  2 +-
 .../public/components/functional/snapshot.tsx |  2 +-
 4 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/location_map/embeddables/embedded_map.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/location_map/embeddables/embedded_map.tsx
index a5578d9e056671c..b2f77458aa11b00 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/location_map/embeddables/embedded_map.tsx
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/location_map/embeddables/embedded_map.tsx
@@ -46,6 +46,23 @@ const EmbeddedPanel = styled.div`
 
 export const EmbeddedMap = ({ upPoints, downPoints }: EmbeddedMapProps) => {
   const [embeddable, setEmbeddable] = useState<MapEmbeddable>();
+  const embeddableRoot: React.RefObject<HTMLDivElement> = React.createRef();
+  const factory = start.getEmbeddableFactory(MAP_SAVED_OBJECT_TYPE);
+
+  const input = {
+    id: uuid.v4(),
+    filters: [],
+    hidePanelTitles: true,
+    query: { query: '', language: 'kuery' },
+    refreshConfig: { value: 0, pause: false },
+    viewMode: 'view',
+    isLayerTOCOpen: false,
+    hideFilterActions: true,
+    mapCenter: { lon: 11, lat: 47, zoom: 0 },
+    disableInteractive: true,
+    disableTooltipControl: true,
+    hideToolbarOverlay: true,
+  };
 
   useEffect(() => {
     async function setupEmbeddable() {
@@ -59,38 +76,19 @@ export const EmbeddedMap = ({ upPoints, downPoints }: EmbeddedMapProps) => {
       setEmbeddable(embeddableObject);
     }
     setupEmbeddable();
-  }, []);
+  }, [downPoints, factory, input, upPoints]);
 
   useEffect(() => {
     if (embeddable) {
       embeddable.setLayerList(getLayerList(upPoints, downPoints));
     }
-  }, [upPoints, downPoints]);
+  }, [embeddable, upPoints, downPoints]);
 
   useEffect(() => {
     if (embeddableRoot.current && embeddable) {
       embeddable.render(embeddableRoot.current);
     }
-  }, [embeddable]);
-
-  const factory = start.getEmbeddableFactory(MAP_SAVED_OBJECT_TYPE);
-
-  const input = {
-    id: uuid.v4(),
-    filters: [],
-    hidePanelTitles: true,
-    query: { query: '', language: 'kuery' },
-    refreshConfig: { value: 0, pause: false },
-    viewMode: 'view',
-    isLayerTOCOpen: false,
-    hideFilterActions: true,
-    mapCenter: { lon: 11, lat: 47, zoom: 0 },
-    disableInteractive: true,
-    disableTooltipControl: true,
-    hideToolbarOverlay: true,
-  };
-
-  const embeddableRoot: React.RefObject<HTMLDivElement> = React.createRef();
+  }, [embeddable, embeddableRoot]);
 
   return (
     <EmbeddedPanel>
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/monitor_list_drawer.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/monitor_list_drawer.tsx
index 12f6f47f01b497f..d793e60dcd089b4 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/monitor_list_drawer.tsx
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/monitor_list_drawer.tsx
@@ -49,12 +49,16 @@ export function MonitorListDrawerComponent({
   loadMonitorDetails,
   monitorDetails,
 }: MonitorListDrawerProps) {
+  const monitorId = summary?.monitor_id;
+  useEffect(() => {
+    if (monitorId) {
+      loadMonitorDetails(monitorId);
+    }
+  }, [loadMonitorDetails, monitorId]);
+
   if (!summary || !summary.state.checks) {
     return null;
   }
-  useEffect(() => {
-    loadMonitorDetails(summary.monitor_id);
-  }, []);
 
   const monitorUrl: string | undefined = get(summary.state.url, 'full', undefined);
 
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_status_details/monitor_status_details.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_status_details/monitor_status_details.tsx
index cf337eaec4bbc12..ed67c6364e95807 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_status_details/monitor_status_details.tsx
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_status_details/monitor_status_details.tsx
@@ -28,7 +28,7 @@ export const MonitorStatusDetailsComponent = ({
 }: MonitorStatusBarProps) => {
   useEffect(() => {
     loadMonitorLocations(monitorId);
-  }, [monitorId, dateStart, dateEnd]);
+  }, [loadMonitorLocations, monitorId, dateStart, dateEnd]);
 
   return (
     <EuiPanel>
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/snapshot.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/snapshot.tsx
index e0d282a5348a0f2..4c1b482b198affa 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/snapshot.tsx
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/snapshot.tsx
@@ -92,7 +92,7 @@ export const Container: React.FC<Props> = ({
 }: Props) => {
   useEffect(() => {
     loadSnapshotCount(dateRangeStart, dateRangeEnd, filters, statusFilter);
-  }, [dateRangeStart, dateRangeEnd, filters, lastRefresh, statusFilter]);
+  }, [dateRangeStart, dateRangeEnd, filters, lastRefresh, loadSnapshotCount, statusFilter]);
   return <PresentationalComponent count={count} height={height} loading={loading} />;
 };