fix: SqlLab Run button fix (#12956)

* button fix * tooltips disabled when it is disabled, border width changed * added isDisabled to tooltip
apache · Feb 5, 2021 · ac3e16d · ac3e16d
1 parent 9733064
commit ac3e16d
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx b/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx
@@ -91,25 +91,32 @@ 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
           ? {
               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
@@ -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};
+        }
       }
     }
   }