Skip to content

Commit

Permalink
[security_solution] enable react-hooks/exhaustive-deps (#68470) (#68525)
Browse files Browse the repository at this point in the history
* Enable `react-hooks/exhaustive-deps` rule for security_solution
* Disable it anywhere that it would catch an issue
# Conflicts:
#	x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_entries.tsx
  • Loading branch information
Robert Austin authored Jun 9, 2020
1 parent 2880008 commit 6540dde
Show file tree
Hide file tree
Showing 138 changed files with 312 additions and 46 deletions.
4 changes: 0 additions & 4 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -762,10 +762,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',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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]);
Expand All @@ -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]
);

Expand All @@ -175,6 +178,7 @@ export const AlertsHistogramPanel = memo<AlertsHistogramPanelProps>(
deleteQuery({ id: uniqueQueryId });
}
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

useEffect(() => {
Expand All @@ -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(() => {
Expand Down Expand Up @@ -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(() => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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]
);

Expand Down Expand Up @@ -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),
Expand Down Expand Up @@ -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} />,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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[];
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -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]
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ export const PickTimeline = ({
setTimelineId(id);
setTimelineTitle(title);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [field.value]);

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

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import {
Query,
FilterManager,
SavedQuery,
SavedQueryTimeFilter,
} from '../../../../../../../../src/plugins/data/public';

import { BrowserFields } from '../../../../common/containers/source';
Expand Down Expand Up @@ -111,6 +110,7 @@ export const QueryBarDefineRule = ({
isSubscribed = false;
subscriptions.unsubscribe();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [field.value]);

useEffect(() => {
Expand Down Expand Up @@ -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 });
Expand Down Expand Up @@ -179,6 +180,7 @@ export const QueryBarDefineRule = ({
}
}
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[field.value]
);

Expand Down Expand Up @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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]
);

Expand All @@ -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]
);

Expand All @@ -82,6 +84,7 @@ export const RuleActionsField: ThrottleSelectField = ({ field, messageVariables
);
setSupportedActionTypes(supportedTypes);
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

useEffect(() => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@ const RuleActionsOverflowComponent = ({
</EuiContextMenuItem>,
]
: [],
// eslint-disable-next-line react-hooks/exhaustive-deps
[rule, userHasNoPermissions]
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ export const ScheduleItem = ({
setTimeType(e.target.value);
field.setValue(`${timeVal}${e.target.value}`);
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[timeVal]
);

Expand All @@ -87,6 +88,7 @@ export const ScheduleItem = ({
setTimeVal(sanitizedValue);
field.setValue(`${sanitizedValue}${timeType}`);
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[timeType]
);

Expand All @@ -111,6 +113,7 @@ export const ScheduleItem = ({
setTimeType(filterTimeType[0]);
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [field.value]);

// EUI missing some props
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@ const StepAboutRuleComponent: FC<StepAboutRuleProps> = ({
setMyStepData({ ...data, isNew: false } as AboutStepRule);
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [form]);

useEffect(() => {
Expand All @@ -113,12 +114,14 @@ const StepAboutRuleComponent: FC<StepAboutRuleProps> = ({
setMyStepData(myDefaultValues);
setFieldValue(form, schema, myDefaultValues);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [defaultValues]);

useEffect(() => {
if (setForm != null) {
setForm(RuleStep.aboutRule, form);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [form]);

return isReadOnlyView && myStepData.name != null ? (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@ const StepDefineRuleComponent: FC<StepDefineRuleProps> = ({
setMyStepData({ ...data, isNew: false } as DefineStepRule);
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [form]);

useEffect(() => {
Expand All @@ -132,12 +133,14 @@ const StepDefineRuleComponent: FC<StepDefineRuleProps> = ({
setMyStepData(newValues);
setFieldValue(form, schema, newValues);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [defaultValues, setMyStepData, setFieldValue]);

useEffect(() => {
if (setForm != null) {
setForm(RuleStep.defineRule, form);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [form]);

const handleResetIndices = useCallback(() => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@ const StepRuleActionsComponent: FC<StepRuleActionsProps> = ({
}
}
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[form]
);

Expand All @@ -112,12 +113,14 @@ const StepRuleActionsComponent: FC<StepRuleActionsProps> = ({
setMyStepData(myDefaultValues);
setFieldValue(form, schema, myDefaultValues);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [defaultValues]);

useEffect(() => {
if (setForm != null) {
setForm(RuleStep.ruleActions, form);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [form]);

const updateThrottle = useCallback((throttle) => setMyStepData({ ...myStepData, throttle }), [
Expand All @@ -142,6 +145,7 @@ const StepRuleActionsComponent: FC<StepRuleActionsProps> = ({
options: throttleOptions,
},
}),
// eslint-disable-next-line react-hooks/exhaustive-deps
[isLoading, updateThrottle]
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ const StepScheduleRuleComponent: FC<StepScheduleRuleProps> = ({
setMyStepData({ ...data, isNew: false } as ScheduleStepRule);
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [form]);

useEffect(() => {
Expand All @@ -74,12 +75,14 @@ const StepScheduleRuleComponent: FC<StepScheduleRuleProps> = ({
setMyStepData(myDefaultValues);
setFieldValue(form, schema, myDefaultValues);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [defaultValues]);

useEffect(() => {
if (setForm != null) {
setForm(RuleStep.scheduleRule, form);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [form]);

return isReadOnlyView && myStepData != null ? (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export const ThrottleSelectField: ThrottleSelectField = (props) => {
props.field.setValue(throttle);
props.handleChange(throttle);
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[props.field.setValue, props.handleChange]
);
const newEuiFieldProps = { ...props.euiFieldProps, onChange };
Expand Down
Loading

0 comments on commit 6540dde

Please sign in to comment.