fix: wraps page elements in a flexbox to give SimpleTable correct height (#5257)

Author: TCL735

src/dataExplorer/components/FluxQueryBuilder.scss

@@ -1,5 +1,9 @@
 @import '@influxdata/clockface/dist/variables.scss';
 
+.flux-query-builder--container {
+  height: 100%;
+}
+
 .new-data-explorer-rightside {
   .cf-draggable-resizer--handle > .cf-draggable-resizer--handle-pill1,
   .cf-draggable-resizer--handle > .cf-draggable-resizer--handle-pill2,

src/dataExplorer/components/FluxQueryBuilder.tsx

@@ -4,9 +4,13 @@ import {RemoteDataState} from 'src/types'
 // Components
 import {
   DraggableResizer,
+  FlexBox,
+  FlexDirection,
   Orientation,
   Button,
   IconFont,
+  AlignItems,
+  JustifyContent,
 } from '@influxdata/clockface'
 import {QueryProvider, QueryContext} from 'src/shared/contexts/query'
 import {EditorProvider} from 'src/shared/contexts/editor'
@@ -44,27 +48,38 @@ const FluxQueryBuilder: FC = () => {
   return (
     <EditorProvider>
       <SidebarProvider>
-        <div className="flux-query-builder--menu">
-          <Button onClick={clear} text="New Script" icon={IconFont.Plus_New} />
-        </div>
-        <DraggableResizer
-          handleOrientation={Orientation.Vertical}
-          handlePositions={vertical}
-          onChangePositions={setVertical}
+        <FlexBox
+          className="flux-query-builder--container"
+          direction={FlexDirection.Column}
+          justifyContent={JustifyContent.SpaceBetween}
+          alignItems={AlignItems.Stretch}
         >
-          <DraggableResizer.Panel>
-            <Schema />
-          </DraggableResizer.Panel>
-          <DraggableResizer.Panel
-            testID="flux-query-builder-middle-panel"
-            className="new-data-explorer-rightside"
+          <div className="flux-query-builder--menu">
+            <Button
+              onClick={clear}
+              text="New Script"
+              icon={IconFont.Plus_New}
+            />
+          </div>
+          <DraggableResizer
+            handleOrientation={Orientation.Vertical}
+            handlePositions={vertical}
+            onChangePositions={setVertical}
           >
-            <ResultsPane />
-          </DraggableResizer.Panel>
-          <DraggableResizer.Panel>
-            <Sidebar />
-          </DraggableResizer.Panel>
-        </DraggableResizer>
+            <DraggableResizer.Panel>
+              <Schema />
+            </DraggableResizer.Panel>
+            <DraggableResizer.Panel
+              testID="flux-query-builder-middle-panel"
+              className="new-data-explorer-rightside"
+            >
+              <ResultsPane />
+            </DraggableResizer.Panel>
+            <DraggableResizer.Panel>
+              <Sidebar />
+            </DraggableResizer.Panel>
+          </DraggableResizer>
+        </FlexBox>
       </SidebarProvider>
     </EditorProvider>
   )

src/visualization/types/SimpleTable/PagedTable.tsx

@@ -41,6 +41,8 @@ const measurePage = (
   let lastSignature
   let signature
 
+  const lastVisibleRowMinimumHeight = 0.2 * rowHeight
+
   while (rowIdx < result.table.length) {
     if (result.table.columns?.table?.data?.[rowIdx] !== currentTable) {
       signature = Object.values(result.table.columns)
@@ -73,7 +75,7 @@ const measurePage = (
 
     runningHeight += rowHeight
 
-    if (runningHeight + 0.25 * rowHeight >= height) {
+    if (runningHeight + lastVisibleRowMinimumHeight >= height) {
       break
     }
 
@@ -253,7 +255,7 @@ const PagedTable: FC<Props> = ({result, properties}) => {
   useEffect(() => {
     if (rowHeight === 0 && pagedTableBodyRef?.current) {
       const calculatedRowHeight =
-        pagedTableBodyRef.current?.children?.[0].clientHeight ?? 0
+        pagedTableBodyRef.current.children?.[0]?.clientHeight ?? 0
 
       if (calculatedRowHeight !== rowHeight) {
         setRowHeight(calculatedRowHeight)