diff --git a/x-pack/plugins/security_solution/public/common/lib/cell_actions/add_to_timeline.tsx b/x-pack/plugins/security_solution/public/common/lib/cell_actions/add_to_timeline.tsx index b654b01dbb4ef..60a4e73a6c5cf 100644 --- a/x-pack/plugins/security_solution/public/common/lib/cell_actions/add_to_timeline.tsx +++ b/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(() => { diff --git a/x-pack/plugins/security_solution/public/common/lib/cell_actions/copy.tsx b/x-pack/plugins/security_solution/public/common/lib/cell_actions/copy.tsx index f4fdb22aff136..1ddb1c6ea759e 100644 --- a/x-pack/plugins/security_solution/public/common/lib/cell_actions/copy.tsx +++ b/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]); diff --git a/x-pack/plugins/security_solution/public/common/lib/cell_actions/expanded_cell_value_actions.tsx b/x-pack/plugins/security_solution/public/common/lib/cell_actions/expanded_cell_value_actions.tsx index 0967c9c2533d3..d3b23bb1a04f4 100644 --- a/x-pack/plugins/security_solution/public/common/lib/cell_actions/expanded_cell_value_actions.tsx +++ b/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 = ({ onFilterAdded, scopeId, value, + closeCellPopover, }) => { const { timelines, @@ -99,6 +101,7 @@ const ExpandedCellValueActionsComponent: React.FC = ({ size: 's', showTooltip: false, value, + onClick: closeCellPopover, })} @@ -111,6 +114,7 @@ const ExpandedCellValueActionsComponent: React.FC = ({ size: 's', showTooltip: false, value, + onClick: closeCellPopover, })} diff --git a/x-pack/plugins/security_solution/public/common/lib/cell_actions/filter_for.tsx b/x-pack/plugins/security_solution/public/common/lib/cell_actions/filter_for.tsx index cc721b4944244..7e0e08557de53 100644 --- a/x-pack/plugins/security_solution/public/common/lib/cell_actions/filter_for.tsx +++ b/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]); diff --git a/x-pack/plugins/security_solution/public/common/lib/cell_actions/filter_out.tsx b/x-pack/plugins/security_solution/public/common/lib/cell_actions/filter_out.tsx index 10f36a14e2c5e..442c7320e83b2 100644 --- a/x-pack/plugins/security_solution/public/common/lib/cell_actions/filter_out.tsx +++ b/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]); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/cell_rendering/default_cell_renderer.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/cell_rendering/default_cell_renderer.tsx index ea66ac153d3be..01c06946b5343 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/cell_rendering/default_cell_renderer.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/cell_rendering/default_cell_renderer.tsx @@ -36,6 +36,7 @@ export const DefaultCellRenderer: React.FC = ({ 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 = ({ globalFilters={globalFilters} scopeId={scopeId} value={values} + closeCellPopover={closeCellPopover} /> )} diff --git a/x-pack/plugins/timelines/common/types/timeline/cells/index.ts b/x-pack/plugins/timelines/common/types/timeline/cells/index.ts index cc9cec70d8751..52130cf52354d 100644 --- a/x-pack/plugins/timelines/common/types/timeline/cells/index.ts +++ b/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; }; diff --git a/x-pack/plugins/timelines/public/components/t_grid/body/index.tsx b/x-pack/plugins/timelines/public/components/t_grid/body/index.tsx index 23998a25fabd2..56227a91b585c 100644 --- a/x-pack/plugins/timelines/public/components/t_grid/body/index.tsx +++ b/x-pack/plugins/timelines/public/components/t_grid/body/index.tsx @@ -732,6 +732,7 @@ export const BodyComponent = React.memo( setEventsDeleted, hasAlertsCrudPermissions, ]); + const closeCellPopoverAction = dataGridRef.current?.closeCellPopover; const columnsWithCellActions: EuiDataGridColumn[] = useMemo( () => columnHeaders.map((header) => { @@ -743,7 +744,7 @@ export const BodyComponent = React.memo( 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( dispatch, id, pageSize, + closeCellPopoverAction, ] ); @@ -833,6 +835,7 @@ export const BodyComponent = React.memo( setCellProps, scopeId: id, truncate: isDetails ? false : true, + closeCellPopover: closeCellPopoverAction, }) as React.ReactElement; }; return Cell; @@ -846,6 +849,7 @@ export const BodyComponent = React.memo( renderCellValue, rowRenderers, theme, + closeCellPopoverAction, ]); const onChangeItemsPerPage = useCallback(