added setIn, still got some type errors tho

elastic · Apr 8, 2020 · 3d9e34c · 3d9e34c
1 parent 43c6a10
commit 3d9e34c
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 26 deletions.
diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/models/policy_details_config.ts b/x-pack/plugins/endpoint/public/applications/endpoint/models/policy_details_config.ts
@@ -43,3 +43,36 @@ export function clone(policyDetailsConfig: UIPolicyConfig): UIPolicyConfig {
    */
   return clonedConfig as UIPolicyConfig;
 }
+
+/**
+ * Returns cloned `configuration` with `value` set by the `keyPath`.
+ */
+
+export function setIn<
+  K1 extends keyof UIPolicyConfig,
+  K2 extends keyof UIPolicyConfig[K1],
+  K3 extends keyof UIPolicyConfig[K1][K2]
+>(configuration: UIPolicyConfig, keyPath: [K1, K2, K3], value: boolean | string): UIPolicyConfig;
+export function setIn<K1 extends keyof UIPolicyConfig, K2 extends keyof UIPolicyConfig[K1]>(
+  configuration: UIPolicyConfig,
+  keyPath: [K1, K2],
+  value: UIPolicyConfig[K1][K2]
+): UIPolicyConfig;
+export function setIn<K1 extends keyof UIPolicyConfig>(
+  configuration: UIPolicyConfig,
+  keyPath: [K1],
+  value: UIPolicyConfig[K1]
+): UIPolicyConfig;
+export function setIn(
+  configuration: UIPolicyConfig,
+  keyPath: string[],
+  value: boolean | string
+): UIPolicyConfig {
+  const payload = clone(configuration);
+  let current: any = payload;
+  while (keyPath.length > 1) {
+    current = current[keyPath.shift()!];
+  }
+  current[keyPath[0]] = value;
+  return payload;
+}
diff --git a/...gins/endpoint/public/applications/endpoint/view/policy/policy_forms/eventing/checkbox.tsx b/...gins/endpoint/public/applications/endpoint/view/policy/policy_forms/eventing/checkbox.tsx
@@ -7,48 +7,50 @@
 import React, { useCallback } from 'react';
 import { EuiCheckbox } from '@elastic/eui';
 import { useDispatch } from 'react-redux';
+import { setIn } from '../../../../models/policy_details_config';
 import { usePolicyDetailsSelector } from '../../policy_hooks';
-import { policyConfig, windowsEventing } from '../../../../store/policy_details/selectors';
+import { policyConfig } from '../../../../store/policy_details/selectors';
 import { PolicyDetailsAction } from '../../../../store/policy_details';
 import { UIPolicyConfig } from '../../../../types';
-import { clone } from '../../../../models/policy_details_config';
 
