Resize for results grid (#18049)

* resize for results grid

* fix white space

* fix lint

* fix lint

Author: Christopher Suh

src/reactviews/pages/QueryResult/queryResultPane.tsx

@@ -21,7 +21,7 @@ import {
     useTableColumnSizing_unstable,
     useTableFeatures,
 } from "@fluentui/react-components";
-import { useContext, useRef, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import { OpenFilled } from "@fluentui/react-icons";
 import { QueryResultContext } from "./queryResultStateProvider";
 import * as qr from "../../../sharedInterfaces/queryResult";
@@ -106,6 +106,33 @@ export const QueryResultPane = () => {
             renderHeaderCell: () => <>{MESSAGE}</>,
         }),
     ];
+    const gridParentRef = useRef<HTMLDivElement>(null);
+    const ribbonRef = useRef<HTMLDivElement>(null);
+    // Resize grid when parent element resizes
+    useEffect(() => {
+        const gridParent = gridParentRef.current;
+        if (!gridParent) {
+            return;
+        }
+        const observer = new ResizeObserver(() => {
+            if (!gridRef.current) {
+                return;
+            }
+            if (!ribbonRef.current) {
+                return;
+            }
+            if (gridParent.clientWidth && gridParent.clientHeight) {
+                gridRef.current.resizeGrid(
+                    gridParent.clientWidth,
+                    gridParent.clientHeight -
+                        ribbonRef.current.clientHeight -
+                        5,
+                );
+            }
+        });
+        observer.observe(gridParent);
+        return () => observer.disconnect();
+    }, []);
     const [columns] =
         useState<TableColumnDefinition<qr.IMessage>[]>(columnsDef);
     const items = metadata?.messages ?? [];
@@ -145,8 +172,8 @@ export const QueryResultPane = () => {
     const gridRef = useRef<SlickGridHandle>(null);
 
     return (
-        <div className={classes.root}>
-            <div className={classes.ribbon}>
+        <div className={classes.root} ref={gridParentRef}>
+            <div className={classes.ribbon} ref={ribbonRef}>
                 <TabList
                     size="medium"
                     selectedValue={metadata.tabStates!.resultPaneTab}

src/reactviews/pages/QueryResult/slickgrid.tsx

@@ -27,6 +27,7 @@ import {
     DbCellValue,
     ResultSetSummary,
 } from "../../../sharedInterfaces/queryResult";
+import * as DOM from "./table/dom";
 
 window.jQuery = $ as any;
 require("slickgrid/lib/jquery.event.drag-2.3.0.js");
@@ -52,7 +53,9 @@ export interface SlickGridProps {
 
 export interface SlickGridHandle {
     refreshGrid: () => void;
+    resizeGrid: (width: number, height: number) => void;
 }
+let table: Table<any>;
 
 const SlickGrid = forwardRef<SlickGridHandle, SlickGridProps>(
     (props: SlickGridProps, ref) => {
@@ -61,6 +64,10 @@ const SlickGrid = forwardRef<SlickGridHandle, SlickGridProps>(
         const refreshGrid = () => {
             setRefreshKey((prev) => prev + 1);
         };
+        const resizeGrid = (width: number, height: number) => {
+            const dimension = new DOM.Dimension(width, height);
+            table.layout(dimension);
+        };
         useEffect(() => {
             const ROW_HEIGHT = 25;
             if (!props.resultSetSummary) {
@@ -190,7 +197,7 @@ const SlickGrid = forwardRef<SlickGridHandle, SlickGridProps>(
                 undefined,
                 undefined,
             );
-            var table = new Table(
+            table = new Table(
                 div,
                 defaultTableStyles,
                 { dataProvider: dataProvider, columns: columns },
@@ -211,6 +218,7 @@ const SlickGrid = forwardRef<SlickGridHandle, SlickGridProps>(
 
         useImperativeHandle(ref, () => ({
             refreshGrid,
+            resizeGrid,
         }));
 
         return <div ref={gridContainerRef}></div>;