Fix major mobile issues with security overview (#122770)

Makes mobile view for the security overview work.
elastic · Jan 18, 2022 · a2c2adf · a2c2adf
1 parent e39faea
commit a2c2adf
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 37 deletions.
diff --git a/x-pack/plugins/security_solution/public/overview/components/sidebar/sidebar.tsx b/x-pack/plugins/security_solution/public/overview/components/sidebar/sidebar.tsx
@@ -7,7 +7,6 @@
 
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import React, { useMemo } from 'react';
-import styled from 'styled-components';
 
 import { ENABLE_NEWS_FEED_SETTING, NEWS_FEED_URL_SETTING } from '../../../../common/constants';
 import { Filters as RecentTimelinesFilters } from '../recent_timelines/filters';
@@ -20,19 +19,13 @@ import * as i18n from '../../pages/translations';
 import { RecentCases } from '../recent_cases';
 import { useGetUserCasesPermissions } from '../../../common/lib/kibana';
 
-const SidebarFlexGroup = styled(EuiFlexGroup)`
-  width: 305px;
-`;
-
 const SidebarSpacerComponent = () => (
   <EuiFlexItem grow={false}>
     <EuiSpacer size="xxl" />
   </EuiFlexItem>
 );
 
 SidebarSpacerComponent.displayName = 'SidebarSpacerComponent';
-const Spacer = React.memo(SidebarSpacerComponent);
-
 export const Sidebar = React.memo<{
   recentTimelinesFilterBy: RecentTimelinesFilterMode;
   setRecentTimelinesFilterBy: (filterBy: RecentTimelinesFilterMode) => void;
@@ -51,31 +44,25 @@ export const Sidebar = React.memo<{
   const hasCasesReadPermissions = useGetUserCasesPermissions()?.read;
 
   return (
-    <SidebarFlexGroup direction="column" gutterSize="none">
+    <EuiFlexGroup direction="column" responsive={false} gutterSize="l">
       {hasCasesReadPermissions && (
-        <>
-          <EuiFlexItem grow={false}>
-            <RecentCases />
-          </EuiFlexItem>
-
-          <Spacer />
-        </>
+        <EuiFlexItem grow={false}>
+          <RecentCases />
+        </EuiFlexItem>
       )}
 
       <EuiFlexItem grow={false}>
         <SidebarHeader title={i18n.RECENT_TIMELINES}>{recentTimelinesFilters}</SidebarHeader>
         <StatefulRecentTimelines filterBy={recentTimelinesFilterBy} />
       </EuiFlexItem>
 
-      <Spacer />
-
       <EuiFlexItem grow={false}>
         <StatefulNewsFeed
           enableNewsFeedSetting={ENABLE_NEWS_FEED_SETTING}
           newsFeedSetting={NEWS_FEED_URL_SETTING}
         />
       </EuiFlexItem>
-    </SidebarFlexGroup>
+    </EuiFlexGroup>
   );
 });
 

diff --git a/x-pack/plugins/security_solution/public/overview/pages/overview.tsx b/x-pack/plugins/security_solution/public/overview/pages/overview.tsx
@@ -5,9 +5,8 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiShowFor } from '@elastic/eui';
 import React, { useCallback, useState, useMemo } from 'react';
-import styled from 'styled-components';
 
 import { AlertsByCategory } from '../components/alerts_by_category';
 import { FiltersGlobal } from '../../common/components/filters_global';
@@ -37,14 +36,6 @@ import { RiskyHostLinks } from '../components/overview_risky_host_links';
 import { useAlertsPrivileges } from '../../detections/containers/detection_engine/alerts/use_alerts_privileges';
 import { useIsExperimentalFeatureEnabled } from '../../common/hooks/use_experimental_features';
 
-const SidebarFlexItem = styled(EuiFlexItem)`
-  margin-right: 24px;
-`;
-
-const StyledSecuritySolutionPageWrapper = styled(SecuritySolutionPageWrapper)`
-  overflow-x: auto;
-`;
-
 const OverviewComponent = () => {
   const getGlobalFiltersQuerySelector = useMemo(
     () => inputsSelectors.globalFiltersQuerySelector(),
@@ -91,20 +82,22 @@ const OverviewComponent = () => {
             <SiemSearchBar id="global" indexPattern={indexPattern} />
           </FiltersGlobal>
 
-          <StyledSecuritySolutionPageWrapper>
+          <SecuritySolutionPageWrapper>
             {!dismissMessage && !metadataIndexExists && canAccessFleet && (
               <>
                 <EndpointNotice onDismiss={dismissEndpointNotice} />
                 <EuiSpacer size="l" />
               </>
             )}
-            <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween">
-              <SidebarFlexItem grow={false}>
-                <StatefulSidebar />
-              </SidebarFlexItem>
-
-              <EuiFlexItem grow={true}>
-                <EuiFlexGroup direction="column" gutterSize="none">
+            <EuiFlexGroup>
+              <EuiShowFor sizes={['xl']}>
+                <EuiFlexItem grow={1}>
+                  <StatefulSidebar />
+                </EuiFlexItem>
+              </EuiShowFor>
+
+              <EuiFlexItem grow={3}>
+                <EuiFlexGroup direction="column" responsive={false} gutterSize="none">
                   {hasIndexRead && hasKibanaREAD && (
                     <>
                       <EuiFlexItem grow={false}>
@@ -180,7 +173,7 @@ const OverviewComponent = () => {
                 </EuiFlexGroup>
               </EuiFlexItem>
             </EuiFlexGroup>
-          </StyledSecuritySolutionPageWrapper>
+          </SecuritySolutionPageWrapper>
         </>
       ) : (
         <OverviewEmpty />