Skip to content

Commit

Permalink
CreatableSelect\!
Browse files Browse the repository at this point in the history
  • Loading branch information
@mistercrunch
mistercrunch committed Jul 18, 2020
1 parent 0623d96 commit 659c596
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 88 deletions.
10 changes: 5 additions & 5 deletions superset-frontend/cypress-base/cypress/integration/explore/link.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ describe('Test explore links', () => {
cy.url().then(url => {
cy.get('button[data-target="#save_modal"]').click();
cy.get('.modal-content').within(() => {
cy.get('#saveas-radio').click();
cy.get('input[name=new_slice_name]').type(newChartName);
cy.get('button#btn_modal_save').click();
});
Expand Down Expand Up @@ -121,11 +122,11 @@ describe('Test explore links', () => {
cy.visitChartByName('Growth Rate');
cy.verifySliceSuccess({ waitAlias: '@postJson' });

const dashboardTitle = 'Test dashboard';
const dashboardTitle = 'Test dashboard [new]';
cy.get('button[data-target="#save_modal"]').click();
cy.get('.modal-content').within(() => {
cy.get('#saveas-radio').click();
cy.get('input[name=new_slice_name]').type('New Growth Rate');
cy.get('input[data-test=add-to-existing-dashboard]').click();
cy.get('button#btn_modal_save').click();
});
cy.verifySliceSuccess({ waitAlias: '@postJson' });
Expand All @@ -139,13 +140,12 @@ describe('Test explore links', () => {
it('Test chart save as and add to existing dashboard', () => {
cy.visitChartByName('Most Populated Countries');
cy.verifySliceSuccess({ waitAlias: '@postJson' });
const chartName = 'New Most Populated Countries';
const dashboardTitle = 'Test dashboard';
const chartName = 'Most Populated Countries [new]';
const dashboardTitle = 'Test dashboard [existing]';

cy.get('button[data-target="#save_modal"]').click();
cy.get('.modal-content').within(() => {
cy.get('input[name=new_slice_name]').type(chartName);
cy.get('input[data-test=add-to-existing-dashboard]').click();
cy.get('.save-modal-selector')
.click()
.within(() => {
Expand Down
27 changes: 2 additions & 25 deletions superset-frontend/src/components/Checkbox.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,29 +23,17 @@ const propTypes = {
checked: PropTypes.bool.isRequired,
onChange: PropTypes.func.isRequired,
style: PropTypes.object,
label: PropTypes.node,
dataTest: PropTypes.string,
};

export default function Checkbox({
label,
checked,
onChange,
style,
className,
dataTest,
}) {
export default function Checkbox({ checked, onChange, style }) {
return (
<span style={style} className={className}>
<span style={style}>
<i
role="button"
tabIndex={0}
className={`fa fa-check ${
checked ? 'text-primary' : 'text-transparent'
}`}
role="button"
dataTest={dataTest}
tabIndex={0}
onClick={() => {
onChange(!checked);
}}
Expand All @@ -55,17 +43,6 @@ export default function Checkbox({
cursor: 'pointer',
}}
/>
{label && (
<span
className="m-l-5"
role="button"
tabIndex={0}
onClick={() => onChange(!checked)}
style={{ cursor: 'pointer' }}
>
{label}
</span>
)}
</span>
);
}
Expand Down
78 changes: 24 additions & 54 deletions superset-frontend/src/explore/components/SaveModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,9 @@ import {
Modal,
Radio,
} from 'react-bootstrap';
import Select from 'src/components/Select';
import { CreatableSelect } from 'src/components/Select/SupersetStyledSelect';
import { t } from '@superset-ui/translation';

import Checkbox from '../../components/Checkbox';
import { supersetURL } from '../../utils/common';
import { EXPLORE_ONLY_VIZ_TYPE } from '../constants';

const propTypes = {
Expand All @@ -59,10 +57,10 @@ class SaveModal extends React.Component {
dashboards: [],
alert: null,
action: props.can_overwrite ? 'overwrite' : 'saveas',
addToDash: false,
vizType: props.form_data.viz_type,
};
this.toggleDash = this.toggleDash.bind(this);
this.onDashboardSelectChange = this.onDashboardSelectChange.bind(this);
this.onSliceNameChange = this.onSliceNameChange.bind(this);
}
componentDidMount() {
this.props.actions.fetchDashboards(this.props.userId).then(() => {
Expand All @@ -77,31 +75,22 @@ class SaveModal extends React.Component {
) {
this.setState({
saveToDashboardId: recentDashboard,
addToDash: true,
});
}
});
}
onChange(name, event) {
switch (name) {
case 'newSliceName':
this.setState({ newSliceName: event.target.value });
break;
case 'saveToDashboardId':
this.setState({ saveToDashboardId: event ? event.value : null });
this.toggleDash(true);
break;
default:
break;
}
onSliceNameChange(event) {
this.setState({ newSliceName: event.target.value });
}
onDashboardSelectChange(event) {
const newDashboardName = event ? event.label : null;
const saveToDashboardId =
event && typeof event.value === 'number' ? event.value : null;
this.setState({ saveToDashboardId, newDashboardName });
}
changeAction(action) {
this.setState({ action });
}
toggleDash(isOn) {
const addToDash = isOn !== undefined ? isOn : !this.state.addToDash;
this.setState({ addToDash });
}
saveOrOverwrite(gotodash) {
this.setState({ alert: null });
this.props.actions.removeSaveModalAlert();
Expand All @@ -118,17 +107,8 @@ class SaveModal extends React.Component {
}
sliceParams.action = this.state.action;
sliceParams.slice_name = this.state.newSliceName;

const { addToDash } = this.state;
if (addToDash) {
sliceParams.add_to_dash = addToDash;
if (this.state.saveToDashboardId) {
sliceParams.save_to_dashboard_id = this.state.saveToDashboardId;
} else {
sliceParams.new_dashboard_name = t('Untitled dashboard');
}
}
sliceParams.goto_dash = gotodash;
sliceParams.save_to_dashboard_id = this.state.saveToDashboardId;
sliceParams.new_dashboard_name = this.state.newDashboardName;

this.props.actions
.saveSlice(this.props.form_data, sliceParams)
Expand All @@ -139,11 +119,8 @@ class SaveModal extends React.Component {
sessionStorage.setItem(SK_DASHBOARD_ID, data.dashboard_id);
}
// Go to new slice url or dashboard url
if (gotodash) {
window.location.assign(supersetURL(data.dashboard));
} else {
window.location.assign(data.slice.slice_url);
}
const url = gotodash ? data.dashboard_url : data.slice.slice_url;
window.location.assign(url);
});
this.props.onHide();
}
Expand All @@ -157,7 +134,7 @@ class SaveModal extends React.Component {
const canNotSaveToDash =
EXPLORE_ONLY_VIZ_TYPE.indexOf(this.state.vizType) > -1;
return (
<Modal show onHide={this.props.onHide} bsSize="medium">
<Modal show onHide={this.props.onHide}>
<Modal.Header closeButton>
<Modal.Title>{t('Save A Chart')}</Modal.Title>
</Modal.Header>
Expand Down Expand Up @@ -201,27 +178,20 @@ class SaveModal extends React.Component {
bsSize="sm"
placeholder="Name"
value={this.state.newSliceName}
onChange={this.onChange.bind(this, 'newSliceName')}
onChange={this.onSliceNameChange}
/>
</FormGroup>
<hr />
<Checkbox
className="m-r-5"
disabled={canNotSaveToDash}
checked={this.state.addToDash}
label={t('Add to dashboard')}
onChange={this.toggleDash}
dataTest="add-to-existing-dashboard"
/>
<Select
{t('Add to dashboard')}
<CreatableSelect
className="save-modal-selector"
options={this.props.dashboards}
clearable
onChange={this.onChange.bind(this, 'saveToDashboardId')}
isDisabled={!this.state.addToDash}
creatable
onChange={this.onDashboardSelectChange}
autoSize={false}
value={this.state.saveToDashboardId}
placeholder="Select a dashboard or leave empty to create a new one"
value={this.state.saveToDashboardId || this.state.newDashboardName}
placeholder={t('Select a dashboard OR create a new one')}
/>
</Modal.Body>

Expand All @@ -239,7 +209,7 @@ class SaveModal extends React.Component {
type="button"
id="btn_modal_save_goto_dash"
bsSize="sm"
disabled={!this.state.addToDash || canNotSaveToDash}
disabled={canNotSaveToDash || !this.state.newDashboardName}
onClick={this.saveOrOverwrite.bind(this, true)}
>
{t('Save & go to dashboard')}
Expand Down
9 changes: 5 additions & 4 deletions superset/views/core.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -813,9 +813,9 @@ def save_or_overwrite_slice( # pylint: disable=too-many-arguments,too-many-loca
# Adding slice to a dashboard if requested
dash: Optional[Dashboard] = None

add_to_dash = request.args.get("add_to_dash") == "true"
save_to_dashboard_id = request.args.get("save_to_dashboard_id")
if add_to_dash and save_to_dashboard_id:
new_dashboard_name = request.args.get("new_dashboard_name")
if save_to_dashboard_id:
# Adding the chart to an existing dashboard
dash = cast(
Dashboard,
Expand All @@ -839,7 +839,8 @@ def save_or_overwrite_slice( # pylint: disable=too-many-arguments,too-many-loca
),
"info",
)
elif add_to_dash and not save_to_dashboard_id:
elif new_dashboard_name:
# Creating and adding to a new dashboard
# check create dashboard permissions
dash_add_perm = security_manager.can_access("can_add", "DashboardModelView")
if not dash_add_perm:
Expand Down Expand Up @@ -871,7 +872,7 @@ def save_or_overwrite_slice( # pylint: disable=too-many-arguments,too-many-loca
"can_overwrite": is_owner(slc, g.user),
"form_data": slc.form_data,
"slice": slc.data,
"dashboard_id": dash.id if dash else None,
"dashboard_url": dash.url if dash else None,
}

if dash and request.args.get("goto_dash") == "true":
Expand Down

0 comments on commit 659c596

Please sign in to comment.