From 6e894d93e1eb9bd2b25df8b24dfab98555de8a6b Mon Sep 17 00:00:00 2001
From: Candace Park <candace.park@elastic.co>
Date: Tue, 14 Apr 2020 14:16:06 -0400
Subject: [PATCH] adding useMemo

---
 .../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 9d2ce03c20462..ca2215d3d0a59 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 (
       <>
         <EuiTitle size="xxs">
@@ -76,9 +77,9 @@ export const LinuxEvents = React.memo(() => {
         })}
       </>
     );
-  };
+  }, [checkboxes]);
 
-  const collectionsEnabled = () => {
+  const collectionsEnabled = useMemo(() => {
     return (
       <EuiText size="s" color="subdued">
         <FormattedMessage
@@ -88,19 +89,20 @@ export const LinuxEvents = React.memo(() => {
         />
       </EuiText>
     );
-  };
+  }, [selected, total]);
 
   return (
     <ConfigForm
       type={i18n.translate('xpack.endpoint.policy.details.eventCollection', {
         defaultMessage: 'Event Collection',
       })}
-      supportedOss={[
-        i18n.translate('xpack.endpoint.policy.details.linux', { defaultMessage: 'Linux' }),
-      ]}
-      id="linuxEventingForm"
-      rightCorner={collectionsEnabled()}
-      children={renderCheckboxes()}
+      supportedOss={useMemo(
+        () => [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 3b69c21d2b150..5024d02603d77 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 (
       <>
         <EuiTitle size="xxs">
@@ -76,9 +77,9 @@ export const MacEvents = React.memo(() => {
         })}
       </>
     );
-  };
+  }, [checkboxes]);
 
-  const collectionsEnabled = () => {
+  const collectionsEnabled = useMemo(() => {
     return (
       <EuiText size="s" color="subdued">
         <FormattedMessage
@@ -88,19 +89,20 @@ export const MacEvents = React.memo(() => {
         />
       </EuiText>
     );
-  };
+  }, [selected, total]);
 
   return (
     <ConfigForm
       type={i18n.translate('xpack.endpoint.policy.details.eventCollection', {
         defaultMessage: 'Event Collection',
       })}
-      supportedOss={[
-        i18n.translate('xpack.endpoint.policy.details.mac', { defaultMessage: 'Mac' }),
-      ]}
-      id="macEventingForm"
-      rightCorner={collectionsEnabled()}
-      children={renderCheckboxes()}
+      supportedOss={useMemo(
+        () => [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 da675dc1e2393..5b347ec387f48 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}
     />