Skip to content

Commit

Permalink
[SIEM][CASE] Improve layout (elastic#66232)
Browse files Browse the repository at this point in the history
# Conflicts:
#	x-pack/plugins/siem/public/cases/components/case_view/index.tsx
#	x-pack/plugins/siem/public/cases/pages/case_details.tsx
#	x-pack/plugins/siem/public/cases/pages/configure_cases.tsx
  • Loading branch information
cnasikas committed May 16, 2020
1 parent 30b0095 commit 828f6b3
Show file tree
Hide file tree
Showing 5 changed files with 67 additions and 46 deletions.
34 changes: 18 additions & 16 deletions x-pack/plugins/siem/public/components/wrapper_page/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -35,13 +35,15 @@ interface WrapperPageProps {
className?: string;
restrictWidth?: boolean | number | string;
style?: Record<string, string>;
noPadding?: boolean;
}

const WrapperPageComponent: React.FC<WrapperPageProps> = ({
children,
className,
restrictWidth,
style,
noPadding,
}) => {
const classes = classNames(className, {
siemWrapperPage: true,
Expand All @@ -58,7 +60,7 @@ const WrapperPageComponent: React.FC<WrapperPageProps> = ({
}

return (
<Wrapper className={classes} style={customStyle || style}>
<Wrapper className={classes} style={customStyle || style} noPadding={noPadding}>
{children}
<AppGlobalStyle />
</Wrapper>
Expand Down
14 changes: 10 additions & 4 deletions x-pack/plugins/siem/public/pages/case/case_details.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -26,10 +27,15 @@ export const CaseDetailsPage = React.memo(() => {

return caseId != null ? (
<>
{userPermissions != null && !userPermissions?.crud && userPermissions?.read && (
<CaseCallOut title={savedObjectReadOnly.title} message={savedObjectReadOnly.description} />
)}
<CaseView caseId={caseId} userCanCrud={userPermissions?.crud ?? false} />
<WrapperPage noPadding>
{userPermissions != null && !userPermissions?.crud && userPermissions?.read && (
<CaseCallOut
title={savedObjectReadOnly.title}
message={savedObjectReadOnly.description}
/>
)}
<CaseView caseId={caseId} userCanCrud={userPermissions?.crud ?? false} />
</WrapperPage>
<SpyRoute />
</>
) : null;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';
Expand All @@ -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)`
Expand Down Expand Up @@ -242,15 +245,20 @@ export const CaseComponent = React.memo<CaseProps>(
}
}, [initLoadingData, isLoadingUserActions]);

const backOptions = useMemo(
() => ({
href: getCaseUrl(search),
text: i18n.BACK_TO_ALL,
dataTestSubj: 'backToCases',
}),
[search]
);

return (
<>
<MyWrapper>
<HeaderWrapper>
<HeaderPage
backOptions={{
href: getCaseUrl(search),
text: i18n.BACK_TO_ALL,
dataTestSubj: 'backToCases',
}}
backOptions={backOptions}
data-test-subj="case-view-title"
titleNode={
<EditableTitle
Expand All @@ -272,7 +280,7 @@ export const CaseComponent = React.memo<CaseProps>(
{...caseStatusData}
/>
</HeaderPage>
</MyWrapper>
</HeaderWrapper>
<WhitePageWrapper>
<MyWrapper>
{!initLoadingData && pushCallouts != null && pushCallouts}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,23 @@
* 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`
box-sizing: content-box;
margin: 0 auto;
max-width: 1175px;
`;

export const HeaderWrapper = styled.div`
padding: ${({ theme }) => `${theme.eui.paddingSizes.l} ${gutterTimeline} 0
${theme.eui.paddingSizes.l}`};
`;
17 changes: 9 additions & 8 deletions x-pack/plugins/siem/public/pages/case/configure_cases.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -18,12 +19,6 @@ import { ConfigureCases } from './components/configure_cases';
import { WhitePageWrapper, SectionWrapper } from './components/wrappers';
import * as i18n from './translations';

const wrapperPageStyle: Record<string, string> = {
paddingLeft: '0',
paddingRight: '0',
paddingBottom: '0',
};

const ConfigureCasesPageComponent: React.FC = () => {
const userPermissions = useGetUserSavedObjectPermissions();
const search = useGetUrlSearch(navTabs.case);
Expand All @@ -40,11 +35,17 @@ const ConfigureCasesPageComponent: React.FC = () => {
return <Redirect to={getCaseUrl(search)} />;
}

const HeaderWrapper = styled.div`
padding-top: ${({ theme }) => theme.eui.paddingSizes.l};
`;

return (
<>
<WrapperPage style={wrapperPageStyle}>
<WrapperPage noPadding>
<SectionWrapper>
<CaseHeaderPage title={i18n.CONFIGURE_CASES_PAGE_TITLE} backOptions={backOptions} />
<HeaderWrapper>
<CaseHeaderPage title={i18n.CONFIGURE_CASES_PAGE_TITLE} backOptions={backOptions} />
</HeaderWrapper>
</SectionWrapper>
<WhitePageWrapper>
<ConfigureCases userCanCrud={userPermissions?.crud ?? false} />
Expand Down

0 comments on commit 828f6b3

Please sign in to comment.