Use terms aggs instead of composite refactor of Authentications Table based on feedback

x-pack/plugins/secops/public/components/drag_and_drop/helpers.test.ts

@@ -13,6 +13,7 @@ import {
   droppableIdPrefix,
   droppableTimelineFlyoutButtonPrefix,
   droppableTimelineProvidersPrefix,
+  escapeDataProviderId,
   getDraggableId,
   getDroppableId,
   getProviderIdFromDraggable,
@@ -444,4 +445,16 @@ describe('helpers', () => {
       ).toEqual(false);
     });
   });
+
+  describe('#escapeDataProviderId', () => {
+    test('it should escape dotted notation', () => {
+      const escaped = escapeDataProviderId('hello.how.are.you');
+      expect(escaped).toEqual('hello_how_are_you');
+    });
+
+    test('it should not escape a string without dotted notation', () => {
+      const escaped = escapeDataProviderId('hello how are you?');
+      expect(escaped).toEqual('hello how are you?');
+    });
+  });
 });

x-pack/plugins/secops/public/components/drag_and_drop/helpers.ts

@@ -56,6 +56,8 @@ export const getTimelineIdFromDestination = (result: DropResult): string =>
 export const getProviderIdFromDraggable = (result: DropResult): string =>
   result.draggableId.substring(result.draggableId.lastIndexOf('.') + 1);
 
+export const escapeDataProviderId = (path: string) => path.replace(/\./g, '_');
+
 export const providerWasDroppedOnTimeline = (result: DropResult): boolean =>
   reasonIsDrop(result) &&
   draggableIsContent(result) &&

x-pack/plugins/secops/public/components/empty_page/index.test.tsx

@@ -9,7 +9,7 @@ import toJson from 'enzyme-to-json';
 import React from 'react';
 import { EmptyPage } from './index';
 
