From 2417b7975139d12c275f4e5305b524983beeca17 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Fri, 25 Aug 2023 11:25:20 -0700
Subject: [PATCH] [Security Solution]Expandable flyout - Alert reason
 formatting fix (#164861)

## Summary

This PR handles https://github.com/elastic/kibana/issues/164408

There are some cases in which Alert Renderer cannot be wrapped beyond a
minimum width. To handle those cases, this PR handles overflow
scrolling.

Below before/after video shows the differences.

| Before | After |
|--|--|
| <video
src="https://github.com/elastic/kibana/assets/7485038/6c95a74d-db85-41db-a2c6-4fc64998e82d"
/> | <video
src="https://github.com/elastic/kibana/assets/7485038/1b7944c8-66a7-4cd9-a579-06a2e0e05ebf"
/> |


### Checklist

Delete any items that are not applicable to this PR.

- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)



### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
---
 .../components/alert_reason_preview.tsx       | 33 +++++++++++++++----
 1 file changed, 27 insertions(+), 6 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/flyout/preview/components/alert_reason_preview.tsx b/x-pack/plugins/security_solution/public/flyout/preview/components/alert_reason_preview.tsx
index 4fd912cbfbeec..d8791beb7bfd2 100644
--- a/x-pack/plugins/security_solution/public/flyout/preview/components/alert_reason_preview.tsx
+++ b/x-pack/plugins/security_solution/public/flyout/preview/components/alert_reason_preview.tsx
@@ -7,12 +7,21 @@
 
 import React, { useMemo } from 'react';
 import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
+import styled from '@emotion/styled';
+import { euiThemeVars } from '@kbn/ui-theme';
 import { ALERT_REASON_TITLE } from './translations';
 import { ALERT_REASON_PREVIEW_BODY_TEST_ID } from './test_ids';
 import { usePreviewPanelContext } from '../context';
 import { getRowRenderer } from '../../../timelines/components/timeline/body/renderers/get_row_renderer';
 import { defaultRowRenderers } from '../../../timelines/components/timeline/body/renderers';
 
+const ReasonPreviewContainerWrapper = styled.div`
+  overflow-x: auto;
+  padding-block: ${euiThemeVars.euiSizeS};
+`;
+
+const ReasonPreviewContainer = styled.div``;
+
 /**
  * Alert reason renderer on a preview panel on top of the right section of expandable flyout
  */
@@ -27,6 +36,19 @@ export const AlertReasonPreview: React.FC = () => {
     [dataAsNestedObject]
   );
 
+  const rowRenderer = useMemo(
+    () =>
+      renderer && dataAsNestedObject
+        ? renderer.renderRow({
+            contextId: 'event-details',
+            data: dataAsNestedObject,
+            isDraggable: false,
+            scopeId: 'global',
+          })
+        : null,
+    [renderer, dataAsNestedObject]
+  );
+
   if (!dataAsNestedObject || !renderer) {
     return null;
   }
@@ -37,12 +59,11 @@ export const AlertReasonPreview: React.FC = () => {
         <h6>{ALERT_REASON_TITLE}</h6>
       </EuiTitle>
       <EuiSpacer size="m" />
-      {renderer.renderRow({
-        contextId: 'event-details',
-        data: dataAsNestedObject,
-        isDraggable: false,
-        scopeId: 'global',
-      })}
+      <ReasonPreviewContainerWrapper>
+        <ReasonPreviewContainer className={'eui-displayInlineBlock'}>
+          {rowRenderer}
+        </ReasonPreviewContainer>
+      </ReasonPreviewContainerWrapper>
     </EuiPanel>
   );
 };