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

…alert details (#121292) (#122536) (cherry picked from commit 33c367b)
elastic · Jan 10, 2022 · aa9ea2b · aa9ea2b
1 parent e8e2031
commit aa9ea2b
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
@@ -32,11 +32,26 @@ export interface ThreatSummaryDescription {
 }
 
 const EnrichmentFieldProvider = 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,
@@ -50,9 +65,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}-${provider}`;
   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}
@@ -62,9 +77,11 @@ const EnrichmentDescription: React.FC<ThreatSummaryDescription> = ({
             isDraggable={isDraggable}
             isObjectArray={data.isObjectArray}
             value={value}
+            truncate={false}
           />
           {provider && (
             <EnrichmentFieldProvider>
+              {' '}
               {i18n.PROVIDER_PREPOSITION} {provider}
             </EnrichmentFieldProvider>
           )}
@@ -82,7 +99,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
@@ -80,7 +80,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>
 );