diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/eventing/checkbox.tsx b/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/eventing/checkbox.tsx
index 54065b0b36233..3da3f4daffe33 100644
--- a/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/eventing/checkbox.tsx
+++ b/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/eventing/checkbox.tsx
@@ -4,9 +4,10 @@
* you may not use this file except in compliance with the Elastic License.
*/
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
import { EuiCheckbox } from '@elastic/eui';
import { useDispatch } from 'react-redux';
+import { htmlIdGenerator } from '@elastic/eui';
import { setIn } from '../../../../models/policy_details_config';
import { usePolicyDetailsSelector } from '../../policy_hooks';
import { policyConfig } from '../../../../store/policy_details/selectors';
@@ -14,17 +15,15 @@ import { PolicyDetailsAction } from '../../../../store/policy_details';
import { UIPolicyConfig } from '../../../../types';
export const EventingCheckbox = React.memo(function<
- T extends keyof UIPolicyConfig,
- TT extends keyof UIPolicyConfig[T],
- TTT extends keyof UIPolicyConfig[T][TT]
+ T extends keyof UIPolicyConfig & string,
+ TT extends keyof UIPolicyConfig[T] & string,
+ TTT extends keyof UIPolicyConfig[T][TT] & string
>({
- id,
name,
os,
protectionEvent,
protectionField,
}: {
- id: string;
name: string;
os: T;
protectionEvent: TT;
@@ -52,5 +51,12 @@ export const EventingCheckbox = React.memo(function<
[dispatch, os, policyDetailsConfig, protectionEvent, protectionField]
);
- return ;
+ return (
+ htmlIdGenerator()(), [])}
+ label={name}
+ checked={selected}
+ onChange={handleCheckboxChange}
+ />
+ );
});
diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/eventing/windows.tsx b/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/eventing/windows.tsx
index e2728bee682f4..ee7ce56391b7c 100644
--- a/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/eventing/windows.tsx
+++ b/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/eventing/windows.tsx
@@ -48,7 +48,7 @@ export const WindowsEventing = React.memo(() => {
[]
);
- const renderCheckboxes = () => {
+ const renderCheckboxes = useMemo(() => {
return (
<>
@@ -63,7 +63,6 @@ export const WindowsEventing = React.memo(() => {
{checkboxes.map((item, index) => {
return (
{
})}
>
);
- };
+ }, [checkboxes]);
- const collectionsEnabled = () => {
+ const collectionsEnabled = useMemo(() => {
return (
{
/>
);
- };
+ }, [selected, total]);
return (
[
+ i18n.translate('xpack.endpoint.policy.details.windows', { defaultMessage: 'Windows' }),
+ ],
+ []
+ )}
id="windowsEventingForm"
rightCorner={collectionsEnabled()}
- children={renderCheckboxes()}
+ children={renderCheckboxes}
/>
);
});