[RAC] [Cases] Fix responsiveness in Cases UI (elastic#103766)

stephmilovic · Jun 30, 2021 · 305df3a · 305df3a
1 parent 9414262
commit 305df3a
Show file tree

Hide file tree

Showing 20 changed files with 226 additions and 161 deletions.
diff --git a/x-pack/plugins/cases/public/components/all_cases/count.tsx b/x-pack/plugins/cases/public/components/all_cases/count.tsx
@@ -28,7 +28,7 @@ export const Count: FunctionComponent<CountProps> = ({ refresh }) => {
     }
   }, [fetchCasesStatus, refresh]);
   return (
-    <EuiFlexGroup>
+    <EuiFlexGroup responsive={false}>
       <EuiFlexItem grow={false}>
         <Stats
           dataTestSubj="openStatsHeader"

diff --git a/x-pack/plugins/cases/public/components/all_cases/header.tsx b/x-pack/plugins/cases/public/components/all_cases/header.tsx
@@ -8,7 +8,7 @@
 import React, { FunctionComponent } from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import styled, { css } from 'styled-components';
-import { CaseHeaderPage } from '../case_header_page';
+import { HeaderPage } from '../header_page';
 import * as i18n from './translations';
 import { Count } from './count';
 import { CasesNavigation } from '../links';
@@ -32,6 +32,11 @@ const FlexItemDivider = styled(EuiFlexItem)`
       border-right: ${theme.eui.euiBorderThin};
       padding-right: ${theme.eui.euiSize};
       margin-right: ${theme.eui.euiSize};
+      @media only screen and (max-width: ${theme.eui.euiBreakpoints.l}) {
+        padding-right: 0;
+        border-right: 0;
+        margin-right: 0;
+      }
     }
   `}
 `;
@@ -44,21 +49,15 @@ export const CasesTableHeader: FunctionComponent<Props> = ({
   showTitle = true,
   userCanCrud,
 }) => (
-  <CaseHeaderPage title={showTitle ? i18n.PAGE_TITLE : ''}>
-    <EuiFlexGroup
-      alignItems="center"
-      gutterSize="m"
-      responsive={false}
-      wrap={true}
-      data-test-subj="all-cases-header"
-    >
+  <HeaderPage title={showTitle ? i18n.PAGE_TITLE : ''}>
+    <EuiFlexGroup alignItems="center" gutterSize="m" wrap={true} data-test-subj="all-cases-header">
       {userCanCrud ? (
         <>
-          <FlexItemDivider grow={false}>
+          <FlexItemDivider>
             <Count refresh={refresh} />
           </FlexItemDivider>
 
-          <EuiFlexItem grow={false}>
+          <EuiFlexItem>
             <NavButtons
               actionsErrors={actionsErrors}
               configureCasesNavigation={configureCasesNavigation}
@@ -74,5 +73,5 @@ export const CasesTableHeader: FunctionComponent<Props> = ({
         </EuiFlexItem>
       )}
     </EuiFlexGroup>
-  </CaseHeaderPage>
+  </HeaderPage>
 );
diff --git a/x-pack/plugins/cases/public/components/all_cases/nav_buttons.tsx b/x-pack/plugins/cases/public/components/all_cases/nav_buttons.tsx
@@ -8,11 +8,22 @@
 import React, { FunctionComponent } from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { isEmpty } from 'lodash/fp';
+import styled, { css } from 'styled-components';
 import { ConfigureCaseButton } from '../configure_cases/button';
 import * as i18n from './translations';
 import { CasesNavigation, LinkButton } from '../links';
 import { ErrorMessage } from '../use_push_to_service/callout/types';
 
+const ButtonFlexGroup = styled(EuiFlexGroup)`
+  ${({ theme }) => css`
+    & {
+      @media only screen and (max-width: ${theme.eui.euiBreakpoints.s}) {
+        flex-direction: column;
+      }
+    }
+  `}
+`;
+
 interface OwnProps {
   actionsErrors: ErrorMessage[];
   configureCasesNavigation: CasesNavigation;
@@ -26,7 +37,7 @@ export const NavButtons: FunctionComponent<Props> = ({
   configureCasesNavigation,
   createCaseNavigation,
 }) => (
-  <EuiFlexGroup>
+  <ButtonFlexGroup responsive={false}>
     <EuiFlexItem grow={false}>
       <ConfigureCaseButton
         configureCasesNavigation={configureCasesNavigation}
@@ -37,7 +48,7 @@ export const NavButtons: FunctionComponent<Props> = ({
         titleTooltip={!isEmpty(actionsErrors) ? actionsErrors[0].title : ''}
       />
     </EuiFlexItem>
-    <EuiFlexItem grow={false}>
+    <EuiFlexItem>
       <LinkButton
         fill
         onClick={createCaseNavigation.onClick}
@@ -48,5 +59,5 @@ export const NavButtons: FunctionComponent<Props> = ({
         {i18n.CREATE_TITLE}
       </LinkButton>
     </EuiFlexItem>
-  </EuiFlexGroup>
+  </ButtonFlexGroup>
 );
diff --git a/x-pack/plugins/cases/public/components/all_cases/status_filter.tsx b/x-pack/plugins/cases/public/components/all_cases/status_filter.tsx
@@ -29,9 +29,11 @@ const StatusFilterComponent: React.FC<Props> = ({
     .map((status) => ({
       value: status,
       inputDisplay: (
-        <EuiFlexGroup gutterSize="xs" alignItems={'center'}>
+        <EuiFlexGroup gutterSize="xs" alignItems={'center'} responsive={false}>
           <EuiFlexItem grow={false}>
-            <Status type={status} />
+            <span>
+              <Status type={status} />
+            </span>
           </EuiFlexItem>
           {status !== StatusAll && <EuiFlexItem grow={false}>{` (${stats[status]})`}</EuiFlexItem>}
         </EuiFlexGroup>

diff --git a/x-pack/plugins/cases/public/components/case_action_bar/index.tsx b/x-pack/plugins/cases/public/components/case_action_bar/index.tsx
@@ -32,6 +32,10 @@ const MyDescriptionList = styled(EuiDescriptionList)`
     & {
       padding-right: ${theme.eui.euiSizeL};
       border-right: ${theme.eui.euiBorderThin};
+      @media only screen and (max-width: ${theme.eui.euiBreakpoints.m}) {
+        padding-right: 0;
+        border-right: 0;
+      }
     }
   `}
 `;
