[Security Solution][Bug] fix popover in t-grid

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

@@ -25,9 +25,11 @@ import { addProvider } from '../../../timelines/store/timeline/actions';
 export const getAddToTimelineCellAction = ({
   data,
   pageSize,
+  closeCellPopover,
 }: {
   data?: TimelineNonEcsData[][];
   pageSize: number;
+  closeCellPopover?: () => void;
 }) =>
   data && data.length > 0
     ? function AddToTimeline({ rowIndex, columnId, Component }: EuiDataGridColumnCellActionProps) {
@@ -97,6 +99,9 @@ export const getAddToTimelineCellAction = ({
               providers: dataProvider,
             })
           );
+          if (closeCellPopover) {
+            closeCellPopover();
+          }
         }, [dataProvider, dispatch]);
 
         const addToTimelineProps = useMemo(() => {

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

@@ -16,9 +16,11 @@ import { EmptyComponent, useKibanaServices } from './helpers';
 export const getCopyCellAction = ({
   data,
   pageSize,
+  closeCellPopover,
 }: {
   data?: TimelineNonEcsData[][];
   pageSize: number;
+  closeCellPopover?: () => void;
 }) =>
   data && data.length > 0
     ? function CopyButton({ rowIndex, columnId, Component }: EuiDataGridColumnCellActionProps) {
@@ -45,6 +47,7 @@ export const getCopyCellAction = ({
             ownFocus: false,
             showTooltip: false,
             value,
+            onClick: closeCellPopover,
           };
         }, [Component, columnId, value]);
 

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

@@ -22,6 +22,7 @@ interface Props {
   scopeId: string;
   value: string[] | undefined;
   onFilterAdded?: () => void;
+  closeCellPopover?: () => void;
 }
 
 const StyledFlexGroup = styled(EuiFlexGroup)`
@@ -40,6 +41,7 @@ const ExpandedCellValueActionsComponent: React.FC<Props> = ({
   onFilterAdded,
   scopeId,
   value,
+  closeCellPopover,
 }) => {
   const {
     timelines,
@@ -99,6 +101,7 @@ const ExpandedCellValueActionsComponent: React.FC<Props> = ({
             size: 's',
             showTooltip: false,
             value,
+            onClick: closeCellPopover,
           })}
         </EuiFlexItem>
         <EuiFlexItem>
@@ -111,6 +114,7 @@ const ExpandedCellValueActionsComponent: React.FC<Props> = ({
             size: 's',
             showTooltip: false,
             value,
+            onClick: closeCellPopover,
           })}
         </EuiFlexItem>
       </StyledFlexGroup>

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

@@ -16,9 +16,11 @@ import { EmptyComponent, onFilterAdded, useKibanaServices } from './helpers';
 export const getFilterForCellAction = ({
   data,
   pageSize,
+  closeCellPopover,
 }: {
   data?: TimelineNonEcsData[][];
   pageSize: number;
+  closeCellPopover?: () => void;
 }) =>
   data && data.length > 0
     ? function FilterFor({ rowIndex, columnId, Component }: EuiDataGridColumnCellActionProps) {
@@ -47,6 +49,7 @@ export const getFilterForCellAction = ({
             ownFocus: false,
             showTooltip: false,
             value,
+            onClick: closeCellPopover,
           };
         }, [Component, columnId, filterManager, value]);
 

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

@@ -15,9 +15,11 @@ import { EmptyComponent, onFilterAdded, useKibanaServices } from './helpers';
 export const getFilterOutCellAction = ({
   data,
   pageSize,
+  closeCellPopover,
 }: {
   data?: TimelineNonEcsData[][];
   pageSize: number;
+  closeCellPopover?: () => void;
 }) =>
   data && data.length > 0
     ? function FilterOut({ rowIndex, columnId, Component }: EuiDataGridColumnCellActionProps) {
@@ -47,6 +49,7 @@ export const getFilterOutCellAction = ({
             ownFocus: false,
             showTooltip: false,
             value,
+            onClick: closeCellPopover,
           };
         }, [Component, columnId, filterManager, value]);
 

x-pack/plugins/security_solution/public/timelines/components/timeline/cell_rendering/default_cell_renderer.tsx

@@ -36,6 +36,7 @@ export const DefaultCellRenderer: React.FC<CellValueElementProps> = ({
   setCellProps,
   scopeId,
   truncate,
+  closeCellPopover,
 }) => {
   const asPlainText = useMemo(() => {
     return getLinkColumnDefinition(header.id, header.type, undefined) !== undefined && !isTimeline;
@@ -72,6 +73,7 @@ export const DefaultCellRenderer: React.FC<CellValueElementProps> = ({
           globalFilters={globalFilters}
           scopeId={scopeId}
           value={values}
+          closeCellPopover={closeCellPopover}
         />
       )}
     </>

x-pack/plugins/timelines/common/types/timeline/cells/index.ts

@@ -30,4 +30,5 @@ export type CellValueElementProps = EuiDataGridCellValueElementProps & {
   scopeId: string;
   truncate?: boolean;
   key?: string;
+  closeCellPopover?: () => void;
 };

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

@@ -732,6 +732,7 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
       setEventsDeleted,
       hasAlertsCrudPermissions,
     ]);
+    const closeCellPopoverAction = dataGridRef.current?.closeCellPopover;
     const columnsWithCellActions: EuiDataGridColumn[] = useMemo(
       () =>
         columnHeaders.map((header) => {
@@ -743,7 +744,7 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
               header: columnHeaders.find((h) => h.id === header.id),
               pageSize,
               scopeId: id,
-              closeCellPopover: dataGridRef.current?.closeCellPopover,
+              closeCellPopover: closeCellPopoverAction,
             });
           return {
             ...header,
@@ -782,6 +783,7 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
         dispatch,
         id,
         pageSize,
+        closeCellPopoverAction,
       ]
     );
 
@@ -833,6 +835,7 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
           setCellProps,
           scopeId: id,
           truncate: isDetails ? false : true,
+          closeCellPopover: closeCellPopoverAction,
         }) as React.ReactElement;
       };
       return Cell;
@@ -846,6 +849,7 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
       renderCellValue,
       rowRenderers,
       theme,
+      closeCellPopoverAction,
     ]);
 
     const onChangeItemsPerPage = useCallback(