From 1cd4895d7d752ae09ca6abee736b6803152f6b65 Mon Sep 17 00:00:00 2001 From: Candace Park <56409205+parkiino@users.noreply.github.com> Date: Wed, 15 Apr 2020 10:19:58 -0400 Subject: [PATCH] adding useMemo (#63504) (#63536) Co-authored-by: Elastic Machine --- .../view/policy/policy_forms/events/linux.tsx | 26 ++++++++++--------- .../view/policy/policy_forms/events/mac.tsx | 26 ++++++++++--------- .../policy/policy_forms/events/windows.tsx | 7 ++--- 3 files changed, 32 insertions(+), 27 deletions(-) diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/events/linux.tsx b/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/events/linux.tsx index 9d2ce03c204626..ca2215d3d0a59c 100644 --- a/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/events/linux.tsx +++ b/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/events/linux.tsx @@ -8,18 +8,19 @@ import React, { useMemo } from 'react'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiTitle, EuiText, EuiSpacer } from '@elastic/eui'; +import { ImmutableArray } from '../../../../../../../common/types'; +import { getIn, setIn } from '../../../../models/policy_details_config'; import { EventsCheckbox } from './checkbox'; import { OS, UIPolicyConfig } from '../../../../types'; import { usePolicyDetailsSelector } from '../../policy_hooks'; import { selectedLinuxEvents, totalLinuxEvents } from '../../../../store/policy_details/selectors'; import { ConfigForm } from '../config_form'; -import { getIn, setIn } from '../../../../models/policy_details_config'; export const LinuxEvents = React.memo(() => { const selected = usePolicyDetailsSelector(selectedLinuxEvents); const total = usePolicyDetailsSelector(totalLinuxEvents); - const checkboxes: Array<{ + const checkboxes: ImmutableArray<{ name: string; os: 'linux'; protectionField: keyof UIPolicyConfig['linux']['events']; @@ -50,7 +51,7 @@ export const LinuxEvents = React.memo(() => { [] ); - const renderCheckboxes = () => { + const renderCheckboxes = useMemo(() => { return ( <> @@ -76,9 +77,9 @@ export const LinuxEvents = React.memo(() => { })} ); - }; + }, [checkboxes]); - const collectionsEnabled = () => { + const collectionsEnabled = useMemo(() => { return ( { /> ); - }; + }, [selected, total]); return ( [i18n.translate('xpack.endpoint.policy.details.linux', { defaultMessage: 'Linux' })], + [] + )} + id="linuxEventsForm" + rightCorner={collectionsEnabled} + children={renderCheckboxes} /> ); }); diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/events/mac.tsx b/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/events/mac.tsx index 3b69c21d2b1501..5024d02603d770 100644 --- a/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/events/mac.tsx +++ b/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/events/mac.tsx @@ -8,18 +8,19 @@ import React, { useMemo } from 'react'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiTitle, EuiText, EuiSpacer } from '@elastic/eui'; +import { ImmutableArray } from '../../../../../../../common/types'; +import { getIn, setIn } from '../../../../models/policy_details_config'; import { EventsCheckbox } from './checkbox'; import { OS, UIPolicyConfig } from '../../../../types'; import { usePolicyDetailsSelector } from '../../policy_hooks'; import { selectedMacEvents, totalMacEvents } from '../../../../store/policy_details/selectors'; import { ConfigForm } from '../config_form'; -import { getIn, setIn } from '../../../../models/policy_details_config'; export const MacEvents = React.memo(() => { const selected = usePolicyDetailsSelector(selectedMacEvents); const total = usePolicyDetailsSelector(totalMacEvents); - const checkboxes: Array<{ + const checkboxes: ImmutableArray<{ name: string; os: 'mac'; protectionField: keyof UIPolicyConfig['mac']['events']; @@ -50,7 +51,7 @@ export const MacEvents = React.memo(() => { [] ); - const renderCheckboxes = () => { + const renderCheckboxes = useMemo(() => { return ( <> @@ -76,9 +77,9 @@ export const MacEvents = React.memo(() => { })} ); - }; + }, [checkboxes]); - const collectionsEnabled = () => { + const collectionsEnabled = useMemo(() => { return ( { /> ); - }; + }, [selected, total]); return ( [i18n.translate('xpack.endpoint.policy.details.mac', { defaultMessage: 'Mac' })], + [] + )} + id="macEventsForm" + rightCorner={collectionsEnabled} + children={renderCheckboxes} /> ); }); diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/events/windows.tsx b/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/events/windows.tsx index da675dc1e23938..5b347ec387f48f 100644 --- a/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/events/windows.tsx +++ b/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/events/windows.tsx @@ -8,6 +8,8 @@ import React, { useMemo } from 'react'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiTitle, EuiText, EuiSpacer } from '@elastic/eui'; +import { ImmutableArray } from '../../../../../../../common/types'; +import { setIn, getIn } from '../../../../models/policy_details_config'; import { EventsCheckbox } from './checkbox'; import { OS, UIPolicyConfig } from '../../../../types'; import { usePolicyDetailsSelector } from '../../policy_hooks'; @@ -16,13 +18,12 @@ import { totalWindowsEvents, } from '../../../../store/policy_details/selectors'; import { ConfigForm } from '../config_form'; -import { setIn, getIn } from '../../../../models/policy_details_config'; export const WindowsEvents = React.memo(() => { const selected = usePolicyDetailsSelector(selectedWindowsEvents); const total = usePolicyDetailsSelector(totalWindowsEvents); - const checkboxes: Array<{ + const checkboxes: ImmutableArray<{ name: string; os: 'windows'; protectionField: keyof UIPolicyConfig['windows']['events']; @@ -132,7 +133,7 @@ export const WindowsEvents = React.memo(() => { ], [] )} - id="windowsEventingForm" + id="windowsEventsForm" rightCorner={collectionsEnabled} children={renderCheckboxes} />