fix close session viewer button

elastic · May 9, 2022 · 33d9c0a · 33d9c0a
1 parent fb98f6e
commit 33d9c0a
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 8 deletions.
diff --git a/x-pack/plugins/security_solution/public/timelines/components/graph_overlay/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/graph_overlay/index.tsx
@@ -6,7 +6,13 @@
  */
 
 import React, { useMemo, useEffect, useRef, useLayoutEffect } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiLoadingSpinner } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiLoadingSpinner,
+  EuiSpacer,
+} from '@elastic/eui';
 import { euiThemeVars } from '@kbn/ui-theme';
 import { useDispatch } from 'react-redux';
 import styled, { css } from 'styled-components';
@@ -158,7 +164,10 @@ const GraphOverlayComponent: React.FC<GraphOverlayProps> = ({
     return (
       <OverlayContainer data-test-subj="overlayContainer" ref={sessionContainerRef}>
         <EuiFlexGroup alignItems="flexStart" gutterSize="none" direction="column">
+          <EuiHorizontalRule margin="none" />
           <EuiFlexItem grow={false}>{Navigation}</EuiFlexItem>
+          <EuiHorizontalRule margin="none" />
+          <EuiSpacer size="m" />
           <ScrollableFlexItem grow={2}>{SessionView}</ScrollableFlexItem>
         </EuiFlexGroup>
       </OverlayContainer>

diff --git a/...gins/security_solution/public/timelines/components/timeline/session_tab_content/index.tsx b/...gins/security_solution/public/timelines/components/timeline/session_tab_content/index.tsx
@@ -6,13 +6,15 @@
  */
 
 import React, { useState, useCallback } from 'react';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiSpacer } from '@elastic/eui';
 import styled from 'styled-components';
 import { TimelineId } from '../../../../../common/types/timeline';
 import { useSessionViewNavigation, useSessionView } from './use_session_view';
 
-const FlexItemWithMargin = styled(EuiFlexItem)`
+const MaxWidthFlexItem = styled(EuiFlexItem)`
   width: 100%;
+`;
+const SessionViewWrapper = styled.div`
   ${({ theme }) => `margin: 0 ${theme.eui.euiSizeM};`}
 `;
 
@@ -59,10 +61,13 @@ const SessionTabContent: React.FC<Props> = ({ timelineId }) => {
       ref={measuredRef}
       data-test-subj="timeline-session-content"
     >
-      <FlexItemWithMargin grow={false}>
+      <MaxWidthFlexItem grow={false}>
+        <EuiHorizontalRule margin="none" />
         {Navigation}
-        {SessionView}
-      </FlexItemWithMargin>
+        <EuiHorizontalRule margin="none" />
+        <EuiSpacer size="m" />
+        <SessionViewWrapper>{SessionView}</SessionViewWrapper>
+      </MaxWidthFlexItem>
       {shouldShowDetailsPanel && (
         <>
           <VerticalRule />

diff --git a/...ecurity_solution/public/timelines/components/timeline/session_tab_content/translations.ts b/...ecurity_solution/public/timelines/components/timeline/session_tab_content/translations.ts
@@ -17,6 +17,6 @@ export const CLOSE_ANALYZER = i18n.translate(
 export const CLOSE_SESSION = i18n.translate(
   'xpack.securitySolution.timeline.graphOverlay.closeSessionButton',
   {
-    defaultMessage: 'Close session',
+    defaultMessage: 'Close session viewer',
   }
 );
diff --git a/...lution/public/timelines/components/timeline/session_tab_content/use_session_view.test.tsx b/...lution/public/timelines/components/timeline/session_tab_content/use_session_view.test.tsx
@@ -145,7 +145,7 @@ describe('useSessionView with active timeline and a session id and graph event i
     );
     const navigation = result.current.Navigation;
     const renderResult = render(<TestProviders>{navigation}</TestProviders>);
-    expect(renderResult.getByText('Close session')).toBeTruthy();
+    expect(renderResult.getByText('Close session viewer')).toBeTruthy();
   });
 
   it('uses an optional height when passed', () => {