From e56f6e7db213faa338758c676719b3826e6612a4 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Sat, 16 May 2020 13:53:59 +0300 Subject: [PATCH] [7.x] [SIEM][CASE] Improve layout (#66232) (#66747) --- .../cases/components/case_view/index.tsx | 30 ++++++++++------ .../cases/components/wrappers/index.tsx | 18 ++++++---- .../siem/public/cases/pages/case_details.tsx | 14 +++++--- .../public/cases/pages/configure_cases.tsx | 17 +++++----- .../common/components/wrapper_page/index.tsx | 34 ++++++++++--------- 5 files changed, 67 insertions(+), 46 deletions(-) diff --git a/x-pack/plugins/siem/public/cases/components/case_view/index.tsx b/x-pack/plugins/siem/public/cases/components/case_view/index.tsx index d02119580a75a..f80075fbe260d 100644 --- a/x-pack/plugins/siem/public/cases/components/case_view/index.tsx +++ b/x-pack/plugins/siem/public/cases/components/case_view/index.tsx @@ -18,6 +18,7 @@ import styled from 'styled-components'; import * as i18n from './translations'; import { Case } from '../../containers/types'; import { getCaseUrl } from '../../../common/components/link_to'; +import { gutterTimeline } from '../../../common/lib/helpers'; import { HeaderPage } from '../../../common/components/header_page'; import { EditableTitle } from '../../../common/components/header_page/editable_title'; import { TagList } from '../tag_list'; @@ -26,9 +27,8 @@ import { UserActionTree } from '../user_action_tree'; import { UserList } from '../user_list'; import { useUpdateCase } from '../../containers/use_update_case'; import { useGetUrlSearch } from '../../../common/components/navigation/use_get_url_search'; -import { WrapperPage } from '../../../common/components/wrapper_page'; import { getTypedPayload } from '../../containers/utils'; -import { WhitePageWrapper } from '../wrappers'; +import { WhitePageWrapper, HeaderWrapper } from '../wrappers'; import { useBasePath } from '../../../common/lib/kibana'; import { CaseStatus } from '../case_status'; import { navTabs } from '../../../app/home/home_navigations'; @@ -43,8 +43,11 @@ interface Props { userCanCrud: boolean; } -const MyWrapper = styled(WrapperPage)` - padding-bottom: 0; +const MyWrapper = styled.div` + padding: ${({ + theme, + }) => `${theme.eui.paddingSizes.l} ${gutterTimeline} ${theme.eui.paddingSizes.l} + ${theme.eui.paddingSizes.l}`}; `; const MyEuiFlexGroup = styled(EuiFlexGroup)` @@ -242,15 +245,20 @@ export const CaseComponent = React.memo( } }, [initLoadingData, isLoadingUserActions]); + const backOptions = useMemo( + () => ({ + href: getCaseUrl(search), + text: i18n.BACK_TO_ALL, + dataTestSubj: 'backToCases', + }), + [search] + ); + return ( <> - + ( {...caseStatusData} /> - + {!initLoadingData && pushCallouts != null && pushCallouts} diff --git a/x-pack/plugins/siem/public/cases/components/wrappers/index.tsx b/x-pack/plugins/siem/public/cases/components/wrappers/index.tsx index 772d78f948b79..06715514e01bf 100644 --- a/x-pack/plugins/siem/public/cases/components/wrappers/index.tsx +++ b/x-pack/plugins/siem/public/cases/components/wrappers/index.tsx @@ -4,15 +4,14 @@ * you may not use this file except in compliance with the Elastic License. */ -import styled, { css } from 'styled-components'; +import styled from 'styled-components'; +import { gutterTimeline } from '../../../common/lib/helpers'; export const WhitePageWrapper = styled.div` - ${({ theme }) => css` - background-color: ${theme.eui.euiColorEmptyShade}; - border-top: ${theme.eui.euiBorderThin}; - height: 100%; - min-height: 100vh; - `} + background-color: ${({ theme }) => theme.eui.euiColorEmptyShade}; + border-top: ${({ theme }) => theme.eui.euiBorderThin}; + height: 100%; + min-height: 100vh; `; export const SectionWrapper = styled.div` @@ -20,3 +19,8 @@ export const SectionWrapper = styled.div` margin: 0 auto; max-width: 1175px; `; + +export const HeaderWrapper = styled.div` + padding: ${({ theme }) => `${theme.eui.paddingSizes.l} ${gutterTimeline} 0 + ${theme.eui.paddingSizes.l}`}; +`; diff --git a/x-pack/plugins/siem/public/cases/pages/case_details.tsx b/x-pack/plugins/siem/public/cases/pages/case_details.tsx index 5ea5e52951592..5dfe12179b990 100644 --- a/x-pack/plugins/siem/public/cases/pages/case_details.tsx +++ b/x-pack/plugins/siem/public/cases/pages/case_details.tsx @@ -7,6 +7,7 @@ import React from 'react'; import { useParams, Redirect } from 'react-router-dom'; +import { WrapperPage } from '../../common/components/wrapper_page'; import { useGetUrlSearch } from '../../common/components/navigation/use_get_url_search'; import { useGetUserSavedObjectPermissions } from '../../common/lib/kibana'; import { SpyRoute } from '../../common/utils/route/spy_routes'; @@ -26,10 +27,15 @@ export const CaseDetailsPage = React.memo(() => { return caseId != null ? ( <> - {userPermissions != null && !userPermissions?.crud && userPermissions?.read && ( - - )} - + + {userPermissions != null && !userPermissions?.crud && userPermissions?.read && ( + + )} + + ) : null; diff --git a/x-pack/plugins/siem/public/cases/pages/configure_cases.tsx b/x-pack/plugins/siem/public/cases/pages/configure_cases.tsx index bea3a9fb110ab..f70ff859e8e7d 100644 --- a/x-pack/plugins/siem/public/cases/pages/configure_cases.tsx +++ b/x-pack/plugins/siem/public/cases/pages/configure_cases.tsx @@ -6,6 +6,7 @@ import React, { useMemo } from 'react'; import { Redirect } from 'react-router-dom'; +import styled from 'styled-components'; import { getCaseUrl } from '../../common/components/link_to'; import { useGetUrlSearch } from '../../common/components/navigation/use_get_url_search'; @@ -18,12 +19,6 @@ import { ConfigureCases } from '../components/configure_cases'; import { WhitePageWrapper, SectionWrapper } from '../components/wrappers'; import * as i18n from './translations'; -const wrapperPageStyle: Record = { - paddingLeft: '0', - paddingRight: '0', - paddingBottom: '0', -}; - const ConfigureCasesPageComponent: React.FC = () => { const userPermissions = useGetUserSavedObjectPermissions(); const search = useGetUrlSearch(navTabs.case); @@ -40,11 +35,17 @@ const ConfigureCasesPageComponent: React.FC = () => { return ; } + const HeaderWrapper = styled.div` + padding-top: ${({ theme }) => theme.eui.paddingSizes.l}; + `; + return ( <> - + - + + + diff --git a/x-pack/plugins/siem/public/common/components/wrapper_page/index.tsx b/x-pack/plugins/siem/public/common/components/wrapper_page/index.tsx index bac0357def942..049d18e59d8be 100644 --- a/x-pack/plugins/siem/public/common/components/wrapper_page/index.tsx +++ b/x-pack/plugins/siem/public/common/components/wrapper_page/index.tsx @@ -6,26 +6,26 @@ import classNames from 'classnames'; import React from 'react'; -import styled, { css } from 'styled-components'; +import styled from 'styled-components'; import { gutterTimeline } from '../../lib/helpers'; import { AppGlobalStyle } from '../page/index'; -const Wrapper = styled.div` - ${({ theme }) => css` - padding: ${theme.eui.paddingSizes.l} ${gutterTimeline} ${theme.eui.paddingSizes.l} - ${theme.eui.paddingSizes.l}; - - &.siemWrapperPage--restrictWidthDefault, - &.siemWrapperPage--restrictWidthCustom { - box-sizing: content-box; - margin: 0 auto; - } +const Wrapper = styled.div<{ noPadding?: boolean }>` + padding: ${props => + props.noPadding + ? '0' + : `${props.theme.eui.paddingSizes.l} ${gutterTimeline} ${props.theme.eui.paddingSizes.l} + ${props.theme.eui.paddingSizes.l}`}; + &.siemWrapperPage--restrictWidthDefault, + &.siemWrapperPage--restrictWidthCustom { + box-sizing: content-box; + margin: 0 auto; + } - &.siemWrapperPage--restrictWidthDefault { - max-width: 1000px; - } - `} + &.siemWrapperPage--restrictWidthDefault { + max-width: 1000px; + } `; Wrapper.displayName = 'Wrapper'; @@ -35,6 +35,7 @@ interface WrapperPageProps { className?: string; restrictWidth?: boolean | number | string; style?: Record; + noPadding?: boolean; } const WrapperPageComponent: React.FC = ({ @@ -42,6 +43,7 @@ const WrapperPageComponent: React.FC = ({ className, restrictWidth, style, + noPadding, }) => { const classes = classNames(className, { siemWrapperPage: true, @@ -58,7 +60,7 @@ const WrapperPageComponent: React.FC = ({ } return ( - + {children}