This is an automated email from the ASF dual-hosted git repository.
rusackas pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
The following commit(s) were added to refs/heads/master by this push:
new efdda8b chore: Button cruft cleanup (#11342)
efdda8b is described below
commit efdda8b69ec7a81fa3263531d27d442fae7c6b02
Author: Evan Rusackas <[email protected]>
AuthorDate: Fri Oct 23 10:42:29 2020 -0700
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.
---
.../spec/javascripts/sqllab/LimitControl_spec.jsx | 10 ++++++++--
.../spec/javascripts/sqllab/SaveQuery_spec.jsx | 2 +-
.../spec/javascripts/sqllab/SqlEditor_spec.jsx | 2 +-
.../src/SqlLab/components/ExploreResultsButton.jsx | 2 +-
.../src/SqlLab/components/LimitControl.tsx | 6 ++++--
.../src/SqlLab/components/SaveQuery.tsx | 4 ++--
.../src/SqlLab/components/ScheduleQueryButton.jsx | 1 -
.../src/SqlLab/components/ShareSqlLabQuery.jsx | 2 +-
.../src/SqlLab/components/SqlEditor.jsx | 2 +-
.../src/components/Button/Button.stories.jsx | 22 +++-------------------
.../src/components/ListView/ListView.tsx | 6 +-----
.../src/components/RefreshChartOverlay.tsx | 11 +----------
.../src/views/CRUD/data/database/DatabaseModal.tsx | 5 -----
13 files changed, 24 insertions(+), 51 deletions(-)
diff --git a/superset-frontend/spec/javascripts/sqllab/LimitControl_spec.jsx
b/superset-frontend/spec/javascripts/sqllab/LimitControl_spec.jsx
index 53fb00d..c05a138 100644
--- 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(),
);
diff --git a/superset-frontend/spec/javascripts/sqllab/SaveQuery_spec.jsx
b/superset-frontend/spec/javascripts/sqllab/SaveQuery_spec.jsx
index 6baa96e..231427b 100644
--- 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} />);
diff --git a/superset-frontend/spec/javascripts/sqllab/SqlEditor_spec.jsx
b/superset-frontend/spec/javascripts/sqllab/SqlEditor_spec.jsx
index 15559c7..58e7ae2 100644
--- 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);
});
});
diff --git a/superset-frontend/src/SqlLab/components/ExploreResultsButton.jsx
b/superset-frontend/src/SqlLab/components/ExploreResultsButton.jsx
index 388e74f..ea52f09 100644
--- 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 => {
diff --git a/superset-frontend/src/SqlLab/components/LimitControl.tsx
b/superset-frontend/src/SqlLab/components/LimitControl.tsx
index 95348e3..d771f37 100644
--- 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(),
diff --git a/superset-frontend/src/SqlLab/components/SaveQuery.tsx
b/superset-frontend/src/SqlLab/components/SaveQuery.tsx
index 26acbf0..b46dccc 100644
--- 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
diff --git a/superset-frontend/src/SqlLab/components/ScheduleQueryButton.jsx
b/superset-frontend/src/SqlLab/components/ScheduleQueryButton.jsx
index 07312e7..d9f9a19 100644
--- 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}
diff --git a/superset-frontend/src/SqlLab/components/ShareSqlLabQuery.jsx
b/superset-frontend/src/SqlLab/components/ShareSqlLabQuery.jsx
index c20eee9..dc9fb42 100644
--- 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>
diff --git a/superset-frontend/src/SqlLab/components/SqlEditor.jsx
b/superset-frontend/src/SqlLab/components/SqlEditor.jsx
index cebd0c4..14924b8 100644
--- 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}
>
diff --git a/superset-frontend/src/components/Button/Button.stories.jsx
b/superset-frontend/src/components/Button/Button.stories.jsx
index ac153b5..c0dc3f6 100644
--- 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',
diff --git a/superset-frontend/src/components/ListView/ListView.tsx
b/superset-frontend/src/components/ListView/ListView.tsx
index 8599303..dd365a1 100644
--- 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))
diff --git a/superset-frontend/src/components/RefreshChartOverlay.tsx
b/superset-frontend/src/components/RefreshChartOverlay.tsx
index 063a9a4..bd965b4 100644
--- 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>
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
index 681e7e6..6518d0d 100644
--- 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,
