From c5d8fc88ebff56606343c9522fbc967902a24c90 Mon Sep 17 00:00:00 2001
From: Andrew Goldstein <andrew.goldstein@elastic.co>
Date: Thu, 7 May 2020 16:06:23 -0600
Subject: [PATCH] ## Summary

Fixes [a CSS issue where Timeline field truncation](https://github.com/elastic/kibana/issues/65170) wasn't working, per the following screenshots:

### Before

<img width="1083" alt="before" src="https://user-images.githubusercontent.com/4459398/81349357-16706d80-907d-11ea-8051-7f2db803d701.png">

### After

<img width="1078" alt="after" src="https://user-images.githubusercontent.com/4459398/81349372-1b352180-907d-11ea-8ac7-8bde3f10394f.png">

## Desk testing

* The timeline in the _Before_ and _After_ screenshots above includes columns that typically contain large values (e.g. `process.hash.sha256`). It also contains the `event.module` column, which has special formatting, as detailed below.

* You may re-create the timeline shown in the _Before_ and _After_ screenshots, or download the exported timeline from the following link [truncation.ndjson.txt](https://github.com/elastic/kibana/files/4596036/truncation.ndjson.txt) and import it. (Remove the `.txt` extension after downloading it.)

* The `event.module` field has special formatting that displays an icon link to the endpoint if it's been configured. To desk test this without configuring an endpoint, edit `x-pack/plugins/siem/public/components/timeline/body/renderers/formatted_field_helpers.tsx`, and change the following line:

```
{endpointRefUrl != null && canYouAddEndpointLogo(moduleName, endpointRefUrl) && (
```

to

```
{true && (
```

The above change forces the icon to always appear, even if you don't have an endpoint configured.

### Desk tested in:

- Chrome `81.0.4044.138`
- Firefox `76.0`
- Safari `13.1`
---
 .../body/renderers/formatted_field_helpers.tsx      |  9 +++++++--
 .../public/components/with_hover_actions/index.tsx  | 13 +++++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/formatted_field_helpers.tsx b/x-pack/plugins/siem/public/components/timeline/body/renderers/formatted_field_helpers.tsx
index b48cc546fe78c..7c9accd4cef49 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/formatted_field_helpers.tsx
+++ b/x-pack/plugins/siem/public/components/timeline/body/renderers/formatted_field_helpers.tsx
@@ -7,6 +7,7 @@
 import { EuiLink, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiToolTip } from '@elastic/eui';
 import { isString, isEmpty } from 'lodash/fp';
 import React from 'react';
+import styled from 'styled-components';
 
 import { DefaultDraggable } from '../../../draggables';
 import { getEmptyTagValue } from '../../../empty_value';
@@ -18,6 +19,10 @@ import endPointSvg from '../../../../utils/logo_endpoint/64_color.svg';
 
 import * as i18n from './translations';
 
+const EventModuleFlexItem = styled(EuiFlexItem)`
+  width: 100%;
+`;
+
 export const renderRuleName = ({
   contextId,
   eventId,
@@ -87,7 +92,7 @@ export const renderEventModule = ({
         endpointRefUrl != null && !isEmpty(endpointRefUrl) ? 'flexStart' : 'spaceBetween'
       }
     >
-      <EuiFlexItem>
+      <EventModuleFlexItem>
         <DefaultDraggable
           field={fieldName}
           id={`event-details-value-default-draggable-${contextId}-${eventId}-${fieldName}-${value}-${moduleName}`}
@@ -96,7 +101,7 @@ export const renderEventModule = ({
         >
           {content}
         </DefaultDraggable>
-      </EuiFlexItem>
+      </EventModuleFlexItem>
       {endpointRefUrl != null && canYouAddEndpointLogo(moduleName, endpointRefUrl) && (
         <EuiFlexItem grow={false}>
           <EuiToolTip
diff --git a/x-pack/plugins/siem/public/components/with_hover_actions/index.tsx b/x-pack/plugins/siem/public/components/with_hover_actions/index.tsx
index 86a9acc486b6d..8679dae448332 100644
--- a/x-pack/plugins/siem/public/components/with_hover_actions/index.tsx
+++ b/x-pack/plugins/siem/public/components/with_hover_actions/index.tsx
@@ -6,8 +6,17 @@
 
 import { EuiPopover } from '@elastic/eui';
 import React, { useCallback, useMemo, useState } from 'react';
+import styled from 'styled-components';
+
 import { IS_DRAGGING_CLASS_NAME } from '../drag_and_drop/helpers';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const WithHoverActionsPopover = (styled(EuiPopover as any)`
+  .euiPopover__anchor {
+    width: 100%;
+  }
+` as unknown) as typeof EuiPopover;
+
 interface Props {
   /**
    * Always show the hover menu contents (default: false)
@@ -59,7 +68,7 @@ export const WithHoverActions = React.memo<Props>(
 
     const popover = useMemo(() => {
       return (
-        <EuiPopover
+        <WithHoverActionsPopover
           anchorPosition={'downCenter'}
           button={content}
           closePopover={onMouseLeave}
@@ -68,7 +77,7 @@ export const WithHoverActions = React.memo<Props>(
           panelPaddingSize={!alwaysShow ? 's' : 'none'}
         >
           {isOpen ? hoverContent : null}
-        </EuiPopover>
+        </WithHoverActionsPopover>
       );
     }, [content, onMouseLeave, isOpen, alwaysShow, hoverContent]);