From f32e5d569cc5a6a8411e26e9b4ef13610883df01 Mon Sep 17 00:00:00 2001
From: Jesse Yang <jesse.yang@airbnb.com>
Date: Tue, 2 Aug 2022 14:55:41 -0700
Subject: [PATCH] fix(sqllab): tracking url and error alert padding (#20937)

(cherry picked from commit ac585821d8d6810d76a244a322cd1e24d15c265a)
---
 .../src/SqlLab/components/ResultSet/index.tsx   | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
index ebb8e4d3f030c..9e1df28b4b28f 100644
--- a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
+++ b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
@@ -78,9 +78,12 @@ interface ResultSetState {
   alertIsOpen: boolean;
 }
 
-const Styles = styled.div`
+const ResultlessStyles = styled.div`
   position: relative;
   minheight: 100px;
+  [role='alert'] {
+    margin-top: ${({ theme }) => theme.gridUnit * 2}px;
+  }
   .sql-result-track-job {
     margin-top: ${({ theme }) => theme.gridUnit * 2}px;
   }
@@ -113,10 +116,6 @@ const ResultSetButtons = styled.div`
   padding-right: ${({ theme }) => 2 * theme.gridUnit}px;
 `;
 
-const ResultSetErrorMessage = styled.div`
-  padding-top: ${({ theme }) => 4 * theme.gridUnit}px;
-`;
-
 export default class ResultSet extends React.PureComponent<
   ResultSetProps,
   ResultSetState
@@ -445,7 +444,7 @@ export default class ResultSet extends React.PureComponent<
     }
     if (query.state === 'failed') {
       return (
-        <ResultSetErrorMessage>
+        <ResultlessStyles>
           <ErrorMessageWithStackTrace
             title={t('Database error')}
             error={query?.errors?.[0]}
@@ -455,7 +454,7 @@ export default class ResultSet extends React.PureComponent<
             source="sqllab"
           />
           {trackingUrl}
-        </ResultSetErrorMessage>
+        </ResultlessStyles>
       );
     }
     if (query.state === 'success' && query.ctas) {
@@ -586,7 +585,7 @@ export default class ResultSet extends React.PureComponent<
         : null;
 
     return (
-      <Styles>
+      <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>
@@ -596,7 +595,7 @@ export default class ResultSet extends React.PureComponent<
         </div>
         <div>{query.progress !== 100 && progressBar}</div>
         {trackingUrl && <div>{trackingUrl}</div>}
-      </Styles>
+      </ResultlessStyles>
     );
   }
 }