feat(sqllab): Improved query status indicator bar (#36936)

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

@@ -35,7 +35,6 @@ import {
   cachedQuery,
   failedQueryWithErrors,
   queries,
-  runningQuery,
   stoppedQuery,
   initialState,
   user,
@@ -85,32 +84,6 @@ const stoppedQueryState = {
     },
   },
 };
-const runningQueryState = {
-  ...initialState,
-  sqlLab: {
-    ...initialState.sqlLab,
-    queries: {
-      [runningQuery.id]: runningQuery,
-    },
-  },
-};
-const fetchingQueryState = {
-  ...initialState,
-  sqlLab: {
-    ...initialState.sqlLab,
-    queries: {
-      [mockedProps.queryId]: {
-        dbId: 1,
-        cached: false,
-        ctas: false,
-        id: 'ryhHUZCGb',
-        progress: 100,
-        state: 'fetching',
-        startDttm: Date.now() - 500,
-      },
-    },
-  },
-};
 const cachedQueryState = {
   ...initialState,
   sqlLab: {
@@ -332,25 +305,6 @@ describe('ResultSet', () => {
     expect(alert).toBeInTheDocument();
   });
 
-  test('should render running/pending/fetching query', async () => {
-    const { getByTestId } = setup(
-      { ...mockedProps, queryId: runningQuery.id },
-      mockStore(runningQueryState),
-    );
-    const progressBar = getByTestId('progress-bar');
-    expect(progressBar).toBeInTheDocument();
-  });
-
-  test('should render fetching w/ 100 progress query', async () => {
-    const { getByRole, getByText } = setup(
-      mockedProps,
-      mockStore(fetchingQueryState),
-    );
-    const loading = getByRole('status');
-    expect(loading).toBeInTheDocument();
-    expect(getByText('fetching')).toBeInTheDocument();
-  });
-
   test('should render a failed query with an errors object', async () => {
     const { errors } = failedQueryWithErrors;
 

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

@@ -36,7 +36,6 @@ import {
   Tooltip,
   Input,
   Label,
-  Loading,
 } from '@superset-ui/core/components';
 import {
   CopyToClipboard,
@@ -62,7 +61,6 @@ import {
 import { EXPLORE_CHART_DEFAULT, SqlLabRootState } from 'src/SqlLab/types';
 import { mountExploreUrl } from 'src/explore/exploreUtils';
 import { postFormData } from 'src/explore/exploreUtils/formData';
-import ProgressBar from '@superset-ui/core/components/ProgressBar';
 import { addDangerToast } from 'src/components/MessageToasts/actions';
 import { prepareCopyToClipboardTabularData } from 'src/utils/common';
 import { getItem, LocalStorageKeys } from 'src/utils/localStorageHelpers';
@@ -90,7 +88,6 @@ import { makeUrl } from 'src/utils/pathUtils';
 import ExploreCtasResultsButton from '../ExploreCtasResultsButton';
 import ExploreResultsButton from '../ExploreResultsButton';
 import HighlightedSql from '../HighlightedSql';
-import QueryStateLabel from '../QueryStateLabel';
 import PanelToolbar from 'src/components/PanelToolbar';
 import { ViewContribution } from 'src/SqlLab/contributions';
 
@@ -823,34 +820,20 @@ const ResultSet = ({
     }
   }
 
-  let progressBar;
-  if (query.progress > 0) {
-    progressBar = (
-      <ProgressBar percent={parseInt(query.progress.toFixed(0), 10)} striped />
-    );
-  }
-
   const progressMsg = query?.extra?.progress ?? null;
 
   return (
-    <>
-      <ResultlessStyles>
-        <div>{!progressBar && <Loading position="normal" />}</div>
-        {/* show loading bar whenever progress bar is completed but needs time to render */}
-        <div>{query.progress === 100 && <Loading position="normal" />}</div>
-        <QueryStateLabel query={query} />
-        <div>
-          {progressMsg && <Alert type="success" message={progressMsg} />}
-        </div>
-        <div>{query.progress !== 100 && progressBar}</div>
-        {trackingUrl && <div>{trackingUrl}</div>}
-      </ResultlessStyles>
+    <ResultlessStyles>
+      {progressMsg && (
+        <Alert type="success" message={progressMsg} closable={false} />
+      )}
+      {trackingUrl && <div>{trackingUrl}</div>}
       <StreamingExportModal
         visible={showStreamingModal}
         onCancel={handleCloseStreamingModal}
         progress={progress}
       />
-    </>
+    </ResultlessStyles>
   );
 };