-export const EventingCheckbox = React.memo(function<T extends keyof UIPolicyConfig>({
+export const EventingCheckbox = React.memo(function<
+  T extends keyof UIPolicyConfig,
+  TT extends keyof UIPolicyConfig[T],
+  TTT extends keyof UIPolicyConfig[T][TT]
+>({
   id,
   name,
   os,
+  protectionEvent,
   protectionField,
 }: {
   id: string;
   name: string;
   os: T;
-  protectionField: keyof UIPolicyConfig[T]['events'];
+  protectionEvent: TT;
+  protectionField: TTT;
 }) {
   const policyDetailsConfig = usePolicyDetailsSelector(policyConfig);
-  const eventing = usePolicyDetailsSelector(windowsEventing);
+  const selected = policyDetailsConfig[os][protectionEvent][protectionField];
   const dispatch = useDispatch<(action: PolicyDetailsAction) => void>();
 
   const handleCheckboxChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       if (policyDetailsConfig) {
-        const newPayload: UIPolicyConfig = clone(policyDetailsConfig);
-        newPayload[os].events[protectionField] = event.target.checked;
+        const payload = setIn(
+          policyDetailsConfig,
+          [os, protectionEvent, protectionField],
+          event.target.checked
+        );
 
         dispatch({
           type: 'userChangedPolicyConfig',
-          payload: { policyConfig: newPayload },
+          payload: { policyConfig: payload },
         });
       }
     },
-    [dispatch, os, policyDetailsConfig, protectionField]
+    [dispatch, os, policyDetailsConfig, protectionEvent, protectionField]
   );
 
-  return (
-    <EuiCheckbox
-      id={id}
-      label={name}
-      checked={eventing && eventing[protectionField]}
-      onChange={handleCheckboxChange}
-    />
-  );
+  return <EuiCheckbox id={id} label={name} checked={selected} onChange={handleCheckboxChange} />;
 });
diff --git a/...k/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/eventing/mac.tsx b/...k/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/eventing/mac.tsx
@@ -10,7 +10,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { htmlIdGenerator } from '@elastic/eui';
 import { EuiTitle, EuiText, EuiSpacer } from '@elastic/eui';
 import { EventingCheckbox } from './checkbox';
-import { OS, EventingFields } from '../../../../types';
+import { OS, UIPolicyConfig } from '../../../../types';
 import { usePolicyDetailsSelector } from '../../policy_hooks';
 import { selectedMacEventing, totalMacEventing } from '../../../../store/policy_details/selectors';
 import { ConfigForm } from '../config_form';
@@ -19,28 +19,36 @@ export const MacEventing = React.memo(() => {
   const selected = usePolicyDetailsSelector(selectedMacEventing);
   const total = usePolicyDetailsSelector(totalMacEventing);
 
-  const checkboxes = useMemo(
+  const checkboxes: Array<{
+    name: string;
+    os: 'mac';
+    protectionEvent: keyof UIPolicyConfig['mac'];
+    protectionField: keyof UIPolicyConfig['mac']['events'];
+  }> = useMemo(
     () => [
       {
         name: i18n.translate('xpack.endpoint.policyDetailsConfig.mac.events.file', {
           defaultMessage: 'File',
         }),
         os: OS.mac,
-        protectionField: EventingFields.file,
+        protectionEvent: 'events',
+        protectionField: 'file',
       },
       {
         name: i18n.translate('xpack.endpoint.policyDetailsConfig.mac.events.process', {
           defaultMessage: 'Process',
         }),
         os: OS.mac,
-        protectionField: EventingFields.process,
+        protectionEvent: 'events',
+        protectionField: 'process',
       },
       {
         name: i18n.translate('xpack.endpoint.policyDetailsConfig.mac.events.network', {
           defaultMessage: 'Network',
         }),
         os: OS.mac,
-        protectionField: EventingFields.network,
+        protectionEvent: 'events',
+        protectionField: 'network',
       },
     ],
     []
@@ -65,6 +73,7 @@ export const MacEventing = React.memo(() => {
               name={item.name}
               key={index}
               os={item.os}
+              protectionEvent={item.protectionEvent}
               protectionField={item.protectionField}
             />
           );

diff --git a/...ugins/endpoint/public/applications/endpoint/view/policy/policy_forms/eventing/windows.tsx b/...ugins/endpoint/public/applications/endpoint/view/policy/policy_forms/eventing/windows.tsx
@@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiTitle, EuiText, EuiSpacer } from '@elastic/eui';
 import { EventingCheckbox } from './checkbox';
-import { OS, EventingFields } from '../../../../types';
+import { OS, UIPolicyConfig } from '../../../../types';
 import { usePolicyDetailsSelector } from '../../policy_hooks';
 import {
   selectedWindowsEventing,
@@ -21,21 +21,28 @@ export const WindowsEventing = React.memo(() => {
   const selected = usePolicyDetailsSelector(selectedWindowsEventing);
   const total = usePolicyDetailsSelector(totalWindowsEventing);
 
-  const checkboxes = useMemo(
+  const checkboxes: Array<{
+    name: string;
+    os: 'windows';
+    protectionEvent: keyof UIPolicyConfig['windows'];
+    protectionField: keyof UIPolicyConfig['windows']['events'];
+  }> = useMemo(
     () => [
       {
         name: i18n.translate('xpack.endpoint.policyDetailsConfig.windows.events.process', {
           defaultMessage: 'Process',
         }),
         os: OS.windows,
-        protectionField: EventingFields.process,
+        protectionEvent: 'events',
+        protectionField: 'process',
       },
       {
         name: i18n.translate('xpack.endpoint.policyDetailsConfig.windows.events.network', {
           defaultMessage: 'Network',
         }),
         os: OS.windows,
-        protectionField: EventingFields.network,
+        protectionEvent: 'events',
+        protectionField: 'network',
       },
     ],
     []
@@ -60,6 +67,7 @@ export const WindowsEventing = React.memo(() => {
               name={item.name}
               key={index}
               os={item.os}
+              protectionEvent={item.protectionEvent}
               protectionField={item.protectionField}
             />
           );