[EuiDataGrid] Refactor row height calculations to no longer need computed styles on grid init

CHANGELOG.md

@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `41.0.0`.
+**Bug fixes**
+
+- Fixed an `EuiDataGrid` race condition where grid rows had incorrect heights if loaded in before CSS ([#5284](https://github.com/elastic/eui/pull/5284))
 
 ## [`41.0.0`](https://github.com/elastic/eui/tree/v41.0.0)
 

src/components/datagrid/__mocks__/row_height_utils.ts

@@ -6,41 +6,26 @@
  * Side Public License, v 1.
  */
 
-import { EuiDataGridRowHeightOption } from '../data_grid_types';
+import { RowHeightUtils as ActualRowHeightUtils } from '../row_height_utils';
 
-import { RowHeightUtils } from '../row_height_utils';
+const actual = new ActualRowHeightUtils();
 
 export const mockRowHeightUtils = ({
-  computeStylesForGridCell: jest.fn(),
+  cacheStyles: jest.fn(),
   setGrid: jest.fn(),
   getStylesForCell: jest.fn(() => ({
     wordWrap: 'break-word',
     wordBreak: 'break-word',
     flexGrow: 1,
   })),
-  isDefinedHeight: jest.fn(() => true),
   isAutoHeight: jest.fn(() => false),
   setRowHeight: jest.fn(),
   pruneHiddenColumnHeights: jest.fn(),
   getRowHeight: jest.fn(() => 32),
-  getComputedCellStyles: jest.fn(() => {}),
-  getCalculatedHeight: jest.fn(
-    (heightOption: EuiDataGridRowHeightOption, defaultHeight: number) => {
-      if (typeof heightOption === 'object') {
-        if (heightOption.lineCount) {
-          return heightOption.lineCount;
-        }
+  getRowHeightOption: jest.fn(actual.getRowHeightOption),
+  getCalculatedHeight: jest.fn(actual.getCalculatedHeight),
+  getLineCount: jest.fn(actual.getLineCount),
+  calculateHeightForLineCount: jest.fn(() => 50),
+} as unknown) as ActualRowHeightUtils;
 
-        if (heightOption.height) {
-          return heightOption.height;
-        }
-      }
-
-      if (heightOption) {
-        return heightOption;
-      }
-
-      return defaultHeight;
-    }
-  ),
-} as unknown) as RowHeightUtils;
+export const RowHeightUtils = jest.fn(() => mockRowHeightUtils);

src/components/datagrid/_data_grid_data_row.scss

@@ -235,49 +235,25 @@
   }
 }
 
-.euiDataGridRowCell--fontSizeSmall {
-  @include euiFontSizeXS;
-}
-
 @include euiDataGridStyles(fontSizeLarge) {
   @include euiDataGridRowCell {
     @include euiFontSize;
   }
 }
 
-.euiDataGridRowCell--fontSizeLarge {
-  @include euiFontSize;
-}
-
 // Padding alternates
 @include euiDataGridStyles(paddingSmall) {
   @include euiDataGridRowCell {
     padding: $euiDataGridCellPaddingS;
   }
 }
 
-.euiDataGridRowCell--paddingSmall {
-  padding: $euiDataGridCellPaddingS;
-
-  .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandButton {
-    padding: 0;
-  }
-}
-
 @include euiDataGridStyles(paddingLarge) {
   @include euiDataGridRowCell {
     padding: $euiDataGridCellPaddingL;
   }
 }
 
