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

… resize the flyout and the left/right section even if preview is rendered (#211938) (#211967) # Backport This will backport the following commits from `main` to `8.18`: - [[Security Solution][Expandable flyout] add ability for user to resize the flyout and the left/right section even if preview is rendered (#211938)](#211938)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)
elastic · Feb 20, 2025 · 197a599 · 197a599
1 parent 3b20c72
commit 197a599
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 41 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
@@ -215,7 +215,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
@@ -92,7 +92,8 @@ export const PreviewSection: React.FC<PreviewSectionProps> = memo(
     // - if both the right and left sections are visible, we use the width of the right section (minus the same padding)
     const width = useMemo(() => {
       const percentage = rightPercentage ? rightPercentage : defaultPercentages.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, rightPercentage, showExpanded]);
 
     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
@@ -40,18 +40,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);
@@ -95,10 +91,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}