diff --git a/packages/kbn-expandable-flyout/README.md b/packages/kbn-expandable-flyout/README.md index 63a6f9483ead07..3e3b620a06b53b 100644 --- a/packages/kbn-expandable-flyout/README.md +++ b/packages/kbn-expandable-flyout/README.md @@ -16,8 +16,12 @@ The flyout is composed of 3 sections: The expandable-flyout package is designed to render a single flyout for an entire plugin. While displaying multiple flyouts might be feasible, it will be a bit complicated, and we recommend instead to build multiple panels, with each their own context to manage their data (for example, take a look at the Security Solution [setup](https://github.com/elastic/kibana/tree/main/x-pack/plugins/security_solution/public/flyout)). The expandable-flyout is making some strict UI design decisions: -- when in collapsed mode (i.e. when only the right/preview section is open), the flyout's width is fixed to the EUI `s` size -- when in expanded mode (i.e. when the left section is opened), the flyout's width is fixed to the EUI `l` size. Internally the right, left and preview sections' widths are set to a hardcoded percentage (40%, 60$ and 40% respectively) +- when in collapsed mode (i.e. when only the right/preview section is open), the flyout's width linearly grows from its minimum value of 380px to its maximum value of 750px +- when in expanded mode (i.e. when the left section is opened), the flyout's width changes depending on the browser's width: + - if the window is smaller than 1600px, the flyout takes the entire browser window (minus 48px of padding on the left) + - for windows bigger than 1600px, the flyout's width is 80% of the entire browser window (with a max width of 1500px for the left section, and 750px for the right section) + +> While the expandable-flyout will work on very small screens, having both the right and left sections visible at the same time will not be a good experience to the user. We recommend only showing the right panel, and therefore handling this situation when you build your panels by considering hiding the actions that could open the left panel (like the expand details button in the [FlyoutNavigation](https://github.com/elastic/kibana/tree/main/x-pack/plugins/security_solution/public/flyout/shared/components/flyout_navigation.tsx)). ## Package API diff --git a/packages/kbn-expandable-flyout/src/components/left_section.tsx b/packages/kbn-expandable-flyout/src/components/left_section.tsx index 1d2a4a7eeabace..37cc0564d22ee6 100644 --- a/packages/kbn-expandable-flyout/src/components/left_section.tsx +++ b/packages/kbn-expandable-flyout/src/components/left_section.tsx @@ -26,7 +26,7 @@ interface LeftSectionProps { */ export const LeftSection: React.FC = ({ component, width }: LeftSectionProps) => { const style = useMemo( - () => ({ height: '100%', width: `${width * 100}%` }), + () => ({ height: '100%', width: `${width}px` }), [width] ); return ( diff --git a/packages/kbn-expandable-flyout/src/components/preview_section.test.tsx b/packages/kbn-expandable-flyout/src/components/preview_section.test.tsx index f365c8f299623b..950d406893082b 100644 --- a/packages/kbn-expandable-flyout/src/components/preview_section.test.tsx +++ b/packages/kbn-expandable-flyout/src/components/preview_section.test.tsx @@ -8,10 +8,11 @@ import React from 'react'; import { render } from '@testing-library/react'; -import { PreviewSection } from './preview_section'; +import { PreviewBanner, PreviewSection } from './preview_section'; import { PREVIEW_SECTION_BACK_BUTTON_TEST_ID, PREVIEW_SECTION_CLOSE_BUTTON_TEST_ID, + PREVIEW_SECTION_TEST_ID, } from './test_ids'; import { ExpandableFlyoutContext } from '../context'; @@ -28,14 +29,15 @@ describe('PreviewSection', () => { }, } as unknown as ExpandableFlyoutContext; + const component =
{'component'}
; + const left = 500; + it('should render close button in header', () => { - const component =
{'component'}
; - const width = 500; const showBackButton = false; const { getByTestId } = render( - + ); @@ -43,16 +45,43 @@ describe('PreviewSection', () => { }); it('should render back button in header', () => { - const component =
{'component'}
; - const width = 500; const showBackButton = true; const { getByTestId } = render( - + ); expect(getByTestId(PREVIEW_SECTION_BACK_BUTTON_TEST_ID)).toBeInTheDocument(); }); + + it('should render banner', () => { + const showBackButton = false; + const title = 'test'; + const banner: PreviewBanner = { + title, + backgroundColor: 'primary', + textColor: 'red', + }; + + const { getByTestId, getByText } = render( + + + + ); + + expect(getByTestId(`${PREVIEW_SECTION_TEST_ID}BannerPanel`)).toHaveClass( + `euiPanel--${banner.backgroundColor}` + ); + expect(getByTestId(`${PREVIEW_SECTION_TEST_ID}BannerText`)).toHaveStyle( + `color: ${banner.textColor}` + ); + expect(getByText(title)).toBeInTheDocument(); + }); }); diff --git a/packages/kbn-expandable-flyout/src/components/preview_section.tsx b/packages/kbn-expandable-flyout/src/components/preview_section.tsx index 1cc2243d65849b..ae96bdb7ce1876 100644 --- a/packages/kbn-expandable-flyout/src/components/preview_section.tsx +++ b/packages/kbn-expandable-flyout/src/components/preview_section.tsx @@ -65,9 +65,9 @@ interface PreviewSectionProps { */ component: React.ReactElement; /** - * Width used when rendering the panel + * Left position used when rendering the panel */ - width: number; + leftPosition: number; /** * Display the back button in the header */ @@ -85,12 +85,13 @@ interface PreviewSectionProps { export const PreviewSection: React.FC = ({ component, showBackButton, - width, + leftPosition, banner, }: PreviewSectionProps) => { const { euiTheme } = useEuiTheme(); const { closePreviewPanel, previousPreviewPanel } = useExpandableFlyoutContext(); - const left = `${(1 - width) * 100}%`; + + const left = leftPosition + 4; const closeButton = ( @@ -103,7 +104,7 @@ export const PreviewSection: React.FC = ({ ); const header = showBackButton ? ( - + = ({ {closeButton} ) : ( - {closeButton} + + {closeButton} + ); return (
{isPreviewBanner(banner) && ( - - + + {banner.title} diff --git a/packages/kbn-expandable-flyout/src/components/right_section.tsx b/packages/kbn-expandable-flyout/src/components/right_section.tsx index 6e7e94dc140481..ae6cad5c7e9f31 100644 --- a/packages/kbn-expandable-flyout/src/components/right_section.tsx +++ b/packages/kbn-expandable-flyout/src/components/right_section.tsx @@ -29,7 +29,7 @@ export const RightSection: React.FC = ({ width, }: RightSectionProps) => { const style = useMemo( - () => ({ height: '100%', width: `${width * 100}%` }), + () => ({ height: '100%', width: `${width}px` }), [width] ); diff --git a/packages/kbn-expandable-flyout/src/hooks/use_sections_sizes.test.ts b/packages/kbn-expandable-flyout/src/hooks/use_sections_sizes.test.ts new file mode 100644 index 00000000000000..cc8f7e0f283ee5 --- /dev/null +++ b/packages/kbn-expandable-flyout/src/hooks/use_sections_sizes.test.ts @@ -0,0 +1,250 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { renderHook } from '@testing-library/react-hooks'; +import type { RenderHookResult } from '@testing-library/react-hooks'; +import type { UserSectionsSizesParams, UserSectionsSizesResult } from './use_sections_sizes'; +import { useSectionSizes } from './use_sections_sizes'; + +describe('useSectionSizes', () => { + let hookResult: RenderHookResult; + + describe('Right section', () => { + it('should return 0 for right section if it is hidden', () => { + const initialProps = { + windowWidth: 350, + showRight: false, + showLeft: false, + showPreview: false, + }; + hookResult = renderHook((props: UserSectionsSizesParams) => useSectionSizes(props), { + initialProps, + }); + + expect(hookResult.result.current).toEqual({ + rightSectionWidth: 0, + leftSectionWidth: 0, + flyoutWidth: '0px', + previewSectionLeft: 0, + }); + }); + + it('should return the window width for right section size for tiny screen', () => { + const initialProps = { + windowWidth: 350, + showRight: true, + showLeft: false, + showPreview: false, + }; + hookResult = renderHook((props: UserSectionsSizesParams) => useSectionSizes(props), { + initialProps, + }); + + expect(hookResult.result.current).toEqual({ + rightSectionWidth: 350, + leftSectionWidth: 0, + flyoutWidth: '350px', + previewSectionLeft: 0, + }); + }); + + it('should return 380 for right section size for medium screen', () => { + const initialProps = { + windowWidth: 600, + showRight: true, + showLeft: false, + showPreview: false, + }; + hookResult = renderHook((props: UserSectionsSizesParams) => useSectionSizes(props), { + initialProps, + }); + + expect(hookResult.result.current).toEqual({ + rightSectionWidth: 380, + leftSectionWidth: 0, + flyoutWidth: '380px', + previewSectionLeft: 0, + }); + }); + + it('should return 500 for right section size for large screen', () => { + const initialProps = { + windowWidth: 1300, + showRight: true, + showLeft: false, + showPreview: false, + }; + hookResult = renderHook((props: UserSectionsSizesParams) => useSectionSizes(props), { + initialProps, + }); + + expect(hookResult.result.current.rightSectionWidth).toBeGreaterThan(420); + expect(hookResult.result.current.rightSectionWidth).toBeLessThan(750); + expect(hookResult.result.current.leftSectionWidth).toEqual(0); + expect(hookResult.result.current.flyoutWidth).toEqual( + `${hookResult.result.current.rightSectionWidth}px` + ); + expect(hookResult.result.current.previewSectionLeft).toEqual(0); + }); + + it('should return 750 for right section size for very large screen', () => { + const initialProps = { + windowWidth: 2500, + showRight: true, + showLeft: false, + showPreview: false, + }; + hookResult = renderHook((props: UserSectionsSizesParams) => useSectionSizes(props), { + initialProps, + }); + + expect(hookResult.result.current).toEqual({ + rightSectionWidth: 750, + leftSectionWidth: 0, + flyoutWidth: '750px', + previewSectionLeft: 0, + }); + }); + }); + + describe('Left section', () => { + it('should return 0 for left section if it is hidden', () => { + const initialProps = { + windowWidth: 500, + showRight: true, + showLeft: false, + showPreview: false, + }; + hookResult = renderHook((props: UserSectionsSizesParams) => useSectionSizes(props), { + initialProps, + }); + + expect(hookResult.result.current).toEqual({ + rightSectionWidth: 380, + leftSectionWidth: 0, + flyoutWidth: '380px', + previewSectionLeft: 0, + }); + }); + + it('should return the remaining for left section', () => { + const initialProps = { + windowWidth: 500, + showRight: true, + showLeft: true, + showPreview: false, + }; + hookResult = renderHook((props: UserSectionsSizesParams) => useSectionSizes(props), { + initialProps, + }); + + expect(hookResult.result.current).toEqual({ + rightSectionWidth: 380, + leftSectionWidth: 72, + flyoutWidth: '452px', + previewSectionLeft: 0, + }); + }); + + it('should return 80% of remaining for left section', () => { + const initialProps = { + windowWidth: 2500, + showRight: true, + showLeft: true, + showPreview: false, + }; + hookResult = renderHook((props: UserSectionsSizesParams) => useSectionSizes(props), { + initialProps, + }); + + expect(hookResult.result.current.rightSectionWidth).toEqual(750); + expect(hookResult.result.current.leftSectionWidth).toEqual((2500 - 750) * 0.8); + expect(hookResult.result.current.flyoutWidth).toEqual( + `${ + hookResult.result.current.rightSectionWidth + hookResult.result.current.leftSectionWidth + }px` + ); + expect(hookResult.result.current.previewSectionLeft).toEqual(0); + }); + + it('should return max out at 1500px for really big screens', () => { + const initialProps = { + windowWidth: 2700, + showRight: true, + showLeft: true, + showPreview: false, + }; + hookResult = renderHook((props: UserSectionsSizesParams) => useSectionSizes(props), { + initialProps, + }); + + expect(hookResult.result.current.rightSectionWidth).toEqual(750); + expect(hookResult.result.current.leftSectionWidth).toEqual(1500); + expect(hookResult.result.current.flyoutWidth).toEqual( + `${ + hookResult.result.current.rightSectionWidth + hookResult.result.current.leftSectionWidth + }px` + ); + expect(hookResult.result.current.previewSectionLeft).toEqual(0); + }); + }); + + describe('Preview section', () => { + it('should return the 0 for preview section if it is hidden', () => { + const initialProps = { + windowWidth: 600, + showRight: true, + showLeft: false, + showPreview: false, + }; + hookResult = renderHook((props: UserSectionsSizesParams) => useSectionSizes(props), { + initialProps, + }); + + expect(hookResult.result.current).toEqual({ + rightSectionWidth: 380, + leftSectionWidth: 0, + flyoutWidth: '380px', + previewSectionLeft: 0, + }); + }); + + it('should return the 0 for preview section when left section is hidden', () => { + const initialProps = { + windowWidth: 600, + showRight: true, + showLeft: false, + showPreview: true, + }; + hookResult = renderHook((props: UserSectionsSizesParams) => useSectionSizes(props), { + initialProps, + }); + + expect(hookResult.result.current).toEqual({ + rightSectionWidth: 380, + leftSectionWidth: 0, + flyoutWidth: '380px', + previewSectionLeft: 0, + }); + }); + + it('should return for preview section when left section is visible', () => { + const initialProps = { windowWidth: 600, showRight: true, showLeft: true, showPreview: true }; + hookResult = renderHook((props: UserSectionsSizesParams) => useSectionSizes(props), { + initialProps, + }); + + expect(hookResult.result.current).toEqual({ + rightSectionWidth: 380, + leftSectionWidth: 172, + flyoutWidth: '552px', + previewSectionLeft: 172, + }); + }); + }); +}); diff --git a/packages/kbn-expandable-flyout/src/hooks/use_sections_sizes.ts b/packages/kbn-expandable-flyout/src/hooks/use_sections_sizes.ts new file mode 100644 index 00000000000000..94b10cde6e1c8c --- /dev/null +++ b/packages/kbn-expandable-flyout/src/hooks/use_sections_sizes.ts @@ -0,0 +1,113 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +const RIGHT_SECTION_MIN_WIDTH = 380; +const MIN_RESOLUTION_BREAKPOINT = 992; +const RIGHT_SECTION_MAX_WIDTH = 750; +const MAX_RESOLUTION_BREAKPOINT = 1920; + +const LEFT_SECTION_MAX_WIDTH = 1500; + +const FULL_WIDTH_BREAKPOINT = 1600; +const FULL_WIDTH_PADDING = 48; + +export interface UserSectionsSizesParams { + /** + * The width of the browser window + */ + windowWidth: number; + /** + * True if the right section is visible, false otherwise + */ + showRight: boolean; + /** + * True if the left section is visible, false otherwise + */ + showLeft: boolean; + /** + * True if the preview section is visible, false otherwise + */ + showPreview: boolean; +} + +export interface UserSectionsSizesResult { + /** + * Width of the right section in pixels + */ + rightSectionWidth: number; + /** + * Width of the left section in pixels + */ + leftSectionWidth: number; + /** + * Width of the flyout in pixels + */ + flyoutWidth: string; + /** + * Left position of the preview section in pixels + */ + previewSectionLeft: number; +} + +/** + * Hook that calculate the different width for the sections of the flyout and the flyout itself + */ +export const useSectionSizes = ({ + windowWidth, + showRight, + showLeft, + showPreview, +}: UserSectionsSizesParams): UserSectionsSizesResult => { + let rightSectionWidth: number = 0; + if (showRight) { + if (windowWidth < MIN_RESOLUTION_BREAKPOINT) { + // the right section's width will grow from 380px (at 992px resolution) while handling tiny screens by not going smaller than the window width + rightSectionWidth = Math.min(RIGHT_SECTION_MIN_WIDTH, windowWidth); + } else { + const ratioWidth = + (RIGHT_SECTION_MAX_WIDTH - RIGHT_SECTION_MIN_WIDTH) * + ((windowWidth - MIN_RESOLUTION_BREAKPOINT) / + (MAX_RESOLUTION_BREAKPOINT - MIN_RESOLUTION_BREAKPOINT)); + + // the right section's width will grow to 750px (at 1920px resolution) and will never go bigger than 750px in higher resolutions + rightSectionWidth = Math.min(RIGHT_SECTION_MIN_WIDTH + ratioWidth, RIGHT_SECTION_MAX_WIDTH); + } + } + + let leftSectionWidth: number = 0; + if (showLeft) { + // the left section's width will be nearly the remaining space for resolution lower than 1600px + if (windowWidth <= FULL_WIDTH_BREAKPOINT) { + leftSectionWidth = windowWidth - rightSectionWidth - FULL_WIDTH_PADDING; + } else { + // the left section's width will be taking 80% of the remaining space for resolution higher than 1600px, while never going bigger than 1500px + leftSectionWidth = Math.min( + ((windowWidth - rightSectionWidth) * 80) / 100, + LEFT_SECTION_MAX_WIDTH + ); + } + } + + const flyoutWidth: string = + showRight && showLeft ? `${rightSectionWidth + leftSectionWidth}px` : `${rightSectionWidth}px`; + + // preview section's width should only be similar to the right section. + // Though because the preview is rendered with an absolute position in the flyout, we calculate its left position instead of the width + let previewSectionLeft: number = 0; + if (showPreview) { + // the preview section starts where the left section ends + previewSectionLeft = leftSectionWidth; + } + + return { + rightSectionWidth, + leftSectionWidth, + flyoutWidth, + previewSectionLeft, + }; +}; diff --git a/packages/kbn-expandable-flyout/src/hooks/use_window_size.test.ts b/packages/kbn-expandable-flyout/src/hooks/use_window_size.test.ts new file mode 100644 index 00000000000000..cb9f44d36e2fd6 --- /dev/null +++ b/packages/kbn-expandable-flyout/src/hooks/use_window_size.test.ts @@ -0,0 +1,17 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { renderHook } from '@testing-library/react-hooks'; +import { useWindowSize } from './use_window_size'; + +describe('useWindowSize', () => { + it('should return the window size', () => { + const hookResult = renderHook(() => useWindowSize()); + expect(hookResult.result.current).toEqual(1024); + }); +}); diff --git a/packages/kbn-expandable-flyout/src/hooks/use_window_size.ts b/packages/kbn-expandable-flyout/src/hooks/use_window_size.ts new file mode 100644 index 00000000000000..0d773ad02c1c32 --- /dev/null +++ b/packages/kbn-expandable-flyout/src/hooks/use_window_size.ts @@ -0,0 +1,25 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { useLayoutEffect, useState } from 'react'; + +/** + * Hook that returns the browser window width + */ +export const useWindowSize = (): number => { + const [width, setWidth] = useState(0); + useLayoutEffect(() => { + function updateSize() { + setWidth(window.innerWidth); + } + window.addEventListener('resize', updateSize); + updateSize(); + return () => window.removeEventListener('resize', updateSize); + }, []); + return width; +}; diff --git a/packages/kbn-expandable-flyout/src/index.tsx b/packages/kbn-expandable-flyout/src/index.tsx index d5a1bff46439b4..17613be6859b7b 100644 --- a/packages/kbn-expandable-flyout/src/index.tsx +++ b/packages/kbn-expandable-flyout/src/index.tsx @@ -7,8 +7,10 @@ */ import React, { useCallback, useMemo } from 'react'; -import type { EuiFlyoutProps } from '@elastic/eui'; +import { EuiFlyoutProps } from '@elastic/eui'; import { EuiFlexGroup, EuiFlyout } from '@elastic/eui'; +import { useSectionSizes } from './hooks/use_sections_sizes'; +import { useWindowSize } from './hooks/use_window_size'; import { useExpandableFlyoutContext } from './context'; import { PreviewSection } from './components/preview_section'; import { RightSection } from './components/right_section'; @@ -16,6 +18,8 @@ import type { FlyoutPanelProps, Panel } from './types'; import { LeftSection } from './components/left_section'; import { isPreviewBanner } from './components/preview_section'; +const flyoutInnerStyles = { height: '100%' }; + export interface ExpandableFlyoutProps extends Omit { /** * List of all registered panels available for render @@ -27,8 +31,6 @@ export interface ExpandableFlyoutProps extends Omit { handleOnFlyoutClosed?: () => void; } -const flyoutInnerStyles = { height: '100%' }; - /** * Expandable flyout UI React component. * Displays 3 sections (right, left, preview) depending on the panels in the context. @@ -41,6 +43,8 @@ export const ExpandableFlyout: React.FC = ({ handleOnFlyoutClosed, ...flyoutProps }) => { + const windowWidth = useWindowSize(); + const { panels, closeFlyout } = useExpandableFlyoutContext(); const { left, right, preview } = panels; @@ -71,17 +75,22 @@ export const ExpandableFlyout: React.FC = ({ [mostRecentPreview, registeredPanels] ); - const hideFlyout = !left && !right && !preview.length; + const showRight = rightSection != null && right != null; + const showLeft = leftSection != null && left != null; + const showPreview = previewSection != null && preview != null; + + const { rightSectionWidth, leftSectionWidth, flyoutWidth, previewSectionLeft } = useSectionSizes({ + windowWidth, + showRight, + showLeft, + showPreview, + }); + const hideFlyout = !left && !right && !preview.length; if (hideFlyout) { return null; } - const flyoutWidth: string = leftSection && rightSection ? 'l' : 's'; - const rightSectionWidth: number = leftSection ? 0.4 : 1; - const leftSectionWidth: number = 0.6; - const previewSectionWidth: number = leftSection ? 0.4 : 1; - return ( = ({ wrap={false} gutterSize="none" style={flyoutInnerStyles} + responsive={false} > - {leftSection && left ? ( + {showLeft ? ( ) : null} - {rightSection && right ? ( + {showRight ? ( = ({ ) : null} - {previewSection && preview ? ( + {showPreview ? ( ) : null} diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/left/components/host_details.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/left/components/host_details.tsx index bdfb03639382cf..3f68ef15956ede 100644 --- a/x-pack/plugins/security_solution/public/flyout/document_details/left/components/host_details.tsx +++ b/x-pack/plugins/security_solution/public/flyout/document_details/left/components/host_details.tsx @@ -195,7 +195,7 @@ export const HostDetails: React.FC = ({ hostName, timestamp, s const relatedUsersCount = useMemo( () => ( - + diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/left/components/user_details.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/left/components/user_details.tsx index daa58fc4d03796..1758bbc5b05d85 100644 --- a/x-pack/plugins/security_solution/public/flyout/document_details/left/components/user_details.tsx +++ b/x-pack/plugins/security_solution/public/flyout/document_details/left/components/user_details.tsx @@ -196,7 +196,7 @@ export const UserDetails: React.FC = ({ userName, timestamp, s const relatedHostsCount = useMemo( () => ( - + diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/preview/components/rule_preview.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/preview/components/rule_preview.tsx index 6e4d9221421ee3..6f679df0c5e9e1 100644 --- a/x-pack/plugins/security_solution/public/flyout/document_details/preview/components/rule_preview.tsx +++ b/x-pack/plugins/security_solution/public/flyout/document_details/preview/components/rule_preview.tsx @@ -34,6 +34,14 @@ const panelViewStyle = css` font-size: 90% !important; } text-overflow: ellipsis; + .euiFlexGroup { + flex-wrap: inherit; + } + + .euiFlexItem { + inline-size: inherit; + flex-basis: inherit; + } `; /** diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/description.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/description.tsx index 105d57ba4e7f6c..0003a5cd2c1230 100644 --- a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/description.tsx +++ b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/description.tsx @@ -98,7 +98,12 @@ export const Description: FC = () => { {isAlert ? ( - +
{ data-test-subj={INSIGHTS_ENTITIES_TEST_ID} > {userName || hostName ? ( - + {userName && ( diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/header_title.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/header_title.tsx index d67253061d1d1f..1573f5ef33bcff 100644 --- a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/header_title.tsx +++ b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/header_title.tsx @@ -73,7 +73,7 @@ export const HeaderTitle: FC = memo(() => { {isAlert && !isEmpty(ruleName) ? ruleTitle : eventTitle} - + diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/host_entity_overview.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/host_entity_overview.tsx index fdc3edf96e9b8d..58d9bf9d8a4188 100644 --- a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/host_entity_overview.tsx +++ b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/host_entity_overview.tsx @@ -156,7 +156,7 @@ export const HostEntityOverview: React.FC = ({ hostName return [ { title: ( - + {HOST_RISK_LEVEL} @@ -177,9 +177,14 @@ export const HostEntityOverview: React.FC = ({ hostName }, [hostRisk]); return ( - + - + @@ -207,7 +212,7 @@ export const HostEntityOverview: React.FC = ({ hostName /> ) : ( - + = ({ const colorDataTestSubj = `${dataTestSubj}Color`; return ( - + - - - + data-test-subj={iconDataTestSubj} + aria-label={i18n.translate( + 'xpack.securitySolution.flyout.right.insights.insightSummaryButtonIconAriaLabel', + { + defaultMessage: 'Insight summary row icon', + } + )} + color="text" + display="empty" + type={icon} + size="m" + /> {
{isAlert ? ( - - + +
{ } return ( - +

diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/user_entity_overview.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/user_entity_overview.tsx index cd1a057b6fbc04..81b1b75df57e9f 100644 --- a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/user_entity_overview.tsx +++ b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/user_entity_overview.tsx @@ -155,7 +155,7 @@ export const UserEntityOverview: React.FC = ({ userName return [ { title: ( - + {USER_RISK_LEVEL} @@ -176,9 +176,14 @@ export const UserEntityOverview: React.FC = ({ userName }, [userRisk]); return ( - + - + @@ -206,7 +211,7 @@ export const UserEntityOverview: React.FC = ({ userName data-test-subj={ENTITIES_USER_OVERVIEW_LOADING_TEST_ID} /> ) : ( - + = ({ {expandable && children && toggleIcon}