Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[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

Merged
merged 1 commit into from
Feb 20, 2025
+4 −41
Merged

[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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion x-pack/solutions/security/packages/expandable-flyout/src/components/container.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 && (
Expand Down
3 changes: 2 additions & 1 deletion x-pack/solutions/security/packages/expandable-flyout/src/components/preview_section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = (
Expand Down
30 changes: 0 additions & 30 deletions ...solutions/security/packages/expandable-flyout/src/components/resizable_container.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ describe('ResizableContainer', () => {
leftComponent={leftComponent}
rightComponent={rightComponent}
showLeft={false}
showPreview={false}
/>
</TestProvider>
);
Expand Down Expand Up @@ -74,7 +73,6 @@ describe('ResizableContainer', () => {
leftComponent={leftComponent}
rightComponent={rightComponent}
showLeft={true}
showPreview={false}
/>
</TestProvider>
);
Expand All @@ -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();
});
});
11 changes: 2 additions & 9 deletions x-pack/solutions/security/packages/expandable-flyout/src/components/resizable_container.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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}
Expand Down