[Security/Timelines] Remove deprecated closePopover call

- for closeCellPopover ref API

x-pack/plugins/security_solution/public/common/lib/cell_actions/default_cell_actions.tsx

@@ -281,19 +281,20 @@ export const cellActions: TGridCellAction[] = [
     header,
     timelineId,
     pageSize,
+    closeCellPopover,
   }: {
     data: TimelineNonEcsData[][];
     ecsData: Ecs[];
     header?: ColumnHeaderOptions;
     timelineId: string;
     pageSize: number;
+    closeCellPopover?: () => void;
   }) => {
     if (header !== undefined) {
       return function FieldValue({
         rowIndex,
         columnId,
         Component,
-        closePopover,
       }: EuiDataGridColumnCellActionProps) {
         const {
           pageRowIndex,
@@ -331,7 +332,7 @@ export const cellActions: TGridCellAction[] = [
             truncate={false}
             title={title}
             linkValue={linkValue}
-            onClick={closePopover}
+            onClick={closeCellPopover}
           />
         ) : (
           // data grid expects each cell action always return an element, it crashes if returns null

x-pack/plugins/timelines/common/types/timeline/columns/index.tsx

@@ -50,6 +50,7 @@ export type TGridCellAction = ({
   header,
   pageSize,
   timelineId,
+  closeCellPopover,
 }: {
   browserFields: BrowserFields;
   /** each row of data is represented as one TimelineNonEcsData[] */
@@ -58,6 +59,7 @@ export type TGridCellAction = ({
   header?: ColumnHeaderOptions;
   pageSize: number;
   timelineId: string;
+  closeCellPopover?: () => void;
 }) => (props: EuiDataGridColumnCellActionProps) => ReactNode;
 
 /** The specification of a column header */

x-pack/plugins/timelines/public/components/t_grid/body/index.tsx

@@ -7,6 +7,7 @@
 
 import {
   EuiDataGrid,
+  EuiDataGridRefProps,
   EuiDataGridColumn,
   EuiDataGridCellValueElementProps,
   EuiDataGridControlColumn,
@@ -28,6 +29,7 @@ import React, {
   useMemo,
   useState,
   useContext,
+  useRef,
 } from 'react';
 import { connect, ConnectedProps, useDispatch } from 'react-redux';
 
@@ -337,6 +339,8 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
     trailingControlColumns = EMPTY_CONTROL_COLUMNS,
     unit = defaultUnit,
   }) => {
+    const dataGridRef = useRef<EuiDataGridRefProps>(null);
+
     const dispatch = useDispatch();
     const getManageTimeline = useMemo(() => tGridSelectors.getManageTimelineById(), []);
     const { queryFields, selectAll } = useDeepEqualSelector((state) =>
@@ -687,6 +691,7 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
               header: columnHeaders.find((h) => h.id === header.id),
               pageSize,
               timelineId: id,
+              closeCellPopover: dataGridRef.current?.closeCellPopover,
             });
           return {
             ...header,
@@ -837,6 +842,7 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
                   onChangeItemsPerPage,
                   onChangePage,
                 }}
+                ref={dataGridRef}
               />
             </EuiDataGridContainer>
           )}