[7.8] [SIEM] [Maps] Fixes Network Map empty tooltip (#66828) (#66956)

* [SIEM] [Maps] Fixes Network Map empty tooltip (#66828)

## Summary

Resolves #63474, and expands `ITooltipProperty`'s `rawValue` type to include `string[]` as mentioned [here](#61264 (comment)).

![image](https://user-images.githubusercontent.com/2946766/82100568-2c0e1480-96c7-11ea-958e-5b1c6b6a3db9.png)

### Checklist

Delete any items that are not applicable to this PR.

- [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

# Conflicts:
#	x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/map_tool_tip.tsx
#	x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/point_tool_tip_content.test.tsx
#	x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/point_tool_tip_content.tsx
#	x-pack/plugins/siem/public/network/components/embeddables/types.ts

* Updating imports...

* And another

x-pack/plugins/maps/public/index.ts

@@ -12,3 +12,4 @@ export const plugin: PluginInitializer<MapsPluginSetup, MapsPluginStart> = () =>
 };
 
 export { MAP_SAVED_OBJECT_TYPE } from '../common/constants';
+export { ITooltipProperty } from './layers/tooltips/tooltip_property';

x-pack/plugins/maps/public/layers/fields/es_agg_field.ts

@@ -87,7 +87,7 @@ export class ESAggField implements IESAggField {
     return this._esDocField ? this._esDocField.getName() : '';
   }
 
-  async createTooltipProperty(value: string | undefined): Promise<ITooltipProperty> {
+  async createTooltipProperty(value: string | string[] | undefined): Promise<ITooltipProperty> {
     const indexPattern = await this._source.getIndexPattern();
     const tooltipProperty = new TooltipProperty(this.getName(), await this.getLabel(), value);
     return new ESAggTooltipProperty(tooltipProperty, indexPattern, this, this.getAggType());

x-pack/plugins/maps/public/layers/fields/es_doc_field.ts

@@ -45,7 +45,7 @@ export class ESDocField extends AbstractField implements IField {
       : indexPatternField;
   }
 
-  async createTooltipProperty(value: string | undefined): Promise<ITooltipProperty> {
+  async createTooltipProperty(value: string | string[] | undefined): Promise<ITooltipProperty> {
     const indexPattern = await this._source.getIndexPattern();
     const tooltipProperty = new TooltipProperty(this.getName(), await this.getLabel(), value);
     return new ESTooltipProperty(tooltipProperty, indexPattern, this as IField);

x-pack/plugins/maps/public/layers/fields/field.ts

@@ -14,7 +14,7 @@ export interface IField {
   canValueBeFormatted(): boolean;
   getLabel(): Promise<string>;
   getDataType(): Promise<string>;
-  createTooltipProperty(value: string | undefined): Promise<ITooltipProperty>;
+  createTooltipProperty(value: string | string[] | undefined): Promise<ITooltipProperty>;
   getSource(): IVectorSource;
   getOrigin(): FIELD_ORIGIN;
   isValid(): boolean;
@@ -60,7 +60,7 @@ export class AbstractField implements IField {
     return this._fieldName;
   }
 
-  async createTooltipProperty(value: string | undefined): Promise<ITooltipProperty> {
+  async createTooltipProperty(value: string | string[] | undefined): Promise<ITooltipProperty> {
     const label = await this.getLabel();
     return new TooltipProperty(this.getName(), label, value);
   }

x-pack/plugins/maps/public/layers/fields/top_term_percentage_field.ts

@@ -48,7 +48,7 @@ export class TopTermPercentageField implements IESAggField {
     return 'number';
   }
 
-  async createTooltipProperty(value: string | undefined): Promise<ITooltipProperty> {
+  async createTooltipProperty(value: string | string[] | undefined): Promise<ITooltipProperty> {
     return new TooltipProperty(this.getName(), await this.getLabel(), value);
   }
 

x-pack/plugins/maps/public/layers/tooltips/es_tooltip_property.ts

@@ -33,7 +33,7 @@ export class ESTooltipProperty implements ITooltipProperty {
     return this._tooltipProperty.getPropertyName();
   }
 
-  getRawValue(): string | undefined {
+  getRawValue(): string | string[] | undefined {
     return this._tooltipProperty.getRawValue();
   }
 
@@ -48,7 +48,12 @@ export class ESTooltipProperty implements ITooltipProperty {
 
     const indexPatternField = this._getIndexPatternField();
     if (!indexPatternField || !this._field.canValueBeFormatted()) {
-      return _.escape(this.getRawValue());
+      const rawValue = this.getRawValue();
+      if (Array.isArray(rawValue)) {
+        return _.escape(rawValue.join());
+      } else {
+        return _.escape(rawValue);
+      }
     }
 
     const htmlConverter = indexPatternField.format.getConverterFor('html');

x-pack/plugins/maps/public/layers/tooltips/join_tooltip_property.ts

@@ -29,7 +29,7 @@ export class JoinTooltipProperty implements ITooltipProperty {
     return this._tooltipProperty.getPropertyName();
   }
 
-  getRawValue(): string | undefined {
+  getRawValue(): string | string[] | undefined {
     return this._tooltipProperty.getRawValue();
   }
 

x-pack/plugins/maps/public/layers/tooltips/tooltip_property.ts

@@ -12,7 +12,7 @@ export interface ITooltipProperty {
   getPropertyKey(): string;
   getPropertyName(): string;
   getHtmlDisplayValue(): string;
-  getRawValue(): string | undefined;
+  getRawValue(): string | string[] | undefined;
   isFilterable(): boolean;
   getESFilters(): Promise<Filter[]>;
 }
@@ -41,10 +41,10 @@ export type RenderToolTipContent = (params: RenderTooltipContentParams) => JSX.E
 
 export class TooltipProperty implements ITooltipProperty {
   private readonly _propertyKey: string;
-  private readonly _rawValue: string | undefined;
+  private readonly _rawValue: string | string[] | undefined;
   private readonly _propertyName: string;
 
-  constructor(propertyKey: string, propertyName: string, rawValue: string | undefined) {
+  constructor(propertyKey: string, propertyName: string, rawValue: string | string[] | undefined) {
     this._propertyKey = propertyKey;
     this._propertyName = propertyName;
     this._rawValue = rawValue;
@@ -59,10 +59,10 @@ export class TooltipProperty implements ITooltipProperty {
   }
 
   getHtmlDisplayValue(): string {
-    return _.escape(this._rawValue);
+    return _.escape(Array.isArray(this._rawValue) ? this._rawValue.join() : this._rawValue);
   }
 
-  getRawValue(): string | undefined {
+  getRawValue(): string | string[] | undefined {
     return this._rawValue;
   }
 

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

@@ -7,35 +7,24 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 import { LineToolTipContentComponent } from './line_tool_tip_content';
-import { FeatureProperty } from '../types';
 import {
   SUM_OF_CLIENT_BYTES,
   SUM_OF_DESTINATION_BYTES,
   SUM_OF_SERVER_BYTES,
   SUM_OF_SOURCE_BYTES,
 } from '../map_config';
+import { ITooltipProperty } from '../../../../../maps/public';
+import { TooltipProperty } from '../../../../../maps/public/layers/tooltips/tooltip_property';
 
 describe('LineToolTipContent', () => {
-  const mockFeatureProps: FeatureProperty[] = [
-    {
-      _propertyKey: SUM_OF_DESTINATION_BYTES,
-      _rawValue: 'testPropValue',
-    },
-    {
-      _propertyKey: SUM_OF_SOURCE_BYTES,
-      _rawValue: 'testPropValue',
-    },
+  const mockFeatureProps: ITooltipProperty[] = [
+    new TooltipProperty(SUM_OF_DESTINATION_BYTES, SUM_OF_DESTINATION_BYTES, 'testPropValue'),
+    new TooltipProperty(SUM_OF_SOURCE_BYTES, SUM_OF_SOURCE_BYTES, 'testPropValue'),
   ];
 
-  const mockClientServerFeatureProps: FeatureProperty[] = [
-    {
-      _propertyKey: SUM_OF_SERVER_BYTES,
-      _rawValue: 'testPropValue',
-    },
-    {
-      _propertyKey: SUM_OF_CLIENT_BYTES,
-      _rawValue: 'testPropValue',
-    },
+  const mockClientServerFeatureProps: ITooltipProperty[] = [
+    new TooltipProperty(SUM_OF_SERVER_BYTES, SUM_OF_SERVER_BYTES, 'testPropValue'),
+    new TooltipProperty(SUM_OF_CLIENT_BYTES, SUM_OF_CLIENT_BYTES, 'testPropValue'),
   ];
 
   test('renders correctly against snapshot', () => {

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

@@ -7,14 +7,15 @@
 import React from 'react';
 import { EuiBadge, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import styled from 'styled-components';
+import { ITooltipProperty } from '../../../../../maps/public';
 import { SourceDestinationArrows } from '../../source_destination/source_destination_arrows';
 import {
   SUM_OF_CLIENT_BYTES,
   SUM_OF_DESTINATION_BYTES,
   SUM_OF_SERVER_BYTES,
   SUM_OF_SOURCE_BYTES,
 } from '../map_config';
-import { FeatureProperty } from '../types';
+
 import * as i18n from '../translations';
 
 const FlowBadge = (styled(EuiBadge)`
@@ -28,20 +29,22 @@ const EuiFlexGroupStyled = styled(EuiFlexGroup)`
 
 interface LineToolTipContentProps {
   contextId: string;
-  featureProps: FeatureProperty[];
+  featureProps: ITooltipProperty[];
 }
 
 export const LineToolTipContentComponent = ({
   contextId,
   featureProps,
 }: LineToolTipContentProps) => {
-  const lineProps = featureProps.reduce<Record<string, string[]>>(
-    (acc, f) => ({
+  const lineProps = featureProps.reduce<Record<string, string[]>>((acc, f) => {
+    const rawValue = f.getRawValue() ?? [];
+    return {
       ...acc,
-      ...{ [f._propertyKey]: Array.isArray(f._rawValue) ? f._rawValue : [f._rawValue] },
-    }),
-    {}
-  );
+      ...{
+        [f.getPropertyKey()]: Array.isArray(rawValue) ? rawValue : [rawValue],
+      },
+    };
+  }, {});
 
   const isSrcDest = Object.keys(lineProps).includes(SUM_OF_SOURCE_BYTES);
 

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

@@ -11,12 +11,13 @@ import {
   EuiLoadingSpinner,
   EuiOutsideClickDetector,
 } from '@elastic/eui';
-import { FeatureGeometry, FeatureProperty, MapToolTipProps } from '../types';
+import { FeatureGeometry, MapToolTipProps } from '../types';
 import { ToolTipFooter } from './tooltip_footer';
 import { LineToolTipContent } from './line_tool_tip_content';
 import { PointToolTipContent } from './point_tool_tip_content';
 import { Loader } from '../../loader';
 import * as i18n from '../translations';
+import { ITooltipProperty } from '../../../../../maps/public';
 
 export const MapToolTipComponent = ({
   addFilters,
@@ -31,7 +32,7 @@ export const MapToolTipComponent = ({
   const [isLoadingNextFeature, setIsLoadingNextFeature] = useState<boolean>(false);
   const [isError, setIsError] = useState<boolean>(false);
   const [featureIndex, setFeatureIndex] = useState<number>(0);
-  const [featureProps, setFeatureProps] = useState<FeatureProperty[]>([]);
+  const [featureProps, setFeatureProps] = useState<ITooltipProperty[]>([]);
   const [featureGeometry, setFeatureGeometry] = useState<FeatureGeometry | null>(null);
   const [, setLayerName] = useState<string>('');
 
@@ -64,7 +65,7 @@ export const MapToolTipComponent = ({
             getLayerName(layerId),
           ]);
 
-          setFeatureProps((featureProperties as unknown) as FeatureProperty[]);
+          setFeatureProps(featureProperties);
           setFeatureGeometry(featureGeo);
           setLayerName(layerNameString);
         } catch (e) {

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

@@ -6,29 +6,19 @@
 
 import { shallow } from 'enzyme';
 import React from 'react';
-import { FeatureProperty } from '../types';
 import { getRenderedFieldValue, PointToolTipContentComponent } from './point_tool_tip_content';
 import { TestProviders } from '../../../mock';
 import { getEmptyStringTag } from '../../empty_value';
 import { HostDetailsLink, IPDetailsLink } from '../../links';
-import { useMountAppended } from '../../../utils/use_mount_appended';
 import { FlowTarget } from '../../../graphql/types';
+import {
+  ITooltipProperty,
+  TooltipProperty,
+} from '../../../../../maps/public/layers/tooltips/tooltip_property';
 
 describe('PointToolTipContent', () => {
-  const mount = useMountAppended();
-
-  const mockFeatureProps: FeatureProperty[] = [
-    {
-      _propertyKey: 'host.name',
-      _rawValue: 'testPropValue',
-    },
-  ];
-
-  const mockFeaturePropsArrayValue: FeatureProperty[] = [
-    {
-      _propertyKey: 'host.name',
-      _rawValue: ['testPropValue1', 'testPropValue2'],
-    },
+  const mockFeatureProps: ITooltipProperty[] = [
+    new TooltipProperty('host.name', 'host.name', 'testPropValue'),
   ];
 
   test('renders correctly against snapshot', () => {
@@ -46,32 +36,6 @@ describe('PointToolTipContent', () => {
     expect(wrapper.find('PointToolTipContentComponent')).toMatchSnapshot();
   });
 
-  test('renders array filter correctly', () => {
-    const closeTooltip = jest.fn();
-
-    const wrapper = mount(
-      <TestProviders>
-        <PointToolTipContentComponent
-          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/plugins/siem/public/components/embeddables/map_tool_tip/point_tool_tip_content.tsx

@@ -6,20 +6,16 @@
 
 import React from 'react';
 import { sourceDestinationFieldMappings } from '../map_config';
-import {
-  AddFilterToGlobalSearchBar,
-  createFilter,
-} from '../../page/add_filter_to_global_search_bar';
 import { getEmptyTagValue, getOrEmptyTagFromValue } from '../../empty_value';
 import { DescriptionListStyled } from '../../page';
-import { FeatureProperty } from '../types';
 import { HostDetailsLink, IPDetailsLink } from '../../links';
 import { DefaultFieldRenderer } from '../../field_renderers/field_renderers';
 import { FlowTarget } from '../../../graphql/types';
+import { ITooltipProperty } from '../../../../../maps/public';
 
 interface PointToolTipContentProps {
   contextId: string;
-  featureProps: FeatureProperty[];
+  featureProps: ITooltipProperty[];
   closeTooltip?(): void;
 }
 
@@ -28,15 +24,14 @@ export const PointToolTipContentComponent = ({
   featureProps,
   closeTooltip,
 }: PointToolTipContentProps) => {
-  const featureDescriptionListItems = featureProps.map(
-    ({ _propertyKey: key, _rawValue: value }) => ({
+  const featureDescriptionListItems = featureProps.map(featureProp => {
+    const key = featureProp.getPropertyKey();
+    const value = featureProp.getRawValue() ?? [];
+
+    return {
       title: sourceDestinationFieldMappings[key],
       description: (
-        <AddFilterToGlobalSearchBar
-          filter={createFilter(key, Array.isArray(value) ? value[0] : value)}
-          onFilterAdded={closeTooltip}
-          data-test-subj={`add-to-kql-${key}`}
-        >
+        <>
           {value != null ? (
             <DefaultFieldRenderer
               rowItems={Array.isArray(value) ? value : [value]}
@@ -47,10 +42,10 @@ export const PointToolTipContentComponent = ({
           ) : (
             getEmptyTagValue()
           )}
-        </AddFilterToGlobalSearchBar>
+        </>
       ),
-    })
-  );
+    };
+  });
 
   return <DescriptionListStyled listItems={featureDescriptionListItems} />;
 };

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

@@ -40,16 +40,6 @@ export interface MapFeature {
   layerId: string;
 }
 
-export interface LoadFeatureProps {
-  layerId: string;
-  featureId: number;
-}
-
-export interface FeatureProperty {
-  _propertyKey: string;
-  _rawValue: string | string[];
-}
-
 export interface FeatureGeometry {
   coordinates: [number];
   type: string;