EuiDatagrid height is calculated correctly when the rows are of auto height.

[logeekal]

Describe the bug
EuiDatagrid height is calculated correctly when the rows are of auto height.

Impact and severity
Medium - It is annoying for the user and at times, makes the table unusable.

Environment and versions

• EUI version:
• React version:
• Kibana version (if applicable): 8.x, 8.17, 8.18

To Reproduce
Steps to reproduce the behavior:
This error occurs when below 2 conditions are true

• Each row is of variable height and Lines per Row in Datagrid is auto
• The table's height is not fixed i.e undefined or auto.

A little background.

The Issue was originally raised here and fixed here.

Consequently, back-port was raised for below branches :

• 9.0.0 - Upgrade EUI to v99.2.0-borealis.0 kibana#209690
• 9.1.0 ( main ) - Upgrade EUI to v99.2.0-borealis.0 kibana#209690
• 8.17 - [8.17] Backport rowHeightOption: auto EuiDataGrid fix kibana#211613
• 8.16 - [8.16] Backport rowHeightOption: auto EuiDataGrid fix kibana#211601
• 8.x - ❗❗Not backported yet ❗❗

The fix seems to be working in 9.0.0 and 9.1.0 but not in backport branches of 8.17 and 8.16. Please see the issue replicable in below videos

Version	Demo	Working?
9.0.0-beta with fix	alert_table_event_renderer_issue_9.0-beta.mp4	✅
8.16 with backport	alert_table_event_renderer_issue_8.16-backport.mp4	❌

Note

In Security Solution, issue is only visible in Event Rendered view because of 2 reasons

• It has Lines per row as auto
• When the row count < 20, the table height is also set to auto or undefined which is when the issue occurs.

Expected behavior
A clear and concise description of what you expected to happen.

Minimum reproducible sandbox
It is extremely helpful for us if you are able to reproduce your issue in a minimum reproducible sandbox (visit our docs site and click the CodeSandbox logo in the top-right corner).

Screenshots
Attached above

Additional context
There can be 2 reasons that fix is not working in 8.16 and 8.17:

• Fix is not backported correctly.
• Fix is not compatiable with 8.16/8.17 for some reason.

[tkajtoch]

To add more context here, I found that with the initial fix applied, most EuiDataGrid usages work fine. This specific Kibana view updates data grid columns and cell height when toggling between view types, which seems to be related to the buggy behavior we're experiencing here.

[JasonStoltz]

For reference:

The 8.16 branch of Kibana uses EUI version 97.0.0-backport.2:

• package.json
• 97.0.0-backport.2

The 8.17 branch of Kibana uses EUI version 97.3.1:

• package.json
• 97.3.1

[JasonStoltz]

@logeekal @kqualters-elastic

Really hoping to wrangle all of the context here into a single actionable issue.

A couple of notes in that regard:

1. If the only way to reproduce this issue is to run Security Solution, please provide detailed steps to do so. Assume the EUI team is not familiar enough with Security Solution to load the correct data and get it into a problematic state.
2. If this problem is only occurring in a particular Security Solution table, please give us more context into your usage of the Data Grid. What props are you using? What does the surrounding code context look like? Links to your source code would be helpful, a simplified explanation with code snippets that focus on your EUI usage would be even more helpful. An example of the problem reproduced in an isolated example like CodeSandbox, etc. is most helpful.
3. Any due diligence you can provide from your end -- when was the issue introduced into Security Solution -- are you able to bisect versions to locate a commit that caused the issue originally? Which versions are affected? And if the bug presents differently on different versions, how so? AFAIK, there may actually still be an issue on 9.x.

In general, if you're generally able to write issues to EUI as if you were submitting them to a third party library, it will help ensure we have all the context we need to get a proper, timely fix in place.