github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Security Solution][Cases] Do not call hooks inside anything but a functional component (#150105)

Browse source 
## Summary

Somewhere in the course of recent 8.7 changes, the calls to
casesUi.hooks.getUseCasesAddToNewCaseFlyout and
casesUi.hooks.getUseCasesAddToExistingCaseModal got moved inside of a
useCallback, which violates [the rules of
hooks](https://reactjs.org/docs/hooks-rules.html#only-call-hooks-from-react-functions)
and would throw an error in the console, with no modal being opened. By
moving the calls to the actual hooks outside of the onClick and only
calling the open function there, rules of hooks are not broken and the
modals work as expected.



https://user-images.githubusercontent.com/56408403/216160471-eeab794d-92ce-457f-af9a-3332b9480ad7.mov



### Checklist

- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Kevin Qualters 2023-02-02 20:31:17 -05:00 • committed by GitHub
parent 14af4a1643
commit 2931bbad20
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

42
x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/use_bulk_add_to_case_actions.tsx
View file

@ -5,8 +5,7 @@
* 2.0.
*/
import type { CaseAttachmentsWithoutOwner } from '@kbn/cases-plugin/public';
import { useCallback, useMemo } from 'react';
import { useMemo } from 'react';
import type { TimelineItem } from '../../../../../common/search_strategy';
import { useGetUserCasesPermissions, useKibana } from '../../../../common/lib/kibana';
import { ADD_TO_CASE_DISABLED, ADD_TO_EXISTING_CASE, ADD_TO_NEW_CASE } from '../translations';
@ -21,26 +20,15 @@ export const useBulkAddToCaseActions = ({ onClose, onSuccess }: UseAddToCaseActi
const userCasesPermissions = useGetUserCasesPermissions();
const createCaseFlyout = useCallback(
(caseAttachments?: CaseAttachmentsWithoutOwner) =>
casesUi.hooks
.getUseCasesAddToNewCaseFlyout({
onClose,
onSuccess,
})
.open({ attachments: caseAttachments }),
[casesUi.hooks, onClose, onSuccess]
);
const selectCaseModal = useCallback(
(caseAttachments?: CaseAttachmentsWithoutOwner) =>
casesUi.hooks
.getUseCasesAddToExistingCaseModal({
onClose,
onRowClick: onSuccess,
})
.open({ attachments: caseAttachments }),
[casesUi.hooks, onClose, onSuccess]
);
const addToNewCase = casesUi.hooks.getUseCasesAddToNewCaseFlyout({
onClose,
onSuccess,
});
const addToExisting = casesUi.hooks.getUseCasesAddToExistingCaseModal({
onClose,
onRowClick: onSuccess,
});
return useMemo(() => {
return userCasesPermissions.create && userCasesPermissions.read
@ -53,7 +41,8 @@ export const useBulkAddToCaseActions = ({ onClose, onSuccess }: UseAddToCaseActi
disabledLabel: ADD_TO_CASE_DISABLED,
onClick: (items?: TimelineItem[]) => {
const caseAttachments = items ? casesUi.helpers.groupAlertsByRule(items) : [];
createCaseFlyout(caseAttachments);
addToNewCase.open({ attachments: caseAttachments });
},
},
{
@ -64,16 +53,17 @@ export const useBulkAddToCaseActions = ({ onClose, onSuccess }: UseAddToCaseActi
'data-test-subj': 'attach-existing-case',
onClick: (items?: TimelineItem[]) => {
const caseAttachments = items ? casesUi.helpers.groupAlertsByRule(items) : [];
selectCaseModal(caseAttachments);
addToExisting.open({ attachments: caseAttachments });
},
},
]
: [];
}, [
casesUi.helpers,
createCaseFlyout,
addToExisting,
addToNewCase,
userCasesPermissions.create,
userCasesPermissions.read,
selectCaseModal,
]);
};