From dac4fc044198b590c28bbbf08c7b4233296fd7b9 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Tue, 12 May 2020 16:22:22 +0300 Subject: [PATCH 1/5] Improve layout --- .../cases/components/case_view/index.tsx | 61 +++++++++---------- .../siem/public/cases/pages/case_details.tsx | 14 +++-- 2 files changed, 40 insertions(+), 35 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..7a0dee03a8a38 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 @@ -13,7 +13,7 @@ import { EuiHorizontalRule, } from '@elastic/eui'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; import * as i18n from './translations'; import { Case } from '../../containers/types'; @@ -26,7 +26,6 @@ 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 { useBasePath } from '../../../common/lib/kibana'; @@ -43,8 +42,10 @@ interface Props { userCanCrud: boolean; } -const MyWrapper = styled(WrapperPage)` - padding-bottom: 0; +const MyWrapper = styled.div` + ${({ theme }) => css` + padding-top: ${theme.eui.paddingSizes.l}; + `} `; const MyEuiFlexGroup = styled(EuiFlexGroup)` @@ -244,35 +245,33 @@ export const CaseComponent = React.memo( return ( <> - - - } - title={caseData.title} - > - - - + } + title={caseData.title} + > + + {!initLoadingData && pushCallouts != null && pushCallouts} 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..b485e651f5b4f 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; From c65d0bb6251c5f03ad66d177817396cb6ca79655 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Thu, 14 May 2020 10:55:54 +0300 Subject: [PATCH 2/5] PR improvements --- .../cases/components/case_view/index.tsx | 23 ++++++++++++------- 1 file changed, 15 insertions(+), 8 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 7a0dee03a8a38..227fa16c2bb6a 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 @@ -43,9 +43,11 @@ interface Props { } const MyWrapper = styled.div` - ${({ theme }) => css` - padding-top: ${theme.eui.paddingSizes.l}; - `} + padding: ${({ + theme, + }) => `${theme.eui.paddingSizes.l} ${gutterTimeline} ${theme.eui.paddingSizes.l} + ${theme.eui.paddingSizes.l}`}; +`; `; const MyEuiFlexGroup = styled(EuiFlexGroup)` @@ -243,14 +245,19 @@ export const CaseComponent = React.memo( } }, [initLoadingData, isLoadingUserActions]); + const backOptions = useMemo( + () => ({ + href: getCaseUrl(search), + text: i18n.BACK_TO_ALL, + dataTestSubj: 'backToCases', + }), + [search] + ); + return ( <> Date: Thu, 14 May 2020 16:35:02 +0300 Subject: [PATCH 3/5] Fix layout --- .../cases/components/case_view/index.tsx | 51 +++++++++++-------- .../siem/public/cases/pages/case_details.tsx | 8 ++- 2 files changed, 36 insertions(+), 23 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 227fa16c2bb6a..1579220444a37 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 @@ -13,11 +13,12 @@ import { EuiHorizontalRule, } from '@elastic/eui'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; -import styled, { css } from 'styled-components'; +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'; @@ -48,6 +49,10 @@ const MyWrapper = styled.div` }) => `${theme.eui.paddingSizes.l} ${gutterTimeline} ${theme.eui.paddingSizes.l} ${theme.eui.paddingSizes.l}`}; `; + +const MyHeaderWrapper = styled.div` + padding: ${({ theme }) => `0 ${gutterTimeline} ${theme.eui.paddingSizes.l} + ${theme.eui.paddingSizes.l}`}; `; const MyEuiFlexGroup = styled(EuiFlexGroup)` @@ -256,29 +261,31 @@ export const CaseComponent = React.memo( return ( <> - + + } + title={caseData.title} + > + - } - title={caseData.title} - > - - + + {!initLoadingData && pushCallouts != null && pushCallouts} 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 b485e651f5b4f..5f8f0a4e74a9b 100644 --- a/x-pack/plugins/siem/public/cases/pages/case_details.tsx +++ b/x-pack/plugins/siem/public/cases/pages/case_details.tsx @@ -21,13 +21,19 @@ export const CaseDetailsPage = React.memo(() => { const { detailName: caseId } = useParams(); const search = useGetUrlSearch(navTabs.case); + const wrapperPageStyle: Record = { + paddingLeft: '0', + paddingRight: '0', + paddingBottom: '0', + }; + if (userPermissions != null && !userPermissions.read) { return ; } return caseId != null ? ( <> - + {userPermissions != null && !userPermissions?.crud && userPermissions?.read && ( Date: Thu, 14 May 2020 18:35:19 +0300 Subject: [PATCH 4/5] Improve wrappers --- .../cases/components/case_view/index.tsx | 11 ++---- .../cases/components/wrappers/index.tsx | 18 ++++++---- .../siem/public/cases/pages/case_details.tsx | 8 +---- .../public/cases/pages/configure_cases.tsx | 14 +++----- .../common/components/wrapper_page/index.tsx | 34 ++++++++++--------- 5 files changed, 38 insertions(+), 47 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 1579220444a37..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 @@ -28,7 +28,7 @@ import { UserList } from '../user_list'; import { useUpdateCase } from '../../containers/use_update_case'; import { useGetUrlSearch } from '../../../common/components/navigation/use_get_url_search'; 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'; @@ -50,11 +50,6 @@ const MyWrapper = styled.div` ${theme.eui.paddingSizes.l}`}; `; -const MyHeaderWrapper = styled.div` - padding: ${({ theme }) => `0 ${gutterTimeline} ${theme.eui.paddingSizes.l} - ${theme.eui.paddingSizes.l}`}; -`; - const MyEuiFlexGroup = styled(EuiFlexGroup)` height: 100%; `; @@ -261,7 +256,7 @@ export const CaseComponent = React.memo( 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 5f8f0a4e74a9b..5dfe12179b990 100644 --- a/x-pack/plugins/siem/public/cases/pages/case_details.tsx +++ b/x-pack/plugins/siem/public/cases/pages/case_details.tsx @@ -21,19 +21,13 @@ export const CaseDetailsPage = React.memo(() => { const { detailName: caseId } = useParams(); const search = useGetUrlSearch(navTabs.case); - const wrapperPageStyle: Record = { - paddingLeft: '0', - paddingRight: '0', - paddingBottom: '0', - }; - if (userPermissions != null && !userPermissions.read) { return ; } return caseId != null ? ( <> - + {userPermissions != null && !userPermissions?.crud && userPermissions?.read && ( = { - paddingLeft: '0', - paddingRight: '0', - paddingBottom: '0', -}; - const ConfigureCasesPageComponent: React.FC = () => { const userPermissions = useGetUserSavedObjectPermissions(); const search = useGetUrlSearch(navTabs.case); @@ -42,9 +36,11 @@ const ConfigureCasesPageComponent: React.FC = () => { 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} From 1f6b2845c96f011dfd98aa3f187ee39e837d47f4 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Fri, 15 May 2020 11:17:04 +0300 Subject: [PATCH 5/5] Fix configuration page header --- x-pack/plugins/siem/public/cases/pages/configure_cases.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) 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 e5c85d8bb1d18..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'; @@ -15,7 +16,7 @@ import { SpyRoute } from '../../common/utils/route/spy_routes'; import { navTabs } from '../../app/home/home_navigations'; import { CaseHeaderPage } from '../components/case_header_page'; import { ConfigureCases } from '../components/configure_cases'; -import { WhitePageWrapper, SectionWrapper, HeaderWrapper } from '../components/wrappers'; +import { WhitePageWrapper, SectionWrapper } from '../components/wrappers'; import * as i18n from './translations'; const ConfigureCasesPageComponent: React.FC = () => { @@ -34,6 +35,10 @@ const ConfigureCasesPageComponent: React.FC = () => { return ; } + const HeaderWrapper = styled.div` + padding-top: ${({ theme }) => theme.eui.paddingSizes.l}; + `; + return ( <>