[SIEM] Fixes maps filter on array property to use single property value instead of array value (#49706) (#49784)

## Summary

Resolves https://github.com/elastic/kibana/issues/49534

Filtering on an array property within the map tooltip now uses the single property value instead of the array value. Ended up not showing more than 1 item as part of the `DefaultFieldRenderer` because of this open issue (https://github.com/elastic/ingest-dev/issues/474) which causes layout of subsequent items to be off.

<img width="715" alt="Screen Shot 2019-10-29 at 21 28 32" src="https://user-images.githubusercontent.com/2946766/67826918-c6906880-fa93-11e9-9c88-cbf85672ad99.png">


### Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

- [ ] ~This was checked for cross-browser compatibility, [including a check against IE11](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#cross-browser-compatibility)~
- [ ] ~Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/master/packages/kbn-i18n/README.md)~
- [ ] ~[Documentation](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#writing-documentation) was added for features that require explanation or tutorials~
- [X] [Unit or functional tests](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#cross-browser-compatibility) were updated or added to match the most common scenarios
- [ ] ~This was checked for [keyboard-only and screenreader accessibility](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Accessibility_testing_checklist)~

### For maintainers

- [ ] ~This was checked for breaking API changes and was [labeled appropriately](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#release-notes-process)~
- [ ] ~This includes a feature addition or change that requires a release note and was [labeled appropriately](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#release-notes-process)~

x-pack/legacy/plugins/siem/public/components/embeddables/map_tool_tip/__snapshots__/line_tool_tip_content.test.tsx.snap

@@ -24,13 +24,13 @@ exports[`LineToolTipContent renders correctly against snapshot 1`] = `
     contextId="contextId"
     destinationBytes={
       Array [
-        undefined,
+        "testPropValue",
       ]
     }
     eventId="map-line-tooltip-contextId"
     sourceBytes={
       Array [
-        undefined,
+        "testPropValue",
       ]
     }
   />

x-pack/legacy/plugins/siem/public/components/embeddables/map_tool_tip/__snapshots__/point_tool_tip_content.test.tsx.snap

@@ -10,7 +10,6 @@ exports[`PointToolTipContent renders correctly against snapshot 1`] = `
         Object {
           "_propertyKey": "host.name",
           "_rawValue": "testPropValue",
-          "getESFilters": [Function],
         },
       ]
     }

x-pack/legacy/plugins/siem/public/components/embeddables/map_tool_tip/line_tool_tip_content.test.tsx

@@ -9,13 +9,17 @@ import toJson from 'enzyme-to-json';
 import * as React from 'react';
 import { LineToolTipContent } from './line_tool_tip_content';
 import { FeatureProperty } from '../types';
+import { SUM_OF_DESTINATION_BYTES, SUM_OF_SOURCE_BYTES } from '../map_config';
 
 describe('LineToolTipContent', () => {
   const mockFeatureProps: FeatureProperty[] = [
     {
-      _propertyKey: 'host.name',
+      _propertyKey: SUM_OF_DESTINATION_BYTES,
+      _rawValue: 'testPropValue',
+    },
+    {
+      _propertyKey: SUM_OF_SOURCE_BYTES,
       _rawValue: 'testPropValue',
-      getESFilters: () => new Promise(resolve => setTimeout(resolve)),
     },
   ];
 

x-pack/legacy/plugins/siem/public/components/embeddables/map_tool_tip/line_tool_tip_content.tsx

@@ -28,8 +28,11 @@ interface LineToolTipContentProps {
 
 export const LineToolTipContent = React.memo<LineToolTipContentProps>(
   ({ contextId, featureProps }) => {
-    const lineProps = featureProps.reduce<Record<string, string>>(
-      (acc, f) => ({ ...acc, ...{ [f._propertyKey]: f._rawValue } }),
+    const lineProps = featureProps.reduce<Record<string, string[]>>(
+      (acc, f) => ({
+        ...acc,
+        ...{ [f._propertyKey]: Array.isArray(f._rawValue) ? f._rawValue : [f._rawValue] },
+      }),
       {}
     );
 
@@ -44,9 +47,9 @@ export const LineToolTipContent = React.memo<LineToolTipContentProps>(
         </EuiFlexItem>
         <SourceDestinationArrows
           contextId={contextId}
-          destinationBytes={[lineProps[SUM_OF_DESTINATION_BYTES]]}
+          destinationBytes={lineProps[SUM_OF_DESTINATION_BYTES]}
           eventId={`map-line-tooltip-${contextId}`}
-          sourceBytes={[lineProps[SUM_OF_SOURCE_BYTES]]}
+          sourceBytes={lineProps[SUM_OF_SOURCE_BYTES]}
         />
         <EuiFlexItem>
           <FlowBadge color="hollow">

x-pack/legacy/plugins/siem/public/components/embeddables/map_tool_tip/point_tool_tip_content.test.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import * as React from 'react';
 import { FeatureProperty } from '../types';
@@ -24,7 +24,13 @@ describe('PointToolTipContent', () => {
     {
       _propertyKey: 'host.name',
       _rawValue: 'testPropValue',
-      getESFilters: () => new Promise(resolve => setTimeout(resolve)),
+    },
+  ];
+
+  const mockFeaturePropsArrayValue: FeatureProperty[] = [
+    {
+      _propertyKey: 'host.name',
+      _rawValue: ['testPropValue1', 'testPropValue2'],
     },
   ];
 
@@ -43,6 +49,32 @@ describe('PointToolTipContent', () => {
     expect(toJson(wrapper)).toMatchSnapshot();
   });
 
+  test('renders array filter correctly', () => {
+    const closeTooltip = jest.fn();
+
+    const wrapper = mount(
+      <TestProviders>
+        <PointToolTipContent
+          contextId={'contextId'}
+          featureProps={mockFeaturePropsArrayValue}
+          closeTooltip={closeTooltip}
+        />
+      </TestProviders>
+    );
+    expect(wrapper.find('[data-test-subj="add-to-kql-host.name"]').prop('filter')).toEqual({
+      meta: {
+        alias: null,
+        disabled: false,
+        key: 'host.name',
+        negate: false,
+        params: { query: 'testPropValue1' },
+        type: 'phrase',
+        value: 'testPropValue1',
+      },
+      query: { match: { 'host.name': { query: 'testPropValue1', type: 'phrase' } } },
+    });
+  });
+
   describe('#getRenderedFieldValue', () => {
     test('it returns empty tag if value is empty', () => {
       expect(getRenderedFieldValue('host.name', '')).toStrictEqual(getEmptyStringTag());

x-pack/legacy/plugins/siem/public/components/embeddables/map_tool_tip/point_tool_tip_content.tsx

@@ -29,7 +29,7 @@ export const PointToolTipContent = React.memo<PointToolTipContentProps>(
         title: sourceDestinationFieldMappings[key],
         description: (
           <AddFilterToGlobalSearchBar
-            filter={createFilter(key, value)}
+            filter={createFilter(key, Array.isArray(value) ? value[0] : value)}
             onFilterAdded={closeTooltip}
             data-test-subj={`add-to-kql-${key}`}
           >

x-pack/legacy/plugins/siem/public/components/embeddables/types.ts

@@ -51,8 +51,7 @@ export interface LoadFeatureProps {
 
 export interface FeatureProperty {
   _propertyKey: string;
-  _rawValue: string;
-  getESFilters(): Promise<object>;
+  _rawValue: string | string[];
 }
 
 export interface FeatureGeometry {