iop
/
superset
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: SqlLab Run button fix (#12956) 

* button fix

* tooltips disabled when it is disabled, border width changed

* added isDisabled to tooltip
This commit is contained in:
AAfghahi 2021-02-04 23:21:43 -05:00 committed by GitHub
parent 973306461c
commit ac3e16d0ac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx
View File

@ -91,17 +91,20 @@ const RunQueryActionButton = ({
? (DropdownButton as React.FC) ? (DropdownButton as React.FC)
: Button; : Button;
const isDisabled = !sql.trim();
return ( return (
<StyledButton> <StyledButton>
<ButtonComponent <ButtonComponent
onClick={() => onClick={() =>
onClick(shouldShowStopBtn, allowAsync, runQuery, stopQuery) onClick(shouldShowStopBtn, allowAsync, runQuery, stopQuery)
} }
disabled={!sql.trim()} disabled={isDisabled}
tooltip={ tooltip={
shouldShowStopBtn (!isDisabled &&
? t('Stop running (Ctrl + x)') (shouldShowStopBtn
: t('Run query (Ctrl + Return)') ? t('Stop running (Ctrl + x)')
: t('Run query (Ctrl + Return)'))) as string
} }
cta cta
{...(overlayCreateAsMenu {...(overlayCreateAsMenu
@ -109,7 +112,11 @@ const RunQueryActionButton = ({
overlay: overlayCreateAsMenu, overlay: overlayCreateAsMenu,
icon: ( icon: (
<Icon <Icon
color={supersetTheme.colors.grayscale.light5} color={
isDisabled
? supersetTheme.colors.grayscale.base
: supersetTheme.colors.grayscale.light5
}
name="caret-down" name="caret-down"
/> />
), ),

9
superset-frontend/src/common/components/Dropdown.tsx
View File

@ -82,7 +82,11 @@ const StyledDropdownButton = styled.div`
margin: 0; margin: 0;
width: 120px; width: 120px;
} }
&:last-of-type { :disabled {
background-color: ${({ theme }) => theme.colors.grayscale.light2};
color: ${({ theme }) => theme.colors.grayscale.base};
}
&:nth-child(2) {
margin: 0; margin: 0;
border-radius: ${({ theme }) => border-radius: ${({ theme }) =>
`0 ${theme.gridUnit}px ${theme.gridUnit}px 0`}; `0 ${theme.gridUnit}px ${theme.gridUnit}px 0`};
@ -98,6 +102,9 @@ const StyledDropdownButton = styled.div`
top: ${({ theme }) => theme.gridUnit * 0.75}px; top: ${({ theme }) => theme.gridUnit * 0.75}px;
width: ${({ theme }) => theme.gridUnit * 0.25}px; width: ${({ theme }) => theme.gridUnit * 0.25}px;
} }
:disabled:before {
border-left: 1px solid ${({ theme }) => theme.colors.grayscale.base};
}
} }
} }
} }