mirror of
https://github.com/apache/superset.git
synced 2024-09-06 22:07:34 -04:00
refactor : Transform SaveModal to typescript (#11951)
* Transform SaveModal to typescript * Revert title * Resolve code review * Refactor * Refactor * Change * Call method * Fix test * ShouldPersist default false Co-authored-by: Victor Malai <victormalai@Victors-MacBook-Pro.local>
This commit is contained in:
parent
4d329071a1
commit
12d9d1eccb
@ -67,9 +67,9 @@ describe('Checkbox', () => {
|
|||||||
|
|
||||||
it('renders custom Checkbox styles without melting', () => {
|
it('renders custom Checkbox styles without melting', () => {
|
||||||
wrapper = mount(
|
wrapper = mount(
|
||||||
<Checkbox onChange={() => true} checked={false} style={{ foo: 'foo' }} />,
|
<Checkbox onChange={() => true} checked={false} style={{ opacity: 1 }} />,
|
||||||
);
|
);
|
||||||
expect(wrapper.find('Checkbox')).toExist();
|
expect(wrapper.find('Checkbox')).toExist();
|
||||||
expect(wrapper.find('Checkbox')).toHaveStyle({ foo: 'foo' });
|
expect(wrapper.find('Checkbox')).toHaveStyle({ opacity: 1 });
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -25,8 +25,8 @@ import {
|
|||||||
|
|
||||||
interface CheckboxProps {
|
interface CheckboxProps {
|
||||||
checked: boolean;
|
checked: boolean;
|
||||||
onChange: (val?: boolean) => {};
|
onChange: (val?: boolean) => void;
|
||||||
style: object;
|
style?: React.CSSProperties;
|
||||||
}
|
}
|
||||||
|
|
||||||
const Styles = styled.span`
|
const Styles = styled.span`
|
||||||
|
@ -18,42 +18,64 @@
|
|||||||
*/
|
*/
|
||||||
/* eslint-env browser */
|
/* eslint-env browser */
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import { FormControl, FormGroup, Radio } from 'react-bootstrap';
|
import { FormControl, FormGroup, Radio } from 'react-bootstrap';
|
||||||
import Button from 'src/components/Button';
|
import Button from 'src/components/Button';
|
||||||
import { t, CategoricalColorNamespace } from '@superset-ui/core';
|
import { t, CategoricalColorNamespace, JsonResponse } from '@superset-ui/core';
|
||||||
|
|
||||||
import ModalTrigger from '../../components/ModalTrigger';
|
import ModalTrigger from 'src/components/ModalTrigger';
|
||||||
import Checkbox from '../../components/Checkbox';
|
import Checkbox from 'src/components/Checkbox';
|
||||||
import { SAVE_TYPE_OVERWRITE, SAVE_TYPE_NEWDASHBOARD } from '../util/constants';
|
import {
|
||||||
|
SAVE_TYPE_OVERWRITE,
|
||||||
|
SAVE_TYPE_NEWDASHBOARD,
|
||||||
|
} from 'src/dashboard/util/constants';
|
||||||
|
|
||||||
const propTypes = {
|
type SaveType = typeof SAVE_TYPE_OVERWRITE | typeof SAVE_TYPE_NEWDASHBOARD;
|
||||||
addSuccessToast: PropTypes.func.isRequired,
|
|
||||||
addDangerToast: PropTypes.func.isRequired,
|
type SaveModalProps = {
|
||||||
dashboardId: PropTypes.number.isRequired,
|
addSuccessToast: (arg: string) => void;
|
||||||
dashboardTitle: PropTypes.string.isRequired,
|
addDangerToast: (arg: string) => void;
|
||||||
dashboardInfo: PropTypes.object.isRequired,
|
dashboardId: number;
|
||||||
expandedSlices: PropTypes.object.isRequired,
|
dashboardTitle: string;
|
||||||
layout: PropTypes.object.isRequired,
|
dashboardInfo: Record<string, any>;
|
||||||
saveType: PropTypes.oneOf([SAVE_TYPE_OVERWRITE, SAVE_TYPE_NEWDASHBOARD]),
|
expandedSlices: Record<string, any>;
|
||||||
triggerNode: PropTypes.node.isRequired,
|
layout: Record<string, any>;
|
||||||
customCss: PropTypes.string.isRequired,
|
saveType: SaveType;
|
||||||
colorNamespace: PropTypes.string,
|
triggerNode: JSX.Element;
|
||||||
colorScheme: PropTypes.string,
|
customCss: string;
|
||||||
onSave: PropTypes.func.isRequired,
|
colorNamespace?: string;
|
||||||
canOverwrite: PropTypes.bool.isRequired,
|
colorScheme?: string;
|
||||||
refreshFrequency: PropTypes.number.isRequired,
|
onSave: (data: any, id: number | string, saveType: SaveType) => void;
|
||||||
lastModifiedTime: PropTypes.number.isRequired,
|
canOverwrite: boolean;
|
||||||
|
shouldPersistRefreshFrequency: boolean;
|
||||||
|
refreshFrequency: number;
|
||||||
|
lastModifiedTime: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
type SaveModalState = {
|
||||||
|
saveType: SaveType;
|
||||||
|
newDashName: string;
|
||||||
|
duplicateSlices: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
const defaultProps = {
|
const defaultProps = {
|
||||||
saveType: SAVE_TYPE_OVERWRITE,
|
saveType: SAVE_TYPE_OVERWRITE,
|
||||||
colorNamespace: undefined,
|
colorNamespace: undefined,
|
||||||
colorScheme: undefined,
|
colorScheme: undefined,
|
||||||
|
shouldPersistRefreshFrequency: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
class SaveModal extends React.PureComponent {
|
class SaveModal extends React.PureComponent<SaveModalProps, SaveModalState> {
|
||||||
constructor(props) {
|
static defaultProps = defaultProps;
|
||||||
|
|
||||||
|
modal: ModalTrigger | null;
|
||||||
|
|
||||||
|
onSave: (
|
||||||
|
data: Record<string, any>,
|
||||||
|
dashboardId: number | string,
|
||||||
|
saveType: SaveType,
|
||||||
|
) => Promise<JsonResponse>;
|
||||||
|
|
||||||
|
constructor(props: SaveModalProps) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
saveType: props.saveType,
|
saveType: props.saveType,
|
||||||
@ -69,25 +91,25 @@ class SaveModal extends React.PureComponent {
|
|||||||
this.onSave = this.props.onSave.bind(this);
|
this.onSave = this.props.onSave.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
setModalRef(ref) {
|
setModalRef(ref: ModalTrigger | null) {
|
||||||
this.modal = ref;
|
this.modal = ref;
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleDuplicateSlices() {
|
toggleDuplicateSlices(): void {
|
||||||
this.setState(prevState => ({
|
this.setState(prevState => ({
|
||||||
duplicateSlices: !prevState.duplicateSlices,
|
duplicateSlices: !prevState.duplicateSlices,
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
|
|
||||||
handleSaveTypeChange(event) {
|
handleSaveTypeChange(event: React.FormEvent<Radio>) {
|
||||||
this.setState({
|
this.setState({
|
||||||
saveType: event.target.value,
|
saveType: (event.target as HTMLInputElement).value as SaveType,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
handleNameChange(event) {
|
handleNameChange(event: React.FormEvent<FormControl>) {
|
||||||
this.setState({
|
this.setState({
|
||||||
newDashName: event.target.value,
|
newDashName: (event.target as HTMLInputElement).value,
|
||||||
saveType: SAVE_TYPE_NEWDASHBOARD,
|
saveType: SAVE_TYPE_NEWDASHBOARD,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -137,17 +159,17 @@ class SaveModal extends React.PureComponent {
|
|||||||
t('You must pick a name for the new dashboard'),
|
t('You must pick a name for the new dashboard'),
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
this.onSave(data, dashboardId, saveType).then(resp => {
|
this.onSave(data, dashboardId, saveType).then((resp: JsonResponse) => {
|
||||||
if (
|
if (
|
||||||
saveType === SAVE_TYPE_NEWDASHBOARD &&
|
saveType === SAVE_TYPE_NEWDASHBOARD &&
|
||||||
resp &&
|
resp &&
|
||||||
resp.json &&
|
resp.json &&
|
||||||
resp.json.id
|
resp.json.id
|
||||||
) {
|
) {
|
||||||
window.location = `/superset/dashboard/${resp.json.id}/`;
|
window.location.href = `/superset/dashboard/${resp.json.id}/`;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
this.modal.close();
|
this.modal?.close();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -185,7 +207,7 @@ class SaveModal extends React.PureComponent {
|
|||||||
<div className="m-l-25 m-t-5">
|
<div className="m-l-25 m-t-5">
|
||||||
<Checkbox
|
<Checkbox
|
||||||
checked={this.state.duplicateSlices}
|
checked={this.state.duplicateSlices}
|
||||||
onChange={this.toggleDuplicateSlices}
|
onChange={() => this.toggleDuplicateSlices()}
|
||||||
/>
|
/>
|
||||||
<span className="m-l-5">{t('also copy (duplicate) charts')}</span>
|
<span className="m-l-5">{t('also copy (duplicate) charts')}</span>
|
||||||
</div>
|
</div>
|
||||||
@ -207,7 +229,4 @@ class SaveModal extends React.PureComponent {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
SaveModal.propTypes = propTypes;
|
|
||||||
SaveModal.defaultProps = defaultProps;
|
|
||||||
|
|
||||||
export default SaveModal;
|
export default SaveModal;
|
Loading…
Reference in New Issue
Block a user