From b4441014d6048c18df5bf1a3ce1aadc7e6900148 Mon Sep 17 00:00:00 2001 From: Maxim Palenov Date: Thu, 4 May 2023 10:19:36 +0200 Subject: [PATCH] [Security Solution] Fix a broken header on small screens (#156525) **Resolves:** https://github.com/elastic/kibana/issues/155596 ## Summary It fixes a broken header on small screen after adding rule snooze badge component. *Before:* ![image](https://user-images.githubusercontent.com/3775283/235914975-d30c75c4-f4fe-4887-86d1-417787e16521.png) ![image](https://user-images.githubusercontent.com/3775283/235915062-b079fac0-0fef-447a-b2e5-d571f6862441.png) ![image](https://user-images.githubusercontent.com/3775283/235915165-d34cb157-ecf1-4074-9a08-48c4dfa3605d.png) *After:* ![image](https://user-images.githubusercontent.com/3775283/235915333-ca658f3a-8dfe-47d4-90ec-8bc629566d5c.png) ![image](https://user-images.githubusercontent.com/3775283/235915401-31a7ff25-933e-4c8e-938d-323433e85d66.png) ![image](https://user-images.githubusercontent.com/3775283/235915479-fc56dd64-e113-4535-b268-f3dacdd6f4a4.png) ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) (cherry picked from commit 0a9bbe7c1fd32765116f508b9d01879ba58482fb) --- .../__snapshots__/index.test.tsx.snap | 19 +++++-- .../common/components/header_page/index.tsx | 56 ++++++++++++++----- .../common/components/subtitle/index.tsx | 2 - .../authentications_host_table.test.tsx.snap | 4 -- .../authentications_user_table.test.tsx.snap | 4 -- 5 files changed, 55 insertions(+), 30 deletions(-) diff --git a/x-pack/plugins/security_solution/public/common/components/header_page/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/header_page/__snapshots__/index.test.tsx.snap index 9e5b265c187cf..ba7e8f8ef4fce 100644 --- a/x-pack/plugins/security_solution/public/common/components/header_page/__snapshots__/index.test.tsx.snap +++ b/x-pack/plugins/security_solution/public/common/components/header_page/__snapshots__/index.test.tsx.snap @@ -4,7 +4,6 @@ exports[`HeaderPage it renders 1`] = ` + - + + + + diff --git a/x-pack/plugins/security_solution/public/common/components/header_page/index.tsx b/x-pack/plugins/security_solution/public/common/components/header_page/index.tsx index 7872476d19b20..21f310f5344c9 100644 --- a/x-pack/plugins/security_solution/public/common/components/header_page/index.tsx +++ b/x-pack/plugins/security_solution/public/common/components/header_page/index.tsx @@ -5,9 +5,16 @@ * 2.0. */ -import { EuiProgress, EuiPageHeader, EuiPageHeaderSection, EuiSpacer } from '@elastic/eui'; +import { + EuiProgress, + EuiPageHeader, + EuiPageHeaderSection, + EuiSpacer, + useEuiTheme, +} from '@elastic/eui'; import React from 'react'; -import styled, { css } from 'styled-components'; +import { css } from '@emotion/react'; +import styled, { css as styleCss } from 'styled-components'; import type { LinkIconProps } from '../link_icon'; import { LinkIcon } from '../link_icon'; @@ -23,19 +30,10 @@ interface HeaderProps { isLoading?: boolean; } -const Header = styled.header.attrs({ - className: 'securitySolutionHeaderPage', -})` - ${({ border, theme }) => css` - margin-bottom: ${theme.eui.euiSizeL}; - `} -`; -Header.displayName = 'Header'; - const LinkBack = styled.div.attrs({ className: 'securitySolutionHeaderPage__linkBack', })` - ${({ theme }) => css` + ${({ theme }) => styleCss` font-size: ${theme.eui.euiFontSizeXS}; line-height: ${theme.eui.euiLineHeight}; margin-bottom: ${theme.eui.euiSizeS}; @@ -51,6 +49,18 @@ const HeaderSection = styled(EuiPageHeaderSection)` `; HeaderSection.displayName = 'HeaderSection'; +function Divider(): JSX.Element { + const { euiTheme } = useEuiTheme(); + + return ( +
+ ); +} + interface BackOptions { pageId: SecurityPageName; text: LinkIconProps['children']; @@ -110,15 +120,19 @@ const HeaderPageComponent: React.FC = ({ titleNode, }) => ( <> - + {backOptions && } {!backOptions && backComponent && <>{backComponent}} {titleNode || } - {subtitle && <Subtitle data-test-subj="header-page-subtitle" items={subtitle} />} - {subtitle2 && <Subtitle data-test-subj="header-page-subtitle-2" items={subtitle2} />} + {subtitle && ( + <> + <EuiSpacer size="s" /> + <Subtitle data-test-subj="header-page-subtitle" items={subtitle} /> + </> + )} {border && isLoading && <EuiProgress size="xs" color="accent" />} </HeaderSection> @@ -128,6 +142,18 @@ const HeaderPageComponent: React.FC<HeaderPageProps> = ({ </EuiPageHeaderSection> )} </EuiPageHeader> + {subtitle2 && ( + <> + <EuiSpacer size="xs" /> + <Subtitle data-test-subj="header-page-subtitle-2" items={subtitle2} /> + </> + )} + {border && ( + <> + <EuiSpacer size="m" /> + <Divider /> + </> + )} {/* Manually add a 'padding-bottom' to header */} <EuiSpacer size="l" /> </> diff --git a/x-pack/plugins/security_solution/public/common/components/subtitle/index.tsx b/x-pack/plugins/security_solution/public/common/components/subtitle/index.tsx index c2f3d7d096b5c..75ce1d433c5a0 100644 --- a/x-pack/plugins/security_solution/public/common/components/subtitle/index.tsx +++ b/x-pack/plugins/security_solution/public/common/components/subtitle/index.tsx @@ -10,8 +10,6 @@ import styled, { css } from 'styled-components'; const Wrapper = styled.div` ${({ theme }) => css` - margin-top: ${theme.eui.euiSizeS}; - .siemSubtitle__item { color: ${theme.eui.euiTextSubduedColor}; font-size: ${theme.eui.euiFontSizeXS}; diff --git a/x-pack/plugins/security_solution/public/explore/components/authentication/__snapshots__/authentications_host_table.test.tsx.snap b/x-pack/plugins/security_solution/public/explore/components/authentication/__snapshots__/authentications_host_table.test.tsx.snap index e99916498b22d..818e6d09a3656 100644 --- a/x-pack/plugins/security_solution/public/explore/components/authentication/__snapshots__/authentications_host_table.test.tsx.snap +++ b/x-pack/plugins/security_solution/public/explore/components/authentication/__snapshots__/authentications_host_table.test.tsx.snap @@ -1,10 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Authentication Host Table Component rendering it renders the host authentication table 1`] = ` -.c2 { - margin-top: 8px; -} - .c2 .siemSubtitle__item { color: #7a7f89; font-size: 12px; diff --git a/x-pack/plugins/security_solution/public/explore/components/authentication/__snapshots__/authentications_user_table.test.tsx.snap b/x-pack/plugins/security_solution/public/explore/components/authentication/__snapshots__/authentications_user_table.test.tsx.snap index dfcedad275512..8eaf2e75f7600 100644 --- a/x-pack/plugins/security_solution/public/explore/components/authentication/__snapshots__/authentications_user_table.test.tsx.snap +++ b/x-pack/plugins/security_solution/public/explore/components/authentication/__snapshots__/authentications_user_table.test.tsx.snap @@ -1,10 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Authentication User Table Component rendering it renders the user authentication table 1`] = ` -.c2 { - margin-top: 8px; -} - .c2 .siemSubtitle__item { color: #7a7f89; font-size: 12px;