From 430746bea11fc21caba06d19a20ae4746484b118 Mon Sep 17 00:00:00 2001
From: Kevin Qualters <kevin.qualters@elastic.co>
Date: Fri, 8 Mar 2024 13:45:29 -0800
Subject: [PATCH] EuiDataGrid cell memoizations/cleanup

- remove more inline jsx vars

- move fn utilities to bottom of file + wrap in `memo()`

- get rid of `cellContentProps` obj, just use props
---
 .../body/cell/data_grid_cell.test.tsx         |  44 +++-
 .../datagrid/body/cell/data_grid_cell.tsx     | 243 ++++++++++--------
 .../body/cell/data_grid_cell_actions.test.tsx |  69 ++---
 .../body/cell/data_grid_cell_actions.tsx      |  16 +-
 4 files changed, 225 insertions(+), 147 deletions(-)

diff --git a/src/components/datagrid/body/cell/data_grid_cell.test.tsx b/src/components/datagrid/body/cell/data_grid_cell.test.tsx
index 2e02393b49cd..610c29e04825 100644
--- a/src/components/datagrid/body/cell/data_grid_cell.test.tsx
+++ b/src/components/datagrid/body/cell/data_grid_cell.test.tsx
@@ -111,7 +111,15 @@ describe('EuiDataGridCell', () => {
         EuiDataGridCell.prototype,
         'shouldComponentUpdate'
       );
-      component = mount(<EuiDataGridCell {...requiredProps} />);
+      component = mount(
+        <EuiDataGridCell
+          {...requiredProps}
+          column={{
+            id: 'someColumn',
+            cellActions: [() => <button />],
+          }}
+        />
+      );
     });
     afterEach(() => {
       shouldComponentUpdate.mockRestore();
@@ -309,6 +317,10 @@ describe('EuiDataGridCell', () => {
             {...requiredProps}
             colIndex={3}
             visibleRowIndex={3}
+            column={{
+              id: 'someColumn',
+              cellActions: [() => <button />],
+            }}
           />
         </DataGridFocusContext.Provider>
       );
@@ -325,6 +337,10 @@ describe('EuiDataGridCell', () => {
         <EuiDataGridCell
           {...requiredProps}
           popoverContext={{ ...mockPopoverContext, popoverIsOpen: true }}
+          column={{
+            id: 'someColumn',
+            cellActions: [() => <button />],
+          }}
         />
       );
 
@@ -340,7 +356,13 @@ describe('EuiDataGridCell', () => {
 
       const component = mount(
         <DataGridFocusContext.Provider value={mockFocusContext}>
-          <EuiDataGridCell {...requiredProps} />
+          <EuiDataGridCell
+            {...requiredProps}
+            column={{
+              id: 'someColumn',
+              cellActions: [() => <button />],
+            }}
+          />
         </DataGridFocusContext.Provider>
       );
       component.unmount();
@@ -357,6 +379,10 @@ describe('EuiDataGridCell', () => {
             {...requiredProps}
             colIndex={3}
             visibleRowIndex={3}
+            column={{
+              id: 'someColumn',
+              cellActions: [() => <button />],
+            }}
           />
         </DataGridFocusContext.Provider>
       );
@@ -375,6 +401,10 @@ describe('EuiDataGridCell', () => {
             ...mockPopoverContext,
             popoverIsOpen: true,
           }}
+          column={{
+            id: 'someColumn',
+            cellActions: [() => <button />],
+          }}
         />
       );
       component.unmount();
@@ -393,6 +423,10 @@ describe('EuiDataGridCell', () => {
             {...requiredProps}
             colIndex={5}
             visibleRowIndex={10}
+            column={{
+              id: 'someColumn',
+              cellActions: [() => <button />],
+            }}
           />
         </DataGridFocusContext.Provider>
       );
@@ -428,6 +462,10 @@ describe('EuiDataGridCell', () => {
       colIndex: 1,
       visibleRowIndex: 2,
       isExpandable: true,
+      column: {
+        id: 'someColumn',
+        cellActions: [() => <button />],
+      },
     };
 
     it('returns true if the cell is expandable, the popover is open, and the cell location matches', () => {
@@ -455,7 +493,7 @@ describe('EuiDataGridCell', () => {
 
     it('returns false if the cell is not expandable', () => {
       const component = mount(
-        <EuiDataGridCell {...props} isExpandable={false} />
+        <EuiDataGridCell {...props} isExpandable={false} column={undefined} />
       );
       expect((component.instance() as any).isPopoverOpen()).toEqual(false);
     });
diff --git a/src/components/datagrid/body/cell/data_grid_cell.tsx b/src/components/datagrid/body/cell/data_grid_cell.tsx
index e124684e1112..1c05480ebb38 100644
--- a/src/components/datagrid/body/cell/data_grid_cell.tsx
+++ b/src/components/datagrid/body/cell/data_grid_cell.tsx
@@ -15,8 +15,9 @@ import React, {
   JSXElementConstructor,
   KeyboardEvent,
   memo,
+  useMemo,
   MutableRefObject,
-  ReactNode,
+  ReactElement,
 } from 'react';
 import { createPortal } from 'react-dom';
 
@@ -48,13 +49,15 @@ import { HandleInteractiveChildren } from './focus_utils';
 const EuiDataGridCellContent: FunctionComponent<
   EuiDataGridCellValueProps & {
     setCellProps: EuiDataGridCellValueElementProps['setCellProps'];
-    setCellContentsRef: EuiDataGridCell['setCellContentsRef'];
+    setCellContentsRef: (ref: HTMLDivElement | null) => void;
+    showCellActions: boolean;
     isExpanded: boolean;
+    onExpandClick: () => void;
+    popoverAnchorRef: MutableRefObject<HTMLDivElement | null>;
     isControlColumn: boolean;
     isFocused: boolean;
     ariaRowIndex: number;
     rowHeight?: EuiDataGridRowHeightOption;
-    cellActions?: ReactNode;
   }
 > = memo(
   ({
@@ -69,93 +72,97 @@ const EuiDataGridCellContent: FunctionComponent<
     rowHeightUtils,
     isControlColumn,
     isFocused,
-    cellActions,
+    showCellActions,
+    onExpandClick,
+    popoverAnchorRef,
     ...rest
   }) => {
-    // React is more permissible than the TS types indicate
+    // React is more permissive than the TS types indicate
     const CellElement =
       renderCellValue as JSXElementConstructor<EuiDataGridCellValueElementProps>;
 
-    const cellHeightType =
-      rowHeightUtils?.getHeightType(rowHeight) || 'default';
-
-    const classes = classNames(
-      'euiDataGridRowCell__content',
-      `euiDataGridRowCell__content--${cellHeightType}Height`,
-      !isControlColumn && {
-        'eui-textBreakWord': cellHeightType !== 'default',
-        'eui-textTruncate': cellHeightType === 'default',
-      }
+    const cellHeightType = useMemo(
+      () => rowHeightUtils?.getHeightType(rowHeight) || 'default',
+      [rowHeightUtils, rowHeight]
     );
 
-    let cellContent = (
-      <div
-        ref={setCellContentsRef}
-        data-datagrid-cellcontent
-        className={classes}
-      >
-        <CellElement
-          isDetails={false}
-          data-test-subj="cell-content"
-          rowIndex={rowIndex}
-          colIndex={colIndex}
-          schema={column?.schema || rest.columnType}
-          {...cellContext}
-          {...rest}
-        />
-      </div>
-    );
-    if (cellHeightType === 'lineCount' && !isControlColumn) {
-      const lines = rowHeightUtils!.getLineCount(rowHeight)!;
-      cellContent = (
-        <EuiTextBlockTruncate lines={lines} cloneElement>
-          {cellContent}
-        </EuiTextBlockTruncate>
-      );
-    }
-
-    const screenReaderText = (
-      <EuiScreenReaderOnly>
-        <p hidden={!isFocused}>
-          {'- '}
-          <EuiI18n
-            token="euiDataGridCell.position"
-            default="{columnId}, column {col}, row {row}"
-            values={{
-              columnId: column?.displayAsText || rest.columnId,
-              col: colIndex + 1,
-              row: ariaRowIndex,
-            }}
-          />
-          {cellActions && (
-            <>
-              {'. '}
-              <EuiI18n
-                token="euiDataGridCell.expansionEnterPrompt"
-                default="Press the Enter key to expand this cell."
-              />
-            </>
-          )}
-        </p>
-      </EuiScreenReaderOnly>
+    const classes = useMemo(
+      () =>
+        classNames(
+          'euiDataGridRowCell__content',
+          `euiDataGridRowCell__content--${cellHeightType}Height`,
+          !isControlColumn && {
+            'eui-textBreakWord': cellHeightType !== 'default',
+            'eui-textTruncate': cellHeightType === 'default',
+          }
+        ),
+      [cellHeightType, isControlColumn]
     );
 
     return (
       <>
-        {cellContent}
-        {screenReaderText}
-        {cellActions}
+        <RenderTruncatedCellContent
+          hasLineCountTruncation={
+            cellHeightType === 'lineCount' && !isControlColumn
+          }
+          rowHeight={rowHeight}
+        >
+          <div
+            ref={setCellContentsRef}
+            data-datagrid-cellcontent
+            className={classes}
+          >
+            <CellElement
+              isDetails={false}
+              data-test-subj="cell-content"
+              rowIndex={rowIndex}
+              colIndex={colIndex}
+              schema={column?.schema || rest.columnType}
+              {...cellContext}
+              {...rest}
+            />
+          </div>
+        </RenderTruncatedCellContent>
+
+        <EuiScreenReaderOnly>
+          <p hidden={!isFocused}>
+            {'- '}
+            <EuiI18n
+              token="euiDataGridCell.position"
+              default="{columnId}, column {col}, row {row}"
+              values={{
+                columnId: column?.displayAsText || rest.columnId,
+                col: colIndex + 1,
+                row: ariaRowIndex,
+              }}
+            />
+            {showCellActions && (
+              <>
+                {'. '}
+                <EuiI18n
+                  token="euiDataGridCell.expansionEnterPrompt"
+                  default="Press the Enter key to expand this cell."
+                />
+              </>
+            )}
+          </p>
+        </EuiScreenReaderOnly>
+
+        {showCellActions && (
+          <EuiDataGridCellActions
+            rowIndex={rowIndex}
+            colIndex={colIndex}
+            column={column}
+            onExpandClick={onExpandClick}
+            popoverAnchorRef={popoverAnchorRef}
+          />
+        )}
       </>
     );
   }
 );
 EuiDataGridCellContent.displayName = 'EuiDataGridCellContent';
 
-const RenderCellInRow: FunctionComponent<{
-  children: ReactNode;
-  row?: HTMLElement;
-}> = ({ row, children }) => <>{row ? createPortal(children, row) : children}</>;
-
 export class EuiDataGridCell extends Component<
   EuiDataGridCellProps,
   EuiDataGridCellState
@@ -613,24 +620,6 @@ export class EuiDataGridCell extends Component<
       rowHeightsOptions
     );
 
-    const cellContentProps = {
-      ...rest,
-      setCellProps: this.setCellProps,
-      column,
-      columnType,
-      isExpandable,
-      isExpanded: popoverIsOpen,
-      isDetails: false,
-      isFocused: this.state.isFocused,
-      setCellContentsRef: this.setCellContentsRef,
-      rowHeight,
-      rowHeightUtils,
-      isControlColumn: cellClasses.includes(
-        'euiDataGridRowCell--controlColumn'
-      ),
-      ariaRowIndex,
-    };
-
     const row =
       rowManager && !IS_JEST_ENVIRONMENT
         ? rowManager.getRow({
@@ -665,26 +654,25 @@ export class EuiDataGridCell extends Component<
             renderFocusTrap={!isExpandable}
           >
             <EuiDataGridCellContent
-              {...cellContentProps}
-              cellActions={
-                showCellActions && (
-                  <>
-                    <EuiDataGridCellActions
-                      rowIndex={rowIndex}
-                      colIndex={colIndex}
-                      column={column}
-                      onExpandClick={this.handleCellExpansionClick}
-                    />
-                    {/* Give the cell expansion popover a separate div/ref - otherwise the
-                  extra popover wrappers mess up the absolute positioning and cause
-                  animation stuttering */}
-                    <div
-                      ref={this.popoverAnchorRef}
-                      data-test-subject="cellPopoverAnchor"
-                    />
-                  </>
-                )
-              }
+              {...rest}
+              setCellProps={this.setCellProps}
+              column={column}
+              columnType={columnType}
+              isExpandable={isExpandable}
+              isExpanded={popoverIsOpen}
+              onExpandClick={this.handleCellExpansionClick}
+              popoverAnchorRef={this.popoverAnchorRef}
+              showCellActions={showCellActions}
+              isFocused={this.state.isFocused}
+              setCellContentsRef={this.setCellContentsRef}
+              rowHeight={rowHeight}
+              rowHeightUtils={rowHeightUtils}
+              isControlColumn={cellClasses.includes(
+                'euiDataGridRowCell--controlColumn'
+              )}
+              ariaRowIndex={ariaRowIndex}
+              rowIndex={rowIndex}
+              colIndex={colIndex}
             />
           </HandleInteractiveChildren>
         </div>
@@ -692,3 +680,36 @@ export class EuiDataGridCell extends Component<
     );
   }
 }
+
+/**
+ * Function component utilities for conditional rendering.
+ * Used for DRYness and performance
+ */
+
+const RenderCellInRow: FunctionComponent<{
+  children: ReactElement;
+  row?: HTMLElement;
+}> = memo(({ row, children }) =>
+  row ? createPortal(children, row) : children
+);
+RenderCellInRow.displayName = 'RenderCellInRow';
+
+const RenderTruncatedCellContent: FunctionComponent<{
+  children: ReactElement;
+  hasLineCountTruncation: boolean;
+  rowHeight?: EuiDataGridRowHeightOption;
+}> = memo(({ children, hasLineCountTruncation, rowHeight }) => {
+  // If `hasLineCountTruncation` is true, we can rely on rowHeight being the correct type
+  const lines = hasLineCountTruncation
+    ? (rowHeight as { lineCount: number }).lineCount
+    : undefined;
+
+  return lines ? (
+    <EuiTextBlockTruncate lines={lines} cloneElement>
+      {children}
+    </EuiTextBlockTruncate>
+  ) : (
+    children
+  );
+});
+RenderTruncatedCellContent.displayName = 'RenderTruncatedCellContent';
diff --git a/src/components/datagrid/body/cell/data_grid_cell_actions.test.tsx b/src/components/datagrid/body/cell/data_grid_cell_actions.test.tsx
index fe16e085dd99..f17711d7d3ef 100644
--- a/src/components/datagrid/body/cell/data_grid_cell_actions.test.tsx
+++ b/src/components/datagrid/body/cell/data_grid_cell_actions.test.tsx
@@ -22,6 +22,7 @@ const MockAction: EuiDataGridColumnCellAction = ({ Component }) => (
 describe('EuiDataGridCellActions', () => {
   const requiredProps = {
     onExpandClick: jest.fn(),
+    popoverAnchorRef: () => {},
     rowIndex: 0,
     colIndex: 0,
     cellHeightType: 'default',
@@ -31,17 +32,22 @@ describe('EuiDataGridCellActions', () => {
     const component = shallow(<EuiDataGridCellActions {...requiredProps} />);
 
     expect(component).toMatchInlineSnapshot(`
-      <div
-        className="euiDataGridRowCell__actions"
-      >
-        <EuiI18n
-          default="Click or hit enter to interact with cell content"
-          key="expand"
-          token="euiDataGridCellActions.expandButtonTitle"
+      <Fragment>
+        <div
+          className="euiDataGridRowCell__actions"
         >
-          <Component />
-        </EuiI18n>
-      </div>
+          <EuiI18n
+            default="Click or hit enter to interact with cell content"
+            key="expand"
+            token="euiDataGridCellActions.expandButtonTitle"
+          >
+            <Component />
+          </EuiI18n>
+        </div>
+        <div
+          data-test-subject="cellPopoverAnchor"
+        />
+      </Fragment>
     `);
 
     const button: Function = component.find('EuiI18n').renderProp('children');
@@ -68,7 +74,7 @@ describe('EuiDataGridCellActions', () => {
       />
     );
 
-    const button = component.childAt(0).renderProp('Component');
+    const button = component.childAt(0).childAt(0).renderProp('Component');
     expect(button({ iconType: 'eye' })).toMatchInlineSnapshot(`
       <EuiButtonIcon
         aria-hidden={true}
@@ -91,25 +97,30 @@ describe('EuiDataGridCellActions', () => {
     );
 
     expect(component).toMatchInlineSnapshot(`
-      <div
-        className="euiDataGridRowCell__actions"
-      >
-        <MockAction
-          Component={[Function]}
-          colIndex={0}
-          columnId="someId"
-          isExpanded={false}
-          key="0"
-          rowIndex={0}
-        />
-        <EuiI18n
-          default="Click or hit enter to interact with cell content"
-          key="expand"
-          token="euiDataGridCellActions.expandButtonTitle"
+      <Fragment>
+        <div
+          className="euiDataGridRowCell__actions"
         >
-          <Component />
-        </EuiI18n>
-      </div>
+          <MockAction
+            Component={[Function]}
+            colIndex={0}
+            columnId="someId"
+            isExpanded={false}
+            key="0"
+            rowIndex={0}
+          />
+          <EuiI18n
+            default="Click or hit enter to interact with cell content"
+            key="expand"
+            token="euiDataGridCellActions.expandButtonTitle"
+          >
+            <Component />
+          </EuiI18n>
+        </div>
+        <div
+          data-test-subject="cellPopoverAnchor"
+        />
+      </Fragment>
     `);
   });
 
diff --git a/src/components/datagrid/body/cell/data_grid_cell_actions.tsx b/src/components/datagrid/body/cell/data_grid_cell_actions.tsx
index f21b4ddc618c..3f278e1f9a09 100644
--- a/src/components/datagrid/body/cell/data_grid_cell_actions.tsx
+++ b/src/components/datagrid/body/cell/data_grid_cell_actions.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { JSXElementConstructor, useMemo, useCallback } from 'react';
+import React, { JSXElementConstructor, Ref, useMemo, useCallback } from 'react';
 import {
   EuiDataGridColumn,
   EuiDataGridColumnCellAction,
@@ -24,11 +24,13 @@ import { EuiPopoverFooter } from '../../../popover';
 
 export const EuiDataGridCellActions = ({
   onExpandClick,
+  popoverAnchorRef,
   column,
   rowIndex,
   colIndex,
 }: {
   onExpandClick: () => void;
+  popoverAnchorRef: Ref<HTMLDivElement>;
   column?: EuiDataGridColumn;
   rowIndex: number;
   colIndex: number;
@@ -102,9 +104,15 @@ export const EuiDataGridCellActions = ({
   }, [column, colIndex, rowIndex]);
 
   return (
-    <div className="euiDataGridRowCell__actions">
-      {[...additionalButtons, expandButton]}
-    </div>
+    <>
+      <div className="euiDataGridRowCell__actions">
+        {[...additionalButtons, expandButton]}
+      </div>
+      {/* The cell expansion popover needs a separate div/ref - otherwise the
+          extra popover wrappers mess up the absolute positioning and cause
+          animation stuttering on the cell actions */}
+      <div ref={popoverAnchorRef} data-test-subject="cellPopoverAnchor" />
+    </>
   );
 };