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} /> ); });