[ML] Removing global ml exhaustive-deps rule

.eslintrc.js

@@ -287,12 +287,6 @@ module.exports = {
         'jsx-a11y/click-events-have-key-events': 'off',
       },
     },
-    {
-      files: ['x-pack/plugins/ml/**/*.{js,mjs,ts,tsx}'],
-      rules: {
-        'react-hooks/exhaustive-deps': 'off',
-      },
-    },
 
     /**
      * Files that require dual-license headers, settings

x-pack/plugins/ml/public/alerting/job_selector.tsx

@@ -111,8 +111,10 @@ export const JobSelectorControl: FC<JobSelectorControlProps> = ({
     } catch (e) {
       // TODO add error handling
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [adJobsApiService]);
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const onSelectionChange: EuiComboBoxProps<string>['onChange'] = useCallback(
     ((selectionUpdate) => {
       if (selectionUpdate.some((selectedOption) => selectedOption.value === ALL_JOBS_SELECTION)) {
@@ -142,6 +144,7 @@ export const JobSelectorControl: FC<JobSelectorControlProps> = ({
   useEffect(() => {
     if (defaultOptions) return;
     fetchOptions();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (

x-pack/plugins/ml/public/alerting/jobs_health_rule/anomaly_detection_jobs_health_rule_trigger.tsx

@@ -54,6 +54,7 @@ const AnomalyDetectionJobsHealthRuleTrigger: FC<MlAnomalyAlertTriggerProps> = ({
       (update: MlAnomalyDetectionJobsHealthRuleParams[T]) => {
         setRuleParams(param, update);
       },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
 
@@ -119,6 +120,7 @@ const AnomalyDetectionJobsHealthRuleTrigger: FC<MlAnomalyAlertTriggerProps> = ({
       <JobSelectorControl
         jobsAndGroupIds={includeJobsAndGroupIds}
         adJobsApiService={adJobsApiService}
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         onChange={useCallback(onAlertParamChange('includeJobs'), [])}
         errors={Array.isArray(errors.includeJobs) ? errors.includeJobs : []}
         multiSelect
@@ -143,6 +145,7 @@ const AnomalyDetectionJobsHealthRuleTrigger: FC<MlAnomalyAlertTriggerProps> = ({
           } else {
             callback(null);
           }
+          // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [])}
         errors={Array.isArray(errors.excludeJobs) ? errors.excludeJobs : []}
         multiSelect
@@ -159,6 +162,7 @@ const AnomalyDetectionJobsHealthRuleTrigger: FC<MlAnomalyAlertTriggerProps> = ({
 
       <TestsSelectionControl
         config={ruleParams.testsConfig}
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         onChange={useCallback(onAlertParamChange('testsConfig'), [])}
         errors={Array.isArray(errors.testsConfig) ? errors.testsConfig : []}
       />

x-pack/plugins/ml/public/alerting/ml_alerting_flyout.tsx

@@ -79,6 +79,7 @@ export const MlAnomalyAlertFlyout: FC<MlAnomalyAlertFlyoutProps> = ({
       },
     });
     // deps on id to avoid re-rendering on auto-refresh
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [triggersActionsUi, initialAlert?.id, jobIds]);
 
   return <>{AlertFlyout}</>;
@@ -114,6 +115,7 @@ export const JobListMlAnomalyAlertFlyout: FC<JobListMlAnomalyAlertFlyoutProps> =
     return () => {
       unsetShowFunction();
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return isVisible && jobIds ? (

x-pack/plugins/ml/public/alerting/ml_anomaly_alert_trigger.tsx

@@ -59,6 +59,7 @@ const MlAnomalyAlertTrigger: FC<MlAnomalyAlertTriggerProps> = ({
       (update: MlAnomalyDetectionAlertParams[T]) => {
         setRuleParams(param, update);
       },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
 
@@ -83,6 +84,7 @@ const MlAnomalyAlertTrigger: FC<MlAnomalyAlertTriggerProps> = ({
         toastLifeTimeMs: 5000,
       });
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [jobsAndGroupIds]);
 
   const availableResultTypes = useMemo(() => {
@@ -98,6 +100,7 @@ const MlAnomalyAlertTrigger: FC<MlAnomalyAlertTriggerProps> = ({
       if (jobsAndGroupIds.length === 0) return;
       fetchJobsConfig();
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [jobsAndGroupIds]
   );
 
@@ -130,6 +133,7 @@ const MlAnomalyAlertTrigger: FC<MlAnomalyAlertTriggerProps> = ({
       lookbackInterval,
       topNBuckets,
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ruleParams.lookbackInterval, ruleParams.topNBuckets, jobConfigs]);
 
   const resultParams = useMemo(() => {
@@ -164,6 +168,7 @@ const MlAnomalyAlertTrigger: FC<MlAnomalyAlertTriggerProps> = ({
       <JobSelectorControl
         jobsAndGroupIds={jobsAndGroupIds}
         adJobsApiService={adJobsApiService}
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         onChange={useCallback(onAlertParamChange('jobSelection'), [])}
         errors={Array.isArray(errors.jobSelection) ? errors.jobSelection : []}
       />
@@ -179,15 +184,18 @@ const MlAnomalyAlertTrigger: FC<MlAnomalyAlertTriggerProps> = ({
       <ResultTypeSelector
         value={ruleParams.resultType}
         availableOption={availableResultTypes}
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         onChange={useCallback(onAlertParamChange('resultType'), [])}
       />
       <SeverityControl
         value={ruleParams.severity}
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         onChange={useCallback(onAlertParamChange('severity'), [])}
       />
       <EuiSpacer size="m" />
       <InterimResultsControl
         value={ruleParams.includeInterim}
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         onChange={useCallback(onAlertParamChange('includeInterim'), [])}
       />
       <EuiSpacer size="m" />
@@ -198,6 +206,7 @@ const MlAnomalyAlertTrigger: FC<MlAnomalyAlertTriggerProps> = ({
           Object.keys(update).forEach((k) => {
             setRuleParams(k, update[k as keyof MlAnomalyDetectionAlertAdvancedSettings]);
           });
+          // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [])}
       />
 

x-pack/plugins/ml/public/alerting/preview_alert_condition.tsx

@@ -130,6 +130,7 @@ export const PreviewAlertCondition: FC<PreviewAlertConditionProps> = ({
     []
   );
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const validationErrors = useMemo(() => validators(lookBehindInterval), [lookBehindInterval]);
 
   useEffect(
@@ -153,6 +154,7 @@ export const PreviewAlertCondition: FC<PreviewAlertConditionProps> = ({
       setPreviewResponse(undefined);
       setPreviewError(e.body ?? e);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [alertParams, lookBehindInterval]);
 
   const sampleHits = useMemo(() => {

x-pack/plugins/ml/public/alerting/time_interval_control.tsx

@@ -25,6 +25,7 @@ export const TimeIntervalControl: FC<TimeIntervalControlProps> = ({
 }) => {
   const validators = useMemo(() => composeValidators(timeIntervalInputValidator()), []);
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const validationErrors = useMemo(() => validators(value), [value]);
 
   const isInvalid = !!value && !!validationErrors;

x-pack/plugins/ml/public/application/components/annotations/annotation_flyout/index.tsx

@@ -439,6 +439,7 @@ export const AnnotationFlyout: FC<any> = (props) => {
 
   const cancelEditingHandler = useCallback(() => {
     annotationUpdatesService.setValue(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   if (annotationProp === undefined || annotationProp === null) {

x-pack/plugins/ml/public/application/components/anomalies_table/links_menu.tsx

@@ -264,6 +264,7 @@ export const LinksMenuUI = (props: LinksMenuProps) => {
     return () => {
       unmounted = true;
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify(props.anomaly)]);
 
   const openCustomUrl = (customUrl: KibanaUrlConfig) => {
@@ -759,6 +760,7 @@ export const LinksMenuUI = (props: LinksMenuProps) => {
       );
     }
     return items;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     openInDiscoverUrl,
     discoverUrlError,

x-pack/plugins/ml/public/application/components/anomaly_results_view_selector/anomaly_results_view_selector.tsx

@@ -65,6 +65,7 @@ export const AnomalyResultsViewSelector: FC<Props> = ({ viewId, selectedJobs })
         'data-test-subj': 'mlAnomalyResultsViewSelectorExplorer',
       },
     ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [isSingleMetricViewerDisabled, selectedJobs?.length]
   );
 

x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx

@@ -90,8 +90,10 @@ const Tooltip: FC<{ service: ChartTooltipService }> = React.memo(({ service }) =
     return () => {
       subscription.unsubscribe();
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const triggerCallback = useCallback(
     (({ triggerRef }) => {
       // obtain the reference to the trigger setter callback
@@ -103,6 +105,7 @@ const Tooltip: FC<{ service: ChartTooltipService }> = React.memo(({ service }) =
     []
   );
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const tooltipCallback = useCallback(
     (({ tooltipRef, getTooltipProps }) => {
       return (

x-pack/plugins/ml/public/application/components/color_range_legend/color_range_legend.tsx

@@ -128,6 +128,7 @@ export const ColorRangeLegend: FC<ColorRangeLegendProps> = ({
     if (!showTicks) {
       wrapper.selectAll('.axis line').style('display', 'none');
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify(scale), d3Container.current]);
 
   if (title === undefined) {

x-pack/plugins/ml/public/application/components/controls/checkbox_showcharts/checkbox_showcharts.tsx

@@ -24,6 +24,7 @@ export const CheckboxShowCharts: FC = () => {
 
   const onChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     chartsStateService.setShowCharts(e.target.checked);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const id = useMemo(() => htmlIdGenerator()(), []);

x-pack/plugins/ml/public/application/components/custom_hooks/use_create_ad_links.ts

@@ -33,6 +33,7 @@ export const useCreateADLinks = () => {
       );
       return `${basePath.get()}/app/ml/${resultsUrl}`;
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [basePath]
   );
   return { createLinkWithUserDefaults };

x-pack/plugins/ml/public/application/components/custom_selection_table/custom_selection_table.js

@@ -76,11 +76,13 @@ export function CustomSelectionTable({
   useEffect(() => {
     setCurrentItems(items);
     handleQueryChange({ query: query });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [items]);
 
   // When changes to selected ids made via badge removal - update selection in the table accordingly
   useEffect(() => {
     setItemIdToSelectedMap(getCurrentlySelectedItemIdsMap());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedIds]);
 
   useEffect(() => {
@@ -91,6 +93,7 @@ export function CustomSelectionTable({
       lastItemIndex: tablePager.getLastItemIndex(),
     });
     setPager(tablePager);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentItems]);
 
   function getCurrentlySelectedItemIdsMap() {

x-pack/plugins/ml/public/application/components/data_grid/common.ts

@@ -404,6 +404,7 @@ export const useRenderCellValue = (
 
       return cellValue;
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [indexPattern?.fields, pagination.pageIndex, pagination.pageSize, tableItems]);
   return renderCellValue;
 };

x-pack/plugins/ml/public/application/components/data_grid/data_grid.tsx

@@ -176,6 +176,7 @@ export const DataGrid: FC<Props> = memo(
           return <DefaultCellPopover {...popoverProps} />;
         }
       },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       [baseline, data]
     );
 

x-pack/plugins/ml/public/application/components/data_grid/use_data_grid.tsx

@@ -80,6 +80,7 @@ export const useDataGrid = (
 
   useEffect(() => {
     setVisibleColumns(defaultVisibleColumns);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultVisibleColumns.join()]);
 
   const [invalidSortingColumnns, setInvalidSortingColumnns] = useState<string[]>([]);
@@ -137,6 +138,7 @@ export const useDataGrid = (
       // If both columns are visible sort by their visible sorting order.
       return visibleColumns.indexOf(a.id) - visibleColumns.indexOf(b.id);
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [columns, columnCharts, chartsVisible, JSON.stringify(visibleColumns)]);
 
   // Initialize the mini histogram charts toggle button.

x-pack/plugins/ml/public/application/components/delete_space_aware_item_check_modal/delete_space_aware_item_check_modal.tsx

@@ -278,6 +278,7 @@ export const DeleteSpaceAwareItemCheckModal: FC<Props> = ({
       setDidUntag(false);
     }
     setIsLoading(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [hasManagedJob]);
 
   const onUntagClick = async () => {

x-pack/plugins/ml/public/application/components/full_time_range_selector/full_time_range_selector.tsx

@@ -93,6 +93,7 @@ export const FullTimeRangeSelector: FC<Props> = ({ dataView, query, disabled, ca
     setFrozenDataPreference(id as FrozenTierPreference);
     setRange(dataView, query, id === FROZEN_TIER_PREFERENCE.EXCLUDE);
     closePopover();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const popoverContent = useMemo(
@@ -106,6 +107,7 @@ export const FullTimeRangeSelector: FC<Props> = ({ dataView, query, disabled, ca
         />
       </EuiPanel>
     ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [frozenDataPreference, sortOptions]
   );
 

x-pack/plugins/ml/public/application/components/header_menu_portal/header_menu_portal.tsx

@@ -41,6 +41,7 @@ export const HeaderMenuPortal: FC<HeaderMenuPortalProps> = ({ children }) => {
       portalNode.unmount();
       setHeaderActionMenu(undefined);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [portalNode, setHeaderActionMenu, services.theme.theme$]);
 
   return <InPortal node={portalNode}>{children}</InPortal>;

x-pack/plugins/ml/public/application/components/help_menu/help_menu.tsx

@@ -29,6 +29,7 @@ export const HelpMenu: FC<HelpMenuProps> = React.memo(({ docLink }) => {
         },
       ],
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return null;

x-pack/plugins/ml/public/application/components/import_export_jobs/export_jobs_flyout/export_jobs_flyout.tsx

@@ -52,6 +52,7 @@ export const ExportJobsFlyout: FC<Props> = ({ isDisabled, currentTab }) => {
     },
   } = useMlKibana();
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const jobsExportService = useMemo(() => new JobsExportService(mlApiServices), []);
 
   const [loadingADJobs, setLoadingADJobs] = useState(true);
@@ -124,6 +125,7 @@ export const ExportJobsFlyout: FC<Props> = ({ isDisabled, currentTab }) => {
           });
       }
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [showFlyout]
   );
 
@@ -186,13 +188,15 @@ export const ExportJobsFlyout: FC<Props> = ({ isDisabled, currentTab }) => {
 
       switchTab(jobType);
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [selectedJobIds]
   );
 
   useEffect(() => {
     setSelectedJobDependencies(
       jobDependencies.filter(({ jobId }) => selectedJobIds.includes(jobId))
     );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedJobIds]);
 
   function switchTab(jobType: JobType) {