[security_solution] enable react-hooks/exhaustive-deps (#68470)

* Enable `react-hooks/exhaustive-deps` rule for security_solution
* Disable it anywhere that it would catch an issue

Author: Robert Austin

.eslintrc.js

@@ -758,10 +758,6 @@ module.exports = {
         'react/jsx-no-target-blank': 'error',
         'react/jsx-fragments': 'error',
         '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/security_solution/public/alerts/components/alerts_histogram_panel/index.tsx

@@ -131,13 +131,15 @@ export const AlertsHistogramPanel = memo<AlertsHistogramPanelProps>(
           totalAlertsObj.value,
           totalAlertsObj.relation === 'gte' ? '>' : totalAlertsObj.relation === 'lte' ? '<' : ''
         ),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       [totalAlertsObj]
     );
 
     const setSelectedOptionCallback = useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
       setSelectedStackByOption(
         stackByOptions?.find((co) => co.value === event.target.value) ?? defaultStackByOption
       );
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     const formattedAlertsData = useMemo(() => formatAlertsData(alertsData), [alertsData]);
@@ -154,6 +156,7 @@ export const AlertsHistogramPanel = memo<AlertsHistogramPanelProps>(
               value: bucket.key,
             }))
           : NO_LEGEND_DATA,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       [alertsData, selectedStackByOption.value]
     );
 
@@ -175,6 +178,7 @@ export const AlertsHistogramPanel = memo<AlertsHistogramPanelProps>(
           deleteQuery({ id: uniqueQueryId });
         }
       };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     useEffect(() => {
@@ -189,6 +193,7 @@ export const AlertsHistogramPanel = memo<AlertsHistogramPanelProps>(
           refetch,
         });
       }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [setQuery, isLoadingAlerts, alertsData, response, request, refetch]);
 
     useEffect(() => {
@@ -219,6 +224,7 @@ export const AlertsHistogramPanel = memo<AlertsHistogramPanelProps>(
           !isEmpty(converted) ? [converted] : []
         )
       );
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [selectedStackByOption.value, from, to, query, filters]);
 
     const linkButton = useMemo(() => {

x-pack/plugins/security_solution/public/alerts/components/alerts_table/index.tsx

@@ -117,6 +117,7 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
       });
     }
     return null;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [browserFields, globalFilters, globalQuery, indexPatterns, kibana, to, from]);
 
   // Callback for creating a new timeline -- utilized by row/batch actions
