Improve wrappers

elastic · May 14, 2020 · 0dd0ea4 · 0dd0ea4
1 parent 4c3e081
commit 0dd0ea4
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 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
@@ -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<CaseProps>(
 
     return (
       <>
-        <MyHeaderWrapper>
+        <HeaderWrapper>
           <HeaderPage
             backOptions={backOptions}
             data-test-subj="case-view-title"
@@ -285,7 +280,7 @@ export const CaseComponent = React.memo<CaseProps>(
               {...caseStatusData}
             />
           </HeaderPage>
-        </MyHeaderWrapper>
+        </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
@@ -21,19 +21,13 @@ export const CaseDetailsPage = React.memo(() => {
   const { detailName: caseId } = useParams();
   const search = useGetUrlSearch(navTabs.case);
 
-  const wrapperPageStyle: Record<string, string> = {
-    paddingLeft: '0',
-    paddingRight: '0',
-    paddingBottom: '0',
-  };
-
   if (userPermissions != null && !userPermissions.read) {
     return <Redirect to={getCaseUrl(search)} />;
   }
 
   return caseId != null ? (
     <>
-      <WrapperPage style={wrapperPageStyle}>
+      <WrapperPage noPadding>
         {userPermissions != null && !userPermissions?.crud && userPermissions?.read && (
           <CaseCallOut
             title={savedObjectReadOnly.title}

diff --git a/x-pack/plugins/siem/public/cases/pages/configure_cases.tsx b/x-pack/plugins/siem/public/cases/pages/configure_cases.tsx
@@ -15,15 +15,9 @@ 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 } from '../components/wrappers';
+import { WhitePageWrapper, SectionWrapper, HeaderWrapper } 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);
@@ -42,9 +36,11 @@ const ConfigureCasesPageComponent: React.FC = () => {
 
   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>