diff --git a/superset-frontend/cypress-base/cypress/integration/explore/AdhocFilters.test.ts b/superset-frontend/cypress-base/cypress/integration/explore/AdhocFilters.test.ts index dc129613b9..576304a4e4 100644 --- a/superset-frontend/cypress-base/cypress/integration/explore/AdhocFilters.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/explore/AdhocFilters.test.ts @@ -40,7 +40,7 @@ describe('AdhocFilters', () => { cy.get('button').contains('Save').click(); }); - cy.get('button.query').click(); + cy.get('button[data-test="run-query-button"]').click(); cy.verifySliceSuccess({ waitAlias: '@postJson', chartSelector: 'svg', @@ -63,7 +63,7 @@ describe('AdhocFilters', () => { cy.get('button').contains('Save').click(); }); - cy.get('button.query').click(); + cy.get('button[data-test="run-query-button"]').click(); cy.verifySliceSuccess({ waitAlias: '@postJson', chartSelector: 'svg', diff --git a/superset-frontend/cypress-base/cypress/integration/explore/AdhocMetrics.test.ts b/superset-frontend/cypress-base/cypress/integration/explore/AdhocMetrics.test.ts index 59722a0e67..5dfd741d77 100644 --- a/superset-frontend/cypress-base/cypress/integration/explore/AdhocMetrics.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/explore/AdhocMetrics.test.ts @@ -48,7 +48,7 @@ describe('AdhocMetrics', () => { cy.get('.metrics-select .metric-option').contains(metricName); - cy.get('button.query').click(); + cy.get('button[data-test="run-query-button"]').click(); cy.verifySliceSuccess({ waitAlias: '@postJson', querySubstring: `${metric} AS "${metricName}"`, // SQL statement @@ -77,7 +77,7 @@ describe('AdhocMetrics', () => { .type('/COUNT(DISTINCT name)', { force: true }); cy.get('#metrics-edit-popover').find('button').contains('Save').click(); - cy.get('button.query').click(); + cy.get('button[data-test="run-query-button"]').click(); const metric = 'SUM(num)/COUNT(DISTINCT name)'; cy.verifySliceSuccess({ @@ -103,7 +103,7 @@ describe('AdhocMetrics', () => { cy.get('button').contains('Save').click(); }); - cy.get('button.query').click(); + cy.get('button[data-test="run-query-button"]').click(); const metric = 'SUM(num)'; cy.verifySliceSuccess({ @@ -124,7 +124,7 @@ describe('AdhocMetrics', () => { }); const metric = 'AVG(sum_boys)'; - cy.get('button.query').click(); + cy.get('button[data-test="run-query-button"]').click(); cy.verifySliceSuccess({ waitAlias: '@postJson', querySubstring: `${metric} AS "${metric}"`, diff --git a/superset-frontend/cypress-base/cypress/integration/explore/advanced.test.ts b/superset-frontend/cypress-base/cypress/integration/explore/advanced.test.ts index 624bac63a7..31291e365d 100644 --- a/superset-frontend/cypress-base/cypress/integration/explore/advanced.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/explore/advanced.test.ts @@ -43,7 +43,7 @@ describe('Advanced analytics', () => { .find('.Select__multi-value__label') .contains('364 days'); - cy.get('button.query').click(); + cy.get('button[data-test="run-query-button"]').click(); cy.wait('@postJson'); cy.reload(); cy.verifySliceSuccess({ @@ -90,7 +90,7 @@ describe('Annotations', () => { cy.get('button').contains('OK').click(); }); - cy.get('button.query').click(); + cy.get('button[data-test="run-query-button"]').click(); cy.verifySliceSuccess({ waitAlias: '@postJson', chartSelector: 'svg', diff --git a/superset-frontend/cypress-base/cypress/integration/explore/control.test.ts b/superset-frontend/cypress-base/cypress/integration/explore/control.test.ts index f90695805d..7a08611497 100644 --- a/superset-frontend/cypress-base/cypress/integration/explore/control.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/explore/control.test.ts @@ -78,7 +78,7 @@ describe('Groupby control', () => { cy.get('.Select__control').click(); cy.get('input[type=text]').type('state{enter}'); }); - cy.get('button.query').click(); + cy.get('button[data-test="run-query-button"]').click(); cy.verifySliceSuccess({ waitAlias: '@postJson', chartSelector: 'svg' }); }); }); diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json index 18da52a5ce..ecc9c29ce6 100644 --- a/superset-frontend/package-lock.json +++ b/superset-frontend/package-lock.json @@ -34830,16 +34830,14 @@ "version": "3.6.5", "resolved": "https://registry.npmjs.org/polished/-/polished-3.6.5.tgz", "integrity": "sha512-VwhC9MlhW7O5dg/z7k32dabcAFW1VI2+7fSe8cE/kXcfL7mVdoa5UxciYGW2sJU78ldDLT6+ROEKIZKFNTnUXQ==", - "dev": true, "requires": { "@babel/runtime": "^7.9.2" }, "dependencies": { "@babel/runtime": { - "version": "7.10.5", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.5.tgz", - "integrity": "sha512-otddXKhdNn7d0ptoFRHtMLa8LqDxLYwTjB4nYgM1yy5N6gU/MUf8zqyyLltCH3yAVitBzmwK4us+DD0l/MauAg==", - "dev": true, + "version": "7.11.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz", + "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==", "requires": { "regenerator-runtime": "^0.13.4" } diff --git a/superset-frontend/package.json b/superset-frontend/package.json index cb003287d2..4302995bf7 100644 --- a/superset-frontend/package.json +++ b/superset-frontend/package.json @@ -145,6 +145,7 @@ "mousetrap": "^1.6.1", "mustache": "^2.2.1", "omnibar": "^2.1.1", + "polished": "^3.6.5", "prop-types": "^15.7.2", "re-resizable": "^4.3.1", "react": "^16.13.1", diff --git a/superset-frontend/spec/helpers/theming.ts b/superset-frontend/spec/helpers/theming.ts index cf1b4626f2..7f83165635 100644 --- a/superset-frontend/spec/helpers/theming.ts +++ b/superset-frontend/spec/helpers/theming.ts @@ -51,5 +51,5 @@ export function styledShallow( theme: supersetTheme, ...options?.wrappingComponentProps, }, - }); + }).dive(); } diff --git a/superset-frontend/spec/javascripts/addSlice/AddSliceContainer_spec.tsx b/superset-frontend/spec/javascripts/addSlice/AddSliceContainer_spec.tsx index 5db740d279..4af7fec71e 100644 --- a/superset-frontend/spec/javascripts/addSlice/AddSliceContainer_spec.tsx +++ b/superset-frontend/spec/javascripts/addSlice/AddSliceContainer_spec.tsx @@ -18,7 +18,7 @@ */ import React from 'react'; import { shallow, ShallowWrapper } from 'enzyme'; -import { Button } from 'react-bootstrap'; +import Button from 'src/components/Button'; import Select from 'src/components/Select'; import AddSliceContainer, { AddSliceContainerProps, @@ -58,9 +58,9 @@ describe('AddSliceContainer', () => { }); it('renders a disabled button if no datasource is selected', () => { - expect( - wrapper.find(Button).dive().find('.btn[disabled=true]'), - ).toHaveLength(1); + expect(wrapper.find(Button).dive().find({ disabled: true })).toHaveLength( + 1, + ); }); it('renders an enabled button if datasource is selected', () => { @@ -70,9 +70,9 @@ describe('AddSliceContainer', () => { datasourceId: datasourceValue.split('__')[0], datasourceType: datasourceValue.split('__')[1], }); - expect( - wrapper.find(Button).dive().find('.btn[disabled=false]'), - ).toHaveLength(1); + expect(wrapper.find(Button).dive().find({ disabled: true })).toHaveLength( + 0, + ); }); it('formats explore url', () => { diff --git a/superset-frontend/spec/javascripts/components/ConfirmStatusChange_spec.jsx b/superset-frontend/spec/javascripts/components/ConfirmStatusChange_spec.jsx index a9e027d28f..4b002637b6 100644 --- a/superset-frontend/spec/javascripts/components/ConfirmStatusChange_spec.jsx +++ b/superset-frontend/spec/javascripts/components/ConfirmStatusChange_spec.jsx @@ -18,7 +18,7 @@ */ import React from 'react'; import { mount } from 'enzyme'; -import { Button } from 'react-bootstrap'; +import Button from 'src/components/Button'; import { supersetTheme, ThemeProvider } from '@superset-ui/style'; import ConfirmStatusChange from 'src/components/ConfirmStatusChange'; import Modal from 'src/components/Modal'; @@ -33,7 +33,7 @@ describe('ConfirmStatusChange', () => { {confirm => ( <> - diff --git a/superset-frontend/src/SqlLab/components/EstimateQueryCostButton.jsx b/superset-frontend/src/SqlLab/components/EstimateQueryCostButton.jsx index 9de78089a3..69d0095c69 100644 --- a/superset-frontend/src/SqlLab/components/EstimateQueryCostButton.jsx +++ b/superset-frontend/src/SqlLab/components/EstimateQueryCostButton.jsx @@ -22,7 +22,7 @@ import { Table } from 'reactable-arc'; import { Alert } from 'react-bootstrap'; import { t } from '@superset-ui/translation'; -import Button from '../../components/Button'; +import Button from 'src/components/Button'; import Loading from '../../components/Loading'; import ModalTrigger from '../../components/ModalTrigger'; @@ -85,8 +85,8 @@ class EstimateQueryCostButton extends React.PureComponent { modalBody={this.renderModalBody()} triggerNode={ + ); q.db = ( - + ); q.started = moment(q.startDttm).format('HH:mm:ss'); q.querylink = (
- +
); q.sql = ( diff --git a/superset-frontend/src/SqlLab/components/ResultSet.tsx b/superset-frontend/src/SqlLab/components/ResultSet.tsx index db154fba43..db40267bf0 100644 --- a/superset-frontend/src/SqlLab/components/ResultSet.tsx +++ b/superset-frontend/src/SqlLab/components/ResultSet.tsx @@ -17,7 +17,8 @@ * under the License. */ import React, { CSSProperties } from 'react'; -import { Alert, Button, ButtonGroup, ProgressBar } from 'react-bootstrap'; +import { Alert, ButtonGroup, ProgressBar } from 'react-bootstrap'; +import Button from 'src/components/Button'; import shortid from 'shortid'; import { t } from '@superset-ui/translation'; @@ -166,7 +167,7 @@ export default class ResultSet extends React.PureComponent< )} {this.props.csv && ( } @@ -243,7 +244,7 @@ export default class ResultSet extends React.PureComponent< ] {t('was created')}   ); @@ -67,6 +63,7 @@ const RunQueryActionButton = ({ return ( )} diff --git a/superset-frontend/src/SqlLab/components/SqlEditor.jsx b/superset-frontend/src/SqlLab/components/SqlEditor.jsx index 976a3be94a..4f3e72c861 100644 --- a/superset-frontend/src/SqlLab/components/SqlEditor.jsx +++ b/superset-frontend/src/SqlLab/components/SqlEditor.jsx @@ -398,7 +398,7 @@ class SqlEditor extends React.PureComponent { {this.props.database.allow_ctas && ( )} diff --git a/superset-frontend/src/SqlLab/components/TemplateParamsEditor.jsx b/superset-frontend/src/SqlLab/components/TemplateParamsEditor.jsx index 7127cc355b..15f6572fd1 100644 --- a/superset-frontend/src/SqlLab/components/TemplateParamsEditor.jsx +++ b/superset-frontend/src/SqlLab/components/TemplateParamsEditor.jsx @@ -29,8 +29,8 @@ import 'brace/theme/textmate'; import { t } from '@superset-ui/translation'; import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls'; +import Button from 'src/components/Button'; import ModalTrigger from '../../components/ModalTrigger'; -import Button from '../../components/Button'; const propTypes = { onChange: PropTypes.func, diff --git a/superset-frontend/src/addSlice/AddSliceContainer.tsx b/superset-frontend/src/addSlice/AddSliceContainer.tsx index fbcd3b386d..436397d875 100644 --- a/superset-frontend/src/addSlice/AddSliceContainer.tsx +++ b/superset-frontend/src/addSlice/AddSliceContainer.tsx @@ -17,7 +17,8 @@ * under the License. */ import React from 'react'; -import { Button, Panel } from 'react-bootstrap'; +import { Panel } from 'react-bootstrap'; +import Button from 'src/components/Button'; import Select from 'src/components/Select'; import { t } from '@superset-ui/translation'; @@ -142,7 +143,7 @@ export default class AddSliceContainer extends React.PureComponent<
- ))} - - ))} + {Object.entries(buttonSizeKnob.options).map(([name, size]) => ( +
+

{name}

+ {Object.values(buttonStyleKnob.options) + .filter(o => o) + .map(style => ( + + ))} +
+ ))} ); export const InteractiveButton = () => ( } /> )} - diff --git a/superset-frontend/src/components/ExpandableList.tsx b/superset-frontend/src/components/ExpandableList.tsx index f827c98afb..20d980ea9d 100644 --- a/superset-frontend/src/components/ExpandableList.tsx +++ b/superset-frontend/src/components/ExpandableList.tsx @@ -39,12 +39,12 @@ export default function ExpandableList({ items, display = 3 }: Props) { const showMoreAction = items.length > display; const lessAction = ( - ); const moreAction = ( - ); diff --git a/superset-frontend/src/components/Label/Label.stories.tsx b/superset-frontend/src/components/Label/Label.stories.tsx index 143e2c8d49..89b36e287c 100644 --- a/superset-frontend/src/components/Label/Label.stories.tsx +++ b/superset-frontend/src/components/Label/Label.stories.tsx @@ -25,7 +25,7 @@ export default { title: 'Label', component: Label, decorators: [withKnobs], - excludeStories: ['bsStyleKnob'], + excludeStories: /.*Knob$/, }; export const bsStyleKnob = { diff --git a/superset-frontend/src/components/ListView/ListView.tsx b/superset-frontend/src/components/ListView/ListView.tsx index f825753a03..54fdeaec8e 100644 --- a/superset-frontend/src/components/ListView/ListView.tsx +++ b/superset-frontend/src/components/ListView/ListView.tsx @@ -311,11 +311,12 @@ function ListView({ ); } diff --git a/superset-frontend/src/components/Menu/SubMenu.tsx b/superset-frontend/src/components/Menu/SubMenu.tsx index f3a27e95d0..1450001550 100644 --- a/superset-frontend/src/components/Menu/SubMenu.tsx +++ b/superset-frontend/src/components/Menu/SubMenu.tsx @@ -26,12 +26,8 @@ const StyledHeader = styled.header` font-weight: ${({ theme }) => theme.typography.weights.bold}; } .navbar-right { - .supersetButton { - margin: ${({ theme }) => - `${theme.gridUnit * 2}px ${theme.gridUnit * 4}px ${ - theme.gridUnit * 2 - }px 0`}; - } + padding: 8px 0; + margin-right: 0; } .navbar-nav { li { @@ -94,16 +90,18 @@ const SubMenu: React.FunctionComponent = props => {