Add colIndex prop to cell actions

- so that cell actions that trigger modals or flyouts can re-focus into the correct cell using the new ref API
elastic · Jan 5, 2022 · 1609e45 · 1609e45
1 parent 14401ef
commit 1609e45
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 3 deletions.
diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx
@@ -405,7 +405,7 @@ export class EuiDataGridCell extends Component<
       rowManager,
       ...rest
     } = this.props;
-    const { rowIndex } = rest;
+    const { rowIndex, colIndex } = rest;
 
     const showCellButtons =
       this.state.isFocused ||
@@ -546,6 +546,7 @@ export class EuiDataGridCell extends Component<
             </div>
             <EuiDataGridCellButtons
               rowIndex={rowIndex}
+              colIndex={colIndex}
               column={column}
               popoverIsOpen={this.state.popoverIsOpen}
               closePopover={this.closePopover}
@@ -588,6 +589,7 @@ export class EuiDataGridCell extends Component<
               panelRefFn={(ref) => (this.popoverPanelRef.current = ref)}
               popoverIsOpen={this.state.popoverIsOpen}
               rowIndex={rowIndex}
+              colIndex={colIndex}
               renderCellValue={rest.renderCellValue}
               popoverContent={PopoverContent}
             />

diff --git a/src/components/datagrid/body/data_grid_cell_buttons.test.tsx b/src/components/datagrid/body/data_grid_cell_buttons.test.tsx
@@ -17,6 +17,7 @@ describe('EuiDataGridCellButtons', () => {
     closePopover: jest.fn(),
     onExpandClick: jest.fn(),
     rowIndex: 0,
+    colIndex: 0,
   };
 
   it('renders an expand button', () => {
@@ -66,6 +67,7 @@ describe('EuiDataGridCellButtons', () => {
         <Component
           Component={[Function]}
           closePopover={[MockFunction]}
+          colIndex={0}
           columnId="someId"
           isExpanded={false}
           key="0"

diff --git a/src/components/datagrid/body/data_grid_cell_buttons.tsx b/src/components/datagrid/body/data_grid_cell_buttons.tsx
@@ -21,12 +21,14 @@ export const EuiDataGridCellButtons = ({
   onExpandClick,
   column,
   rowIndex,
+  colIndex,
 }: {
   popoverIsOpen: boolean;
   closePopover: () => void;
   onExpandClick: () => void;
   column?: EuiDataGridColumn;
   rowIndex: number;
+  colIndex: number;
 }) => {
   const buttonIconClasses = classNames('euiDataGridRowCell__expandButtonIcon', {
     'euiDataGridRowCell__expandButtonIcon-isActive': popoverIsOpen,
@@ -74,6 +76,7 @@ export const EuiDataGridCellButtons = ({
               <CellButtonElement
                 key={idx}
                 rowIndex={rowIndex}
+                colIndex={colIndex}
                 columnId={column.id}
                 Component={ButtonComponent}
                 isExpanded={false}
@@ -83,7 +86,7 @@ export const EuiDataGridCellButtons = ({
           }
         )
       : [];
-  }, [column, rowIndex, closePopover]);
+  }, [column, colIndex, rowIndex, closePopover]);
 
   return (
     <div className={buttonClasses}>{[...additionalButtons, expandButton]}</div>

diff --git a/src/components/datagrid/body/data_grid_cell_popover.test.tsx b/src/components/datagrid/body/data_grid_cell_popover.test.tsx
@@ -14,8 +14,8 @@ import { EuiDataGridCellPopover } from './data_grid_cell_popover';
 
 describe('EuiDataGridCellPopover', () => {
   const requiredProps = {
-    // column,
     rowIndex: 0,
+    colIndex: 0,
     cellContentProps: {
       rowIndex: 0,
       columnId: 'someId',
@@ -123,6 +123,7 @@ describe('EuiDataGridCellPopover', () => {
               <Component
                 Component={[Function]}
                 closePopover={[MockFunction]}
+                colIndex={0}
                 columnId="someId"
                 isExpanded={true}
                 rowIndex={0}

diff --git a/src/components/datagrid/body/data_grid_cell_popover.tsx b/src/components/datagrid/body/data_grid_cell_popover.tsx
@@ -28,6 +28,7 @@ export function EuiDataGridCellPopover({
   popoverIsOpen,
   renderCellValue,
   rowIndex,
+  colIndex,
 }: EuiDataGridCellPopoverProps) {
   const CellElement = renderCellValue as JSXElementConstructor<
     EuiDataGridCellValueElementProps
@@ -71,6 +72,7 @@ export function EuiDataGridCellPopover({
                       <EuiFlexItem key={idx}>
                         <CellButtonElement
                           rowIndex={rowIndex}
+                          colIndex={colIndex}
                           columnId={column.id}
                           Component={(props: EuiButtonEmptyProps) => (
                             <EuiButtonEmpty {...props} size="s" />

diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts
@@ -313,6 +313,7 @@ export interface EuiDataGridCellPopoverProps {
     | JSXElementConstructor<EuiDataGridCellValueElementProps>
     | ((props: EuiDataGridCellValueElementProps) => ReactNode);
   rowIndex: number;
+  colIndex: number;
 }
 export interface EuiDataGridColumnSortingDraggableProps {
   id: string;