From dea7c1909f45734155956fac156dbd4338b7cfe8 Mon Sep 17 00:00:00 2001
From: Paulo Henrique <paulo.scape@gmail.com>
Date: Thu, 12 May 2022 17:47:21 -0300
Subject: [PATCH] [Session View] Close session viewer button fixes (#131910)

---
 .../components/graph_overlay/index.tsx        | 23 +++++++++++++++----
 .../timeline/session_tab_content/index.tsx    | 15 ++++++++----
 .../session_tab_content/translations.ts       |  2 +-
 .../use_session_view.test.tsx                 |  2 +-
 4 files changed, 31 insertions(+), 11 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
index 7ddb09e28fead..fdb565ad78538 100644
--- 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';
@@ -30,6 +36,8 @@ import { SourcererScopeName } from '../../../common/store/sourcerer/model';
 import { useSourcererDataView } from '../../../common/containers/sourcerer';
 import { sourcererSelectors } from '../../../common/store';
 
+const SESSION_VIEW_FULL_SCREEN = 'sessionViewFullScreen';
+
 const OverlayStyle = css`
   display: flex;
   flex-direction: column;
@@ -59,10 +67,12 @@ const StyledResolver = styled(Resolver)`
 `;
 
 const ScrollableFlexItem = styled(EuiFlexItem)`
-  ${({ theme }) => `padding: 0 ${theme.eui.euiSizeM};
-  background-color: ${theme.eui.euiColorEmptyShade};`}
+  ${({ theme }) => `background-color: ${theme.eui.euiColorEmptyShade};`}
   overflow: hidden;
   width: 100%;
+  &.${SESSION_VIEW_FULL_SCREEN} {
+    ${({ theme }) => `padding: 0 ${theme.eui.euiSizeM}`}
+  }
 `;
 
 interface GraphOverlayProps {
@@ -158,8 +168,13 @@ 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>
-          <ScrollableFlexItem grow={2}>{SessionView}</ScrollableFlexItem>
+          <EuiHorizontalRule margin="none" />
+          <EuiSpacer size="m" />
+          <ScrollableFlexItem grow={2} className={fullScreen ? SESSION_VIEW_FULL_SCREEN : ''}>
+            {SessionView}
+          </ScrollableFlexItem>
         </EuiFlexGroup>
       </OverlayContainer>
     );
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/session_tab_content/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/session_tab_content/index.tsx
index 324c13d320f45..1685f55076c58 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/session_tab_content/index.tsx
+++ b/x-pack/plugins/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/x-pack/plugins/security_solution/public/timelines/components/timeline/session_tab_content/translations.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/session_tab_content/translations.ts
index 1f0135e631858..14f8e7f8b6a3c 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/session_tab_content/translations.ts
+++ b/x-pack/plugins/security_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/x-pack/plugins/security_solution/public/timelines/components/timeline/session_tab_content/use_session_view.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/session_tab_content/use_session_view.test.tsx
index 12fedad3b225e..b9977db080cd8 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/session_tab_content/use_session_view.test.tsx
+++ b/x-pack/plugins/security_solution/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', () => {