[Datagrid] Fix rowHeightOption: auto datagrid calculation issue

[kqualters-elastic]

Summary

Resolves #8245

The useUnconstrainedHeight hook used by datagrid has I think a subtle bug in it around auto height rows, in cases where the row height is 'auto' for all the rows in the table, and when datagrid is aware of them early in the multiple renders it uses to settle on a height, the returned value of this hook, an integer representing the height of the datagrid if it were rendered completely in full is returned as a number based on just the header row height, as described in the issue above. The reason for this, I believe, is because RowHeightUtils.getRowHeightOption will return not always a number, but sometimes the string 'auto' as well. That causes the if at https://github.com/elastic/eui/blob/main/packages/eui/src/components/datagrid/utils/grid_height_width.ts#L137 to be true, and as this is the first time we are attempting to determine the height of this row, the heightsCache of the RowHeightUtils class (these really desperately need to be converted to hooks, and a lot of these problems will disappear) returns 0 for all rows when calling getRowHeight, but we increment the knownRowCount anyway, and the result is this bug. The fix in this PR seems to be the most minimal way to fix this, however I think refactoring the class based utils that revolve around EuiDataGridRowHeightOption/EuiDataGridRowHeightsOptions would be best long term, as now multiple unneeded re-renders are forced from callbacks to force checks like useUnconstrainedHeight to be correct, which is bad for performance, but also calculations that happen outside of the React lifecycle, like with the RowHeightUtils class, unexpectedly do not happen at all in some cases, leading to bugs like this. A well done custom hooks approach could solve both problems at once. I have a branch somewhere with EuiDataGridCell converted from a class based component to a functional one to enable this I think.

QA

Remove or strikethrough items that do not apply to your PR.

General checklist

• Browser QA
  • Checked in both light and dark modes
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA
  • Added documentation
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
  • Checked Code Sandbox works for any docs examples
• Code quality checklist
  • Added or updated jest and cypress tests
  • Updated visual regression tests
• Release checklist
  • A changelog entry exists and is marked appropriately.
  • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
• Designer checklist
  • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

[kqualters-elastic]

If anyone is interested https://github.com/kqualters-elastic/eui/tree/row-height-debug has console.logs in the places where you can see the calculation fail, adding a height of 0 to the unconstrained height state, and then (incorrectly) incrementing the knownRowCount. For reproducing, happened immediately on my OSX laptop, on Windows desktop, I had to mess with the zoom level of the browser + the size of the window in order to trigger the bug.

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_8251/
• Storybook: https://eui.elastic.co/pr_8251/storybook
• New docs: https://eui.elastic.co/pr_8251/new-docs

[elasticmachine]

💔 Build Failed

• Buildkite Build
• Commit: 309e3bb

Failed CI Steps

• 🔨 EUI pull request test

[kqualters-elastic]

The failing test is https://github.com/elastic/eui/blob/main/packages/eui/src/components/datagrid/data_grid.spec.tsx#L66 and is probably a bad test IMO. The test is not measuring the unconstrained height from the useUnconstrainedHeight hook, but finalHeight from useFinalGridDimensions. That hook has a height state that would have to be destroyed, or set to 0 at some point, so that this ternary uses unconstrainedHeight

  const finalHeight = isFullScreen
    ? fullScreenHeight
    : height || unconstrainedHeight;

and I think the only reason it passes is because in one of the calculation loops, all heights are 0, similar to the bug in a way.

[acstll]

I can confirm this fixes the original bug where the data grid collapses to 0 (#8245)

I also found a hardcoded height in Storybook, namely in EuiDataGrid / rowHeightsOptions (prop) / Auto, that would be no longer needed:

eui/packages/eui/src/components/datagrid/data_grid_row_heights.stories.tsx

Line 48 in ffd0cbc

height={419} // Required by webkit browsers to not render with 0 height. TODO: Investigate why, this is likely a bug

---

@kqualters-elastic thanks a lot for opening this and sharing your thoughts!

Regarding the test mentioned above, I still need to run it and understand it 🙏 …but I'm guessing here (with the bug fixed) it's failing, and it was passing before but actually asserting the wrong behaviour, correct? — what would you do about it in relation to this PR?

[acstll]

Locally for me computes a new unconstrained height when switching to auto height is passing, but accounts for a horizontal scrollbar is failing… 🤔

[kqualters-elastic]

Locally both are passing for me 😂

[acstll]

Locally both are passing for me 😂

for me as well now haha, the one with the horizontal scrollbar needs a particular system setting while running locally!

This 1-liner fix looks good for me!

I would only create a new issue to investigate/address:

• the flaky logic in useFinalGridDimensions regarding height
• check possible issues with calculated height with autoBelowLineCount enabled
• a possible refactor of class utils, as suggested above
• remove the hard-coded height in data_grid_row_heights.stories.tsx

Let's wait for the team 🙂