-.euiDataGridRowCell--paddingLarge {
-  padding: $euiDataGridCellPaddingL;
-
-  .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandButton {
-    padding: $euiDataGridCellPaddingL 0;
-  }
-}
-
 @keyframes euiDataGridCellButtonSlideIn {
   from {
     margin-left: 0;

src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap

@@ -10,13 +10,27 @@ exports[`EuiDataGridCell renders 1`] = `
   renderCellValue={[Function]}
   rowHeightUtils={
     Object {
-      "computeStylesForGridCell": [MockFunction],
+      "cacheStyles": [MockFunction],
+      "calculateHeightForLineCount": [MockFunction],
       "getCalculatedHeight": [MockFunction],
-      "getComputedCellStyles": [MockFunction],
+      "getLineCount": [MockFunction],
       "getRowHeight": [MockFunction],
+      "getRowHeightOption": [MockFunction] {
+        "calls": Array [
+          Array [
+            0,
+            undefined,
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      },
       "getStylesForCell": [MockFunction],
       "isAutoHeight": [MockFunction],
-      "isDefinedHeight": [MockFunction],
       "pruneHiddenColumnHeights": [MockFunction],
       "setGrid": [MockFunction],
       "setRowHeight": [MockFunction],
@@ -57,13 +71,27 @@ exports[`EuiDataGridCell renders 1`] = `
           renderCellValue={[Function]}
           rowHeightUtils={
             Object {
-              "computeStylesForGridCell": [MockFunction],
+              "cacheStyles": [MockFunction],
+              "calculateHeightForLineCount": [MockFunction],
               "getCalculatedHeight": [MockFunction],
-              "getComputedCellStyles": [MockFunction],
+              "getLineCount": [MockFunction],
               "getRowHeight": [MockFunction],
+              "getRowHeightOption": [MockFunction] {
+                "calls": Array [
+                  Array [
+                    0,
+                    undefined,
+                  ],
+                ],
+                "results": Array [
+                  Object {
+                    "type": "return",
+                    "value": undefined,
+                  },
+                ],
+              },
               "getStylesForCell": [MockFunction],
               "isAutoHeight": [MockFunction],
-              "isDefinedHeight": [MockFunction],
               "pruneHiddenColumnHeights": [MockFunction],
               "setGrid": [MockFunction],
               "setRowHeight": [MockFunction],

src/components/datagrid/body/data_grid_body.tsx

@@ -28,7 +28,7 @@ import {
   useMutationObserver,
 } from '../../observer/mutation_observer';
 import { useResizeObserver } from '../../observer/resize_observer';
-import { AUTO_HEIGHT } from '../row_height_utils';
+import { DEFAULT_ROW_HEIGHT } from '../row_height_utils';
 import { EuiDataGridCell } from './data_grid_cell';
 import {
   DataGridSortingContext,
@@ -70,7 +70,6 @@ export const Cell: FunctionComponent<GridChildComponentProps> = ({
     setRowHeight,
     schemaDetectors,
     rowHeightsOptions,
-    getRowHeight,
     rowHeightUtils,
   } = data;
 
@@ -119,30 +118,33 @@ export const Cell: FunctionComponent<GridChildComponentProps> = ({
     [`euiDataGridRowCell--${textTransform}`]: textTransform,
   });
 
+  const sharedCellProps = {
+    rowIndex,
+    visibleRowIndex,
+    colIndex: columnIndex,
+    interactiveCellId,
+    className: classes,
+    style: {
+      ...style,
+      top: `${parseFloat(style.top as string) + headerRowHeight}px`,
+    },
+    rowHeightsOptions,
+    rowHeightUtils,
+    setRowHeight: isFirstColumn ? setRowHeight : undefined,
+  };
+
   if (isLeadingControlColumn) {
     const leadingColumn = leadingControlColumns[columnIndex];
     const { id, rowCellRender } = leadingColumn;
 
     cellContent = (
       <EuiDataGridCell
-        rowIndex={rowIndex}
-        visibleRowIndex={visibleRowIndex}
-        colIndex={columnIndex}
+        {...sharedCellProps}
         columnId={id}
         popoverContent={DefaultColumnFormatter}
         width={leadingColumn.width}
         renderCellValue={rowCellRender}
-        interactiveCellId={interactiveCellId}
         isExpandable={false}
-        className={classes}
-        setRowHeight={setRowHeight}
-        getRowHeight={getRowHeight}
-        rowHeightsOptions={rowHeightsOptions}
-        rowHeightUtils={rowHeightUtils}
-        style={{
-          ...style,
-          top: `${parseFloat(style.top as string) + headerRowHeight}px`,
-        }}
       />
     );
   } else if (isTrailingControlColumn) {
@@ -153,23 +155,12 @@ export const Cell: FunctionComponent<GridChildComponentProps> = ({
 
     cellContent = (
       <EuiDataGridCell
-        rowIndex={rowIndex}
-        visibleRowIndex={visibleRowIndex}
-        colIndex={columnIndex}
+        {...sharedCellProps}
         columnId={id}
         popoverContent={DefaultColumnFormatter}
         width={trailingColumn.width}
         renderCellValue={rowCellRender}
-        interactiveCellId={interactiveCellId}
         isExpandable={false}
-        className={classes}
-        rowHeightsOptions={rowHeightsOptions}
-        getRowHeight={getRowHeight}
-        rowHeightUtils={rowHeightUtils}
-        style={{
-          ...style,
-          top: `${parseFloat(style.top as string) + headerRowHeight}px`,
-        }}
       />
     );
   } else {
@@ -188,9 +179,7 @@ export const Cell: FunctionComponent<GridChildComponentProps> = ({
 
     cellContent = (
       <EuiDataGridCell
-        rowIndex={rowIndex}
-        visibleRowIndex={visibleRowIndex}
-        colIndex={columnIndex}
+        {...sharedCellProps}
         columnId={columnId}
         column={column}
         columnType={columnType}
@@ -199,14 +188,6 @@ export const Cell: FunctionComponent<GridChildComponentProps> = ({
         renderCellValue={renderCellValue}
         interactiveCellId={interactiveCellId}
         isExpandable={isExpandable}
-        className={classes}
-        rowHeightsOptions={rowHeightsOptions}
-        getRowHeight={getRowHeight}
-        rowHeightUtils={rowHeightUtils}
-        style={{
-          ...style,
-          top: `${parseFloat(style.top as string) + headerRowHeight}px`,
-        }}
       />
     );
   }
@@ -240,7 +221,6 @@ const InnerElement: VariableSizeGridProps['innerElementType'] = forwardRef<
 });
 InnerElement.displayName = 'EuiDataGridInnerElement';
 
-const INITIAL_ROW_HEIGHT = 34;
 const IS_JEST_ENVIRONMENT = global.hasOwnProperty('_isJest');
 
 /**
@@ -524,45 +504,32 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     [rowHeightUtils]
   );
 
-  const [minRowHeight, setRowHeight] = useState(INITIAL_ROW_HEIGHT);
-
-  const computedCellStyles = rowHeightUtils.getComputedCellStyles();
+  const [minRowHeight, setRowHeight] = useState(DEFAULT_ROW_HEIGHT);
 
   const defaultHeight = useMemo(() => {
-    // @ts-ignore we need to re-run this when computedCellStyles changes,
-    // but it isn't used directly; so let's make the hooks lint rule see
-    // that it is used, but we need to tell eslint to ignore
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const _computedCellStyles = computedCellStyles;
     return rowHeightsOptions?.defaultHeight
       ? rowHeightUtils.getCalculatedHeight(
           rowHeightsOptions.defaultHeight,
           minRowHeight
         )
       : minRowHeight;
-  }, [rowHeightsOptions, minRowHeight, rowHeightUtils, computedCellStyles]);
+  }, [rowHeightsOptions, minRowHeight, rowHeightUtils]);
 
   const getRowHeight = useCallback(
     (rowIndex) => {
       const correctRowIndex = getCorrectRowIndex(rowIndex);
       let height;
 
-      if (rowHeightsOptions) {
-        if (rowHeightsOptions.rowHeights) {
-          const initialHeight = rowHeightsOptions.rowHeights[correctRowIndex];
-
-          if (initialHeight) {
-            height = rowHeightUtils.getCalculatedHeight(
-              initialHeight,
-              minRowHeight,
-              correctRowIndex
-            );
-          }
-        }
-
-        if (!height && rowHeightsOptions.defaultHeight === AUTO_HEIGHT) {
-          height = rowHeightUtils.getRowHeight(correctRowIndex);
-        }
+      const rowHeightOption = rowHeightUtils.getRowHeightOption(
+        correctRowIndex,
+        rowHeightsOptions
+      );
+      if (rowHeightOption) {
+        height = rowHeightUtils.getCalculatedHeight(
+          rowHeightOption,
+          minRowHeight,
+          correctRowIndex
+        );
       }
 
       return height || defaultHeight;
@@ -707,7 +674,6 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
                 itemData={{
                   schemaDetectors,
                   setRowHeight,
-                  getRowHeight,
                   getCorrectRowIndex,
                   rowMap,
                   rowOffset: pagination