[SIEM] Restore rules of hooks

.eslintrc.js

@@ -755,8 +755,6 @@ module.exports = {
         'react/jsx-sort-default-props': 'error',
         // might be introduced after the other warns are fixed
         // 'react/jsx-sort-props': 'error',
-        // might be introduced after the other warns are fixed
-        'react-hooks/exhaustive-deps': 'off',
         'require-atomic-updates': 'error',
         'symbol-description': 'error',
         'vars-on-top': 'error',

x-pack/plugins/siem/public/alerts/components/rules/add_item_form/index.tsx

@@ -126,7 +126,7 @@ export const AddItem = ({
       inputsRef.current[haveBeenKeyboardDeleted].focus();
       setHaveBeenKeyboardDeleted(-1);
     }
-  }, [haveBeenKeyboardDeleted, inputsRef.current]);
+  }, [haveBeenKeyboardDeleted]);
 
   const values = field.value as string[];
   return (

x-pack/plugins/siem/public/alerts/components/rules/mitre/index.tsx

@@ -101,7 +101,7 @@ export const AddMitreThreat = ({ dataTestSubj, field, idAria, isDisabled }: AddI
         ...values.slice(index + 1),
       ]);
     },
-    [field]
+    [field, values]
   );
 
   const values = field.value as IMitreEnterpriseAttack[];

x-pack/plugins/siem/public/alerts/components/rules/pick_timeline/index.tsx

@@ -39,7 +39,7 @@ export const PickTimeline = ({
       setTimelineId(id);
       setTimelineTitle(title);
     }
-  }, [field.value]);
+  }, [field.value, timelineId, timelineTitle]);
 
   const handleOnTimelineChange = useCallback(
     (title: string, id: string | null) => {
@@ -49,7 +49,7 @@ export const PickTimeline = ({
         field.setValue({ id, title });
       }
     },
-    [field]
+    [field, timelineId, timelineTitle]
   );
 
   return (

x-pack/plugins/siem/public/alerts/components/rules/query_bar/index.tsx

@@ -111,7 +111,7 @@ export const QueryBarDefineRule = ({
       isSubscribed = false;
       subscriptions.unsubscribe();
     };
-  }, [field.value]);
+  }, [field, field.value, filterManager]);
 
   useEffect(() => {
     let isSubscribed = true;
@@ -143,7 +143,7 @@ export const QueryBarDefineRule = ({
     return () => {
       isSubscribed = false;
     };
-  }, [field.value]);
+  }, [field.value, filterManager, queryDraft, savedQuery, savedQueryServices]);
 
   const onSubmitQuery = useCallback(
     (newQuery: Query, timefilter?: SavedQueryTimeFilter) => {
@@ -179,7 +179,7 @@ export const QueryBarDefineRule = ({
         }
       }
     },
-    [field.value]
+    [field]
   );
 
   const onCloseTimelineModal = useCallback(() => {

x-pack/plugins/siem/public/alerts/components/rules/rule_actions_field/index.tsx

@@ -56,7 +56,7 @@ export const RuleActionsField: ThrottleSelectField = ({ field, messageVariables
       updatedActions[index] = deepMerge(updatedActions[index], { id });
       field.setValue(updatedActions);
     },
-    [field.setValue, actions]
+    [actions, field]
   );
 
   const setAlertProperty = useCallback(
@@ -71,7 +71,7 @@ export const RuleActionsField: ThrottleSelectField = ({ field, messageVariables
       updatedActions[index].params[key] = value;
       field.setValue(updatedActions);
     },
-    [field.setValue, actions]
+    [actions, field]
   );
 
   useEffect(() => {
@@ -82,7 +82,7 @@ export const RuleActionsField: ThrottleSelectField = ({ field, messageVariables
       );
       setSupportedActionTypes(supportedTypes);
     })();
-  }, []);
+  }, [http]);
 
   useEffect(() => {
     if (field.form.isSubmitting || !field.errors.length) {

x-pack/plugins/siem/public/alerts/components/rules/rule_actions_overflow/index.tsx

@@ -101,7 +101,7 @@ const RuleActionsOverflowComponent = ({
             </EuiContextMenuItem>,
           ]
         : [],
-    [rule, userHasNoPermissions]
+    [dispatchToaster, onRuleDeletedCallback, rule, userHasNoPermissions]
   );
 
   const handlePopoverOpen = useCallback(() => {

x-pack/plugins/siem/public/alerts/components/rules/rule_switch/index.tsx

@@ -94,20 +94,20 @@ export const RuleSwitchComponent = ({
       }
       setMyIsLoading(false);
     },
-    [dispatch, id]
+    [dispatch, dispatchToaster, id, onChange]
   );
 
   useEffect(() => {
     if (myEnabled !== enabled) {
       setMyEnabled(enabled);
     }
-  }, [enabled]);
+  }, [enabled, myEnabled]);
 
   useEffect(() => {
     if (myIsLoading !== isLoading) {
       setMyIsLoading(isLoading ?? false);
     }
-  }, [isLoading]);
+  }, [isLoading, myIsLoading]);
 
   return (
     <EuiFlexGroup alignItems="center" justifyContent="spaceAround">

x-pack/plugins/siem/public/alerts/components/rules/schedule_item_form/index.tsx

@@ -78,7 +78,7 @@ export const ScheduleItem = ({
       setTimeType(e.target.value);
       field.setValue(`${timeVal}${e.target.value}`);
     },
-    [timeVal]
+    [field, timeVal]
   );
 
   const onChangeTimeVal = useCallback(
@@ -87,7 +87,7 @@ export const ScheduleItem = ({
       setTimeVal(sanitizedValue);
       field.setValue(`${sanitizedValue}${timeType}`);
     },
-    [timeType]
+    [field, timeType]
   );
 
   useEffect(() => {
@@ -111,7 +111,7 @@ export const ScheduleItem = ({
         setTimeType(filterTimeType[0]);
       }
     }
-  }, [field.value]);
+  }, [field.value, timeType, timeVal]);
 
   // EUI missing some props
   const rest = { disabled: isDisabled };

