diff --git a/x-pack/plugins/cloud_security_posture/public/pages/findings/findings_flyout/findings_flyout.tsx b/x-pack/plugins/cloud_security_posture/public/pages/findings/findings_flyout/findings_flyout.tsx index 583421f645c7a..0b00136b165c5 100644 --- a/x-pack/plugins/cloud_security_posture/public/pages/findings/findings_flyout/findings_flyout.tsx +++ b/x-pack/plugins/cloud_security_posture/public/pages/findings/findings_flyout/findings_flyout.tsx @@ -112,7 +112,7 @@ export const FindingsRuleFlyout = ({ onClose, findings }: FindingFlyoutProps) => const [tab, setTab] = useState(tabs[0]); return ( - + diff --git a/x-pack/plugins/cloud_security_posture/public/pages/findings/latest_findings/latest_findings_table.tsx b/x-pack/plugins/cloud_security_posture/public/pages/findings/latest_findings/latest_findings_table.tsx index 78613d56a3fd1..8ded88cd6507c 100644 --- a/x-pack/plugins/cloud_security_posture/public/pages/findings/latest_findings/latest_findings_table.tsx +++ b/x-pack/plugins/cloud_security_posture/public/pages/findings/latest_findings/latest_findings_table.tsx @@ -8,6 +8,7 @@ import React, { useMemo, useState } from 'react'; import { EuiEmptyPrompt, EuiBasicTable, + useEuiTheme, type Pagination, type EuiBasicTableProps, type CriteriaWithPagination, @@ -24,6 +25,7 @@ import { getExpandColumn, type OnAddFilter, } from '../layout/findings_layout'; +import { getSelectedRowStyle } from '../utils/utils'; type TableProps = Required>; @@ -44,10 +46,12 @@ const FindingsTableComponent = ({ setTableOptions, onAddFilter, }: Props) => { + const { euiTheme } = useEuiTheme(); const [selectedFinding, setSelectedFinding] = useState(); const getRowProps = (row: CspFinding) => ({ 'data-test-subj': TEST_SUBJECTS.getFindingsTableRowTestId(row.resource.id), + style: getSelectedRowStyle(euiTheme, row, selectedFinding), }); const getCellProps = (row: CspFinding, column: EuiTableFieldDataColumnType) => ({ diff --git a/x-pack/plugins/cloud_security_posture/public/pages/findings/latest_findings_by_resource/resource_findings/resource_findings_table.tsx b/x-pack/plugins/cloud_security_posture/public/pages/findings/latest_findings_by_resource/resource_findings/resource_findings_table.tsx index 976ddd8d8b37f..8996410b9fb29 100644 --- a/x-pack/plugins/cloud_security_posture/public/pages/findings/latest_findings_by_resource/resource_findings/resource_findings_table.tsx +++ b/x-pack/plugins/cloud_security_posture/public/pages/findings/latest_findings_by_resource/resource_findings/resource_findings_table.tsx @@ -13,6 +13,7 @@ import { type EuiBasicTableColumn, type EuiTableActionsColumnType, type EuiBasicTableProps, + useEuiTheme, } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import { CspFinding } from '../../../../../common/schemas/csp_finding'; @@ -23,6 +24,7 @@ import { type OnAddFilter, } from '../../layout/findings_layout'; import { FindingsRuleFlyout } from '../../findings_flyout/findings_flyout'; +import { getSelectedRowStyle } from '../../utils/utils'; interface Props { items: CspFinding[]; @@ -41,8 +43,13 @@ const ResourceFindingsTableComponent = ({ setTableOptions, onAddFilter, }: Props) => { + const { euiTheme } = useEuiTheme(); const [selectedFinding, setSelectedFinding] = useState(); + const getRowProps = (row: CspFinding) => ({ + style: getSelectedRowStyle(euiTheme, row, selectedFinding), + }); + const columns: [ EuiTableActionsColumnType, ...Array> @@ -83,6 +90,7 @@ const ResourceFindingsTableComponent = ({ onChange={setTableOptions} pagination={pagination} sorting={sorting} + rowProps={getRowProps} /> {selectedFinding && ( { @@ -128,3 +129,14 @@ export const getAggregationCount = (buckets: estypes.AggregationsStringRareTerms failed: failed?.doc_count || 0, }; }; + +const isSelectedRow = (row: CspFinding, selected?: CspFinding) => + row.resource.id === selected?.resource.id && row.rule.id === selected?.rule.id; + +export const getSelectedRowStyle = ( + theme: EuiThemeComputed, + row: CspFinding, + selected?: CspFinding +): React.CSSProperties => ({ + background: isSelectedRow(row, selected) ? theme.colors.highlight : undefined, +});