[9.0] [Security Solution][Expandable flyout] fix flyout flickering wh…

…en opening/closing left panel (#210225) (#210287) # Backport This will backport the following commits from `main` to `9.0`: - [[Security Solution][Expandable flyout] fix flyout flickering when opening/closing left panel (#210225)](#210225)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)
elastic · Feb 8, 2025 · 49596e7 · 49596e7
1 parent 5bddc08
commit 49596e7
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 26 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
@@ -17,7 +17,6 @@ import {
   useDispatch,
   useSelector,
 } from '../store/redux';
-import { RightSection } from './right_section';
 import { useSections } from '../hooks/use_sections';
 import { useExpandableFlyoutState } from '../hooks/use_expandable_flyout_state';
 import { useExpandableFlyoutApi } from '../hooks/use_expandable_flyout_api';
@@ -212,15 +211,12 @@ export const Container: React.FC<ContainerProps> = memo(
         onResize={onResize}
         minWidth={minFlyoutWidth}
       >
-        {showCollapsed && <RightSection component={rightComponent as React.ReactElement} />}
-
-        {showExpanded && (
-          <ResizableContainer
-            leftComponent={leftComponent as React.ReactElement}
-            rightComponent={rightComponent as React.ReactElement}
-            showPreview={showPreview}
-          />
-        )}
+        <ResizableContainer
+          leftComponent={leftComponent as React.ReactElement}
+          rightComponent={rightComponent as React.ReactElement}
+          showLeft={showExpanded}
+          showPreview={showPreview}
+        />
 
         {showPreview && (
           <PreviewSection

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
@@ -20,7 +20,7 @@ const leftComponent = <div>{'left component'}</div>;
 const rightComponent = <div>{'right component'}</div>;
 
 describe('ResizableContainer', () => {
-  it('should render left and right component as well as resize button', () => {
+  it('should render right section only', () => {
     const state = {
       ...initialState,
       ui: {
@@ -37,13 +37,86 @@ describe('ResizableContainer', () => {
         <ResizableContainer
           leftComponent={leftComponent}
           rightComponent={rightComponent}
+          showLeft={false}
           showPreview={false}
         />
       </TestProvider>
     );
 
-    expect(getByTestId(RESIZABLE_LEFT_SECTION_TEST_ID)).toBeInTheDocument();
-    expect(getByTestId(RESIZABLE_BUTTON_TEST_ID)).toBeInTheDocument();
-    expect(getByTestId(RESIZABLE_RIGHT_SECTION_TEST_ID)).toBeInTheDocument();
+    const rightSection = getByTestId(RESIZABLE_RIGHT_SECTION_TEST_ID);
+    expect(rightSection).toBeInTheDocument();
+    expect(rightSection.parentElement).toHaveStyle('inline-size: 100%; block-size: auto;');
+
+    const resizeButton = getByTestId(RESIZABLE_BUTTON_TEST_ID);
+    expect(resizeButton).toBeInTheDocument();
+    expect(resizeButton).toBeDisabled();
+
+    const leftSection = getByTestId(RESIZABLE_LEFT_SECTION_TEST_ID);
+    expect(leftSection).toBeInTheDocument();
+    expect(leftSection.parentElement).toHaveStyle('inline-size: 0%; block-size: auto;');
+  });
+
+  it('should render left and right components with resize button enabled', () => {
+    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={false}
+        />
+      </TestProvider>
+    );
+
+    const rightSection = getByTestId(RESIZABLE_RIGHT_SECTION_TEST_ID);
+    expect(rightSection).toBeInTheDocument();
+    expect(rightSection.parentElement).toHaveStyle('inline-size: 50%; block-size: auto;');
+
+    const resizeButton = getByTestId(RESIZABLE_BUTTON_TEST_ID);
+    expect(resizeButton).toBeInTheDocument();
+    expect(resizeButton).not.toBeDisabled();
+
+    const leftSection = getByTestId(RESIZABLE_LEFT_SECTION_TEST_ID);
+    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
@@ -23,8 +23,7 @@ import {
 import { LeftSection } from './left_section';
 import { RightSection } from './right_section';
 
-const RIGHT_SECTION_MIN_WIDTH = '380px';
-const LEFT_SECTION_MIN_WIDTH = '380px';
+const MIN_SECTION_WIDTH = '380px';
 const LEFT_PANEL_ID = 'left';
 const RIGHT_PANEL_ID = 'right';
 
@@ -37,6 +36,10 @@ interface ResizableContainerProps {
    * The component to render on the right side of the flyout
    */
   rightComponent: React.ReactElement;
+  /**
+   * 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
    */
@@ -48,19 +51,19 @@ interface ResizableContainerProps {
  * It allows the resizing of the sections, saving the percentages in local storage.
  */
 export const ResizableContainer: React.FC<ResizableContainerProps> = memo(
-  ({ leftComponent, rightComponent, showPreview }: ResizableContainerProps) => {
+  ({ leftComponent, rightComponent, showLeft, showPreview }: ResizableContainerProps) => {
     const dispatch = useDispatch();
 
     const { leftPercentage, rightPercentage } = useSelector(selectUserSectionWidths);
     const defaultPercentages = useSelector(selectDefaultWidths);
 
     const initialLeftPercentage = useMemo(
-      () => leftPercentage || defaultPercentages.leftPercentage,
-      [defaultPercentages.leftPercentage, leftPercentage]
+      () => (showLeft ? leftPercentage || defaultPercentages.leftPercentage : 0),
+      [defaultPercentages, leftPercentage, showLeft]
     );
     const initialRightPercentage = useMemo(
-      () => rightPercentage || defaultPercentages.rightPercentage,
-      [defaultPercentages.rightPercentage, rightPercentage]
+      () => (showLeft ? rightPercentage || defaultPercentages.rightPercentage : 100),
+      [defaultPercentages, rightPercentage, showLeft]
     );
 
     const onWidthChange = useCallback(
@@ -86,19 +89,20 @@ export const ResizableContainer: React.FC<ResizableContainerProps> = memo(
             <EuiResizablePanel
               id={LEFT_PANEL_ID}
               initialSize={initialLeftPercentage}
-              size={leftPercentage}
-              minSize={LEFT_SECTION_MIN_WIDTH}
               paddingSize="none"
+              minSize={MIN_SECTION_WIDTH}
               data-test-subj={RESIZABLE_LEFT_SECTION_TEST_ID}
             >
               <LeftSection component={leftComponent} />
             </EuiResizablePanel>
-            <EuiResizableButton disabled={showPreview} data-test-subj={RESIZABLE_BUTTON_TEST_ID} />
+            <EuiResizableButton
+              disabled={showPreview || !showLeft}
+              data-test-subj={RESIZABLE_BUTTON_TEST_ID}
+            />
             <EuiResizablePanel
               id={RIGHT_PANEL_ID}
               initialSize={initialRightPercentage}
-              size={rightPercentage}
-              minSize={RIGHT_SECTION_MIN_WIDTH}
+              minSize={MIN_SECTION_WIDTH}
               paddingSize="none"
               data-test-subj={RESIZABLE_RIGHT_SECTION_TEST_ID}
             >