diff --git a/x-pack/solutions/security/plugins/security_solution/public/detections/components/attacks/table/attack_details/attack_details_container.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/detections/components/attacks/table/attack_details/attack_details_container.test.tsx index f1913572e8a85..76bc8c4a7a7d5 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detections/components/attacks/table/attack_details/attack_details_container.test.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/detections/components/attacks/table/attack_details/attack_details_container.test.tsx @@ -55,16 +55,6 @@ describe('AttackDetailsContainer', () => { expect(tabs[1]).toHaveTextContent(String(mockAttack.alertIds.length)); }); - it('renders only Alerts tab when attack is undefined', () => { - renderContainer({ attack: undefined }); - - const tabs = screen.getAllByRole('tab'); - expect(tabs).toHaveLength(1); - expect(tabs[0]).toHaveTextContent('Alerts'); - expect(screen.getByTestId('alertsTab')).toBeInTheDocument(); - expect(screen.queryByTestId('attackSummaryTab')).not.toBeInTheDocument(); - }); - it('renders the attack summary tab by default with correct props', () => { renderContainer({ showAnonymized: true }); diff --git a/x-pack/solutions/security/plugins/security_solution/public/detections/components/attacks/table/attack_details/attack_details_container.tsx b/x-pack/solutions/security/plugins/security_solution/public/detections/components/attacks/table/attack_details/attack_details_container.tsx index 7a31ae671ed41..4dd71345e30d1 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detections/components/attacks/table/attack_details/attack_details_container.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/detections/components/attacks/table/attack_details/attack_details_container.tsx @@ -31,8 +31,8 @@ interface TabInfo { } interface AttackDetailsContainerProps { - /** The attack discovery alert document. If undefined, only the Alerts tab will be shown. */ - attack?: AttackDiscoveryAlert; + /** The attack discovery alert document. */ + attack: AttackDiscoveryAlert; /** Whether to show anonymized values instead of replacements */ showAnonymized?: boolean; /** Filters applied from grouping */ @@ -51,11 +51,9 @@ interface AttackDetailsContainerProps { */ export const AttackDetailsContainer = React.memo( ({ attack, groupingFilters, defaultFilters, isTableLoading, showAnonymized }) => { - const tabs = useMemo(() => { - const tabsList: TabInfo[] = []; - - if (attack) { - tabsList.push({ + const tabs = useMemo( + () => [ + { id: ATTACK_SUMMARY_TAB, name: i18n.ATTACK_SUMMARY, content: ( @@ -64,31 +62,29 @@ export const AttackDetailsContainer = React.memo( ), - }); - } - - tabsList.push({ - id: ALERTS_TAB, - name: i18n.ALERTS, - content: ( - <> - - - - ), - append: attack ? ( - - {attack.alertIds.length} - - ) : undefined, - }); - - return tabsList; - }, [attack, groupingFilters, defaultFilters, isTableLoading, showAnonymized]); + }, + { + id: ALERTS_TAB, + name: i18n.ALERTS, + content: ( + <> + + + + ), + append: attack ? ( + + {attack.alertIds.length} + + ) : undefined, + }, + ], + [attack, groupingFilters, defaultFilters, isTableLoading, showAnonymized] + ); const firstTabId = useMemo(() => (attack ? ATTACK_SUMMARY_TAB : ALERTS_TAB), [attack]); diff --git a/x-pack/solutions/security/plugins/security_solution/public/detections/components/attacks/table/table_section.tsx b/x-pack/solutions/security/plugins/security_solution/public/detections/components/attacks/table/table_section.tsx index a59a42676194d..4f0cc43ca8099 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detections/components/attacks/table/table_section.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/detections/components/attacks/table/table_section.tsx @@ -35,11 +35,12 @@ import { GroupedAlertsTable } from '../../alerts_table/alerts_grouping'; import type { AlertsGroupingAggregation } from '../../alerts_table/grouping_settings/types'; import { useGetDefaultGroupTitleRenderers } from '../../../hooks/attacks/use_get_default_group_title_renderers'; import { useAttackGroupHandler } from '../../../hooks/attacks/use_attack_group_handler'; +import type { AssigneesIdsSelection } from '../../../../common/components/assignees/types'; import { AttackDetailsContainer } from './attack_details/attack_details_container'; +import { AlertsTab } from './attack_details/alerts_tab'; import { groupingOptions, groupingSettings } from './grouping_configs'; import * as i18n from './translations'; -import type { AssigneesIdsSelection } from '../../../../common/components/assignees/types'; export const TABLE_SECTION_TEST_ID = 'attacks-page-table-section'; export const EXPAND_ATTACK_BUTTON_TEST_ID = 'expand-attack-button'; @@ -157,6 +158,16 @@ export const TableSection = React.memo( const attack = selectedGroup && fieldBucket ? getAttack(selectedGroup, fieldBucket) : undefined; + if (!attack) { + return ( + + ); + } + return (