From cbc13649bbba37c4263eab3dd667d1ac103f8205 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Sat, 16 May 2020 17:57:03 +0300 Subject: [PATCH] [7.8] [SIEM][CASE] Improve layout (#66232) (#66847) --- .../public/components/wrapper_page/index.tsx | 34 ++++++++++--------- .../siem/public/pages/case/case_details.tsx | 14 +++++--- .../pages/case/components/case_view/index.tsx | 30 ++++++++++------ .../pages/case/components/wrappers/index.tsx | 18 ++++++---- .../public/pages/case/configure_cases.tsx | 17 +++++----- 5 files changed, 67 insertions(+), 46 deletions(-) diff --git a/x-pack/plugins/siem/public/components/wrapper_page/index.tsx b/x-pack/plugins/siem/public/components/wrapper_page/index.tsx index bac0357def942..049d18e59d8be 100644 --- a/x-pack/plugins/siem/public/components/wrapper_page/index.tsx +++ b/x-pack/plugins/siem/public/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} diff --git a/x-pack/plugins/siem/public/pages/case/case_details.tsx b/x-pack/plugins/siem/public/pages/case/case_details.tsx index 4bb8afa7f8d42..a00c50b27b14c 100644 --- a/x-pack/plugins/siem/public/pages/case/case_details.tsx +++ b/x-pack/plugins/siem/public/pages/case/case_details.tsx @@ -7,6 +7,7 @@ import React from 'react'; import { useParams, Redirect } from 'react-router-dom'; +import { WrapperPage } from '../../components/wrapper_page'; import { useGetUrlSearch } from '../../components/navigation/use_get_url_search'; import { useGetUserSavedObjectPermissions } from '../../lib/kibana'; import { SpyRoute } from '../../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/pages/case/components/case_view/index.tsx b/x-pack/plugins/siem/public/pages/case/components/case_view/index.tsx index fed8ec8edbe8b..55e8b7e527a5d 100644 --- a/x-pack/plugins/siem/public/pages/case/components/case_view/index.tsx +++ b/x-pack/plugins/siem/public/pages/case/components/case_view/index.tsx @@ -18,6 +18,7 @@ import styled from 'styled-components'; import * as i18n from './translations'; import { Case } from '../../../../containers/case/types'; import { getCaseUrl } from '../../../../components/link_to'; +import { gutterTimeline } from '../../../../lib/helpers'; import { HeaderPage } from '../../../../components/header_page'; import { EditableTitle } from '../../../../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/case/use_update_case'; import { useGetUrlSearch } from '../../../../components/navigation/use_get_url_search'; -import { WrapperPage } from '../../../../components/wrapper_page'; import { getTypedPayload } from '../../../../containers/case/utils'; -import { WhitePageWrapper } from '../wrappers'; +import { WhitePageWrapper, HeaderWrapper } from '../wrappers'; import { useBasePath } from '../../../../lib/kibana'; import { CaseStatus } from '../case_status'; import { navTabs } from '../../../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/pages/case/components/wrappers/index.tsx b/x-pack/plugins/siem/public/pages/case/components/wrappers/index.tsx index 772d78f948b79..e4ee7122350b5 100644 --- a/x-pack/plugins/siem/public/pages/case/components/wrappers/index.tsx +++ b/x-pack/plugins/siem/public/pages/case/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 '../../../../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/pages/case/configure_cases.tsx b/x-pack/plugins/siem/public/pages/case/configure_cases.tsx index 7515efa0e1b7a..65b038105657f 100644 --- a/x-pack/plugins/siem/public/pages/case/configure_cases.tsx +++ b/x-pack/plugins/siem/public/pages/case/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 '../../components/link_to'; import { useGetUrlSearch } from '../../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 ( <> - + - + + +