[Session view] Beta Badge (#130512)

* beta badge added to hosts details page (sessions tab)

* beta badge added to session view, fixed toolbar styles in the process.

* removed copypasta comment

Co-authored-by: mitodrummer <karlgodard@elastic.co>

x-pack/plugins/security_solution/public/hosts/pages/details/nav_tabs.test.tsx

@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { TabNavigationItemProps } from '../../../common/components/navigation/tab_navigation/types';
 import { HostsTableType } from '../../store/model';
 import { navTabsHostDetails } from './nav_tabs';
 
@@ -50,4 +51,22 @@ describe('navTabsHostDetails', () => {
     expect(tabs).toHaveProperty(HostsTableType.events);
     expect(tabs).toHaveProperty(HostsTableType.risk);
   });
+
+  test('it should display Beta badge for sessions tab only', () => {
+    const tabs = navTabsHostDetails({
+      hasMlUserPermissions: false,
+      isRiskyHostsEnabled: true,
+      hostName: mockHostName,
+    });
+
+    Object.values(tabs).forEach((item) => {
+      const tab = item as TabNavigationItemProps;
+
+      if (tab.id === HostsTableType.sessions) {
+        expect(tab.isBeta).toEqual(true);
+      } else {
+        expect(tab.isBeta).toEqual(undefined);
+      }
+    });
+  });
 });

x-pack/plugins/security_solution/public/hosts/pages/details/nav_tabs.tsx

@@ -67,6 +67,7 @@ export const navTabsHostDetails = ({
       name: i18n.NAVIGATION_SESSIONS_TITLE,
       href: getTabsOnHostDetailsUrl(hostName, HostsTableType.sessions),
       disabled: false,
+      isBeta: true,
     },
   };
 

x-pack/plugins/session_view/public/components/process_tree/styles.ts

@@ -8,6 +8,7 @@
 import { useMemo } from 'react';
 import { transparentize, useEuiTheme } from '@elastic/eui';
 import { CSSObject } from '@emotion/react';
+import { euiLightVars } from '@kbn/ui-theme'; // using this temporarily until the euiTheme hook is updated to include proper hex values
 
 export const useStyles = () => {
   const { euiTheme } = useEuiTheme();
@@ -21,7 +22,7 @@ export const useStyles = () => {
       fontFamily: font.familyCode,
       overflow: 'auto',
       height: '100%',
-      backgroundColor: colors.lightestShade,
+      backgroundColor: euiLightVars.euiColorLightestShade,
       paddingTop: size.base,
       paddingLeft: size.s,
     };

x-pack/plugins/session_view/public/components/session_view/index.tsx

@@ -13,7 +13,9 @@ import {
   EuiPanel,
   EuiHorizontalRule,
   EuiFlexGroup,
+  EuiBetaBadge,
 } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import useLocalStorage from 'react-use/lib/useLocalStorage';
 import { SectionLoading } from '../../shared_imports';
@@ -36,6 +38,10 @@ import {
 } from './hooks';
 import { LOCAL_STORAGE_DISPLAY_OPTIONS_KEY } from '../../../common/constants';
 
+const BETA = i18n.translate('xpack.sessionView.beta', {
+  defaultMessage: 'Beta',
+});
+
 /**
  * The main wrapper component for the session view.
  */
@@ -193,7 +199,10 @@ export const SessionView = ({
     <>
       <div css={styles.sessionViewerComponent}>
         <EuiPanel css={styles.toolBar} hasShadow={false} borderRadius="none">
-          <EuiFlexGroup>
+          <EuiFlexGroup alignItems="center" gutterSize="s">
+            <EuiFlexItem grow={false}>
+              <EuiBetaBadge label={BETA} size="s" css={styles.betaBadge} />
+            </EuiFlexItem>
             <EuiFlexItem
               data-test-subj="sessionView:sessionViewProcessEventsSearch"
               css={styles.searchBar}
@@ -206,7 +215,7 @@ export const SessionView = ({
               />
             </EuiFlexItem>
 
-            <EuiFlexItem grow={false} css={styles.buttonsEyeDetail}>
+            <EuiFlexItem grow={false}>
               <SessionViewDisplayOptions
                 displayOptions={displayOptions!}
                 onChange={handleOptionChange}
@@ -214,7 +223,7 @@ export const SessionView = ({
               />
             </EuiFlexItem>
 
-            <EuiFlexItem grow={false} css={styles.buttonsEyeDetail}>
+            <EuiFlexItem grow={false}>
               <EuiButton
                 onClick={toggleDetailPanel}
                 iconType="list"

x-pack/plugins/session_view/public/components/session_view/styles.ts

@@ -8,6 +8,7 @@
 import { useMemo } from 'react';
 import { useEuiTheme } from '@elastic/eui';
 import { CSSObject } from '@emotion/react';
+import { euiLightVars } from '@kbn/ui-theme'; // using this temporarily until the euiTheme hook is updated to include proper hex values
 
 interface StylesDeps {
   height?: number;
@@ -18,7 +19,7 @@ export const useStyles = ({ height = 500, isFullScreen }: StylesDeps) => {
   const { euiTheme } = useEuiTheme();
 
   const cached = useMemo(() => {
-    const { border, colors } = euiTheme;
+    const { border, colors, size } = euiTheme;
 
     // 118px = Session View Toolbar height + Close Session button height + spacing margin at the bottom
     const sessionView: CSSObject = {
@@ -46,11 +47,9 @@ export const useStyles = ({ height = 500, isFullScreen }: StylesDeps) => {
     };
     const searchBar: CSSObject = {
       position: 'relative',
-      margin: `${euiTheme.size.m} ${euiTheme.size.xs}`,
-    };
-
-    const buttonsEyeDetail: CSSObject = {
-      margin: `${euiTheme.size.m} ${euiTheme.size.xs}`,
+      input: {
+        backgroundColor: colors.emptyShade,
+      },
     };
 
     const sessionViewerComponent: CSSObject = {
@@ -59,6 +58,11 @@ export const useStyles = ({ height = 500, isFullScreen }: StylesDeps) => {
     };
 
     const toolBar: CSSObject = {
+      backgroundColor: `${euiLightVars.euiFormBackgroundDisabledColor} !important`, // important used since euipanel overrides this
+      padding: `${size.m} ${size.base}`,
+    };
+
+    const betaBadge: CSSObject = {
       backgroundColor: `${colors.emptyShade}`,
     };
 
@@ -68,9 +72,9 @@ export const useStyles = ({ height = 500, isFullScreen }: StylesDeps) => {
       nonGrowGroup,
       resizeHandle,
       searchBar,
-      buttonsEyeDetail,
       sessionViewerComponent,
       toolBar,
+      betaBadge,
     };
   }, [euiTheme, isFullScreen, height]);