From 49596e77aa4d2e48af42fe26e5eb32deb480df53 Mon Sep 17 00:00:00 2001 From: Philippe Oberti Date: Sat, 8 Feb 2025 03:50:10 +0100 Subject: [PATCH] [9.0] [Security Solution][Expandable flyout] fix flyout flickering when 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)](https://github.com/elastic/kibana/pull/210225) ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) --- .../src/components/container.tsx | 16 ++-- .../components/resizable_container.test.tsx | 81 ++++++++++++++++++- .../src/components/resizable_container.tsx | 28 ++++--- 3 files changed, 99 insertions(+), 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 index 9679a43bb45f2..a57367422d2b9 100644 --- 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 = memo( onResize={onResize} minWidth={minFlyoutWidth} > - {showCollapsed && } - - {showExpanded && ( - - )} + {showPreview && ( {'left component'}; const rightComponent =
{'right component'}
; 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', () => { ); - 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( + + + + ); + + 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( + + + + ); + + 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 index 4eba95175fece..cff37f5679116 100644 --- 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 = 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 = memo( - +