x-pack/plugins/siem/public/alerts/components/rules/step_about_rule/index.tsx

@@ -101,7 +101,7 @@ const StepAboutRuleComponent: FC<StepAboutRuleProps> = ({
         setMyStepData({ ...data, isNew: false } as AboutStepRule);
       }
     }
-  }, [form]);
+  }, [form, setStepData]);
 
   useEffect(() => {
     const { isNew, ...initDefaultValue } = myStepData;
@@ -113,13 +113,13 @@ const StepAboutRuleComponent: FC<StepAboutRuleProps> = ({
       setMyStepData(myDefaultValues);
       setFieldValue(form, schema, myDefaultValues);
     }
-  }, [defaultValues]);
+  }, [defaultValues, form, myStepData]);
 
   useEffect(() => {
     if (setForm != null) {
       setForm(RuleStep.aboutRule, form);
     }
-  }, [form]);
+  }, [form, setForm]);
 
   return isReadOnlyView && myStepData.name != null ? (
     <StepContentWrapper data-test-subj="aboutStep" addPadding={addPadding}>

x-pack/plugins/siem/public/alerts/components/rules/step_define_rule/index.tsx

@@ -123,7 +123,7 @@ const StepDefineRuleComponent: FC<StepDefineRuleProps> = ({
         setMyStepData({ ...data, isNew: false } as DefineStepRule);
       }
     }
-  }, [form]);
+  }, [form, setStepData]);
 
   useEffect(() => {
     const { isNew, ...values } = myStepData;
@@ -132,13 +132,13 @@ const StepDefineRuleComponent: FC<StepDefineRuleProps> = ({
       setMyStepData(newValues);
       setFieldValue(form, schema, newValues);
     }
-  }, [defaultValues, setMyStepData, setFieldValue]);
+  }, [defaultValues, setMyStepData, myStepData, form]);
 
   useEffect(() => {
     if (setForm != null) {
       setForm(RuleStep.defineRule, form);
     }
-  }, [form]);
+  }, [form, setForm]);
 
   const handleResetIndices = useCallback(() => {
     const indexField = form.getFields().index;

x-pack/plugins/siem/public/alerts/components/rules/step_rule_actions/index.tsx

@@ -99,7 +99,7 @@ const StepRuleActionsComponent: FC<StepRuleActionsProps> = ({
         }
       }
     },
-    [form]
+    [form, setStepData]
   );
 
   useEffect(() => {
@@ -112,13 +112,13 @@ const StepRuleActionsComponent: FC<StepRuleActionsProps> = ({
       setMyStepData(myDefaultValues);
       setFieldValue(form, schema, myDefaultValues);
     }
-  }, [defaultValues]);
+  }, [defaultValues, form, myStepData, schema]);
 
   useEffect(() => {
     if (setForm != null) {
       setForm(RuleStep.ruleActions, form);
     }
-  }, [form]);
+  }, [form, setForm]);
 
   const updateThrottle = useCallback((throttle) => setMyStepData({ ...myStepData, throttle }), [
     myStepData,
@@ -142,7 +142,7 @@ const StepRuleActionsComponent: FC<StepRuleActionsProps> = ({
         options: throttleOptions,
       },
     }),
-    [isLoading, updateThrottle]
+    [isLoading, throttleOptions, updateThrottle]
   );
 
   return isReadOnlyView && myStepData != null ? (

x-pack/plugins/siem/public/alerts/components/rules/step_schedule_rule/index.tsx

@@ -62,7 +62,7 @@ const StepScheduleRuleComponent: FC<StepScheduleRuleProps> = ({
         setMyStepData({ ...data, isNew: false } as ScheduleStepRule);
       }
     }
-  }, [form]);
+  }, [form, setStepData]);
 
   useEffect(() => {
     const { isNew, ...initDefaultValue } = myStepData;
@@ -74,13 +74,13 @@ const StepScheduleRuleComponent: FC<StepScheduleRuleProps> = ({
       setMyStepData(myDefaultValues);
       setFieldValue(form, schema, myDefaultValues);
     }
-  }, [defaultValues]);
+  }, [defaultValues, form, myStepData]);
 
   useEffect(() => {
     if (setForm != null) {
       setForm(RuleStep.scheduleRule, form);
     }
-  }, [form]);
+  }, [form, setForm]);
 
   return isReadOnlyView && myStepData != null ? (
     <StepContentWrapper addPadding={addPadding}>

x-pack/plugins/siem/public/alerts/components/rules/throttle_select_field/index.tsx

@@ -31,7 +31,7 @@ export const ThrottleSelectField: ThrottleSelectField = (props) => {
       props.field.setValue(throttle);
       props.handleChange(throttle);
     },
-    [props.field.setValue, props.handleChange]
+    [props]
   );
   const newEuiFieldProps = { ...props.euiFieldProps, onChange };
   return <SelectField {...props} euiFieldProps={newEuiFieldProps} />;

