Fix Data does not wrap on resolution change for indicator rule under …

…alert details (#121292) (#122543) (cherry picked from commit 33c367b)
elastic · Jan 10, 2022 · c50f073 · c50f073
1 parent 5fe264c
commit c50f073
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/...curity_solution/public/common/components/event_details/cti_details/enrichment_summary.tsx b/...curity_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/...urity_solution/public/common/components/event_details/cti_details/threat_summary_view.tsx b/...urity_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>
 );