diff --git a/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx b/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx index 2297f8ff684d8..5bb628dd61350 100644 --- a/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx +++ b/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx @@ -115,6 +115,7 @@ const RunQueryActionButton = ({ name="caret-down" /> ), + trigger: 'click', } : { buttonStyle: btnStyle })} > diff --git a/superset-frontend/src/SqlLab/components/SqlEditor.jsx b/superset-frontend/src/SqlLab/components/SqlEditor.jsx index 90e2af8521d97..b4f7057b806e3 100644 --- a/superset-frontend/src/SqlLab/components/SqlEditor.jsx +++ b/superset-frontend/src/SqlLab/components/SqlEditor.jsx @@ -28,10 +28,7 @@ import Split from 'react-split'; import { t, styled, supersetTheme } from '@superset-ui/core'; import debounce from 'lodash/debounce'; import throttle from 'lodash/throttle'; -<<<<<<< HEAD -======= import StyledModal from 'src/common/components/Modal'; ->>>>>>> 0e64ceb2ad710a2906a65a0e6dfe63fe93b76d57 import Mousetrap from 'mousetrap'; import { Tooltip } from 'src/common/components/Tooltip'; @@ -108,7 +105,7 @@ const LimitSelectStyled = styled.span` `; const StyledToolbar = styled.div` - padding: 10px 10px 5px 10px; + padding: ${({ theme }) => theme.gridUnit * 2}px; background-color: @lightest; display: flex; justify-content: space-between; @@ -393,6 +390,10 @@ class SqlEditor extends React.PureComponent { } } + convertToNumWithSpaces(num) { + return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1 '); + } + startQuery(ctas = false, ctas_method = CtasEnum.TABLE) { const qe = this.props.queryEditor; const query = { @@ -544,7 +545,7 @@ class SqlEditor extends React.PureComponent { this.setQueryLimit(limit)}> {/* // eslint-disable-line no-use-before-define */} - {limit.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1 ')} + {this.convertToNumWithSpaces(limit)} {' '} ))} @@ -574,11 +575,11 @@ class SqlEditor extends React.PureComponent { ); } - // eslint-disable-next-line camelcase const { allow_ctas: allowCTAS, allow_cvas: allowCVAS } = this.props.database || {}; const showMenu = allowCTAS || allowCVAS; + const runMenuBtn = ( {allowCTAS && ( @@ -591,7 +592,7 @@ class SqlEditor extends React.PureComponent { }} key="1" > - {t('Create Table As')} + {t('CREATE TABLE AS')} )} {allowCVAS && ( @@ -604,7 +605,7 @@ class SqlEditor extends React.PureComponent { }} key="2" > - {t('Create View As')} + {t('CREATE VIEW AS')} )} @@ -647,14 +648,14 @@ class SqlEditor extends React.PureComponent { {limitWarning} - + e.preventDefault()}> LIMIT: - {( + {this.convertToNumWithSpaces( this.props.queryEditor.queryLimit || - this.props.defaultQueryLimit - ).toLocaleString()} + this.props.defaultQueryLimit, + )} @@ -671,10 +672,7 @@ class SqlEditor extends React.PureComponent { )} -
+
{limitWarning} - +
diff --git a/superset-frontend/src/common/components/Dropdown.tsx b/superset-frontend/src/common/components/Dropdown.tsx index 1b9e13cadbc87..fcd5ab48af0a9 100644 --- a/superset-frontend/src/common/components/Dropdown.tsx +++ b/superset-frontend/src/common/components/Dropdown.tsx @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -import React from 'react'; +import React, { ReactNode } from 'react'; import { Dropdown as AntdDropdown, Tooltip } from 'src/common/components'; import { styled } from '@superset-ui/core'; import kebabCase from 'lodash/kebabCase'; @@ -107,6 +107,7 @@ export interface DropdownProps { overlay: React.ReactElement; tooltip?: string; placement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'; + buttonsRender?: ((buttons: ReactNode[]) => ReactNode[]) | undefined; } export const Dropdown = ({ overlay, ...rest }: DropdownProps) => ( @@ -123,21 +124,28 @@ export const DropdownButton = ({ placement, ...rest }: DropdownProps) => { - const button = ( + const buildButton = ( + props: { + buttonsRender?: DropdownProps['buttonsRender']; + } = {}, + ) => ( - + ); if (tooltip) { - return ( - - {button} - - ); + return buildButton({ + buttonsRender: ([leftButton, rightButton]) => [ + + {leftButton} + , + rightButton, + ], + }); } - return { button }; + return buildButton(); };