-it('renders correctly', () => {
+test('renders correctly', () => {
   const EmptyComponent = shallow(
     <EmptyPage
       title="My Super Title"

x-pack/plugins/secops/public/components/empty_value/empty_value.test.tsx

@@ -4,14 +4,28 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { defaultToEmpty, getEmptyValue, getOrEmpty } from '.';
+import { mount } from 'enzyme';
+import React from 'react';
+import {
+  defaultToEmpty,
+  defaultToEmptyTag,
+  getEmptyTagValue,
+  getEmptyValue,
+  getOrEmpty,
+  getOrEmptyTag,
+} from '.';
 
 describe('EmptyValue', () => {
   describe('#getEmptyValue', () =>
-    it('should return an empty value', () => expect(getEmptyValue()).toBe('--')));
+    test('should return an empty value', () => expect(getEmptyValue()).toBe('--')));
 
-  describe('#getOr', () => {
-    it('should default empty value when a deep rooted value is null', () => {
+  describe('#getEmptyTagValue', () => {
+    const wrapper = mount(<p>{getEmptyTagValue()}</p>);
+    test('should return an empty tag value', () => expect(wrapper.text()).toBe('--'));
+  });
+
+  describe('#getOrEmpty', () => {
+    test('should default empty value when a deep rooted value is null', () => {
       const test = {
         a: {
           b: {
@@ -22,7 +36,7 @@ describe('EmptyValue', () => {
       expect(getOrEmpty('a.b.c', test)).toBe(getEmptyValue());
     });
 
-    it('should default empty value when a deep rooted value is undefined', () => {
+    test('should default empty value when a deep rooted value is undefined', () => {
       const test = {
         a: {
           b: {
@@ -33,7 +47,7 @@ describe('EmptyValue', () => {
       expect(getOrEmpty('a.b.c', test)).toBe(getEmptyValue());
     });
 
-    it('should default empty value when a deep rooted value is missing', () => {
+    test('should default empty value when a deep rooted value is missing', () => {
       const test = {
         a: {
           b: {},
@@ -42,7 +56,7 @@ describe('EmptyValue', () => {
       expect(getOrEmpty('a.b.c', test)).toBe(getEmptyValue());
     });
 
-    it('should return a deep path value', () => {
+    test('should return a deep path value', () => {
       const test = {
         a: {
           b: {
@@ -54,8 +68,56 @@ describe('EmptyValue', () => {
     });
   });
 
+  describe('#getOrEmptyTag', () => {
+    test('should default empty value when a deep rooted value is null', () => {
+      const test = {
+        a: {
+          b: {
+            c: null,
+          },
+        },
+      };
+      const wrapper = mount(<p>{getOrEmptyTag('a.b.c', test)}</p>);
+      expect(wrapper.text()).toBe(getEmptyValue());
+    });
+
+    test('should default empty value when a deep rooted value is undefined', () => {
+      const test = {
+        a: {
+          b: {
+            c: undefined,
+          },
+        },
+      };
+      const wrapper = mount(<p>{getOrEmptyTag('a.b.c', test)}</p>);
+      expect(wrapper.text()).toBe(getEmptyValue());
+    });
+
+    test('should default empty value when a deep rooted value is missing', () => {
+      const test = {
+        a: {
+          b: {},
+        },
+      };
+      const wrapper = mount(<p>{getOrEmptyTag('a.b.c', test)}</p>);
+      expect(wrapper.text()).toBe(getEmptyValue());
+    });
+
+    test('should return a deep path value', () => {
+      const test = {
+        a: {
+          b: {
+            c: 1,
+          },
+        },
+      };
+      const wrapper = mount(<p>{getOrEmptyTag('a.b.c', test)}</p>);
+      expect(wrapper.text()).toBe('1');
+    });
+  });
+
   describe('#defaultToEmpty', () => {
-    it('should default to an empty value when a deep rooted value is null', () => {
+    test('should default to an empty value when a deep rooted value is null', () => {
       const test = {
         a: {
           b: {
@@ -66,7 +128,7 @@ describe('EmptyValue', () => {
       expect(defaultToEmpty(test.a.b.c)).toBe(getEmptyValue());
     });
 
-    it('should default to an empty value when a deep rooted value is undefined', () => {
+    test('should default to an empty value when a deep rooted value is undefined', () => {
       const test = {
         a: {
           b: {
@@ -77,7 +139,7 @@ describe('EmptyValue', () => {
       expect(defaultToEmpty(test.a.b.c)).toBe(getEmptyValue());
     });
 
-    it('should return a deep path value', () => {
+    test('should return a deep path value', () => {
       const test = {
         a: {
           b: {
@@ -88,4 +150,42 @@ describe('EmptyValue', () => {
       expect(defaultToEmpty(test.a.b.c)).toBe(1);
     });
   });
+
+  describe('#defaultToEmptyTag', () => {
+    test('should default to an empty value when a deep rooted value is null', () => {
+      const test = {
+        a: {
+          b: {
+            c: null,
+          },
+        },
+      };
+      const wrapper = mount(<p>{defaultToEmptyTag(test.a.b.c)}</p>);
+      expect(wrapper.text()).toBe(getEmptyValue());
+    });
+
+    test('should default to an empty value when a deep rooted value is undefined', () => {
+      const test = {
+        a: {
+          b: {
+            c: undefined,
+          },
+        },
+      };
+      const wrapper = mount(<p>{defaultToEmptyTag(test.a.b.c)}</p>);
+      expect(wrapper.text()).toBe(getEmptyValue());
+    });
+
+    test('should return a deep path value', () => {
+      const test = {
+        a: {
+          b: {
+            c: 1,
+          },
+        },
+      };
+      const wrapper = mount(<p>{defaultToEmptyTag(test.a.b.c)}</p>);
+      expect(wrapper.text()).toBe('1');
+    });
+  });
 });

x-pack/plugins/secops/public/components/empty_value/index.tsx

@@ -5,10 +5,17 @@
  */
 
 import { defaultTo, get } from 'lodash/fp';
+import React from 'react';
+
+export const getEmptyTagValue = () => <>{getEmptyValue()}</>;
 
 export const getEmptyValue = () => '--';
 
+export const getOrEmptyTag = (path: string, item: unknown) => <>{getOrEmpty(path, item)}</>;
+
 export const getOrEmpty = (path: string, item: unknown) =>
   get(path, item) != null ? get(path, item) : getEmptyValue();
 
+export const defaultToEmptyTag = <T extends unknown>(item: T) => <>{defaultToEmpty(item)}</>;
+
 export const defaultToEmpty = <T extends unknown>(item: T) => defaultTo(getEmptyValue(), item);

x-pack/plugins/secops/public/components/flyout/index.test.tsx

@@ -11,6 +11,7 @@ import { Provider as ReduxStoreProvider } from 'react-redux';
 import { ThemeProvider } from 'styled-components';
 
 import * as euiVars from '@elastic/eui/dist/eui_theme_k6_light.json';
+import { ActionCreator } from 'typescript-fsa';
 import { Flyout, FlyoutComponent, flyoutHeaderHeight } from '.';
 import { mockGlobalState } from '../../mock';
 import { createStore, State } from '../../store';
@@ -204,7 +205,7 @@ describe('Flyout', () => {
     });
 
     test('should call the onOpen when the mouse is clicked for rendering', () => {
-      const showTimeline = jest.fn();
+      const showTimeline = (jest.fn() as unknown) as ActionCreator<{ id: string; show: boolean }>;
       const wrapper = mount(
         <ReduxStoreProvider store={store}>
           <ThemeProvider theme={{ eui: euiVars }}>
@@ -234,7 +235,7 @@ describe('Flyout', () => {
       const stateShowIsTrue = set('local.timeline.timelineById.test.show', true, state);
       const storeShowIsTrue = createStore(stateShowIsTrue);
 
-      const showTimeline = jest.fn();
+      const showTimeline = (jest.fn() as unknown) as ActionCreator<{ id: string; show: boolean }>;
       const wrapper = mount(
         <ReduxStoreProvider store={storeShowIsTrue}>
           <ThemeProvider theme={{ eui: euiVars }}>

x-pack/plugins/secops/public/components/flyout/index.tsx

@@ -11,6 +11,7 @@ import { connect } from 'react-redux';
 import { pure } from 'recompose';
 import styled from 'styled-components';
 
+import { ActionCreator } from 'typescript-fsa';
 import { State, timelineActions } from '../../store';
 import { themeSelector } from '../../store/local/app';
 import { Theme } from '../../store/local/app/model';
@@ -44,7 +45,7 @@ interface OwnProps {
 }
 
 interface DispatchProps {
-  showTimeline?: ({ id, show }: { id: string; show: boolean }) => void;
+  showTimeline?: ActionCreator<{ id: string; show: boolean }>;
   applyDeltaToWidth?: (
     {
       id,

x-pack/plugins/secops/public/components/flyout/resize_handle.tsx

@@ -6,10 +6,11 @@
 
 import * as React from 'react';
 import { connect } from 'react-redux';
-import styled from 'styled-components';
-
 import { fromEvent, Observable } from 'rxjs';
 import { mergeMap, takeUntil } from 'rxjs/operators';
+import styled from 'styled-components';
+import { ActionCreator } from 'typescript-fsa';
+
 import { timelineActions } from '../../store';
 
 interface OwnProps {
@@ -18,21 +19,13 @@ interface OwnProps {
 }
 
 interface DispatchProps {
-  applyDeltaToWidth: (
-    {
-      id,
-      delta,
-      bodyClientWidthPixels,
-      maxWidthPercent,
-      minWidthPixels,
-    }: {
-      id: string;
-      delta: number;
-      bodyClientWidthPixels: number;
-      maxWidthPercent: number;
-      minWidthPixels: number;
-    }
-  ) => void;
+  applyDeltaToWidth: ActionCreator<{
+    id: string;
+    delta: number;
+    bodyClientWidthPixels: number;
+    maxWidthPercent: number;
+    minWidthPixels: number;
+  }>;
 }
 
 type Props = OwnProps & DispatchProps;

x-pack/plugins/secops/public/components/load_more_table/index.mock.tsx

@@ -4,10 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
-import { HostItem } from '../../graphql/types';
-import { getOrEmpty } from '../empty_value';
-import { ItemsPerRow } from './index';
+import { HostsEdges } from '../../graphql/types';
+import { getOrEmptyTag } from '../empty_value';
+import { Columns, ItemsPerRow } from './index';
 
 export const mockData = {
   Hosts: {
@@ -47,30 +46,30 @@ export const mockData = {
   },
 };
 
-export const getHostsColumns = () => [
+export const getHostsColumns = (): Array<Columns<HostsEdges>> => [
   {
     name: 'Host',
     truncateText: false,
     hideForMobile: false,
-    render: (item: HostItem) => <>{getOrEmpty('host.name', item)}</>,
+    render: node => getOrEmptyTag('host.name', node),
   },
   {
     name: 'First seen',
     truncateText: false,
     hideForMobile: false,
-    render: (item: HostItem) => <>{getOrEmpty('host.firstSeen', item)}</>,
+    render: node => getOrEmptyTag('host.firstSeen', node),
   },
   {
     name: 'OS',
     truncateText: false,
     hideForMobile: false,
-    render: (item: HostItem) => <>{getOrEmpty('host.os', item)}</>,
+    render: node => getOrEmptyTag('host.os', node),
   },
   {
     name: 'Version',
     truncateText: false,
     hideForMobile: false,
-    render: (item: HostItem) => <>{getOrEmpty('host.version', item)}</>,
+    render: node => getOrEmptyTag('host.version', node),
   },
 ];