@@ -80,9 +84,9 @@ const CaseActionBarComponent: React.FC<CaseActionBarProps> = ({
     <EuiFlexGroup gutterSize="l" justifyContent="flexEnd" data-test-subj="case-action-bar-wrapper">
       <EuiFlexItem grow={false}>
         <MyDescriptionList compressed>
-          <EuiFlexGroup>
+          <EuiFlexGroup responsive={false} justifyContent="spaceBetween">
             {caseData.type !== CaseType.collection && (
-              <EuiFlexItem grow={false} data-test-subj="case-view-status">
+              <EuiFlexItem data-test-subj="case-view-status">
                 <EuiDescriptionListTitle>{i18n.STATUS}</EuiDescriptionListTitle>
                 <EuiDescriptionListDescription>
                   <StatusContextMenu
@@ -107,11 +111,21 @@ const CaseActionBarComponent: React.FC<CaseActionBarProps> = ({
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <EuiDescriptionList compressed>
-          <EuiFlexGroup gutterSize="l" alignItems="center">
+          <EuiFlexGroup
+            gutterSize="l"
+            alignItems="center"
+            responsive={false}
+            justifyContent="spaceBetween"
+          >
             {userCanCrud && !disableAlerting && (
-              <EuiFlexItem>
+              <EuiFlexItem grow={false}>
                 <EuiDescriptionListTitle>
-                  <EuiFlexGroup component="span" alignItems="center" gutterSize="xs">
+                  <EuiFlexGroup
+                    component="span"
+                    alignItems="center"
+                    gutterSize="xs"
+                    responsive={false}
+                  >
                     <EuiFlexItem grow={false}>
                       <span>{i18n.SYNC_ALERTS}</span>
                     </EuiFlexItem>
@@ -129,10 +143,17 @@ const CaseActionBarComponent: React.FC<CaseActionBarProps> = ({
                 </EuiDescriptionListDescription>
               </EuiFlexItem>
             )}
-            <EuiFlexItem>
-              <EuiButtonEmpty data-test-subj="case-refresh" iconType="refresh" onClick={onRefresh}>
-                {i18n.CASE_REFRESH}
-              </EuiButtonEmpty>
+            <EuiFlexItem grow={false}>
+              <span>
+                <EuiButtonEmpty
+                  data-test-subj="case-refresh"
+                  flush="left"
+                  iconType="refresh"
+                  onClick={onRefresh}
+                >
+                  {i18n.CASE_REFRESH}
+                </EuiButtonEmpty>
+              </span>
             </EuiFlexItem>
             {userCanCrud && (
               <EuiFlexItem grow={false} data-test-subj="case-view-actions">

diff --git a/x-pack/plugins/cases/public/components/case_header_page/index.tsx b/x-pack/plugins/cases/public/components/case_header_page/index.tsx
diff --git a/x-pack/plugins/cases/public/components/case_view/index.tsx b/x-pack/plugins/cases/public/components/case_view/index.tsx
@@ -26,7 +26,7 @@ import { UserActionTree } from '../user_action_tree';
 import { UserList } from '../user_list';
 import { useUpdateCase } from '../../containers/use_update_case';
 import { getTypedPayload } from '../../containers/utils';
-import { WhitePageWrapper, HeaderWrapper } from '../wrappers';
+import { ContentWrapper, WhitePageWrapper, HeaderWrapper } from '../wrappers';
 import { CaseActionBar } from '../case_action_bar';
 import { useGetCaseUserActions } from '../../containers/use_get_case_user_actions';
 import { EditConnector } from '../edit_connector';
@@ -41,8 +41,6 @@ import { OwnerProvider } from '../owner_context';
 import { getConnectorById } from '../utils';
 import { DoesNotExist } from './does_not_exist';
 
-const gutterTimeline = '70px'; // seems to be a timeline reference from the original file
-
 export interface CaseViewComponentProps {
   allCasesNavigation: CasesNavigation;
   caseDetailsNavigation: CasesNavigation;
@@ -75,11 +73,6 @@ export interface OnUpdateFields {
   onError?: () => void;
 }
 
-const MyWrapper = styled.div`
-  padding: ${({ theme }) =>
-    `${theme.eui.paddingSizes.l} ${theme.eui.paddingSizes.l} ${gutterTimeline} ${theme.eui.paddingSizes.l}`};
-`;
-
 const MyEuiFlexGroup = styled(EuiFlexGroup)`
   height: 100%;
 `;
@@ -404,7 +397,7 @@ export const CaseComponent = React.memo<CaseComponentProps>(
           </HeaderPage>
         </HeaderWrapper>
         <WhitePageWrapper>
-          <MyWrapper>
+          <ContentWrapper>
             <EuiFlexGroup>
               <EuiFlexItem grow={6}>
                 {initLoadingData && (
@@ -491,7 +484,7 @@ export const CaseComponent = React.memo<CaseComponentProps>(
                 />
               </EuiFlexItem>
             </EuiFlexGroup>
-          </MyWrapper>
+          </ContentWrapper>
         </WhitePageWrapper>
         {timelineUi?.renderTimelineDetailsPanel ? timelineUi.renderTimelineDetailsPanel() : null}
       </>

diff --git a/x-pack/plugins/cases/public/components/edit_connector/index.tsx b/x-pack/plugins/cases/public/components/edit_connector/index.tsx
@@ -68,6 +68,9 @@ const DisappearingFlexItem = styled(EuiFlexItem)`
     $isHidden &&
     `
       margin: 0 !important;
+      & .euiFlexItem {
+        margin: 0 !important;
+      }
     `}
 `;
 
@@ -244,7 +247,12 @@ export const EditConnector = React.memo(
 
     return (
       <EuiText>
-        <MyFlexGroup alignItems="center" gutterSize="xs" justifyContent="spaceBetween">
+        <MyFlexGroup
+          alignItems="center"
+          gutterSize="xs"
+          justifyContent="spaceBetween"
+          responsive={false}
+        >
           <EuiFlexItem grow={false}>
             <h4>{i18n.CONNECTORS}</h4>
           </EuiFlexItem>
@@ -304,7 +312,7 @@ export const EditConnector = React.memo(
           </EuiFlexItem>
           {editConnector && (
             <EuiFlexItem>
-              <EuiFlexGroup gutterSize="s" alignItems="center">
+              <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
                 <EuiFlexItem grow={false}>
                   <EuiButton
                     color="secondary"

diff --git a/...ck/plugins/cases/public/components/header_page/__snapshots__/editable_title.test.tsx.snap b/...ck/plugins/cases/public/components/header_page/__snapshots__/editable_title.test.tsx.snap
diff --git a/x-pack/plugins/cases/public/components/header_page/editable_title.tsx b/x-pack/plugins/cases/public/components/header_page/editable_title.tsx
@@ -100,7 +100,7 @@ const EditableTitleComponent: React.FC<EditableTitleProps> = ({
       <EuiFlexItem />
     </EuiFlexGroup>
   ) : (
-    <EuiFlexGroup alignItems="center" gutterSize="none">
+    <EuiFlexGroup alignItems="center" gutterSize="none" responsive={false}>
       <EuiFlexItem grow={false}>
         <Title title={title} />
       </EuiFlexItem>