chore: Button cruft cleanup

superset-frontend/spec/javascripts/sqllab/LimitControl_spec.jsx

@@ -99,7 +99,10 @@ describe('LimitControl', () => {
       wrappingComponent: ThemeProvider,
       wrappingComponentProps: { theme: supersetTheme },
     });
-    popoverContentWrapper.find('.ok').first().simulate('click');
+    popoverContentWrapper
+      .find('[data-test="limit-control-confirm"]')
+      .first()
+      .simulate('click');
     expect(wrapper.state().showOverlay).toBe(false);
   });
   it('resets and closes', () => {
@@ -114,7 +117,10 @@ describe('LimitControl', () => {
       wrappingComponent: ThemeProvider,
       wrappingComponentProps: { theme: supersetTheme },
     });
-    popoverContentWrapper.find('.reset').first().simulate('click');
+    popoverContentWrapper
+      .find('[data-test="limit-control-cancel"]')
+      .first()
+      .simulate('click');
     expect(wrapper.state().textValue).toEqual(
       defaultProps.defaultQueryLimit.toString(),
     );

superset-frontend/spec/javascripts/sqllab/SaveQuery_spec.jsx

@@ -48,7 +48,7 @@ describe('SavedQuery', () => {
     const wrapper = shallow(<SaveQuery {...mockedProps} />);
     const modal = wrapper.find(Modal);
 
-    expect(modal.find('.cancelQuery')).toHaveLength(1);
+    expect(modal.find('[data-test="cancel-query"]')).toHaveLength(1);
   });
   it('has 2 FormControls', () => {
     const wrapper = shallow(<SaveQuery {...mockedProps} />);

superset-frontend/spec/javascripts/sqllab/SqlEditor_spec.jsx

@@ -108,7 +108,7 @@ describe('SqlEditor', () => {
   it('allows toggling autocomplete', () => {
     const wrapper = shallow(<SqlEditor {...mockedProps} />);
     expect(wrapper.find(AceEditorWrapper).props().autocomplete).toBe(true);
-    wrapper.find('.autocomplete').simulate('click');
+    wrapper.find('[data-test="autocomplete"]').simulate('click');
     expect(wrapper.find(AceEditorWrapper).props().autocomplete).toBe(false);
   });
 });

superset-frontend/src/SqlLab/components/ExploreResultsButton.jsx

@@ -75,7 +75,7 @@ class ExploreResultsButton extends React.PureComponent {
       this.dialog.show({
         title: t('Explore'),
         body: msg,
-        actions: [Dialog.DefaultAction('Ok', () => {}, 'btn-primary')],
+        actions: [Dialog.DefaultAction('Ok', () => {})],
         bsSize: 'large',
         bsStyle: 'warning',
         onHide: dialog => {

superset-frontend/src/SqlLab/components/LimitControl.tsx

@@ -118,15 +118,17 @@ export default class LimitControl extends React.PureComponent<
           <Button
             buttonSize="small"
             buttonStyle="primary"
-            className="float-right ok"
+            className="float-right"
+            data-test="limit-control-confirm"
             disabled={!isValid}
             onClick={this.submitAndClose}
           >
             {t('Ok')}
           </Button>
           <Button
             buttonSize="small"
-            className="float-right reset"
+            className="float-right m-r-3"
+            data-test="limit-control-cancel"
             onClick={this.setValueAndClose.bind(
               this,
               this.props.defaultQueryLimit.toString(),

superset-frontend/src/SqlLab/components/SaveQuery.tsx

@@ -184,7 +184,7 @@ export default function SaveQuery({
             >
               {isSaved ? t('Save New') : t('Save')}
             </Button>
-            <Button onClick={close} className="cancelQuery" cta>
+            <Button onClick={close} data-test="cancel-query" cta>
               {t('Cancel')}
             </Button>
           </Col>
@@ -195,7 +195,7 @@ export default function SaveQuery({
 
   return (
     <span className="SaveQuery">
-      <Button buttonSize="small" className="toggleSave" onClick={toggleSave}>
+      <Button buttonSize="small" onClick={toggleSave}>
         <i className="fa fa-save" /> {t('Save')}
       </Button>
       <Modal

superset-frontend/src/SqlLab/components/ScheduleQueryButton.jsx

@@ -200,7 +200,6 @@ class ScheduleQueryButton extends React.PureComponent {
           triggerNode={
             <Button
               buttonSize="small"
-              className="toggleSchedule"
               onClick={this.toggleSchedule}
               disabled={this.props.disabled}
               tooltip={this.props.tooltip}

superset-frontend/src/SqlLab/components/ShareSqlLabQuery.jsx

@@ -108,7 +108,7 @@ class ShareSqlLabQuery extends React.Component {
         onClick={this.getCopyUrl}
         content={this.renderPopover()}
       >
-        <Button buttonSize="small" className="toggleSave">
+        <Button buttonSize="small">
           <i className="fa fa-share" /> {t('Share')}
         </Button>
       </Popover>

superset-frontend/src/SqlLab/components/SqlEditor.jsx

@@ -558,7 +558,7 @@ class SqlEditor extends React.PureComponent {
         </div>
         <div className="rightItems">
           <Button
-            className="autocomplete"
+            data-test="autocomplete"
             buttonSize="small"
             onClick={this.handleToggleAutocompleteEnabled}
           >

superset-frontend/src/components/Button/Button.stories.jsx

@@ -54,25 +54,9 @@ export const SIZES = {
   defaultValue: null,
 };
 
-// TODO remove the use of these in the codebase where they're not necessary
-// const classKnob = {
-//   label: 'Known Classes',
-//   options: {
-//     Refresh: 'refresh-btn',
-//     Primary: 'btn-primary',
-//     Reset: 'reset',
-//     Fetch: 'fetch',
-//     Query: 'query',
-//     MR3: 'm-r-3',
-//     cancelQuery: 'cancelQuery',
-//     toggleSave: 'toggleSave',
-//     toggleSchedule: 'toggleSchedule',
-//     autocomplete: 'autocomplete',
-//     OK: 'ok',
-//     None: null,
-//   },
-//   defaultValue: null,
-// };
+// TODO remove the use of these class names in the codebase where they're not necessary
+//   'fetch' // haven't yet seen this (in ResultSet.tsx) actually show up to verify the styles are needed
+//   'm-r-3' // open a PR with a prop of `pullRight` that adds an automatic right-margin for second and subseqent sibling buttons.
 
 const TYPES = {
   label: 'Type',

superset-frontend/src/components/ListView/ListView.tsx

@@ -332,11 +332,7 @@ function ListView<T extends object = any>({
                     <Button
                       data-test="bulk-select-action"
                       key={action.key}
-                      className={cx({
-                        'btn-danger': action.type === 'danger',
-                        'btn-primary': action.type === 'primary',
-                        'btn-secondary': action.type === 'secondary',
-                      })}
+                      buttonStyle={action.type}
                       cta
                       onClick={() =>
                         action.onSelect(selectedFlatRows.map(r => r.original))

superset-frontend/src/components/RefreshChartOverlay.tsx

@@ -37,23 +37,14 @@ const RefreshOverlayWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  text-align: center;
-
-  .refresh-btn {
-    font-weight: ${({ theme }) => theme.typography.weights.bold};
-  }
 `;
 
 class RefreshChartOverlay extends React.PureComponent<Props> {
   render() {
     return (
       <RefreshOverlayWrapper>
         <div>
-          <Button
-            className="refresh-btn"
-            onClick={this.props.onQuery}
-            buttonStyle="primary"
-          >
+          <Button onClick={this.props.onQuery} buttonStyle="primary">
             {t('Run Query')}
           </Button>
         </div>

superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx

@@ -70,11 +70,6 @@ const StyledInputContainer = styled.div`
     i {
       margin: 0 ${({ theme }) => theme.gridUnit}px;
     }
-
-    .btn-primary {
-      height: 36px;
-      font-size: ${({ theme }) => theme.typography.sizes.s - 1}px;
-    }
   }
 
   input,