fix(sqllab): invalid height in ResultTable

superset-frontend/src/SqlLab/components/QueryTable/index.tsx

@@ -28,7 +28,7 @@ import {
 } from '@superset-ui/core/components';
 import ProgressBar from '@superset-ui/core/components/ProgressBar';
 import { t } from '@apache-superset/core';
-import { QueryResponse, QueryState } from '@superset-ui/core';
+import { QueryResponse } from '@superset-ui/core';
 import { useTheme } from '@apache-superset/core/ui';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 
@@ -48,10 +48,11 @@ import ResultSet from '../ResultSet';
 import HighlightedSql from '../HighlightedSql';
 import { StaticPosition, StyledTooltip, ModalResultSetWrapper } from './styles';
 
-interface QueryTableQuery extends Omit<
-  QueryResponse,
-  'state' | 'sql' | 'progress' | 'results' | 'duration' | 'started'
-> {
+interface QueryTableQuery
+  extends Omit<
+    QueryResponse,
+    'state' | 'sql' | 'progress' | 'results' | 'duration' | 'started'
+  > {
   state?: Record<string, any>;
   sql?: Record<string, any>;
   progress?: Record<string, any>;
@@ -397,24 +398,12 @@ const QueryTable = ({
         modalBody={
           selectedQuery ? (
             <ModalResultSetWrapper>
-              {(() => {
-                const height =
-                  reduxQueries[selectedQuery.id]?.state ===
-                    QueryState.Success &&
-                  reduxQueries[selectedQuery.id]?.results
-                    ? Math.floor(window.innerHeight * 0.5)
-                    : undefined;
-                return (
-                  <ResultSet
-                    showSql
-                    queryId={selectedQuery.id}
-                    displayLimit={displayLimit}
-                    defaultQueryLimit={1000}
-                    useFixedHeight
-                    height={height}
-                  />
-                );
-              })()}
+              <ResultSet
+                showSql
+                queryId={selectedQuery.id}
+                displayLimit={displayLimit}
+                defaultQueryLimit={1000}
+              />
             </ModalResultSetWrapper>
           ) : null
         }

superset-frontend/src/SqlLab/components/QueryTable/styles.ts

@@ -45,4 +45,5 @@ export const ModalResultSetWrapper = styled.div`
   flex-direction: column;
   overflow: hidden;
   max-height: 50vh;
+  height: 500px;
 `;

superset-frontend/src/SqlLab/components/ResultSet/index.tsx

@@ -106,14 +106,12 @@ export interface ResultSetProps {
   csv?: boolean;
   database?: Record<string, any>;
   displayLimit: number;
-  height?: number;
   queryId: string;
   search?: boolean;
   showSql?: boolean;
   showSqlInline?: boolean;
   visualize?: boolean;
   defaultQueryLimit: number;
-  useFixedHeight?: boolean;
 }
 
 const ResultContainer = styled.div`
@@ -163,14 +161,12 @@ const ResultSet = ({
   csv = true,
   database = {},
   displayLimit,
-  height,
   queryId,
   search = true,
   showSql = false,
   showSqlInline = false,
   visualize = true,
   defaultQueryLimit,
-  useFixedHeight = false,
 }: ResultSetProps) => {
   const user = useSelector(({ user }: SqlLabRootState) => user, shallowEqual);
   const streamingThreshold = useSelector(
@@ -727,21 +723,17 @@ const ResultSet = ({
                 />
               )}
             </div>
-            {useFixedHeight && height !== undefined ? (
-              <ResultTable {...tableProps} height={height} />
-            ) : (
-              <div
-                css={css`
-                  flex: 1 1 auto;
-                `}
-              >
-                <AutoSizer disableWidth>
-                  {({ height: autoHeight }) => (
-                    <ResultTable {...tableProps} height={autoHeight} />
-                  )}
-                </AutoSizer>
-              </div>
-            )}
+            <div
+              css={css`
+                flex: 1 1 auto;
+              `}
+            >
+              <AutoSizer disableWidth>
+                {({ height: autoHeight }) => (
+                  <ResultTable {...tableProps} height={autoHeight} />
+                )}
+              </AutoSizer>
+            </div>
           </ResultContainer>
           <StreamingExportModal
             visible={showStreamingModal}