diff --git a/superset-frontend/src/SqlLab/components/ResultSet/ResultSet.test.jsx b/superset-frontend/src/SqlLab/components/ResultSet/ResultSet.test.jsx index 0752f1ed206..7822810e97a 100644 --- a/superset-frontend/src/SqlLab/components/ResultSet/ResultSet.test.jsx +++ b/superset-frontend/src/SqlLab/components/ResultSet/ResultSet.test.jsx @@ -24,6 +24,7 @@ import { Provider } from 'react-redux'; import sinon from 'sinon'; import Alert from 'src/components/Alert'; import ProgressBar from 'src/components/ProgressBar'; +import Loading from 'src/components/Loading'; import configureStore from 'redux-mock-store'; import thunk from 'redux-thunk'; import fetchMock from 'fetch-mock'; @@ -63,6 +64,18 @@ const mockedProps = { }; const stoppedQueryProps = { ...mockedProps, query: stoppedQuery }; const runningQueryProps = { ...mockedProps, query: runningQuery }; +const fetchingQueryProps = { + ...mockedProps, + query: { + dbId: 1, + cached: false, + ctas: false, + id: 'ryhHUZCGb', + progress: 100, + state: 'fetching', + startDttm: Date.now() - 500, + }, +}; const cachedQueryProps = { ...mockedProps, query: cachedQuery }; const failedQueryWithErrorMessageProps = { ...mockedProps, @@ -179,6 +192,11 @@ test('should render running/pending/fetching query', () => { expect(wrapper.find(ProgressBar)).toExist(); }); +test('should render fetching w/ 100 progress query', () => { + const wrapper = shallow(); + expect(wrapper.find(Loading)).toExist(); +}); + test('should render a failed query with an error message', () => { const wrapper = shallow(); expect(wrapper.find(ErrorMessageWithStackTrace)).toExist(); diff --git a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx index 770b789be45..fde7f19c1a4 100644 --- a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx +++ b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx @@ -19,7 +19,6 @@ import React, { CSSProperties } from 'react'; import ButtonGroup from 'src/components/ButtonGroup'; import Alert from 'src/components/Alert'; -import ProgressBar from 'src/components/ProgressBar'; import moment from 'moment'; import { RadioChangeEvent } from 'antd/lib/radio'; import Button from 'src/components/Button'; @@ -36,6 +35,7 @@ import { debounce } from 'lodash'; import ErrorMessageWithStackTrace from 'src/components/ErrorMessage/ErrorMessageWithStackTrace'; import { SaveDatasetModal } from 'src/SqlLab/components/SaveDatasetModal'; import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes'; +import ProgressBar from 'src/components/ProgressBar'; import Loading from 'src/components/Loading'; import FilterableTable from 'src/components/FilterableTable/FilterableTable'; import CopyToClipboard from 'src/components/CopyToClipboard'; @@ -801,8 +801,8 @@ export default class ResultSet extends React.PureComponent< ); } } - let progressBar; let trackingUrl; + let progressBar; if (query.progress > 0) { progressBar = (
{!progressBar && }
+ {/* show loading bar whenever progress bar is completed but needs time to render */} +
{query.progress === 100 && }
{progressMsg && }
-
{progressBar}
+
{query.progress !== 100 && progressBar}
{trackingUrl}
);