fix(sqllab): hide tracking url when fetching (#20905)

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

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { CSSProperties } from 'react';
+import React from 'react';
 import ButtonGroup from 'src/components/ButtonGroup';
 import Alert from 'src/components/Alert';
 import Button from 'src/components/Button';
@@ -54,8 +54,6 @@ enum LIMITING_FACTOR {
   NOT_LIMITED = 'NOT_LIMITED',
 }
 
-const LOADING_STYLES: CSSProperties = { position: 'relative', minHeight: 100 };
-
 interface ResultSetProps {
   showControls?: boolean;
   actions: Record<string, any>;
@@ -80,6 +78,14 @@ interface ResultSetState {
   alertIsOpen: boolean;
 }
 
+const Styles = styled.div`
+  position: relative;
+  minheight: 100px;
+  .sql-result-track-job {
+    margin-top: ${({ theme }) => theme.gridUnit * 2}px;
+  }
+`;
+
 // Making text render line breaks/tabs as is as monospace,
 // but wrapping text too so text doesn't overflow
 const MonospaceDiv = styled.div`
@@ -109,9 +115,6 @@ const ResultSetButtons = styled.div`
 
 const ResultSetErrorMessage = styled.div`
   padding-top: ${({ theme }) => 4 * theme.gridUnit}px;
-  .sql-result-track-job {
-    margin-top: ${({ theme }) => 2 * theme.gridUnit}px;
-  }
 `;
 
 export default class ResultSet extends React.PureComponent<
@@ -421,7 +424,11 @@ export default class ResultSet extends React.PureComponent<
       exploreDBId = this.props.database.explore_database_id;
     }
     let trackingUrl;
-    if (query.trackingUrl) {
+    if (
+      query.trackingUrl &&
+      query.state !== 'success' &&
+      query.state !== 'fetching'
+    ) {
       trackingUrl = (
         <Button
           className="sql-result-track-job"
@@ -582,7 +589,7 @@ export default class ResultSet extends React.PureComponent<
         : null;
 
     return (
-      <div style={LOADING_STYLES}>
+      <Styles>
         <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>
@@ -591,8 +598,8 @@ export default class ResultSet extends React.PureComponent<
           {progressMsg && <Alert type="success" message={progressMsg} />}
         </div>
         <div>{query.progress !== 100 && progressBar}</div>
-        <div>{trackingUrl}</div>
-      </div>
+        {trackingUrl && <div>{trackingUrl}</div>}
+      </Styles>
     );
   }
 }