Preserve whitespace on display of rule queries

This is useful for all rules, but particularly for EQL rules, where sequences will be multiline.
elastic · Oct 13, 2020 · 14bf12c · 14bf12c
1 parent 0587cf0
commit 14bf12c
Showing 1 changed file with 6 additions and 2 deletions.
diff --git a/...plugins/security_solution/public/detections/components/rules/description_step/helpers.tsx b/...plugins/security_solution/public/detections/components/rules/description_step/helpers.tsx
@@ -51,6 +51,10 @@ const EuiBadgeWrap = (styled(EuiBadge)`
   }
 ` as unknown) as typeof EuiBadge;
 
+const Query = styled.div`
+  white-space: pre-wrap;
+`;
+
 export const buildQueryBarDescription = ({
   field,
   filters,
@@ -92,8 +96,8 @@ export const buildQueryBarDescription = ({
     items = [
       ...items,
       {
-        title: <>{queryLabel ?? i18n.QUERY_LABEL} </>,
-        description: <>{query} </>,
+        title: <>{queryLabel ?? i18n.QUERY_LABEL}</>,
+        description: <Query>{query}</Query>,
       },
     ];
   }