From 57d517aa190329791b028dad9d8ce67b17dbc840 Mon Sep 17 00:00:00 2001
From: Pablo Machado <pablo.nevesmachado@elastic.co>
Date: Tue, 21 Dec 2021 09:55:49 +0100
Subject: [PATCH] Fix Data does not wrap on resolution change for indicator
 rule under alert details (#121292)

(cherry picked from commit 33c367bfbe3a5c00254220c9e39b4c1f832691cc)
---
 .../cti_details/enrichment_summary.tsx        | 25 ++++++++++++++++---
 .../cti_details/threat_summary_view.tsx       |  2 +-
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/enrichment_summary.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/enrichment_summary.tsx
index 0a16b9a612d43..85b8f34fb0cc2 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/enrichment_summary.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/enrichment_summary.tsx
@@ -36,11 +36,26 @@ export interface ThreatSummaryDescription {
 }
 
 const EnrichmentFieldFeedName = styled.span`
-  margin-left: ${({ theme }) => theme.eui.paddingSizes.xs};
   white-space: nowrap;
   font-style: italic;
 `;
 
+export const StyledEuiFlexGroup = styled(EuiFlexGroup)`
+  .hoverActions-active {
+    .timelines__hoverActionButton,
+    .securitySolution__hoverActionButton {
+      opacity: 1;
+    }
+  }
+
+  &:hover {
+    .timelines__hoverActionButton,
+    .securitySolution__hoverActionButton {
+      opacity: 1;
+    }
+  }
+`;
+
 const EnrichmentDescription: React.FC<ThreatSummaryDescription> = ({
   browserField,
   data,
@@ -54,9 +69,9 @@ const EnrichmentDescription: React.FC<ThreatSummaryDescription> = ({
   if (!data || !value) return null;
   const key = `alert-details-value-formatted-field-value-${timelineId}-${eventId}-${data.field}-${value}-${index}-${feedName}`;
   return (
-    <EuiFlexGroup key={key} direction="row" gutterSize="none" alignItems="center">
+    <StyledEuiFlexGroup key={key} direction="row" gutterSize="xs" alignItems="center">
       <EuiFlexItem grow={false}>
-        <div className="eui-textBreakAll">
+        <div>
           <FormattedFieldValue
             contextId={timelineId}
             eventId={key}
@@ -66,9 +81,11 @@ const EnrichmentDescription: React.FC<ThreatSummaryDescription> = ({
             isDraggable={isDraggable}
             isObjectArray={data.isObjectArray}
             value={value}
+            truncate={false}
           />
           {feedName && (
             <EnrichmentFieldFeedName>
+              {' '}
               {i18n.FEED_NAME_PREPOSITION} {feedName}
             </EnrichmentFieldFeedName>
           )}
@@ -86,7 +103,7 @@ const EnrichmentDescription: React.FC<ThreatSummaryDescription> = ({
           />
         )}
       </EuiFlexItem>
-    </EuiFlexGroup>
+    </StyledEuiFlexGroup>
   );
 };
 
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_summary_view.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_summary_view.tsx
index c4d7902e151b4..abb9bd719c66e 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_summary_view.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_summary_view.tsx
@@ -84,7 +84,7 @@ export const EnrichedDataRow: React.FC<{ field: string | undefined; value: React
     <EuiFlexItem style={{ flexShrink: 0 }} grow={false}>
       <EnrichmentFieldTitle title={field} />
     </EuiFlexItem>
-    <EuiFlexItem>{value}</EuiFlexItem>
+    <EuiFlexItem className="eui-textBreakWord">{value}</EuiFlexItem>
   </StyledEuiFlexGroup>
 );