From e627c3e0acfc24e85d94b5797c259fd26ece32af Mon Sep 17 00:00:00 2001 From: Karl Godard Date: Tue, 12 Apr 2022 07:11:07 -0700 Subject: [PATCH] [Session View] [8.2] beta label added to sessions tabs in timeline (#129965) * beta label added to sessions tabs in timeline * added test for isBeta * added test for isBeta * test revised Co-authored-by: mitodrummer (cherry picked from commit bced9d2bd47cb74e047cec93463e313880309332) --- .../navigation/tab_navigation/index.test.tsx | 18 ++++++++++++++++++ .../navigation/tab_navigation/index.tsx | 6 +++++- .../navigation/tab_navigation/types.ts | 1 + .../common/components/navigation/types.ts | 1 + .../public/common/translations.ts | 4 ++++ .../public/hosts/pages/nav_tabs.tsx | 1 + .../components/timeline/tabs_content/index.tsx | 4 +++- 7 files changed, 33 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/index.test.tsx index d90709f69ee03..45eebab8c093f 100644 --- a/x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/index.test.tsx +++ b/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(); + + const betaBadge = wrapper.find( + `EuiTab[data-test-subj="navigation-${tableType}"] EuiBetaBadge` + ); + + if (tableType === HostsTableType.sessions) { + expect(betaBadge).toBeTruthy(); + } else { + expect(betaBadge).toEqual({}); + } + } + }); + }); }); diff --git a/x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/index.tsx b/x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/index.tsx index 4d9a8a704dde5..03437bab93f38 100644 --- a/x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/index.tsx +++ b/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,6 +14,7 @@ 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, @@ -21,6 +22,7 @@ const TabNavigationItemComponent = ({ id, name, isSelected, + isBeta, }: TabNavigationItemProps) => { const { getAppUrl, navigateTo } = useNavigation(); @@ -45,6 +47,7 @@ const TabNavigationItemComponent = ({ isSelected={isSelected} href={appHref} onClick={handleClick} + append={isBeta && } > {name} @@ -92,6 +95,7 @@ export const TabNavigationComponent: React.FC = ({ name={tab.name} disabled={tab.disabled} isSelected={isSelected} + isBeta={tab.isBeta} /> ); }), diff --git a/x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/types.ts b/x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/types.ts index 75f18abf75559..5630978bae87a 100644 --- a/x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/types.ts +++ b/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; } diff --git a/x-pack/plugins/security_solution/public/common/components/navigation/types.ts b/x-pack/plugins/security_solution/public/common/components/navigation/types.ts index b1903ef869d3d..1cb8a918ea481 100644 --- a/x-pack/plugins/security_solution/public/common/components/navigation/types.ts +++ b/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 = diff --git a/x-pack/plugins/security_solution/public/common/translations.ts b/x-pack/plugins/security_solution/public/common/translations.ts index 2058eaf03b5e1..64d31e7f6530d 100644 --- a/x-pack/plugins/security_solution/public/common/translations.ts +++ b/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 }, diff --git a/x-pack/plugins/security_solution/public/hosts/pages/nav_tabs.tsx b/x-pack/plugins/security_solution/public/hosts/pages/nav_tabs.tsx index 59fb0d08f7dc7..ea46180f8df80 100644 --- a/x-pack/plugins/security_solution/public/hosts/pages/nav_tabs.tsx +++ b/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, }, }; diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/index.tsx index 2f5262c7c598f..b8b9d73932afd 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/index.tsx +++ b/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 = ({ isSelected={activeTab === TimelineTabs.session} disabled={sessionViewConfig === null} key={TimelineTabs.session} + append={} > {i18n.SESSION_TAB}