[7.x] [Uptime] Delete uptime eslint rule skip (#50912) (#53916)

* [Uptime] Delete uptime eslint rule skip (#50912)

* Delete uptime eslint rules.

* Update hooks usage to adhere to new eslint rules.

* Delete code accidentally added during rebase.

* WIP trying things.

* Clean up types and hook usage to comply with kibana eslint rules.

* Clean up code.

* Update new useEffect hooks that are missing dependencies.

* Fix edits that broke a page.

* Update handler type to match interface.

Author: justinkambic

.eslintrc.js

@@ -189,13 +189,6 @@ module.exports = {
         'react-hooks/exhaustive-deps': 'off',
       },
     },
-    {
-      files: ['x-pack/legacy/plugins/uptime/**/*.{js,ts,tsx}'],
-      rules: {
-        'react-hooks/exhaustive-deps': 'off',
-        'react-hooks/rules-of-hooks': 'off',
-      },
-    },
 
     /**
      * Files that require Apache 2.0 headers, settings

x-pack/legacy/plugins/uptime/public/components/functional/charts/donut_chart.tsx

@@ -68,7 +68,7 @@ export const DonutChart = ({ height, down, up, width }: DonutChartProps) => {
         )
         .attr('fill', (d: any) => color(d.data.key));
     }
-  }, [chartElement.current, upCount, down]);
+  }, [danger, down, gray, height, upCount, width]);
   return (
     <EuiFlexGroup alignItems="center" responsive={false}>
       <EuiFlexItem grow={false}>

x-pack/legacy/plugins/uptime/public/components/functional/charts/snapshot_histogram.tsx

@@ -51,6 +51,9 @@ export const SnapshotHistogramComponent: React.FC<Props> = ({
   loading = false,
   height,
 }: Props) => {
+  const {
+    colors: { danger, gray },
+  } = useContext(UptimeSettingsContext);
   if (!data || !data.queryResult)
     /**
      * TODO: the Fragment, EuiTitle, and EuiPanel should be extracted to a dumb component
@@ -94,10 +97,6 @@ export const SnapshotHistogramComponent: React.FC<Props> = ({
     queryResult: { histogram, interval },
   } = data;
 
-  const {
-    colors: { danger, gray },
-  } = useContext(UptimeSettingsContext);
-
   const downMonitorsId = i18n.translate('xpack.uptime.snapshotHistogram.downMonitorsId', {
     defaultMessage: 'Down Monitors',
   });

x-pack/legacy/plugins/uptime/public/components/functional/kuery_bar/index.tsx

@@ -80,7 +80,7 @@ export function KueryBar({ autocomplete }: Props) {
   useEffect(() => {
     getIndexPattern(basePath, (result: any) => setIndexPattern(toStaticIndexPattern(result)));
     setIsLoadingIndexPattern(false);
-  }, []);
+  }, [basePath]);
   const [getUrlParams, updateUrlParams] = useUrlParams();
   const { search: kuery } = getUrlParams();
 

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,21 @@ export const EmbeddedMap = ({ upPoints, downPoints }: EmbeddedMapProps) => {
       setEmbeddable(embeddableObject);
     }
     setupEmbeddable();
+    // we want this effect to execute exactly once after the component mounts
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
     if (embeddable) {
       embeddable.setLayerList(getLayerList(upPoints, downPoints));
     }
-  }, [upPoints, downPoints]);
+  }, [upPoints, downPoints, embeddable]);
 
   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>

x-pack/legacy/plugins/uptime/public/components/functional/monitor_charts.tsx

@@ -39,12 +39,12 @@ export const MonitorChartsComponent = ({
   dateRangeEnd,
   loading,
 }: Props) => {
+  const [getUrlParams] = useUrlParams();
   if (data && data.monitorChartsData) {
     const {
       monitorChartsData: { locationDurationLines },
     } = data;
 
-    const [getUrlParams] = useUrlParams();
     const { absoluteDateRangeStart, absoluteDateRangeEnd } = getUrlParams();
 
     return (

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);
 

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>

x-pack/legacy/plugins/uptime/public/components/functional/ping_list/__tests__/__snapshots__/ping_list.test.tsx.snap

@@ -207,7 +207,6 @@ describe('PingList component', () => {
         onPageCountChange={jest.fn()}
         onSelectedLocationChange={(loc: EuiComboBoxOptionProps[]) => {}}
         onSelectedStatusChange={jest.fn()}
-        onUpdateApp={jest.fn()}
         pageSize={30}
         selectedOption="down"
         selectedLocation={BaseLocationOptions}