From 082ce29145a192755a1ed4a27750513dbde79117 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Fri, 18 Mar 2022 11:56:54 -0700 Subject: [PATCH 1/2] Deprecate the `closePopover` callback passed to `cellActions` in favor of using the ref method --- .../datagrid/cells_popovers/datagrid_cells_example.js | 11 ++++++++--- src/components/datagrid/body/data_grid_cell.test.tsx | 2 -- src/components/datagrid/body/data_grid_cell.tsx | 1 - .../datagrid/body/data_grid_cell_actions.test.tsx | 2 -- .../datagrid/body/data_grid_cell_actions.tsx | 5 +---- src/components/datagrid/data_grid_types.ts | 5 ----- upcoming_changelogs/5734.md | 3 +++ 7 files changed, 12 insertions(+), 17 deletions(-) create mode 100644 upcoming_changelogs/5734.md diff --git a/src-docs/src/views/datagrid/cells_popovers/datagrid_cells_example.js b/src-docs/src/views/datagrid/cells_popovers/datagrid_cells_example.js index c5e7bff6f9f..015a9992522 100644 --- a/src-docs/src/views/datagrid/cells_popovers/datagrid_cells_example.js +++ b/src-docs/src/views/datagrid/cells_popovers/datagrid_cells_example.js @@ -75,13 +75,18 @@ export const DataGridCellsExample = { cellAction property, the cell's automatically expandable.

+

+ To close a cell's expansion popover upon clicking an action, + use the{' '} + + closeCellPopover + {' '} + API available via the ref prop. +

Below, the email and city columns provide 1{' '} cellAction each, while the country column provides 2 cellActions. -
- The email column cell action closes the popover if it's - expanded through the closePopover prop.

), diff --git a/src/components/datagrid/body/data_grid_cell.test.tsx b/src/components/datagrid/body/data_grid_cell.test.tsx index 31ca2e5e20e..2b33f201eea 100644 --- a/src/components/datagrid/body/data_grid_cell.test.tsx +++ b/src/components/datagrid/body/data_grid_cell.test.tsx @@ -75,8 +75,6 @@ describe('EuiDataGridCell', () => { }); (getCellActions().prop('onExpandClick') as Function)(); expect(mockPopoverContext.closeCellPopover).toHaveBeenCalledTimes(1); - (getCellActions().prop('closePopover') as Function)(); - expect(mockPopoverContext.closeCellPopover).toHaveBeenCalledTimes(2); }); describe('shouldComponentUpdate', () => { diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx index 78c6ced31c3..8ef6c1ba32a 100644 --- a/src/components/datagrid/body/data_grid_cell.tsx +++ b/src/components/datagrid/body/data_grid_cell.tsx @@ -666,7 +666,6 @@ export class EuiDataGridCell extends Component< rowIndex={rowIndex} colIndex={colIndex} column={column} - closePopover={closeCellPopover} onExpandClick={() => { if (popoverIsOpen) { closeCellPopover(); diff --git a/src/components/datagrid/body/data_grid_cell_actions.test.tsx b/src/components/datagrid/body/data_grid_cell_actions.test.tsx index c1e77e8a3a4..f2657eaae63 100644 --- a/src/components/datagrid/body/data_grid_cell_actions.test.tsx +++ b/src/components/datagrid/body/data_grid_cell_actions.test.tsx @@ -21,7 +21,6 @@ const MockAction: EuiDataGridColumnCellAction = ({ Component }) => ( describe('EuiDataGridCellActions', () => { const requiredProps = { - closePopover: jest.fn(), onExpandClick: jest.fn(), rowIndex: 0, colIndex: 0, @@ -93,7 +92,6 @@ describe('EuiDataGridCellActions', () => { > void; onExpandClick: () => void; column?: EuiDataGridColumn; rowIndex: number; @@ -82,13 +80,12 @@ export const EuiDataGridCellActions = ({ columnId={column.id} Component={ButtonComponent} isExpanded={false} - closePopover={closePopover} /> ); } ) : []; - }, [column, colIndex, rowIndex, closePopover]); + }, [column, colIndex, rowIndex]); return (
diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts index 7b5bd70e7e4..afd47ccc3d6 100644 --- a/src/components/datagrid/data_grid_types.ts +++ b/src/components/datagrid/data_grid_types.ts @@ -631,11 +631,6 @@ export interface EuiDataGridColumnCellActionProps { * Determines whether the cell's action is displayed expanded (in the Popover) */ isExpanded: boolean; - /** - * Closes the popover if a cell is expanded. - * The prop is provided for an expanded cell only. - */ - closePopover?: () => void; } export interface EuiDataGridColumnVisibility { diff --git a/upcoming_changelogs/5734.md b/upcoming_changelogs/5734.md new file mode 100644 index 00000000000..09aeacd95dc --- /dev/null +++ b/upcoming_changelogs/5734.md @@ -0,0 +1,3 @@ +**Breaking changes** + +- Removed the `closePopover()` callback passed to `EuiDataGrid`'s `cellActions` render functions. Use `closeCellPopover()` passed by `EuiDataGrid`'s `ref` prop instead. From 475f95d9ed4d01022fee4d940124232e901c24eb Mon Sep 17 00:00:00 2001 From: Constance Date: Tue, 5 Apr 2022 10:08:13 -0700 Subject: [PATCH 2/2] Fix accidentally deleted newline --- src/components/datagrid/body/data_grid_cell_actions.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/datagrid/body/data_grid_cell_actions.tsx b/src/components/datagrid/body/data_grid_cell_actions.tsx index a6846449a01..ea2c0ae902d 100644 --- a/src/components/datagrid/body/data_grid_cell_actions.tsx +++ b/src/components/datagrid/body/data_grid_cell_actions.tsx @@ -67,6 +67,7 @@ export const EuiDataGridCellActions = ({ iconSize="s" /> ); + const [visibleCellActions] = getVisibleCellActions( column?.cellActions, column?.visibleCellActions