diff --git a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx index d2c4b41ff7589..39c897c8d4e3c 100644 --- a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx +++ b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx @@ -127,11 +127,8 @@ const MonospaceDiv = styled.div` const ReturnedRows = styled.div` font-size: 13px; line-height: 24px; - .limitMessage { - color: ${({ theme }) => theme.colors.secondary.light1}; - margin-left: ${({ theme }) => theme.gridUnit * 2}px; - } `; + const ResultSetControls = styled.div` display: flex; justify-content: space-between; @@ -148,6 +145,19 @@ const ResultSetErrorMessage = styled.div` padding-top: ${({ theme }) => 4 * theme.gridUnit}px; `; +const ResultSetRowsReturned = styled.span` + white-space: nowrap; + text-overflow: ellipsis; + width: 100%; + overflow: hidden; + display: inline-block; +`; + +const LimitMessage = styled.span` + color: ${({ theme }) => theme.colors.secondary.light1}; + margin-left: ${({ theme }) => theme.gridUnit * 2}px; +`; + const updateDataset = async ( dbId: number, datasetId: number, @@ -608,42 +618,38 @@ export default class ResultSet extends React.PureComponent< limitingFactor === LIMITING_FACTOR.DROPDOWN; if (limitingFactor === LIMITING_FACTOR.QUERY && this.props.csv) { - limitMessage = ( - - {t( - 'The number of rows displayed is limited to %(rows)d by the query', - { rows }, - )} - + limitMessage = t( + 'The number of rows displayed is limited to %(rows)d by the query', + { rows }, ); } else if ( limitingFactor === LIMITING_FACTOR.DROPDOWN && !shouldUseDefaultDropdownAlert ) { - limitMessage = ( - - {t( - 'The number of rows displayed is limited to %(rows)d by the limit dropdown.', - { rows }, - )} - + limitMessage = t( + 'The number of rows displayed is limited to %(rows)d by the limit dropdown.', + { rows }, ); } else if (limitingFactor === LIMITING_FACTOR.QUERY_AND_DROPDOWN) { - limitMessage = ( - - {t( - 'The number of rows displayed is limited to %(rows)d by the query and limit dropdown.', - { rows }, - )} - + limitMessage = t( + 'The number of rows displayed is limited to %(rows)d by the query and limit dropdown.', + { rows }, ); } + + const rowsReturnedMessage = t('%(rows)d rows returned', { + rows, + }); + + const tooltipText = `${rowsReturnedMessage}. ${limitMessage}`; + return ( {!limitReached && !shouldUseDefaultDropdownAlert && ( - - {t('%(rows)d rows returned', { rows })} {limitMessage} - + + {rowsReturnedMessage} + {limitMessage} + )} {!limitReached && shouldUseDefaultDropdownAlert && (
@@ -678,6 +684,7 @@ export default class ResultSet extends React.PureComponent< render() { const { query } = this.props; + const limitReached = query?.results?.displayLimitReached; let sql; let exploreDBId = query.dbId; if (this.props.database && this.props.database.explore_database_id) { @@ -747,9 +754,17 @@ export default class ResultSet extends React.PureComponent< } if (query.state === 'success' && query.results) { const { results } = query; + // Accounts for offset needed for height of ResultSetRowsReturned component if !limitReached + const rowMessageHeight = !limitReached ? 32 : 0; + // Accounts for offset needed for height of Alert if this.state.alertIsOpen + const alertContainerHeight = 70; + // We need to calculate the height of this.renderRowsReturned() + // if we want results panel to be propper height because the + // FilterTable component nedds an explcit height to render + // react-virtualized Table component const height = this.state.alertIsOpen - ? this.props.height - 70 - : this.props.height; + ? this.props.height - alertContainerHeight + : this.props.height - rowMessageHeight; let data; if (this.props.cache && query.cached) { ({ data } = this.state); diff --git a/superset-frontend/src/SqlLab/components/SouthPane/index.tsx b/superset-frontend/src/SqlLab/components/SouthPane/index.tsx index 767b608f3b7d2..0261eff1af4da 100644 --- a/superset-frontend/src/SqlLab/components/SouthPane/index.tsx +++ b/superset-frontend/src/SqlLab/components/SouthPane/index.tsx @@ -62,9 +62,13 @@ interface SouthPanePropTypes { defaultQueryLimit: number; } -const StyledPane = styled.div` - width: 100%; +type StyledPaneProps = { + height: number; +}; +const StyledPane = styled.div` + width: 100%; + height: ${props => props.height}px; .ant-tabs .ant-tabs-content-holder { overflow: visible; } @@ -207,7 +211,7 @@ export default function SouthPane({ return offline ? ( renderOfflineStatus() ) : ( - +