[incubator-superset] 05/05: flake8

[hu...@apache.org]

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 <hu...@gmail.com>
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>
   );