From c9324af5fcbe70b37f3a7c07e1e14954093289dd Mon Sep 17 00:00:00 2001
From: Zizhou Wang <zizhou.wang@elastic.co>
Date: Mon, 29 Nov 2021 14:56:24 -0500
Subject: [PATCH] Refactor styles hook to use cssobject and remove unused
 styles

---
 .../public/components/ProcessTree/styles.ts   | 37 ++++++++--------
 .../public/components/SessionView/hooks.ts    |  2 +-
 .../public/components/SessionView/styles.ts   | 44 +------------------
 .../SessionViewDetailPanel/index.tsx          | 17 ++++---
 4 files changed, 29 insertions(+), 71 deletions(-)

diff --git a/x-pack/plugins/session_view/public/components/ProcessTree/styles.ts b/x-pack/plugins/session_view/public/components/ProcessTree/styles.ts
index cf98e161077d9..d706a80a95eb7 100644
--- a/x-pack/plugins/session_view/public/components/ProcessTree/styles.ts
+++ b/x-pack/plugins/session_view/public/components/ProcessTree/styles.ts
@@ -7,6 +7,7 @@
 
 import { useMemo } from 'react';
 import { useEuiTheme } from '@elastic/eui';
+import { CSSObject } from '@emotion/react';
 
 export const useStyles = () => {
   const { euiTheme } = useEuiTheme();
@@ -14,25 +15,25 @@ export const useStyles = () => {
   const cached = useMemo(() => {
     const defaultSelectionColor = euiTheme.colors.accent;
 
-    const scroller = `
-      font-family: ${euiTheme.font.familyCode};
-      overflow: auto;
-      height: 100%;
-      background-color: ${euiTheme.colors.lightestShade};
-      display: flex;
-      flex-direction: column;
-    `;
+    const scroller: CSSObject = {
+      fontFamily: euiTheme.font.familyCode,
+      overflow: 'auto',
+      height: '100%',
+      backgroundColor: euiTheme.colors.lightestShade,
+      display: 'flex',
+      flexDirection: 'column',
+    };
 
-    const selectionArea = `
-      position: absolute;
-      display: none;
-      margin-left: -50%;
-      width: 150%;
-      height: 100%;
-      background-color: ${defaultSelectionColor};
-      pointer-events:none;
-      opacity: .1;
-    `;
+    const selectionArea: CSSObject = {
+      position: 'absolute',
+      display: 'none',
+      marginLeft: '-50%',
+      width: '150%',
+      height: '100%',
+      backgroundColor: defaultSelectionColor,
+      pointerEvents: 'none',
+      opacity: 0.1,
+    };
 
     return {
       scroller,
diff --git a/x-pack/plugins/session_view/public/components/SessionView/hooks.ts b/x-pack/plugins/session_view/public/components/SessionView/hooks.ts
index 9ef42f1134761..e290670a76995 100644
--- a/x-pack/plugins/session_view/public/components/SessionView/hooks.ts
+++ b/x-pack/plugins/session_view/public/components/SessionView/hooks.ts
@@ -8,7 +8,7 @@ import { useEffect, useState } from 'react';
 import { useQuery } from 'react-query';
 import { EuiSearchBarOnChangeArgs } from '@elastic/eui';
 import { CoreStart } from 'kibana/public';
-import { useKibana } from 'src/plugins/kibana_react/public';
+import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
 import { ProcessEvent } from '../../hooks/use_process_tree';
 import { PROCESS_EVENTS_ROUTE } from '../../../common/constants';
 
diff --git a/x-pack/plugins/session_view/public/components/SessionView/styles.ts b/x-pack/plugins/session_view/public/components/SessionView/styles.ts
index 5212a4e481282..e56ff44997150 100644
--- a/x-pack/plugins/session_view/public/components/SessionView/styles.ts
+++ b/x-pack/plugins/session_view/public/components/SessionView/styles.ts
@@ -7,7 +7,7 @@
 
 import { useMemo } from 'react';
 import { useEuiTheme } from '@elastic/eui';
-import { keyframes, CSSObject } from '@emotion/react';
+import { CSSObject } from '@emotion/react';
 
 interface StylesDeps {
   height: number | undefined;
@@ -35,52 +35,10 @@ export const useStyles = ({ height = 500 }: StylesDeps) => {
       paddingLeft: padding,
     };
 
-    const slideIn = keyframes({
-      to: {
-        right: '0',
-      },
-    });
-
-    const slideOut = keyframes({
-      from: {
-        right: '0',
-      },
-      to: {
-        right: '-100%',
-      },
-    });
-
-    const detailPanel: CSSObject = {
-      width: '424px',
-      height: `${height}px`,
-      overflowY: 'auto',
-      position: 'absolute',
-      top: '8px',
-      right: '-100%',
-    };
-
-    const detailPanelIn: Array<string | CSSObject> = [
-      slideIn.styles,
-      {
-        ...detailPanel,
-        animation: `${slideIn.name} 200ms ease forwards`,
-      },
-    ];
-
-    const detailPanelOut: Array<string | CSSObject> = [
-      slideOut.styles,
-      {
-        ...detailPanel,
-        animation: `${slideOut.name} 150ms ease`,
-      },
-    ];
-
     return {
       processTree,
       outerPanel,
       treePanel,
-      detailPanelIn,
-      detailPanelOut,
     };
   }, [height, euiTheme]);
 
diff --git a/x-pack/plugins/session_view/public/components/SessionViewDetailPanel/index.tsx b/x-pack/plugins/session_view/public/components/SessionViewDetailPanel/index.tsx
index 607554fe04db1..746e6326a8379 100644
--- a/x-pack/plugins/session_view/public/components/SessionViewDetailPanel/index.tsx
+++ b/x-pack/plugins/session_view/public/components/SessionViewDetailPanel/index.tsx
@@ -64,12 +64,14 @@ export const SessionViewDetailPanel = ({
       kind: processEvent?.event.kind,
     }));
 
-    const [commandTabs, alertTabs] = partition(selectedProcessEvents, { kind: EventKind.event });
+    const [processCommandTabs, processAlertTabs] = partition(selectedProcessEvents, {
+      kind: EventKind.event,
+    });
 
-    setCommandTabs(commandTabs);
-    setSelectedCommandTab(commandTabs[0]?.id || '');
-    setAlertTabs(alertTabs);
-    setSelectedAlertTab(alertTabs[0]?.id || '');
+    setCommandTabs(processCommandTabs);
+    setSelectedCommandTab(processCommandTabs[0]?.id || '');
+    setAlertTabs(processAlertTabs);
+    setSelectedAlertTab(processAlertTabs[0]?.id || '');
   }, [selectedProcess]);
 
   const handleAnimationEnd = () => {
@@ -115,10 +117,7 @@ export const SessionViewDetailPanel = ({
         <div>
           <EuiTitle size="s">
             <span>
-              <FormattedMessage
-                id="xpack.sessionView.alertDetail"
-                defaultMessage="Alert detail"
-              />
+              <FormattedMessage id="xpack.sessionView.alertDetail" defaultMessage="Alert detail" />
             </span>
           </EuiTitle>
           <EuiSpacer />