From 197a599a23d76ddca089fa89210497f8ce12cf77 Mon Sep 17 00:00:00 2001 From: Philippe Oberti Date: Thu, 20 Feb 2025 22:29:21 +0100 Subject: [PATCH] [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) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # 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)](https://github.com/elastic/kibana/pull/211938) ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) --- .../src/components/container.tsx | 1 - .../src/components/preview_section.tsx | 3 +- .../components/resizable_container.test.tsx | 30 ------------------- .../src/components/resizable_container.tsx | 11 ++----- 4 files changed, 4 insertions(+), 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 index a57367422d2b9..a27ba002a20a7 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 @@ -215,7 +215,6 @@ export const Container: React.FC = 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 index 7b8edbc6f865d..0207fc5b35a8c 100644 --- 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 = 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/x-pack/solutions/security/packages/expandable-flyout/src/components/resizable_container.test.tsx b/x-pack/solutions/security/packages/expandable-flyout/src/components/resizable_container.test.tsx index 1cf939572e1a1..07d11e651cd49 100644 --- a/x-pack/solutions/security/packages/expandable-flyout/src/components/resizable_container.test.tsx +++ b/x-pack/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} /> ); @@ -74,7 +73,6 @@ describe('ResizableContainer', () => { leftComponent={leftComponent} rightComponent={rightComponent} showLeft={true} - showPreview={false} /> ); @@ -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( - - - - ); - - 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 cff37f5679116..286cf26ffb309 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 @@ -40,10 +40,6 @@ 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; } /** @@ -51,7 +47,7 @@ interface ResizableContainerProps { * It allows the resizing of the sections, saving the percentages in local storage. */ export const ResizableContainer: React.FC = 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 = memo( > - +