This is an automated email from the ASF dual-hosted git repository. hugh pushed a commit to branch hugh/SO-1117-modal in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
commit 6d2a61b63ac7dd83dd016dc06cf629781612b4e5 Author: hughhhh <[email protected]> AuthorDate: Sat Nov 14 17:46:06 2020 -0800 flake8 --- .../src/SqlLab/components/ResultSet.tsx | 23 ++++++- .../src/SqlLab/components/SaveDatasetModal.tsx | 73 +++++++++++++++++----- 2 files changed, 78 insertions(+), 18 deletions(-) diff --git a/superset-frontend/src/SqlLab/components/ResultSet.tsx b/superset-frontend/src/SqlLab/components/ResultSet.tsx index 2c3e7f5..c613a0f 100644 --- a/superset-frontend/src/SqlLab/components/ResultSet.tsx +++ b/superset-frontend/src/SqlLab/components/ResultSet.tsx @@ -88,6 +88,7 @@ export default class ResultSet extends React.PureComponent< searchText: '', showExploreResultsButton: false, data: [], + showSaveDatasetModal: false }; this.changeSearch = this.changeSearch.bind(this); @@ -97,6 +98,8 @@ export default class ResultSet extends React.PureComponent< this.toggleExploreResultsButton = this.toggleExploreResultsButton.bind( this, ); + this.handleSaveInDataset = this.handleSaveInDataset.bind(this); + this.handleHideSaveModal = this.handleHideSaveModal.bind(this); } componentDidMount() { @@ -168,15 +171,30 @@ export default class ResultSet extends React.PureComponent< } } + handleSaveInDataset() { + console.log('Saving dataset'); + } + + handleHideSaveModal() { + console.log('hiding the modal'); + this.setState({showSaveDatasetModal: false}) + } + renderControls() { if (this.props.search || this.props.visualize || this.props.csv) { let { data } = this.props.query.results; if (this.props.cache && this.props.query.cached) { ({ data } = this.state); } + + const { showSaveDatasetModal } = this.state; return ( <div className="ResultSetControls"> - <SaveDatasetModal /> + <SaveDatasetModal + visible={showSaveDatasetModal} + onOk={this.handleSaveInDataset} + onCancel={this.handleHideSaveModal} + /> <div className="ResultSetButtons"> {this.props.visualize && this.props.database && @@ -186,6 +204,9 @@ export default class ResultSet extends React.PureComponent< query={this.props.query} database={this.props.database} actions={this.props.actions} + onClick={() => { + this.setState({showSaveDatasetModal: true}) + }} /> )} {this.props.csv && ( diff --git a/superset-frontend/src/SqlLab/components/SaveDatasetModal.tsx b/superset-frontend/src/SqlLab/components/SaveDatasetModal.tsx index 7085991..e052e25 100644 --- a/superset-frontend/src/SqlLab/components/SaveDatasetModal.tsx +++ b/superset-frontend/src/SqlLab/components/SaveDatasetModal.tsx @@ -17,9 +17,10 @@ * under the License. */ -import React, { useState } from 'react'; +import React, { useState, FunctionComponent} from 'react'; import { Radio, AutoComplete, Input } from 'src/common/components'; import Modal from 'src/common/components/Modal'; +import Button from 'src/components/Button'; const mockVal = (str, repeat = 1) => { return { @@ -27,10 +28,14 @@ const mockVal = (str, repeat = 1) => { }; }; +interface SaveDatasetModalProps = { +} + // eslint-disable-next-line no-empty-pattern -export const SaveDatasetModal = ({}) => { +export const SaveDatasetModal: FunctionComponent<> = ({visible, onOk, onCancel}) => { const [value, setValue] = useState(''); const [options, setOptions] = useState([]); + const [radioOption, setRadioOptions] = useState(1); const onSearch = (searchText) => { setOptions( @@ -46,23 +51,57 @@ export const SaveDatasetModal = ({}) => { setValue(data); }; + const onRadioChange = e => { + console.log('radio checked', e.target.value); + setRadioOptions(e.target.value) + }; + + const radioStyle = { + display: 'block', + height: '30px', + lineHeight: '30px', + }; + return ( - <Modal show onHide={() => {}} title="Save a new dataset"> + <Modal + show={visible} + onHide={() => {}} + title="Save a new dataset" + onCancel={onCancel} + footer={<> + <Button + buttonSize="sm" + buttonStyle="primary" + className="m-r-5" + onClick={onOk} + > + Save & Explore + </Button> + </> + } + > <div> - To explore the results of this query, we need to save it as a virtual dataset - <Radio>Save as new dataset</Radio> - <Input style={{ width: 200 }} defaultValue="my_new_dataset_A" /> - <br/> - <Radio>Overwrite existing dataset</Radio> - <AutoComplete - options={options} - style={{ - width: 200, - }} - onSelect={onSelect} - onSearch={onSearch} - placeholder="input here" - /> + <div> + To explore the results of this query, we need to save it as a virtual dataset + </div> + <Radio.Group onChange={onRadioChange} value={radioOption}> + <Radio style={radioStyle} value={1}> + Save as new dataset + <Input style={{ width: 200 }} defaultValue="my_new_dataset_A" /> + </Radio> + <Radio style={radioStyle} value={2}> + Overwrite existing dataset + <AutoComplete + options={options} + style={{ + width: 200, + }} + onSelect={onSelect} + onSearch={onSearch} + placeholder="input here" + /> + </Radio> + </Radio.Group> </div> </Modal> );
