mirror of
https://github.com/apache/superset.git
synced 2024-09-06 22:07:34 -04:00
refactor: Explore SaveModal to typescript (#11997)
* Explore SaveModal to typescript * Fix test * Fix * Fix lint * update SaveModal without any type * Update * Fix lint * Fix lint * Fix test * Fix * Fix * Fix lint * Refactor * Fix
This commit is contained in:
parent
0d9c863b6e
commit
eecdd20301
@ -34,6 +34,7 @@ export interface DropdownItemProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export interface ButtonProps {
|
export interface ButtonProps {
|
||||||
|
id?: string;
|
||||||
className?: string;
|
className?: string;
|
||||||
tooltip?: string;
|
tooltip?: string;
|
||||||
placement?:
|
placement?:
|
||||||
|
@ -71,7 +71,10 @@ export function saveSlice(formData, requestParams) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
return SupersetClient.post({ url, postPayload: { form_data: formData } })
|
return SupersetClient.post({ url, postPayload: { form_data: formData } })
|
||||||
.then(({ json }) => dispatch(saveSliceSuccess(json)))
|
.then(response => {
|
||||||
|
dispatch(saveSliceSuccess(response.json));
|
||||||
|
return response;
|
||||||
|
})
|
||||||
.catch(() => dispatch(saveSliceFailed()));
|
.catch(() => dispatch(saveSliceFailed()));
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -18,35 +18,45 @@
|
|||||||
*/
|
*/
|
||||||
/* eslint camelcase: 0 */
|
/* eslint camelcase: 0 */
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
import { Alert, FormControl, FormGroup, Radio } from 'react-bootstrap';
|
import { Alert, FormControl, FormGroup, Radio } from 'react-bootstrap';
|
||||||
import { t } from '@superset-ui/core';
|
import { JsonObject, t } from '@superset-ui/core';
|
||||||
import ReactMarkdown from 'react-markdown';
|
import ReactMarkdown from 'react-markdown';
|
||||||
import Modal from 'src/common/components/Modal';
|
import Modal from 'src/common/components/Modal';
|
||||||
import Button from 'src/components/Button';
|
import Button from 'src/components/Button';
|
||||||
import FormLabel from 'src/components/FormLabel';
|
import FormLabel from 'src/components/FormLabel';
|
||||||
import { CreatableSelect } from 'src/components/Select/SupersetStyledSelect';
|
import { CreatableSelect } from 'src/components/Select/SupersetStyledSelect';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
const propTypes = {
|
|
||||||
can_overwrite: PropTypes.bool,
|
|
||||||
onHide: PropTypes.func.isRequired,
|
|
||||||
actions: PropTypes.object.isRequired,
|
|
||||||
form_data: PropTypes.object,
|
|
||||||
userId: PropTypes.string.isRequired,
|
|
||||||
dashboards: PropTypes.array.isRequired,
|
|
||||||
alert: PropTypes.string,
|
|
||||||
slice: PropTypes.object,
|
|
||||||
datasource: PropTypes.object,
|
|
||||||
dashboardId: PropTypes.number,
|
|
||||||
};
|
|
||||||
|
|
||||||
// Session storage key for recent dashboard
|
// Session storage key for recent dashboard
|
||||||
const SK_DASHBOARD_ID = 'save_chart_recent_dashboard';
|
const SK_DASHBOARD_ID = 'save_chart_recent_dashboard';
|
||||||
const SELECT_PLACEHOLDER = t('**Select** a dashboard OR **create** a new one');
|
const SELECT_PLACEHOLDER = t('**Select** a dashboard OR **create** a new one');
|
||||||
|
|
||||||
class SaveModal extends React.Component {
|
type SaveModalProps = {
|
||||||
constructor(props) {
|
can_overwrite?: boolean;
|
||||||
|
onHide: () => void;
|
||||||
|
actions: Record<string, any>;
|
||||||
|
form_data?: Record<string, any>;
|
||||||
|
userId: string;
|
||||||
|
dashboards: Array<any>;
|
||||||
|
alert?: string;
|
||||||
|
sliceName?: string;
|
||||||
|
slice?: Record<string, any>;
|
||||||
|
datasource?: Record<string, any>;
|
||||||
|
dashboardId: '' | number | null;
|
||||||
|
};
|
||||||
|
|
||||||
|
type ActionType = 'overwrite' | 'saveas';
|
||||||
|
|
||||||
|
type SaveModalState = {
|
||||||
|
saveToDashboardId: number | string | null;
|
||||||
|
newSliceName?: string;
|
||||||
|
newDashboardName?: string;
|
||||||
|
alert: string | null;
|
||||||
|
action: ActionType;
|
||||||
|
};
|
||||||
|
|
||||||
|
class SaveModal extends React.Component<SaveModalProps, SaveModalState> {
|
||||||
|
constructor(props: SaveModalProps) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
saveToDashboardId: null,
|
saveToDashboardId: null,
|
||||||
@ -56,6 +66,8 @@ class SaveModal extends React.Component {
|
|||||||
};
|
};
|
||||||
this.onDashboardSelectChange = this.onDashboardSelectChange.bind(this);
|
this.onDashboardSelectChange = this.onDashboardSelectChange.bind(this);
|
||||||
this.onSliceNameChange = this.onSliceNameChange.bind(this);
|
this.onSliceNameChange = this.onSliceNameChange.bind(this);
|
||||||
|
this.changeAction = this.changeAction.bind(this);
|
||||||
|
this.saveOrOverwrite = this.saveOrOverwrite.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
@ -63,8 +75,8 @@ class SaveModal extends React.Component {
|
|||||||
const dashboardIds = this.props.dashboards.map(
|
const dashboardIds = this.props.dashboards.map(
|
||||||
dashboard => dashboard.value,
|
dashboard => dashboard.value,
|
||||||
);
|
);
|
||||||
let recentDashboard = sessionStorage.getItem(SK_DASHBOARD_ID);
|
const lastDashboard = sessionStorage.getItem(SK_DASHBOARD_ID);
|
||||||
recentDashboard = recentDashboard && parseInt(recentDashboard, 10);
|
let recentDashboard = lastDashboard && parseInt(lastDashboard, 10);
|
||||||
|
|
||||||
if (!recentDashboard && this.props.dashboardId) {
|
if (!recentDashboard && this.props.dashboardId) {
|
||||||
recentDashboard = this.props.dashboardId;
|
recentDashboard = this.props.dashboardId;
|
||||||
@ -81,25 +93,27 @@ class SaveModal extends React.Component {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
onSliceNameChange(event) {
|
onSliceNameChange(
|
||||||
|
event: React.FormEvent<FormControl> & { target: HTMLInputElement },
|
||||||
|
) {
|
||||||
this.setState({ newSliceName: event.target.value });
|
this.setState({ newSliceName: event.target.value });
|
||||||
}
|
}
|
||||||
|
|
||||||
onDashboardSelectChange(event) {
|
onDashboardSelectChange(event: Record<string, any>) {
|
||||||
const newDashboardName = event ? event.label : null;
|
const newDashboardName = event ? event.label : null;
|
||||||
const saveToDashboardId =
|
const saveToDashboardId =
|
||||||
event && typeof event.value === 'number' ? event.value : null;
|
event && typeof event.value === 'number' ? event.value : null;
|
||||||
this.setState({ saveToDashboardId, newDashboardName });
|
this.setState({ saveToDashboardId, newDashboardName });
|
||||||
}
|
}
|
||||||
|
|
||||||
changeAction(action) {
|
changeAction(action: ActionType) {
|
||||||
this.setState({ action });
|
this.setState({ action });
|
||||||
}
|
}
|
||||||
|
|
||||||
saveOrOverwrite(gotodash) {
|
saveOrOverwrite(gotodash: boolean) {
|
||||||
this.setState({ alert: null });
|
this.setState({ alert: null });
|
||||||
this.props.actions.removeSaveModalAlert();
|
this.props.actions.removeSaveModalAlert();
|
||||||
const sliceParams = {};
|
const sliceParams: Record<string, any> = {};
|
||||||
|
|
||||||
if (this.props.slice && this.props.slice.slice_id) {
|
if (this.props.slice && this.props.slice.slice_id) {
|
||||||
sliceParams.slice_id = this.props.slice.slice_id;
|
sliceParams.slice_id = this.props.slice.slice_id;
|
||||||
@ -117,7 +131,7 @@ class SaveModal extends React.Component {
|
|||||||
|
|
||||||
this.props.actions
|
this.props.actions
|
||||||
.saveSlice(this.props.form_data, sliceParams)
|
.saveSlice(this.props.form_data, sliceParams)
|
||||||
.then(({ data }) => {
|
.then(({ data }: JsonObject) => {
|
||||||
if (data.dashboard_id === null) {
|
if (data.dashboard_id === null) {
|
||||||
sessionStorage.removeItem(SK_DASHBOARD_ID);
|
sessionStorage.removeItem(SK_DASHBOARD_ID);
|
||||||
} else {
|
} else {
|
||||||
@ -155,7 +169,7 @@ class SaveModal extends React.Component {
|
|||||||
!this.state.newSliceName ||
|
!this.state.newSliceName ||
|
||||||
(!this.state.saveToDashboardId && !this.state.newDashboardName)
|
(!this.state.saveToDashboardId && !this.state.newDashboardName)
|
||||||
}
|
}
|
||||||
onClick={this.saveOrOverwrite.bind(this, true)}
|
onClick={() => this.saveOrOverwrite(true)}
|
||||||
>
|
>
|
||||||
{t('Save & go to dashboard')}
|
{t('Save & go to dashboard')}
|
||||||
</Button>
|
</Button>
|
||||||
@ -163,7 +177,7 @@ class SaveModal extends React.Component {
|
|||||||
id="btn_modal_save"
|
id="btn_modal_save"
|
||||||
buttonSize="sm"
|
buttonSize="sm"
|
||||||
buttonStyle="primary"
|
buttonStyle="primary"
|
||||||
onClick={this.saveOrOverwrite.bind(this, false)}
|
onClick={() => this.saveOrOverwrite(false)}
|
||||||
disabled={!this.state.newSliceName}
|
disabled={!this.state.newSliceName}
|
||||||
data-test="btn-modal-save"
|
data-test="btn-modal-save"
|
||||||
>
|
>
|
||||||
@ -194,7 +208,7 @@ class SaveModal extends React.Component {
|
|||||||
inline
|
inline
|
||||||
disabled={!(this.props.can_overwrite && this.props.slice)}
|
disabled={!(this.props.can_overwrite && this.props.slice)}
|
||||||
checked={this.state.action === 'overwrite'}
|
checked={this.state.action === 'overwrite'}
|
||||||
onChange={this.changeAction.bind(this, 'overwrite')}
|
onChange={() => this.changeAction('overwrite')}
|
||||||
data-test="save-overwrite-radio"
|
data-test="save-overwrite-radio"
|
||||||
>
|
>
|
||||||
{t('Save (Overwrite)')}
|
{t('Save (Overwrite)')}
|
||||||
@ -204,7 +218,7 @@ class SaveModal extends React.Component {
|
|||||||
data-test="saveas-radio"
|
data-test="saveas-radio"
|
||||||
inline
|
inline
|
||||||
checked={this.state.action === 'saveas'}
|
checked={this.state.action === 'saveas'}
|
||||||
onChange={this.changeAction.bind(this, 'saveas')}
|
onChange={() => this.changeAction('saveas')}
|
||||||
>
|
>
|
||||||
{' '}
|
{' '}
|
||||||
{t('Save as ...')}
|
{t('Save as ...')}
|
||||||
@ -233,9 +247,10 @@ class SaveModal extends React.Component {
|
|||||||
creatable
|
creatable
|
||||||
onChange={this.onDashboardSelectChange}
|
onChange={this.onDashboardSelectChange}
|
||||||
autoSize={false}
|
autoSize={false}
|
||||||
value={
|
value={{
|
||||||
this.state.saveToDashboardId || this.state.newDashboardName
|
value:
|
||||||
}
|
this.state.saveToDashboardId || this.state.newDashboardName,
|
||||||
|
}}
|
||||||
placeholder={
|
placeholder={
|
||||||
// Using markdown to allow for good i18n
|
// Using markdown to allow for good i18n
|
||||||
<ReactMarkdown
|
<ReactMarkdown
|
||||||
@ -251,9 +266,10 @@ class SaveModal extends React.Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
SaveModal.propTypes = propTypes;
|
function mapStateToProps({
|
||||||
|
explore,
|
||||||
function mapStateToProps({ explore, saveModal }) {
|
saveModal,
|
||||||
|
}: Record<string, any>): Partial<SaveModalProps> {
|
||||||
return {
|
return {
|
||||||
datasource: explore.datasource,
|
datasource: explore.datasource,
|
||||||
slice: explore.slice,
|
slice: explore.slice,
|
Loading…
Reference in New Issue
Block a user