This is an automated email from the ASF dual-hosted git repository.
justinpark pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 463962a58b fix(sqllab): misplaced limit warning alert (#25306)
463962a58b is described below
commit 463962a58b709d7e713f37efaacced8b7e342677
Author: JUST.in DO IT <[email protected]>
AuthorDate: Wed Sep 27 08:25:46 2023 -0700
fix(sqllab): misplaced limit warning alert (#25306)
---
.../src/SqlLab/components/ResultSet/index.tsx | 169 +++++++++++----------
superset-frontend/src/SqlLab/reducers/sqlLab.js | 6 +-
2 files changed, 97 insertions(+), 78 deletions(-)
diff --git a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
index f1c48531f0..e16fc569e6 100644
--- a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
+++ b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
@@ -301,7 +301,7 @@ const ResultSet = ({
return <div />;
};
- const renderRowsReturned = () => {
+ const renderRowsReturned = (alertMessage: boolean) => {
const { results, rows, queryLimit, limitingFactor } = query;
let limitMessage = '';
const limitReached = results?.displayLimitReached;
@@ -353,59 +353,70 @@ const ResultSet = ({
const tooltipText = `${rowsReturnedMessage}. ${limitMessage}`;
+ if (alertMessage) {
+ return (
+ <>
+ {!limitReached && shouldUseDefaultDropdownAlert && (
+ <div ref={calculateAlertRefHeight}>
+ <Alert
+ type="warning"
+ message={t('%(rows)d rows returned', { rows })}
+ onClose={() => setAlertIsOpen(false)}
+ description={t(
+ 'The number of rows displayed is limited to %(rows)d by the
dropdown.',
+ { rows },
+ )}
+ />
+ </div>
+ )}
+ {limitReached && (
+ <div ref={calculateAlertRefHeight}>
+ <Alert
+ type="warning"
+ onClose={() => setAlertIsOpen(false)}
+ message={t('%(rows)d rows returned', { rows: rowsCount })}
+ description={
+ isAdmin
+ ? displayMaxRowsReachedMessage.withAdmin
+ : displayMaxRowsReachedMessage.withoutAdmin
+ }
+ />
+ </div>
+ )}
+ </>
+ );
+ }
+ const showRowsReturned =
+ showSqlInline || (!limitReached && !shouldUseDefaultDropdownAlert);
+
return (
- <ReturnedRows>
- {!limitReached && !shouldUseDefaultDropdownAlert && (
- <Tooltip
- id="sqllab-rowcount-tooltip"
- title={tooltipText}
- placement="left"
- >
- <Label
- css={css`
- line-height: ${theme.typography.sizes.l}px;
- `}
+ <>
+ {showRowsReturned && (
+ <ReturnedRows>
+ <Tooltip
+ id="sqllab-rowcount-tooltip"
+ title={tooltipText}
+ placement="left"
>
- {limitMessage && (
- <Icons.ExclamationCircleOutlined
- css={css`
- font-size: ${theme.typography.sizes.m}px;
- margin-right: ${theme.gridUnit}px;
- `}
- />
- )}
- {tn('%s row', '%s rows', rows, formattedRowCount)}
- </Label>
- </Tooltip>
- )}
- {!limitReached && shouldUseDefaultDropdownAlert && (
- <div ref={calculateAlertRefHeight}>
- <Alert
- type="warning"
- message={t('%(rows)d rows returned', { rows })}
- onClose={() => setAlertIsOpen(false)}
- description={t(
- 'The number of rows displayed is limited to %(rows)d by the
dropdown.',
- { rows },
- )}
- />
- </div>
- )}
- {limitReached && (
- <div ref={calculateAlertRefHeight}>
- <Alert
- type="warning"
- onClose={() => setAlertIsOpen(false)}
- message={t('%(rows)d rows returned', { rows: rowsCount })}
- description={
- isAdmin
- ? displayMaxRowsReachedMessage.withAdmin
- : displayMaxRowsReachedMessage.withoutAdmin
- }
- />
- </div>
+ <Label
+ css={css`
+ line-height: ${theme.typography.sizes.l}px;
+ `}
+ >
+ {limitMessage && (
+ <Icons.ExclamationCircleOutlined
+ css={css`
+ font-size: ${theme.typography.sizes.m}px;
+ margin-right: ${theme.gridUnit}px;
+ `}
+ />
+ )}
+ {tn('%s row', '%s rows', rows, formattedRowCount)}
+ </Label>
+ </Tooltip>
+ </ReturnedRows>
)}
- </ReturnedRows>
+ </>
);
};
@@ -531,35 +542,39 @@ const ResultSet = ({
<ResultContainer>
{renderControls()}
{showSql && showSqlInline ? (
- <div
- css={css`
- display: flex;
- justify-content: space-between;
- gap: ${GAP}px;
- `}
- >
- <Card
- css={[
- css`
- height: 28px;
- width: calc(100% - ${ROWS_CHIP_WIDTH + GAP}px);
- code {
- width: 100%;
- overflow: hidden;
- white-space: nowrap !important;
- text-overflow: ellipsis;
- display: block;
- }
- `,
- ]}
+ <>
+ <div
+ css={css`
+ display: flex;
+ justify-content: space-between;
+ gap: ${GAP}px;
+ `}
>
- {sql}
- </Card>
- {renderRowsReturned()}
- </div>
+ <Card
+ css={[
+ css`
+ height: 28px;
+ width: calc(100% - ${ROWS_CHIP_WIDTH + GAP}px);
+ code {
+ width: 100%;
+ overflow: hidden;
+ white-space: nowrap !important;
+ text-overflow: ellipsis;
+ display: block;
+ }
+ `,
+ ]}
+ >
+ {sql}
+ </Card>
+ {renderRowsReturned(false)}
+ </div>
+ {renderRowsReturned(true)}
+ </>
) : (
<>
- {renderRowsReturned()}
+ {renderRowsReturned(false)}
+ {renderRowsReturned(true)}
{sql}
</>
)}
diff --git a/superset-frontend/src/SqlLab/reducers/sqlLab.js
b/superset-frontend/src/SqlLab/reducers/sqlLab.js
index 5b71a24036..4d27836da1 100644
--- a/superset-frontend/src/SqlLab/reducers/sqlLab.js
+++ b/superset-frontend/src/SqlLab/reducers/sqlLab.js
@@ -637,7 +637,11 @@ export default function sqlLabReducer(state = {}, action) {
// when it started fetching or finished rendering results
state:
currentState === QueryState.SUCCESS &&
- [QueryState.FETCHING, QueryState.SUCCESS].includes(prevState)
+ [
+ QueryState.FETCHING,
+ QueryState.SUCCESS,
+ QueryState.RUNNING,
+ ].includes(prevState)
? prevState
: currentState,
};