x-pack/plugins/siem/public/alerts/components/signals/index.tsx

@@ -110,7 +110,16 @@ export const SignalsTableComponent: React.FC<SignalsTableComponentProps> = ({
       });
     }
     return null;
-  }, [browserFields, globalFilters, globalQuery, indexPatterns, kibana, to, from]);
+  }, [
+    browserFields,
+    indexPatterns,
+    kibana.services.uiSettings,
+    defaultFilters,
+    globalFilters,
+    globalQuery,
+    from,
+    to,
+  ]);
 
   // Callback for creating a new timeline -- utilized by row/batch actions
   const createTimelineCallback = useCallback(
@@ -136,14 +145,14 @@ export const SignalsTableComponent: React.FC<SignalsTableComponentProps> = ({
     ({ eventIds, isLoading }: SetEventsLoadingProps) => {
       setEventsLoading!({ id: SIGNALS_PAGE_TIMELINE_ID, eventIds, isLoading });
     },
-    [setEventsLoading, SIGNALS_PAGE_TIMELINE_ID]
+    [setEventsLoading]
   );
 
   const setEventsDeletedCallback = useCallback(
     ({ eventIds, isDeleted }: SetEventsDeletedProps) => {
       setEventsDeleted!({ id: SIGNALS_PAGE_TIMELINE_ID, eventIds, isDeleted });
     },
-    [setEventsDeleted, SIGNALS_PAGE_TIMELINE_ID]
+    [setEventsDeleted]
   );
 
   // Catches state change isSelectAllChecked->false upon user selection change to reset utility bar

x-pack/plugins/siem/public/alerts/components/signals_histogram_panel/index.tsx

@@ -131,14 +131,17 @@ export const SignalsHistogramPanel = memo<SignalsHistogramPanelProps>(
           totalSignalsObj.value,
           totalSignalsObj.relation === 'gte' ? '>' : totalSignalsObj.relation === 'lte' ? '<' : ''
         ),
-      [totalSignalsObj]
+      [defaultNumberFormat, totalSignalsObj.relation, totalSignalsObj.value]
     );
 
-    const setSelectedOptionCallback = useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
-      setSelectedStackByOption(
-        stackByOptions?.find((co) => co.value === event.target.value) ?? defaultStackByOption
-      );
-    }, []);
+    const setSelectedOptionCallback = useCallback(
+      (event: React.ChangeEvent<HTMLSelectElement>) => {
+        setSelectedStackByOption(
+          stackByOptions?.find((co) => co.value === event.target.value) ?? defaultStackByOption
+        );
+      },
+      [defaultStackByOption, stackByOptions]
+    );
 
     const formattedSignalsData = useMemo(() => formatSignalsData(signalsData), [signalsData]);
 
@@ -175,7 +178,7 @@ export const SignalsHistogramPanel = memo<SignalsHistogramPanelProps>(
           deleteQuery({ id: uniqueQueryId });
         }
       };
-    }, []);
+    }, [deleteQuery, uniqueQueryId]);
 
     useEffect(() => {
       if (refetch != null && setQuery != null) {
@@ -189,7 +192,7 @@ export const SignalsHistogramPanel = memo<SignalsHistogramPanelProps>(
           refetch,
         });
       }
-    }, [setQuery, isLoadingSignals, signalsData, response, request, refetch]);
+    }, [setQuery, isLoadingSignals, signalsData, response, request, refetch, uniqueQueryId]);
 
     useEffect(() => {
       setTotalSignalsObj(
@@ -219,7 +222,15 @@ export const SignalsHistogramPanel = memo<SignalsHistogramPanelProps>(
           !isEmpty(converted) ? [converted] : []
         )
       );
-    }, [selectedStackByOption.value, from, to, query, filters]);
+    }, [
+      selectedStackByOption.value,
+      from,
+      to,
+      query,
+      filters,
+      kibana.services.uiSettings,
+      setSignalsQuery,
+    ]);
 
     const linkButton = useMemo(() => {
       if (showLinkToSignals) {