diff --git a/x-pack/plugins/security_solution/public/flyout/left/components/correlations_details_alerts_table.tsx b/x-pack/plugins/security_solution/public/flyout/left/components/correlations_details_alerts_table.tsx index 0f113efe317aa..60296da8d43cd 100644 --- a/x-pack/plugins/security_solution/public/flyout/left/components/correlations_details_alerts_table.tsx +++ b/x-pack/plugins/security_solution/public/flyout/left/components/correlations_details_alerts_table.tsx @@ -6,7 +6,7 @@ */ import type { ReactElement, ReactNode } from 'react'; -import React, { type FC, useMemo, useCallback } from 'react'; +import React, { type VFC, useMemo, useCallback } from 'react'; import { type Criteria, EuiBasicTable, formatDate } from '@elastic/eui'; import { Severity } from '@kbn/securitysolution-io-ts-alerting-types'; import type { Filter } from '@kbn/es-query'; @@ -14,6 +14,7 @@ import { isRight } from 'fp-ts/lib/Either'; import { ALERT_REASON, ALERT_RULE_NAME } from '@kbn/rule-data-utils'; import { FormattedMessage } from '@kbn/i18n-react'; import { i18n } from '@kbn/i18n'; +import { CellTooltipWrapper } from '../../shared/components/cell_tooltip_wrapper'; import type { DataProvider } from '../../../../common/types'; import { SeverityBadge } from '../../../detections/components/rules/severity_badge'; import { usePaginatedAlerts } from '../hooks/use_paginated_alerts'; @@ -36,7 +37,14 @@ export const columns = [ ), truncateText: true, dataType: 'date' as const, - render: (value: string) => formatDate(value, TIMESTAMP_DATE_FORMAT), + render: (value: string) => { + const date = formatDate(value, TIMESTAMP_DATE_FORMAT); + return ( + + {date} + + ); + }, }, { field: ALERT_RULE_NAME, @@ -47,6 +55,11 @@ export const columns = [ /> ), truncateText: true, + render: (value: string) => ( + + {value} + + ), }, { field: ALERT_REASON, @@ -57,6 +70,11 @@ export const columns = [ /> ), truncateText: true, + render: (value: string) => ( + + {value} + + ), }, { field: 'kibana.alert.severity', @@ -69,7 +87,12 @@ export const columns = [ truncateText: true, render: (value: string) => { const decodedSeverity = Severity.decode(value); - return isRight(decodedSeverity) ? : value; + const renderValue = isRight(decodedSeverity) ? ( + + ) : ( +

{value}

+ ); + return {renderValue}; }, }, ]; @@ -108,7 +131,7 @@ export interface CorrelationsDetailsAlertsTableProps { /** * Renders paginated alert array based on the provided alertIds */ -export const CorrelationsDetailsAlertsTable: FC = ({ +export const CorrelationsDetailsAlertsTable: VFC = ({ title, loading, alertIds, diff --git a/x-pack/plugins/security_solution/public/flyout/left/components/related_cases.tsx b/x-pack/plugins/security_solution/public/flyout/left/components/related_cases.tsx index 5818b9314390c..76a97e6e71053 100644 --- a/x-pack/plugins/security_solution/public/flyout/left/components/related_cases.tsx +++ b/x-pack/plugins/security_solution/public/flyout/left/components/related_cases.tsx @@ -10,6 +10,7 @@ import type { EuiBasicTableColumn } from '@elastic/eui'; import { EuiInMemoryTable, EuiSkeletonText } from '@elastic/eui'; import type { RelatedCase } from '@kbn/cases-plugin/common'; import { FormattedMessage } from '@kbn/i18n-react'; +import { CellTooltipWrapper } from '../../shared/components/cell_tooltip_wrapper'; import { CaseDetailsLink } from '../../../common/components/links'; import { CORRELATIONS_DETAILS_CASES_SECTION_TABLE_TEST_ID, @@ -29,11 +30,12 @@ const columns: Array> = [ defaultMessage="Name" /> ), - truncateText: true, render: (value: string, caseData: RelatedCase) => ( - - {caseData.title} - + + + {caseData.title} + + ), }, { @@ -45,6 +47,7 @@ const columns: Array> = [ /> ), truncateText: true, + width: '25%', }, ]; diff --git a/x-pack/plugins/security_solution/public/flyout/shared/components/cell_tooltip_wrapper.test.tsx b/x-pack/plugins/security_solution/public/flyout/shared/components/cell_tooltip_wrapper.test.tsx new file mode 100644 index 0000000000000..3e6b6d7e47f8a --- /dev/null +++ b/x-pack/plugins/security_solution/public/flyout/shared/components/cell_tooltip_wrapper.test.tsx @@ -0,0 +1,22 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { render } from '@testing-library/react'; +import { CellTooltipWrapper } from './cell_tooltip_wrapper'; + +const TEST_ID = 'test-id'; +const children =

{'test content'}

; + +describe('', () => { + it('should render non-expandable panel by default', () => { + const { getByTestId } = render( + {children} + ); + expect(getByTestId(TEST_ID)).toBeInTheDocument(); + }); +}); diff --git a/x-pack/plugins/security_solution/public/flyout/shared/components/cell_tooltip_wrapper.tsx b/x-pack/plugins/security_solution/public/flyout/shared/components/cell_tooltip_wrapper.tsx new file mode 100644 index 0000000000000..39bbd08fc3ba6 --- /dev/null +++ b/x-pack/plugins/security_solution/public/flyout/shared/components/cell_tooltip_wrapper.tsx @@ -0,0 +1,35 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import type { VFC, ReactElement } from 'react'; +import React from 'react'; +import { EuiToolTip } from '@elastic/eui'; + +export interface CellTooltipWrapperProps { + /** + * Value displayed in the tooltip and in the cell itself + */ + tooltip: string | ReactElement; + /** + * Tooltip anchor position + */ + anchorPosition?: 'left' | 'right' | 'top' | 'bottom'; + /** + * React components to render + */ + children: React.ReactElement; +} + +export const CellTooltipWrapper: VFC = ({ + tooltip, + anchorPosition = 'top', + children, +}) => ( + + {children} + +);