Add DataGrid height hack to t-grid

HUGE HACK!!!

DataGrtid height isn't properly calculated when the grid has horizontal scroll.
elastic/eui#5030

In order to get around this bug we are calculating `DataGrid` height here and setting it as a prop.

Please revert this commit  and allow DataGrid to calculate its height when the bug is fixed.

x-pack/plugins/timelines/public/components/t_grid/body/height_hack.ts

@@ -0,0 +1,54 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useState, useLayoutEffect } from 'react';
+
+// That could be different from security and observability. Get it as parameter?
+const INITIAL_DATA_GRID_HEIGHT = 967;
+
+// It will recalculate DataGrid height after this time interval.
+const TIME_INTERVAL = 50;
+
+/**
+ * You are probably asking yourself "Why 3?". But that is the wrong mindset. You should be asking yourself "why not 3?".
+ * 3 (three) is a number, numeral and digit. It is the natural number following 2 and preceding 4, and is the smallest
+ * odd prime number and the only prime preceding a square number. It has religious or cultural significance in many societies.
+ */
+const MAGIC_GAP = 3;
+
+/**
+ * HUGE HACK!!!
+ * DataGrtid height isn't properly calculated when the grid has horizontal scroll.
+ * https://github.com/elastic/eui/issues/5030
+ *
+ * In order to get around this bug we are calculating `DataGrid` height here and setting it as a prop.
+ *
+ * Please delete me and allow DataGrid to calculate its height when the bug is fixed.
+ */
+export const useDataGridHeightHack = (pageSize: number) => {
+  const [height, setHeight] = useState(INITIAL_DATA_GRID_HEIGHT);
+
+  useLayoutEffect(() => {
+    setTimeout(() => {
+      const gridVirtualized = document.querySelector('#body-data-grid .euiDataGrid__virtualized');
+
+      if (
+        gridVirtualized &&
+        gridVirtualized.children[0].clientHeight !== gridVirtualized.clientHeight // check if it has vertical scroll
+      ) {
+        setHeight(
+          height +
+            gridVirtualized.children[0].clientHeight -
+            gridVirtualized.clientHeight +
+            MAGIC_GAP
+        );
+      }
+    }, TIME_INTERVAL);
+  }, [pageSize, height]);
+
+  return height;
+};

x-pack/plugins/timelines/public/components/t_grid/body/index.tsx

@@ -71,6 +71,7 @@ import { checkBoxControlColumn } from './control_columns';
 import type { EuiTheme } from '../../../../../../../src/plugins/kibana_react/common';
 import { ViewSelection } from '../event_rendered_view/selector';
 import { EventRenderedView } from '../event_rendered_view';
+import { useDataGridHeightHack } from './height_hack';
 
 const StatefulAlertStatusBulkActions = lazy(
   () => import('../toolbar/bulk_actions/alert_status_bulk_actions')
@@ -689,10 +690,14 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
       [id, dispatch]
     );
 
+    const height = useDataGridHeightHack(pageSize);
+
     return (
       <>
         {tableView === 'gridView' && (
           <EuiDataGrid
+            height={height}
+            id={'body-data-grid'}
             data-test-subj="body-data-grid"
             aria-label={i18n.TGRID_BODY_ARIA_LABEL}
             columns={columnsWithCellActions}