[8.10] [Security Solution]Expandable flyout - Alert reason formatting…

… fix (#164861) (#164888)

# Backport

This will backport the following commits from `main` to `8.10`:
- [[Security Solution]Expandable flyout - Alert reason formatting fix
(#164861)](#164861)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Jatin
Kathuria","email":"[email protected]"},"sourceCommit":{"committedDate":"2023-08-25T18:25:20Z","message":"[Security
Solution]Expandable flyout - Alert reason formatting fix (#164861)\n\n##
Summary\r\n\r\nThis PR handles
https://github.com/elastic/kibana/issues/164408\r\n\r\nThere are some
cases in which Alert Renderer cannot be wrapped beyond a\r\nminimum
width. To handle those cases, this PR handles
overflow\r\nscrolling.\r\n\r\nBelow before/after video shows the
differences.\r\n\r\n| Before | After |\r\n|--|--|\r\n|
<video\r\nsrc=\"https://github.com/elastic/kibana/assets/7485038/6c95a74d-db85-41db-a2c6-4fc64998e82d\"\r\n/>
|
<video\r\nsrc=\"https://github.com/elastic/kibana/assets/7485038/1b7944c8-66a7-4cd9-a579-06a2e0e05ebf\"\r\n/>
|\r\n\r\n\r\n### Checklist\r\n\r\nDelete any items that are not
applicable to this PR.\r\n\r\n- [x] This renders correctly on smaller
devices using a responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n\r\n\r\n###
For maintainers\r\n\r\n- [ ] This was checked for breaking API changes
and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"2417b7975139d12c275f4e5305b524983beeca17","branchLabelMapping":{"^v8.11.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:Threat
Hunting:Investigations","Feature:Expandable
Flyout","v8.10.0","v8.11.0"],"number":164861,"url":"https://github.com/elastic/kibana/pull/164861","mergeCommit":{"message":"[Security
Solution]Expandable flyout - Alert reason formatting fix (#164861)\n\n##
Summary\r\n\r\nThis PR handles
https://github.com/elastic/kibana/issues/164408\r\n\r\nThere are some
cases in which Alert Renderer cannot be wrapped beyond a\r\nminimum
width. To handle those cases, this PR handles
overflow\r\nscrolling.\r\n\r\nBelow before/after video shows the
differences.\r\n\r\n| Before | After |\r\n|--|--|\r\n|
<video\r\nsrc=\"https://github.com/elastic/kibana/assets/7485038/6c95a74d-db85-41db-a2c6-4fc64998e82d\"\r\n/>
|
<video\r\nsrc=\"https://github.com/elastic/kibana/assets/7485038/1b7944c8-66a7-4cd9-a579-06a2e0e05ebf\"\r\n/>
|\r\n\r\n\r\n### Checklist\r\n\r\nDelete any items that are not
applicable to this PR.\r\n\r\n- [x] This renders correctly on smaller
devices using a responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n\r\n\r\n###
For maintainers\r\n\r\n- [ ] This was checked for breaking API changes
and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"2417b7975139d12c275f4e5305b524983beeca17"}},"sourceBranch":"main","suggestedTargetBranches":["8.10"],"targetPullRequestStates":[{"branch":"8.10","label":"v8.10.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.11.0","labelRegex":"^v8.11.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/164861","number":164861,"mergeCommit":{"message":"[Security
Solution]Expandable flyout - Alert reason formatting fix (#164861)\n\n##
Summary\r\n\r\nThis PR handles
https://github.com/elastic/kibana/issues/164408\r\n\r\nThere are some
cases in which Alert Renderer cannot be wrapped beyond a\r\nminimum
width. To handle those cases, this PR handles
overflow\r\nscrolling.\r\n\r\nBelow before/after video shows the
differences.\r\n\r\n| Before | After |\r\n|--|--|\r\n|
<video\r\nsrc=\"https://github.com/elastic/kibana/assets/7485038/6c95a74d-db85-41db-a2c6-4fc64998e82d\"\r\n/>
|
<video\r\nsrc=\"https://github.com/elastic/kibana/assets/7485038/1b7944c8-66a7-4cd9-a579-06a2e0e05ebf\"\r\n/>
|\r\n\r\n\r\n### Checklist\r\n\r\nDelete any items that are not
applicable to this PR.\r\n\r\n- [x] This renders correctly on smaller
devices using a responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n\r\n\r\n###
For maintainers\r\n\r\n- [ ] This was checked for breaking API changes
and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"2417b7975139d12c275f4e5305b524983beeca17"}}]}]
BACKPORT-->

Co-authored-by: Jatin Kathuria <[email protected]>

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>
   );
 };