@@ -143,13 +144,15 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
     ({ eventIds, isLoading }: SetEventsLoadingProps) => {
       setEventsLoading!({ id: ALERTS_TABLE_TIMELINE_ID, eventIds, isLoading });
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [setEventsLoading, ALERTS_TABLE_TIMELINE_ID]
   );
 
   const setEventsDeletedCallback = useCallback(
     ({ eventIds, isDeleted }: SetEventsDeletedProps) => {
       setEventsDeleted!({ id: ALERTS_TABLE_TIMELINE_ID, eventIds, isDeleted });
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [setEventsDeleted, ALERTS_TABLE_TIMELINE_ID]
   );
 
@@ -210,7 +213,7 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
   }, [setSelectAll, setShowClearSelectionAction]);
 
   const updateAlertsStatusCallback: UpdateAlertsStatusCallback = useCallback(
-    async (refetchQuery: inputsModel.Refetch, { alertIds, status }: UpdateAlertsStatusProps) => {
+    async (refetchQuery: inputsModel.Refetch, { status }: UpdateAlertsStatusProps) => {
       await updateAlertStatusAction({
         query: showClearSelectionAction ? getGlobalQuery()?.filterQuery : undefined,
         alertIds: Object.keys(selectedEventIds),
@@ -314,13 +317,15 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
       title: i18n.ALERTS_TABLE_TITLE,
       selectAll: canUserCRUD ? selectAll : false,
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   useEffect(() => {
     setTimelineRowActions({
       id: ALERTS_TABLE_TIMELINE_ID,
       queryFields: requiredFieldsForActions,
       timelineRowActions: additionalActions,
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [additionalActions]);
   const headerFilterGroup = useMemo(
     () => <AlertsTableFilterGroup onFilterGroupChanged={onFilterGroupChangedCallback} />,

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

@@ -126,6 +126,7 @@ export const AddItem = ({
       inputsRef.current[haveBeenKeyboardDeleted].focus();
       setHaveBeenKeyboardDeleted(-1);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [haveBeenKeyboardDeleted, inputsRef.current]);
 
   const values = field.value as string[];

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

@@ -40,7 +40,7 @@ interface AddItemProps {
   isDisabled: boolean;
 }
 
-export const AddMitreThreat = ({ dataTestSubj, field, idAria, isDisabled }: AddItemProps) => {
+export const AddMitreThreat = ({ field, idAria, isDisabled }: AddItemProps) => {
   const [showValidation, setShowValidation] = useState(false);
   const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
 
@@ -101,6 +101,7 @@ export const AddMitreThreat = ({ dataTestSubj, field, idAria, isDisabled }: AddI
         ...values.slice(index + 1),
       ]);
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [field]
   );
 

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

@@ -39,6 +39,7 @@ export const PickTimeline = ({
       setTimelineId(id);
       setTimelineTitle(title);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [field.value]);
 
   const handleOnTimelineChange = useCallback(
@@ -49,6 +50,7 @@ export const PickTimeline = ({
         field.setValue({ id, title });
       }
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [field]
   );
 

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

@@ -16,7 +16,6 @@ import {
   Query,
   FilterManager,
   SavedQuery,
-  SavedQueryTimeFilter,
 } from '../../../../../../../../src/plugins/data/public';
 
 import { BrowserFields } from '../../../../common/containers/source';
@@ -111,6 +110,7 @@ export const QueryBarDefineRule = ({
       isSubscribed = false;
       subscriptions.unsubscribe();
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [field.value]);
 
   useEffect(() => {
@@ -143,10 +143,11 @@ export const QueryBarDefineRule = ({
     return () => {
       isSubscribed = false;
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [field.value]);
 
   const onSubmitQuery = useCallback(
-    (newQuery: Query, timefilter?: SavedQueryTimeFilter) => {
+    (newQuery: Query) => {
       const { query } = field.value as FieldValueQueryBar;
       if (!deepEqual(query, newQuery)) {
         field.setValue({ ...(field.value as FieldValueQueryBar), query: newQuery });
@@ -179,6 +180,7 @@ export const QueryBarDefineRule = ({
         }
       }
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [field.value]
   );
 
@@ -214,7 +216,7 @@ export const QueryBarDefineRule = ({
     [browserFields, field, indexPattern]
   );
 
-  const onMutation = (event: unknown, observer: unknown) => {
+  const onMutation = () => {
     if (resizeParentContainer != null) {
       const suggestionContainer = document.getElementById('kbnTypeahead__items');
       if (suggestionContainer != null) {

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

@@ -56,6 +56,7 @@ export const RuleActionsField: ThrottleSelectField = ({ field, messageVariables
       updatedActions[index] = deepMerge(updatedActions[index], { id });
       field.setValue(updatedActions);
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [field.setValue, actions]
   );
 
@@ -71,6 +72,7 @@ export const RuleActionsField: ThrottleSelectField = ({ field, messageVariables
       updatedActions[index].params[key] = value;
       field.setValue(updatedActions);
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [field.setValue, actions]
   );
 
@@ -82,6 +84,7 @@ export const RuleActionsField: ThrottleSelectField = ({ field, messageVariables
       );
       setSupportedActionTypes(supportedTypes);
     })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {

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

@@ -101,6 +101,7 @@ const RuleActionsOverflowComponent = ({
             </EuiContextMenuItem>,
           ]
         : [],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [rule, userHasNoPermissions]
   );
 

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

@@ -94,19 +94,22 @@ export const RuleSwitchComponent = ({
       }
       setMyIsLoading(false);
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [dispatch, id]
   );
 
   useEffect(() => {
     if (myEnabled !== enabled) {
       setMyEnabled(enabled);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [enabled]);
 
   useEffect(() => {
     if (myIsLoading !== isLoading) {
       setMyIsLoading(isLoading ?? false);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLoading]);
 
   return (