mirror of
https://github.com/apache/superset.git
synced 2024-09-06 05:47:43 -04:00
feat(explore-popover): Show disabled 'Save' button in explore popover (#21318)
Co-authored-by: Herbert Gainor <herbert.gainor@preset.io> Co-authored-by: Michael S. Molina <michael.s.molina@gmail.com>
This commit is contained in:
parent
2731cbacbf
commit
0dbaaad83d
@ -406,10 +406,8 @@ const ColumnSelectPopover = ({
|
|||||||
{t('Close')}
|
{t('Close')}
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
disabled={!stateIsValid}
|
disabled={!stateIsValid || !hasUnsavedChanges}
|
||||||
buttonStyle={
|
buttonStyle="primary"
|
||||||
hasUnsavedChanges && stateIsValid ? 'primary' : 'default'
|
|
||||||
}
|
|
||||||
buttonSize="small"
|
buttonSize="small"
|
||||||
onClick={onSave}
|
onClick={onSave}
|
||||||
data-test="ColumnEdit#save"
|
data-test="ColumnEdit#save"
|
||||||
|
@ -122,7 +122,7 @@ describe('AdhocFilterEditPopover', () => {
|
|||||||
|
|
||||||
it('prevents saving if the filter is invalid', () => {
|
it('prevents saving if the filter is invalid', () => {
|
||||||
const { wrapper } = setup();
|
const { wrapper } = setup();
|
||||||
expect(wrapper.find(Button).find({ disabled: true })).not.toExist();
|
expect(wrapper.find(Button).find({ disabled: true })).toExist();
|
||||||
wrapper
|
wrapper
|
||||||
.instance()
|
.instance()
|
||||||
.onAdhocFilterChange(simpleAdhocFilter.duplicateWith({ operator: null }));
|
.onAdhocFilterChange(simpleAdhocFilter.duplicateWith({ operator: null }));
|
||||||
@ -133,7 +133,6 @@ describe('AdhocFilterEditPopover', () => {
|
|||||||
|
|
||||||
it('highlights save if changes are present', () => {
|
it('highlights save if changes are present', () => {
|
||||||
const { wrapper } = setup();
|
const { wrapper } = setup();
|
||||||
expect(wrapper.find(Button).find({ buttonStyle: 'primary' })).not.toExist();
|
|
||||||
wrapper.instance().onAdhocFilterChange(sqlAdhocFilter);
|
wrapper.instance().onAdhocFilterChange(sqlAdhocFilter);
|
||||||
expect(wrapper.find(Button).find({ buttonStyle: 'primary' })).toExist();
|
expect(wrapper.find(Button).find({ buttonStyle: 'primary' })).toExist();
|
||||||
});
|
});
|
||||||
|
@ -245,10 +245,12 @@ export default class AdhocFilterEditPopover extends React.Component {
|
|||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
data-test="adhoc-filter-edit-popover-save-button"
|
data-test="adhoc-filter-edit-popover-save-button"
|
||||||
disabled={!stateIsValid || !this.state.isSimpleTabValid}
|
disabled={
|
||||||
buttonStyle={
|
!stateIsValid ||
|
||||||
hasUnsavedChanges && stateIsValid ? 'primary' : 'default'
|
!this.state.isSimpleTabValid ||
|
||||||
|
!hasUnsavedChanges
|
||||||
}
|
}
|
||||||
|
buttonStyle="primary"
|
||||||
buttonSize="small"
|
buttonSize="small"
|
||||||
className="m-r-5"
|
className="m-r-5"
|
||||||
onClick={this.onSave}
|
onClick={this.onSave}
|
||||||
|
@ -98,7 +98,7 @@ describe('AdhocMetricEditPopover', () => {
|
|||||||
|
|
||||||
it('prevents saving if no column or aggregate is chosen', () => {
|
it('prevents saving if no column or aggregate is chosen', () => {
|
||||||
const { wrapper } = setup();
|
const { wrapper } = setup();
|
||||||
expect(wrapper.find(Button).find({ disabled: true })).not.toExist();
|
expect(wrapper.find(Button).find({ disabled: false })).not.toExist();
|
||||||
wrapper.instance().onColumnChange(null);
|
wrapper.instance().onColumnChange(null);
|
||||||
expect(wrapper.find(Button).find({ disabled: true })).toExist();
|
expect(wrapper.find(Button).find({ disabled: true })).toExist();
|
||||||
wrapper.instance().onColumnChange(columns[0].column_name);
|
wrapper.instance().onColumnChange(columns[0].column_name);
|
||||||
@ -109,9 +109,9 @@ describe('AdhocMetricEditPopover', () => {
|
|||||||
|
|
||||||
it('highlights save if changes are present', () => {
|
it('highlights save if changes are present', () => {
|
||||||
const { wrapper } = setup();
|
const { wrapper } = setup();
|
||||||
expect(wrapper.find(Button).find({ buttonStyle: 'primary' })).not.toExist();
|
expect(wrapper.find(Button).find({ disabled: true })).toExist();
|
||||||
wrapper.instance().onColumnChange(columns[1].column_name);
|
wrapper.instance().onColumnChange(columns[1].column_name);
|
||||||
expect(wrapper.find(Button).find({ buttonStyle: 'primary' })).toExist();
|
expect(wrapper.find(Button).find({ disabled: true })).not.toExist();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('will initiate a drag when clicked', () => {
|
it('will initiate a drag when clicked', () => {
|
||||||
|
@ -18,7 +18,7 @@
|
|||||||
*/
|
*/
|
||||||
import userEvent from '@testing-library/user-event';
|
import userEvent from '@testing-library/user-event';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { render, screen } from 'spec/helpers/testing-library';
|
import { render, screen, waitFor, within } from 'spec/helpers/testing-library';
|
||||||
import AdhocMetric from 'src/explore/components/controls/MetricControl/AdhocMetric';
|
import AdhocMetric from 'src/explore/components/controls/MetricControl/AdhocMetric';
|
||||||
import AdhocMetricEditPopover from '.';
|
import AdhocMetricEditPopover from '.';
|
||||||
|
|
||||||
@ -35,10 +35,15 @@ const createProps = () => ({
|
|||||||
},
|
},
|
||||||
savedMetricsOptions: [
|
savedMetricsOptions: [
|
||||||
{
|
{
|
||||||
id: 65,
|
id: 64,
|
||||||
metric_name: 'count',
|
metric_name: 'count',
|
||||||
expression: 'COUNT(*)',
|
expression: 'COUNT(*)',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 65,
|
||||||
|
metric_name: 'sum',
|
||||||
|
expression: 'sum(num)',
|
||||||
|
},
|
||||||
],
|
],
|
||||||
adhocMetric: new AdhocMetric({ isNew: true }),
|
adhocMetric: new AdhocMetric({ isNew: true }),
|
||||||
datasource: {
|
datasource: {
|
||||||
@ -118,26 +123,33 @@ test('Clicking on "Close" should call onClose', () => {
|
|||||||
expect(props.onClose).toBeCalledTimes(1);
|
expect(props.onClose).toBeCalledTimes(1);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('Clicking on "Save" should call onChange and onClose', () => {
|
test('Clicking on "Save" should call onChange and onClose', async () => {
|
||||||
|
const props = createProps();
|
||||||
|
render(<AdhocMetricEditPopover {...props} />);
|
||||||
|
expect(props.onChange).toBeCalledTimes(0);
|
||||||
|
expect(props.onClose).toBeCalledTimes(0);
|
||||||
|
userEvent.click(
|
||||||
|
screen.getByRole('combobox', {
|
||||||
|
name: 'Select saved metrics',
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
const sumOption = await waitFor(() =>
|
||||||
|
within(document.querySelector('.rc-virtual-list')!).getByText('sum'),
|
||||||
|
);
|
||||||
|
userEvent.click(sumOption);
|
||||||
|
userEvent.click(screen.getByRole('button', { name: 'Save' }));
|
||||||
|
expect(props.onChange).toBeCalledTimes(1);
|
||||||
|
expect(props.onClose).toBeCalledTimes(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Clicking on "Save" should not call onChange and onClose', () => {
|
||||||
const props = createProps();
|
const props = createProps();
|
||||||
render(<AdhocMetricEditPopover {...props} />);
|
render(<AdhocMetricEditPopover {...props} />);
|
||||||
expect(props.onChange).toBeCalledTimes(0);
|
expect(props.onChange).toBeCalledTimes(0);
|
||||||
expect(props.onClose).toBeCalledTimes(0);
|
expect(props.onClose).toBeCalledTimes(0);
|
||||||
userEvent.click(screen.getByRole('button', { name: 'Save' }));
|
userEvent.click(screen.getByRole('button', { name: 'Save' }));
|
||||||
expect(props.onChange).toBeCalledTimes(1);
|
expect(props.onChange).toBeCalledTimes(0);
|
||||||
expect(props.onChange).toBeCalledWith(
|
expect(props.onClose).toBeCalledTimes(0);
|
||||||
{
|
|
||||||
id: 64,
|
|
||||||
metric_name: 'count',
|
|
||||||
expression: 'COUNT(*)',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 64,
|
|
||||||
metric_name: 'count',
|
|
||||||
expression: 'COUNT(*)',
|
|
||||||
},
|
|
||||||
);
|
|
||||||
expect(props.onClose).toBeCalledTimes(1);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
test('Should switch to tab:Simple', () => {
|
test('Should switch to tab:Simple', () => {
|
||||||
|
@ -487,10 +487,8 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
|
|||||||
{t('Close')}
|
{t('Close')}
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
disabled={!stateIsValid}
|
disabled={!stateIsValid || !hasUnsavedChanges}
|
||||||
buttonStyle={
|
buttonStyle="primary"
|
||||||
hasUnsavedChanges && stateIsValid ? 'primary' : 'default'
|
|
||||||
}
|
|
||||||
buttonSize="small"
|
buttonSize="small"
|
||||||
data-test="AdhocMetricEdit#save"
|
data-test="AdhocMetricEdit#save"
|
||||||
onClick={this.onSave}
|
onClick={this.onSave}
|
||||||
|
Loading…
Reference in New Issue
Block a user