[Cloud Posture] highlight selected table item (#145349)

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<FindingsTab>(tabs[0]);
 
   return (
-    <EuiFlyout ownFocus={false} onClose={onClose}>
+    <EuiFlyout onClose={onClose}>
       <EuiFlyoutHeader>
         <EuiFlexGroup alignItems="center">
           <EuiFlexItem grow={false}>

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<EuiBasicTableProps<CspFinding>>;
 
@@ -44,10 +46,12 @@ const FindingsTableComponent = ({
   setTableOptions,
   onAddFilter,
 }: Props) => {
+  const { euiTheme } = useEuiTheme();
   const [selectedFinding, setSelectedFinding] = useState<CspFinding>();
 
   const getRowProps = (row: CspFinding) => ({
     'data-test-subj': TEST_SUBJECTS.getFindingsTableRowTestId(row.resource.id),
+    style: getSelectedRowStyle(euiTheme, row, selectedFinding),
   });
 
   const getCellProps = (row: CspFinding, column: EuiTableFieldDataColumnType<CspFinding>) => ({

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<CspFinding>();
 
+  const getRowProps = (row: CspFinding) => ({
+    style: getSelectedRowStyle(euiTheme, row, selectedFinding),
+  });
+
   const columns: [
     EuiTableActionsColumnType<CspFinding>,
     ...Array<EuiBasicTableColumn<CspFinding>>
@@ -83,6 +90,7 @@ const ResourceFindingsTableComponent = ({
         onChange={setTableOptions}
         pagination={pagination}
         sorting={sorting}
+        rowProps={getRowProps}
       />
       {selectedFinding && (
         <FindingsRuleFlyout

x-pack/plugins/cloud_security_posture/public/pages/findings/utils/utils.ts

@@ -6,12 +6,13 @@
  */
 
 import { buildEsQuery, type Query } from '@kbn/es-query';
-import { EuiBasicTableProps, Pagination } from '@elastic/eui';
+import type { EuiBasicTableProps, EuiThemeComputed, Pagination } from '@elastic/eui';
 import { useCallback, useEffect, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
 import type { estypes } from '@elastic/elasticsearch';
 import type { FindingsBaseProps, FindingsBaseURLQuery } from '../types';
 import { useKibana } from '../../../common/hooks/use_kibana';
+import type { CspFinding } from '../../../../common/schemas/csp_finding';
 export { getFilters } from './get_filters';
 
 const getBaseQuery = ({ dataView, query, filters }: FindingsBaseURLQuery & FindingsBaseProps) => {
@@ -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,
+});