chore: Button cruft cleanup (#11342)

* toggleSchedule * cleaning up run query button * removing unnecessary (subtle!) style overrides * bulk action classname to button style prop * nixing btn-primary * nixing cancelQuery class * togglesave * nixing autocomplete class * linting * nixing button classes of 'ok' and 'reset' * unoing diagnostic test * begrudgingly adding an m-r-3 class... for now * this is not a class to worry about * test fixes for limit control * updating TODO notes, calling it a day for now. * gah... copy paste error.
2024-09-06 22:07:34 -04:00 · 2020-10-23 10:42:29 -07:00 · 2020-10-23 10:42:29 -07:00 · efdda8b69e
commit efdda8b69e
parent ad88a06d61
13 changed files with 24 additions and 51 deletions
--- a/superset-frontend/spec/javascripts/sqllab/LimitControl_spec.jsx
+++ b/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(),
    );
--- a/superset-frontend/spec/javascripts/sqllab/SaveQuery_spec.jsx
+++ b/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} />);
--- a/superset-frontend/spec/javascripts/sqllab/SqlEditor_spec.jsx
+++ b/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);
  });
 });
--- a/superset-frontend/src/SqlLab/components/ExploreResultsButton.jsx
+++ b/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 => {
--- a/superset-frontend/src/SqlLab/components/LimitControl.tsx
+++ b/superset-frontend/src/SqlLab/components/LimitControl.tsx
@ -118,7 +118,8 @@ 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}
          >
@ -126,7 +127,8 @@ export default class LimitControl extends React.PureComponent<
          </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(),
--- a/superset-frontend/src/SqlLab/components/SaveQuery.tsx
+++ b/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
--- a/superset-frontend/src/SqlLab/components/ScheduleQueryButton.jsx
+++ b/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}
--- a/superset-frontend/src/SqlLab/components/ShareSqlLabQuery.jsx
+++ b/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>
--- a/superset-frontend/src/SqlLab/components/SqlEditor.jsx
+++ b/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}
          >
--- a/superset-frontend/src/components/Button/Button.stories.jsx
+++ b/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',
--- a/superset-frontend/src/components/ListView/ListView.tsx
+++ b/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))
--- a/superset-frontend/src/components/RefreshChartOverlay.tsx
+++ b/superset-frontend/src/components/RefreshChartOverlay.tsx
@ -37,11 +37,6 @@ 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> {
@ -49,11 +44,7 @@ class RefreshChartOverlay extends React.PureComponent<Props> {
    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>
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
+++ b/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,