[Security Solution][Detections] fixes validation issues in rules actions form (#141811)

## Summary

- addresses https://github.com/elastic/kibana/issues/140593 
   - bulk edit of rules actions
   - [single rule actions update](https://github.com/elastic/kibana/issues/140593#issuecomment-1257903212 )

### Before

Single rule actions update

https://user-images.githubusercontent.com/92328789/192327231-8fdc846c-55f2-4ab1-8786-e96d2376af48.mov


Bulk edit rule actions

https://user-images.githubusercontent.com/92328789/192327094-ea830769-9633-43dc-be37-7ec68de4bd6f.mp4




### After

Single rule actions update and Bulk edit rule actions

https://user-images.githubusercontent.com/92328789/192325274-010d11fc-17eb-47a1-b817-7a24eba8a365.mov
This commit is contained in:
Vitalii Dmyterko 2022-09-30 11:03:40 +01:00 committed by GitHub
parent a1759bdd18
commit 6b11352f71
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -86,8 +86,7 @@ export const RuleActionsField: React.FC<Props> = ({ field, messageVariables }) =
updatedActions[index] = deepMerge(updatedActions[index], { id });
field.setValue(updatedActions);
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[field.setValue, actions]
[field, actions]
);
const setAlertActionsProperty = useCallback(
@ -98,20 +97,26 @@ export const RuleActionsField: React.FC<Props> = ({ field, messageVariables }) =
const setActionParamsProperty = useCallback(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(key: string, value: any, index: number) => {
field.setValue((prevValue: RuleAction[]) => {
const updatedActions = [...prevValue];
updatedActions[index] = {
...updatedActions[index],
params: {
...updatedActions[index].params,
[key]: value,
},
};
return updatedActions;
});
// validation is not triggered correctly when actions params updated (more details in https://github.com/elastic/kibana/issues/142217)
// wrapping field.setValue in setTimeout fixes the issue above
// and triggers validation after params have been updated
setTimeout(
() =>
field.setValue((prevValue: RuleAction[]) => {
const updatedActions = [...prevValue];
updatedActions[index] = {
...updatedActions[index],
params: {
...updatedActions[index].params,
[key]: value,
},
};
return updatedActions;
}),
0
);
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[field.setValue]
[field]
);
const actionForm = useMemo(