From 71e126061770366bb0890fffdc5a96f408ab9a4c Mon Sep 17 00:00:00 2001
From: PhilippeOberti <philippe.oberti@elastic.co>
Date: Mon, 30 Oct 2023 12:06:07 -0500
Subject: [PATCH] option #3

---
 .../src/components/preview_section.test.tsx   | 11 ++-
 packages/kbn-expandable-flyout/src/index.tsx  | 69 +++++++++++++------
 .../right/components/header_title.tsx         |  2 +-
 3 files changed, 54 insertions(+), 28 deletions(-)

diff --git a/packages/kbn-expandable-flyout/src/components/preview_section.test.tsx b/packages/kbn-expandable-flyout/src/components/preview_section.test.tsx
index f365c8f299623b9..2019ebc055d10c7 100644
--- a/packages/kbn-expandable-flyout/src/components/preview_section.test.tsx
+++ b/packages/kbn-expandable-flyout/src/components/preview_section.test.tsx
@@ -28,14 +28,15 @@ describe('PreviewSection', () => {
     },
   } as unknown as ExpandableFlyoutContext;
 
+  const component = <div>{'component'}</div>;
+  const left = 500;
+
   it('should render close button in header', () => {
-    const component = <div>{'component'}</div>;
-    const width = 500;
     const showBackButton = false;
 
     const { getByTestId } = render(
       <ExpandableFlyoutContext.Provider value={context}>
-        <PreviewSection component={component} width={width} showBackButton={showBackButton} />
+        <PreviewSection component={component} left={left} showBackButton={showBackButton} />
       </ExpandableFlyoutContext.Provider>
     );
 
@@ -43,13 +44,11 @@ describe('PreviewSection', () => {
   });
 
   it('should render back button in header', () => {
-    const component = <div>{'component'}</div>;
-    const width = 500;
     const showBackButton = true;
 
     const { getByTestId } = render(
       <ExpandableFlyoutContext.Provider value={context}>
-        <PreviewSection component={component} width={width} showBackButton={showBackButton} />
+        <PreviewSection component={component} left={left} showBackButton={showBackButton} />
       </ExpandableFlyoutContext.Provider>
     );
 
diff --git a/packages/kbn-expandable-flyout/src/index.tsx b/packages/kbn-expandable-flyout/src/index.tsx
index db39e755335ab13..604940b1973ed83 100644
--- a/packages/kbn-expandable-flyout/src/index.tsx
+++ b/packages/kbn-expandable-flyout/src/index.tsx
@@ -7,7 +7,8 @@
  */
 
 import React, { useCallback, useLayoutEffect, useMemo, useState } from 'react';
-import { EuiFlyoutProps } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { EuiButtonIcon, EuiFlyoutProps } from '@elastic/eui';
 import { EuiFlexGroup, EuiFlyout, useCurrentEuiBreakpoint } from '@elastic/eui';
 import { useExpandableFlyoutContext } from './context';
 import { PreviewSection } from './components/preview_section';
@@ -17,7 +18,7 @@ import { LeftSection } from './components/left_section';
 import { isPreviewBanner } from './components/preview_section';
 
 const MIN_RIGHT_WIDTH = 420;
-const MAX_RIGHT_WIDTH = 650;
+const MAX_RIGHT_WIDTH = 750;
 const L_BREAKPOINT = 992;
 const XXL_BREAKPOINT = 1920;
 
@@ -64,6 +65,8 @@ export const ExpandableFlyout: React.FC<ExpandableFlyoutProps> = ({
   const { panels, closeFlyout } = useExpandableFlyoutContext();
   const { left, right, preview } = panels;
 
+  const [rightSectionCollapsed, setRightSectionCollapsed] = useState(false);
+
   const onClose = useCallback(() => {
     if (handleOnFlyoutClosed) handleOnFlyoutClosed();
     closeFlyout();
@@ -93,34 +96,37 @@ export const ExpandableFlyout: React.FC<ExpandableFlyoutProps> = ({
 
   const currentBreakpoint = useCurrentEuiBreakpoint();
 
-  const hideFlyout = !left && !right && !preview.length;
-  if (hideFlyout) {
-    return null;
-  }
+  const rightSectionWidth: number = useMemo(() => {
+    let width =
+      windowWidth < L_BREAKPOINT
+        ? MIN_RIGHT_WIDTH
+        : MIN_RIGHT_WIDTH +
+          (MAX_RIGHT_WIDTH - MIN_RIGHT_WIDTH) *
+            ((windowWidth - L_BREAKPOINT) / (XXL_BREAKPOINT - L_BREAKPOINT));
+
+    if (width > MAX_RIGHT_WIDTH) width = MAX_RIGHT_WIDTH;
 
-  let rightSectionWidth: number =
-    windowWidth < L_BREAKPOINT
-      ? MIN_RIGHT_WIDTH
-      : MIN_RIGHT_WIDTH +
-        (MAX_RIGHT_WIDTH - MIN_RIGHT_WIDTH) *
-          ((windowWidth - L_BREAKPOINT) / (XXL_BREAKPOINT - L_BREAKPOINT));
-  if (rightSectionWidth > MAX_RIGHT_WIDTH) rightSectionWidth = MAX_RIGHT_WIDTH;
+    return width;
+  }, [windowWidth]);
 
-  const leftSectionWidth: number =
-    windowWidth <= XXL_BREAKPOINT
+  const leftSectionWidth: number = useMemo(() => {
+    return windowWidth <= XXL_BREAKPOINT
       ? windowWidth - rightSectionWidth
       : ((windowWidth - rightSectionWidth) * 80) / 100;
+  }, [rightSectionWidth, windowWidth]);
 
   const flyoutWidth: string =
     leftSection && rightSection
       ? `${rightSectionWidth + leftSectionWidth}px`
       : `${rightSectionWidth}px`;
 
-  const previewSectionLeft: number = leftSection
-    ? windowWidth <= XXL_BREAKPOINT
-      ? windowWidth - rightSectionWidth
-      : ((windowWidth - rightSectionWidth) * 80) / 100
-    : 0;
+  const previewSectionLeft: number = useMemo(() => {
+    return leftSection
+      ? windowWidth <= XXL_BREAKPOINT
+        ? windowWidth - rightSectionWidth
+        : ((windowWidth - rightSectionWidth) * 80) / 100
+      : 0;
+  }, [leftSection, rightSectionWidth, windowWidth]);
 
   const showRight = rightSection && right;
   // the left section is hidden for small screens
@@ -132,8 +138,29 @@ export const ExpandableFlyout: React.FC<ExpandableFlyoutProps> = ({
     currentBreakpoint !== 'm';
   const showPreview = previewSection && preview;
 
+  const hideFlyout = !left && !right && !preview.length;
+  if (hideFlyout) {
+    return null;
+  }
+
   return (
     <EuiFlyout {...flyoutProps} size={flyoutWidth} ownFocus={false} onClose={onClose}>
+      {leftSection && (
+        <div
+          css={css`
+            position: absolute;
+            right: 38px;
+            top: 8px;
+          `}
+        >
+          {rightSectionCollapsed && (
+            <EuiButtonIcon iconType="menuLeft" onClick={() => setRightSectionCollapsed(false)} />
+          )}
+          {!rightSectionCollapsed && (
+            <EuiButtonIcon iconType="menuRight" onClick={() => setRightSectionCollapsed(true)} />
+          )}
+        </div>
+      )}
       <EuiFlexGroup
         direction={leftSection ? 'row' : 'column'}
         wrap={false}
@@ -146,7 +173,7 @@ export const ExpandableFlyout: React.FC<ExpandableFlyoutProps> = ({
             width={leftSectionWidth}
           />
         ) : null}
-        {showRight ? (
+        {showRight && !rightSectionCollapsed ? (
           <RightSection
             component={rightSection.component({ ...(right as FlyoutPanelProps) })}
             width={rightSectionWidth}
diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/header_title.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/header_title.tsx
index 9f8373c2b3991c0..d277c92ec7345e3 100644
--- a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/header_title.tsx
+++ b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/header_title.tsx
@@ -66,7 +66,7 @@ export const HeaderTitle: VFC<HeaderTitleProps> = memo(({ flyoutIsExpandable })
           gutterSize="none"
           css={css`
             margin-top: ${flyoutIsExpandable ? '-44px' : '-28px'};
-            padding: 0 25px;
+            padding: 0 40px 0 25px;
           `}
         >
           {showAssistant && (