feat: Added Rows Returned (#13190)
diff --git a/superset-frontend/src/SqlLab/components/ResultSet.tsx b/superset-frontend/src/SqlLab/components/ResultSet.tsx
index 9dc08a4..f0c3d47 100644
--- a/superset-frontend/src/SqlLab/components/ResultSet.tsx
+++ b/superset-frontend/src/SqlLab/components/ResultSet.tsx
@@ -27,7 +27,7 @@
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 @@
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 @@
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 @@
return (
<>
{this.renderControls()}
+ {this.renderRowsReturned()}
{sql}
<FilterableTable
data={data}
diff --git a/superset-frontend/src/SqlLab/components/SouthPane.jsx b/superset-frontend/src/SqlLab/components/SouthPane.jsx
index b0182ed..3d99d17 100644
--- a/superset-frontend/src/SqlLab/components/SouthPane.jsx
+++ b/superset-frontend/src/SqlLab/components/SouthPane.jsx
@@ -66,13 +66,13 @@
.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;
}
diff --git a/superset-frontend/src/SqlLab/components/SqlEditor.jsx b/superset-frontend/src/SqlLab/components/SqlEditor.jsx
index fb85482..c355a5a 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor.jsx
@@ -30,9 +30,6 @@
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 @@
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 @@
/>
</span>
)}
- {limitWarning}
<span>
<LimitSelectStyled>
<Dropdown overlay={this.renderQueryLimit()} trigger="click">
@@ -690,7 +669,6 @@
<span>
<ShareSqlLabQuery queryEditor={qe} />
</span>
- {limitWarning}
<Dropdown overlay={this.renderDropdown()} trigger="click">
<Icon name="more-horiz" />
</Dropdown>
diff --git a/superset-frontend/src/SqlLab/main.less b/superset-frontend/src/SqlLab/main.less
index af08c64..4bb4507 100644
--- a/superset-frontend/src/SqlLab/main.less
+++ b/superset-frontend/src/SqlLab/main.less
@@ -55,7 +55,8 @@
height: 100%;
position: relative;
background-color: @lightest;
- overflow: auto;
+ overflow-x: auto;
+ overflow-y: hidden;
> .ant-tabs-tabpane {
position: absolute;
diff --git a/superset-frontend/src/SqlLab/types.ts b/superset-frontend/src/SqlLab/types.ts
index 4189a29..415c614 100644
--- a/superset-frontend/src/SqlLab/types.ts
+++ b/superset-frontend/src/SqlLab/types.ts
@@ -38,6 +38,7 @@
link?: string;
progress: number;
results: {
+ displayLimitReached: boolean;
columns: Column[];
data: Record<string, unknown>[];
expanded_columns: Column[];
@@ -60,4 +61,6 @@
tempTable: string;
trackingUrl: string | null;
templateParams: any;
+ rows: number;
+ queryLimit: number;
};
diff --git a/superset-frontend/src/components/FilterableTable/FilterableTable.tsx b/superset-frontend/src/components/FilterableTable/FilterableTable.tsx
index 0a86c5e..86dca43 100644
--- a/superset-frontend/src/components/FilterableTable/FilterableTable.tsx
+++ b/superset-frontend/src/components/FilterableTable/FilterableTable.tsx
@@ -84,7 +84,7 @@
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
