From ac3e16d0acb0caae3a65fd1757ec985b574f7086 Mon Sep 17 00:00:00 2001
From: AAfghahi <48933336+AAfghahi@users.noreply.github.com>
Date: Thu, 4 Feb 2021 23:21:43 -0500
Subject: [PATCH] fix: SqlLab Run button fix (#12956)

* button fix

* tooltips disabled when it is disabled, border width changed

* added isDisabled to tooltip
---
 .../SqlLab/components/RunQueryActionButton.tsx  | 17 ++++++++++++-----
 .../src/common/components/Dropdown.tsx          |  9 ++++++++-
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx b/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx
index 1208de330..c2534c635 100644
--- a/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx
+++ b/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx
@@ -91,17 +91,20 @@ const RunQueryActionButton = ({
     ? (DropdownButton as React.FC)
     : Button;
 
+  const isDisabled = !sql.trim();
+
   return (
     <StyledButton>
       <ButtonComponent
         onClick={() =>
           onClick(shouldShowStopBtn, allowAsync, runQuery, stopQuery)
         }
-        disabled={!sql.trim()}
+        disabled={isDisabled}
         tooltip={
-          shouldShowStopBtn
-            ? t('Stop running (Ctrl + x)')
-            : t('Run query (Ctrl + Return)')
+          (!isDisabled &&
+            (shouldShowStopBtn
+              ? t('Stop running (Ctrl + x)')
+              : t('Run query (Ctrl + Return)'))) as string
         }
         cta
         {...(overlayCreateAsMenu
@@ -109,7 +112,11 @@ const RunQueryActionButton = ({
               overlay: overlayCreateAsMenu,
               icon: (
                 <Icon
-                  color={supersetTheme.colors.grayscale.light5}
+                  color={
+                    isDisabled
+                      ? supersetTheme.colors.grayscale.base
+                      : supersetTheme.colors.grayscale.light5
+                  }
                   name="caret-down"
                 />
               ),
diff --git a/superset-frontend/src/common/components/Dropdown.tsx b/superset-frontend/src/common/components/Dropdown.tsx
index ff9dba8e6..0dc18833e 100644
--- a/superset-frontend/src/common/components/Dropdown.tsx
+++ b/superset-frontend/src/common/components/Dropdown.tsx
@@ -82,7 +82,11 @@ const StyledDropdownButton = styled.div`
         margin: 0;
         width: 120px;
       }
-      &:last-of-type {
+      :disabled {
+        background-color: ${({ theme }) => theme.colors.grayscale.light2};
+        color: ${({ theme }) => theme.colors.grayscale.base};
+      }
+      &:nth-child(2) {
         margin: 0;
         border-radius: ${({ theme }) =>
           `0 ${theme.gridUnit}px ${theme.gridUnit}px 0`};
@@ -98,6 +102,9 @@ const StyledDropdownButton = styled.div`
           top: ${({ theme }) => theme.gridUnit * 0.75}px;
           width: ${({ theme }) => theme.gridUnit * 0.25}px;
         }
+        :disabled:before {
+          border-left: 1px solid ${({ theme }) => theme.colors.grayscale.base};
+        }
       }
     }
   }