[Security Solution][Expandable flyout] add ability for user to resize…

… the flyout and the left/right section even if preview is rendered (#211938) ## Summary This PR makes a couple of small changes to the expandable flyout package: - get rid of an unwanted white space when preview are shown - allow the user to resize the flyout and the internal left/right sections when a preview is rendered #### White space removal | Before | After | | ------------- | ------------- | | ![Screenshot 2025-02-20 at 11 17 30 AM](https://github.com/user-attachments/assets/7c7cb817-3fd9-4cac-9f63-5b168c1df832) | ![Screenshot 2025-02-20 at 11 15 20 AM](https://github.com/user-attachments/assets/6490dda1-e440-41f3-be63-71fd524e736b) | #### Allow resize even when previews are shown https://github.com/user-attachments/assets/034f59c2-6c4a-4efa-a817-8c23dbc11b60 ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios
elastic · Feb 20, 2025 · a4c7c8b · a4c7c8b
1 parent 89e2cc5
commit a4c7c8b
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 42 deletions.
diff --git a/x-pack/solutions/security/packages/expandable-flyout/src/components/container.tsx b/x-pack/solutions/security/packages/expandable-flyout/src/components/container.tsx
@@ -218,7 +218,6 @@ export const Container: React.FC<ContainerProps> = memo(
           leftComponent={leftComponent as React.ReactElement}
           rightComponent={rightComponent as React.ReactElement}
           showLeft={showExpanded}
-          showPreview={showPreview}
         />
 
         {showPreview && (

diff --git a/x-pack/solutions/security/packages/expandable-flyout/src/components/preview_section.tsx b/x-pack/solutions/security/packages/expandable-flyout/src/components/preview_section.tsx
@@ -12,8 +12,8 @@ import {
   EuiFlexItem,
   EuiSplitPanel,
   EuiText,
-  useEuiTheme,
   transparentize,
+  useEuiTheme,
 } from '@elastic/eui';
 import React, { memo, useMemo } from 'react';
 import { css } from '@emotion/react';
@@ -100,7 +100,8 @@ export const PreviewSection: React.FC<PreviewSectionProps> = memo(
       const percentage = rightPercentage
         ? rightPercentage
         : defaultPercentages[type].rightPercentage;
-      return showExpanded ? `calc(${percentage}% - 8px)` : `calc(100% - 8px)`;
+      // we need to keep 1px here to make sure users can click on the EuiResizableButton and resize the flyout with preview opened
+      return showExpanded ? `calc(${percentage}% - 1px)` : `calc(100% - 1px)`;
     }, [defaultPercentages, rightPercentage, showExpanded, type]);
 
     const closeButton = (

diff --git a/...solutions/security/packages/expandable-flyout/src/components/resizable_container.test.tsx b/...solutions/security/packages/expandable-flyout/src/components/resizable_container.test.tsx
@@ -38,7 +38,6 @@ describe('ResizableContainer', () => {
           leftComponent={leftComponent}
           rightComponent={rightComponent}
           showLeft={false}
-          showPreview={false}
         />
       </TestProvider>
     );
@@ -74,7 +73,6 @@ describe('ResizableContainer', () => {
           leftComponent={leftComponent}
           rightComponent={rightComponent}
           showLeft={true}
-          showPreview={false}
         />
       </TestProvider>
     );
@@ -91,32 +89,4 @@ describe('ResizableContainer', () => {
     expect(leftSection).toBeInTheDocument();
     expect(leftSection.parentElement).toHaveStyle('inline-size: 50%; block-size: auto;');
   });
-
-  it('should disable the resize button if preview is rendered', () => {
-    const state = {
-      ...initialState,
-      ui: {
-        ...initialState.ui,
-        userSectionWidths: {
-          leftPercentage: 50,
-          rightPercentage: 50,
-        },
-      },
-    };
-
-    const { getByTestId } = render(
-      <TestProvider state={state}>
-        <ResizableContainer
-          leftComponent={leftComponent}
-          rightComponent={rightComponent}
-          showLeft={true}
-          showPreview={true}
-        />
-      </TestProvider>
-    );
-
-    const resizeButton = getByTestId(RESIZABLE_BUTTON_TEST_ID);
-    expect(resizeButton).toBeInTheDocument();
-    expect(resizeButton).toBeDisabled();
-  });
 });
diff --git a/x-pack/solutions/security/packages/expandable-flyout/src/components/resizable_container.tsx b/x-pack/solutions/security/packages/expandable-flyout/src/components/resizable_container.tsx
@@ -41,18 +41,14 @@ interface ResizableContainerProps {
    * If the left section is not shown we disable the resize button and hide the left size of the resizable panel
    */
   showLeft: boolean;
-  /**
-   * If the preview section is shown we disable the resize button
-   */
-  showPreview: boolean;
 }
 
 /**
  * Component that renders the left and right section when the flyout is in expanded mode.
  * It allows the resizing of the sections, saving the percentages in local storage.
  */
 export const ResizableContainer: React.FC<ResizableContainerProps> = memo(
-  ({ leftComponent, rightComponent, showLeft, showPreview }: ResizableContainerProps) => {
+  ({ leftComponent, rightComponent, showLeft }: ResizableContainerProps) => {
     const dispatch = useDispatch();
 
     const { leftPercentage, rightPercentage } = useSelector(selectUserSectionWidths);
@@ -97,10 +93,7 @@ export const ResizableContainer: React.FC<ResizableContainerProps> = memo(
             >
               <LeftSection component={leftComponent} />
             </EuiResizablePanel>
-            <EuiResizableButton
-              disabled={showPreview || !showLeft}
-              data-test-subj={RESIZABLE_BUTTON_TEST_ID}
-            />
+            <EuiResizableButton disabled={!showLeft} data-test-subj={RESIZABLE_BUTTON_TEST_ID} />
             <EuiResizablePanel
               id={RIGHT_PANEL_ID}
               initialSize={initialRightPercentage}