[Session View] [8.2] beta label added to sessions tabs in timeline (#…

…129965) (#130015)

* beta label added to sessions tabs in timeline

* added test for isBeta

* added test for isBeta

* test revised

Co-authored-by: mitodrummer <karlgodard@elastic.co>
(cherry picked from commit bced9d2)

Co-authored-by: Karl Godard <karl.godard@elastic.co>

x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/index.test.tsx

@@ -126,4 +126,22 @@ describe('Table Navigation', () => {
       `/app/securitySolutionUI/hosts/siem-window/authentications${SEARCH_QUERY}`
     );
   });
+
+  test('it renders a EuiBetaBadge only on the sessions tab', () => {
+    Object.keys(HostsTableType).forEach((tableType) => {
+      if (tableType !== HostsTableType.sessions) {
+        const wrapper = mount(<TabNavigationComponent {...mockProps} />);
+
+        const betaBadge = wrapper.find(
+          `EuiTab[data-test-subj="navigation-${tableType}"] EuiBetaBadge`
+        );
+
+        if (tableType === HostsTableType.sessions) {
+          expect(betaBadge).toBeTruthy();
+        } else {
+          expect(betaBadge).toEqual({});
+        }
+      }
+    });
+  });
 });

x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/index.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiTab, EuiTabs } from '@elastic/eui';
+import { EuiTab, EuiTabs, EuiBetaBadge } from '@elastic/eui';
 import { getOr } from 'lodash/fp';
 import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
@@ -14,13 +14,15 @@ import deepEqual from 'fast-deep-equal';
 import { useNavigation } from '../../../lib/kibana';
 import { track, METRIC_TYPE, TELEMETRY_EVENT } from '../../../lib/telemetry';
 import { TabNavigationProps, TabNavigationItemProps } from './types';
+import { BETA } from '../../../translations';
 
 const TabNavigationItemComponent = ({
   disabled,
   hrefWithSearch,
   id,
   name,
   isSelected,
+  isBeta,
 }: TabNavigationItemProps) => {
   const { getAppUrl, navigateTo } = useNavigation();
 
@@ -45,6 +47,7 @@ const TabNavigationItemComponent = ({
       isSelected={isSelected}
       href={appHref}
       onClick={handleClick}
+      append={isBeta && <EuiBetaBadge label={BETA} size="s" />}
     >
       {name}
     </EuiTab>
@@ -92,6 +95,7 @@ export const TabNavigationComponent: React.FC<TabNavigationProps> = ({
             name={tab.name}
             disabled={tab.disabled}
             isSelected={isSelected}
+            isBeta={tab.isBeta}
           />
         );
       }),

x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/types.ts

@@ -32,4 +32,5 @@ export interface TabNavigationItemProps {
   disabled: boolean;
   name: string;
   isSelected: boolean;
+  isBeta?: boolean;
 }

x-pack/plugins/security_solution/public/common/components/navigation/types.ts

@@ -38,6 +38,7 @@ export interface NavTab {
   disabled: boolean;
   urlKey?: UrlStateType;
   pageId?: SecurityPageName;
+  isBeta?: boolean;
 }
 
 export type SecurityNavKey =

x-pack/plugins/security_solution/public/common/translations.ts

@@ -63,6 +63,10 @@ export const EMPTY_ACTION_ENDPOINT_DESCRIPTION = i18n.translate(
   }
 );
 
+export const BETA = i18n.translate('xpack.securitySolution.pages.common.beta', {
+  defaultMessage: 'Beta',
+});
+
 export const UPDATE_ALERT_STATUS_FAILED = (conflicts: number) =>
   i18n.translate('xpack.securitySolution.pages.common.updateAlertStatusFailed', {
     values: { conflicts },

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

@@ -71,6 +71,7 @@ export const navTabsHosts = ({
       name: i18n.NAVIGATION_SESSIONS_TITLE,
       href: getTabsOnHostsUrl(HostsTableType.sessions),
       disabled: false,
+      isBeta: true,
     },
   };
 

x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/index.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiBadge, EuiLoadingContent, EuiTabs, EuiTab } from '@elastic/eui';
+import { EuiBadge, EuiBetaBadge, EuiLoadingContent, EuiTabs, EuiTab } from '@elastic/eui';
 import { isEmpty } from 'lodash/fp';
 import React, { lazy, memo, Suspense, useCallback, useEffect, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
@@ -37,6 +37,7 @@ import {
   getEventIdToNoteIdsSelector,
 } from './selectors';
 import * as i18n from './translations';
+import { BETA } from '../../../../common/translations';
 
 const HideShowContainer = styled.div.attrs<{ $isVisible: boolean; isOverflowYScroll: boolean }>(
   ({ $isVisible = false, isOverflowYScroll = false }) => ({
@@ -357,6 +358,7 @@ const TabsContentComponent: React.FC<BasicTimelineTab> = ({
             isSelected={activeTab === TimelineTabs.session}
             disabled={sessionViewConfig === null}
             key={TimelineTabs.session}
+            append={<EuiBetaBadge label={BETA} size="s" />}
           >
             {i18n.SESSION_TAB}
           </EuiTab>