option elastic#3

PhilippeOberti · Nov 2, 2023 · 71e1260 · 71e1260
1 parent 50d9a59
commit 71e1260
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 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
@@ -28,28 +28,27 @@ 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>
     );
 
     expect(getByTestId(PREVIEW_SECTION_CLOSE_BUTTON_TEST_ID)).toBeInTheDocument();
   });
 
   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
@@ -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/...lugins/security_solution/public/flyout/document_details/right/components/header_title.tsx b/...lugins/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 && (