feat: Added Rows Returned

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

@@ -27,7 +27,7 @@ import shortid from 'shortid';
 import rison from 'rison';
 import { styled, t, makeApi } from '@superset-ui/core';
 import { debounce } from 'lodash';
-
+import Icon from 'src/components/Icon';
 import ErrorMessageWithStackTrace from 'src/components/ErrorMessage/ErrorMessageWithStackTrace';
 import { SaveDatasetModal } from 'src/SqlLab/components/SaveDatasetModal';
 import { put as updateDatset } from 'src/api/dataset';
@@ -100,11 +100,23 @@ const MonospaceDiv = styled.div`
   white-space: pre-wrap;
 `;
 
+const ReturnedRows = styled.div`
+  font-size: 13px;
+  line-height: 24px;
+  .returnedRowsImage {
+    color: ${({ theme }) => theme.colors.warning.base};
+    vertical-align: bottom;
+    margin-right: ${({ theme }) => theme.gridUnit * 2}px;
+  }
+  .limitMessage {
+    color: ${({ theme }) => theme.colors.secondary.light1};
+    margin-left: ${({ theme }) => theme.gridUnit * 2}px;
+  }
+`;
 const ResultSetControls = styled.div`
   display: flex;
   justify-content: space-between;
   padding: ${({ theme }) => 2 * theme.gridUnit}px 0;
-  position: fixed;
 `;
 
 const ResultSetButtons = styled.div`
@@ -498,6 +510,28 @@ export default class ResultSet extends React.PureComponent<
     return <div />;
   }
 
+  renderRowsReturned() {
+    const { results, rows } = this.props.query;
+    const limitReached = results?.displayLimitReached;
+    const limitWarning = <Icon className="returnedRowsImage" name="warning" />;
+    return (
+      <ReturnedRows>
+        {limitReached && limitWarning}
+        <span>{t(`%s rows returned`, rows)}</span>
+        {limitReached && (
+          <span className="limitMessage">
+            {t(
+              `It appears that the number of rows in the query results displayed
+           was limited on the server side to
+           the %s limit.`,
+              rows,
+            )}
+          </span>
+        )}
+      </ReturnedRows>
+    );
+  }
+
   render() {
     const { query } = this.props;
     const height = Math.max(
@@ -587,6 +621,7 @@ export default class ResultSet extends React.PureComponent<
         return (
           <>
             {this.renderControls()}
+            {this.renderRowsReturned()}
             {sql}
             <FilterableTable
               data={data}

superset-frontend/src/SqlLab/components/SouthPane.jsx

@@ -66,13 +66,13 @@ const StyledPane = styled.div`
   .ant-tabs .ant-tabs-content-holder {
     overflow: visible;
   }
-
   .SouthPaneTabs {
     height: 100%;
     display: flex;
     flex-direction: column;
   }
   .tab-content {
+    overflow: hidden;
     .alert {
       margin-top: ${({ theme }) => theme.gridUnit * 2}px;
     }

superset-frontend/src/SqlLab/components/SqlEditor.jsx

@@ -30,9 +30,6 @@ import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import StyledModal from 'src/common/components/Modal';
 import Mousetrap from 'mousetrap';
-
-import { Tooltip } from 'src/common/components/Tooltip';
-import Label from 'src/components/Label';
 import Button from 'src/components/Button';
 import Timer from 'src/components/Timer';
 import {
@@ -563,23 +560,6 @@ class SqlEditor extends React.PureComponent {
 
   renderEditorBottomBar() {
     const { queryEditor: qe } = this.props;
-    let limitWarning = null;
-    if (this.props.latestQuery?.results?.displayLimitReached) {
-      limitWarning = (
-        <Tooltip
-          id="tooltip"
-          placement="left"
-          title={t(
-            `It appears that the number of rows in the query results displayed
-           was limited on the server side to
-           the %s limit.`,
-            this.props.latestQuery.rows,
-          )}
-        >
-          <Label type="warning">LIMIT</Label>
-        </Tooltip>
-      );
-    }
 
     const { allow_ctas: allowCTAS, allow_cvas: allowCVAS } =
       this.props.database || {};
@@ -650,7 +630,6 @@ class SqlEditor extends React.PureComponent {
                   />
                 </span>
               )}
-            {limitWarning}
             <span>
               <LimitSelectStyled>
                 <Dropdown overlay={this.renderQueryLimit()} trigger="click">
@@ -690,7 +669,6 @@ class SqlEditor extends React.PureComponent {
           <span>
             <ShareSqlLabQuery queryEditor={qe} />
           </span>
-          {limitWarning}
           <Dropdown overlay={this.renderDropdown()} trigger="click">
             <Icon name="more-horiz" />
           </Dropdown>

superset-frontend/src/SqlLab/main.less

@@ -55,7 +55,8 @@ body {
   height: 100%;
   position: relative;
   background-color: @lightest;
-  overflow: auto;
+  overflow-x: auto;
+  overflow-y: hidden;
 
   > .ant-tabs-tabpane {
     position: absolute;

superset-frontend/src/SqlLab/types.ts

@@ -38,6 +38,7 @@ export type Query = {
   link?: string;
   progress: number;
   results: {
+    displayLimitReached: boolean;
     columns: Column[];
     data: Record<string, unknown>[];
     expanded_columns: Column[];
@@ -60,4 +61,6 @@ export type Query = {
   tempTable: string;
   trackingUrl: string | null;
   templateParams: any;
+  rows: number;
+  queryLimit: number;
 };

superset-frontend/src/components/FilterableTable/FilterableTable.tsx

@@ -84,7 +84,7 @@ const JSON_TREE_THEME = {
 
 const StyledFilterableTable = styled.div`
   overflow-x: auto;
-  margin-top: ${({ theme }) => theme.gridUnit * 12}px;
+  margin-top: ${({ theme }) => theme.gridUnit * 2}px;
 `;
 
 // when more than MAX_COLUMNS_FOR_TABLE are returned, switch from table to grid view