[SIEM][CASE] Improve layout (#66232)

elastic · May 15, 2020 · a3ce65e · a3ce65e
1 parent 2fe3e4e
commit a3ce65e
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 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
@@ -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<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
@@ -272,7 +280,7 @@ export const CaseComponent = React.memo<CaseProps>(
               {...caseStatusData}
             />
           </HeaderPage>
-        </MyWrapper>
+        </HeaderWrapper>
         <WhitePageWrapper>
           <MyWrapper>
             {!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
@@ -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 '../../../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`
   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}`};
+`;
diff --git 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 && (
-        <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;

diff --git 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<string, string> = {
-  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 <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} />

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
@@ -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,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,
@@ -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>