Fix to enable scroll in sql query results. (#5091)

* Dynamically adjust table virtualizer's height according to resizer

app/client/src/components/editorComponents/Debugger/Resizer/index.tsx

@@ -20,6 +20,7 @@ const Top = styled.div`
 
 type ResizerProps = {
   panelRef: RefObject<HTMLDivElement>;
+  setContainerDimensions?: (height: number) => void;
 };
 
 function Resizer(props: ResizerProps) {
@@ -41,9 +42,15 @@ function Resizer(props: ResizerProps) {
       updatedHeight > minHeight
     ) {
       panel.style.height = `${height - movementY}px`;
+      props.setContainerDimensions &&
+        props.setContainerDimensions(height - movementY);
     }
   };
 
+  useEffect(() => {
+    handleResize(0);
+  }, []);
+
   useEffect(() => {
     const handleMouseMove = (e: MouseEvent) => {
       e.preventDefault();

app/client/src/constants/DefaultTheme.tsx

@@ -361,6 +361,7 @@ export type Theme = {
     };
   };
   pageContentWidth: number;
+  tabPanelHeight: number;
   alert: Record<string, { color: Color }>;
   lightningMenu: {
     [Skin.DARK]: {
@@ -2388,6 +2389,7 @@ export const theme: Theme = {
     },
   },
   pageContentWidth: 1224,
+  tabPanelHeight: 34,
   alert: {
     info: {
       color: Colors.AZURE_RADIANCE,

app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx

@@ -386,6 +386,9 @@ export function EditorJSONtoForm(props: Props) {
   let hintMessages: Array<string> = [];
   const panelRef: RefObject<HTMLDivElement> = useRef(null);
   const [selectedIndex, setSelectedIndex] = useState(0);
+  const [tableBodyHeight, setTableBodyHeightHeight] = useState(
+    window.innerHeight,
+  );
 
   if (executedQueryData) {
     if (!executedQueryData.isExecutionSuccess) {
@@ -529,7 +532,7 @@ export function EditorJSONtoForm(props: Props) {
           )}
           {output &&
             (isTableResponse ? (
-              <Table data={output} />
+              <Table data={output} tableBodyHeight={tableBodyHeight} />
             ) : (
               <JSONViewer src={output} />
             ))}
@@ -688,7 +691,12 @@ export function EditorJSONtoForm(props: Props) {
         </TabContainerView>
 
         <TabbedViewContainer ref={panelRef}>
-          <Resizable panelRef={panelRef} />
+          <Resizable
+            panelRef={panelRef}
+            setContainerDimensions={(height: number) =>
+              setTableBodyHeightHeight(height)
+            }
+          />
           {output && !!output.length && (
             <Boxed step={OnboardingStep.SUCCESSFUL_BINDING}>
               <ResultsCount>

app/client/src/pages/Editor/QueryEditor/Table.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import styled, { withTheme } from "styled-components";
 import { FixedSizeList } from "react-window";
 import { useTable, useBlockLayout } from "react-table";
 
@@ -9,9 +9,12 @@ import { getType, Types } from "utils/TypeHelpers";
 import ErrorBoundary from "components/editorComponents/ErrorBoundry";
 import { CellWrapper } from "components/designSystems/appsmith/TableComponent/TableStyledWrappers";
 import AutoToolTipComponent from "components/designSystems/appsmith/TableComponent/AutoToolTipComponent";
+import { Theme } from "constants/DefaultTheme";
 
 interface TableProps {
   data: Record<string, any>[];
+  tableBodyHeight?: number;
+  theme: Theme;
 }
 
 const TABLE_SIZES = {
@@ -19,6 +22,7 @@ const TABLE_SIZES = {
   TABLE_HEADER_HEIGHT: 42,
   ROW_HEIGHT: 40,
   ROW_FONT_SIZE: 14,
+  SCROLL_SIZE: 20,
 };
 
 export const TableWrapper = styled.div`
@@ -44,13 +48,13 @@ export const TableWrapper = styled.div`
     background: ${Colors.ATHENS_GRAY_DARKER};
     display: table;
     width: 100%;
+    height: 100%;
     .thead,
     .tbody {
       overflow: hidden;
     }
     .tbody {
-      overflow-y: scroll;
-      height: 100%;
+      height: calc(100% - ${TABLE_SIZES.COLUMN_HEADER_HEIGHT}px);
       .tr {
         width: 100%;
       }
@@ -201,6 +205,13 @@ function Table(props: TableProps) {
     return [];
   }, [data]);
 
+  const tableBodyHeightComputed =
+    (props.tableBodyHeight || window.innerHeight) -
+    TABLE_SIZES.COLUMN_HEADER_HEIGHT -
+    props.theme.tabPanelHeight -
+    TABLE_SIZES.SCROLL_SIZE -
+    2 * props.theme.spaces[5]; //top and bottom padding
+
   const defaultColumn = React.useMemo(
     () => ({
       width: 170,
@@ -292,7 +303,7 @@ function Table(props: TableProps) {
 
             <div {...getTableBodyProps()} className="tbody">
               <FixedSizeList
-                height={window.innerHeight}
+                height={tableBodyHeightComputed || window.innerHeight}
                 itemCount={rows.length}
                 itemSize={35}
                 width={totalColumnsWidth + scrollBarSize}
@@ -307,4 +318,4 @@ function Table(props: TableProps) {
   );
 }
 
-export default Table;
+export default withTheme(Table);