From 7f2ed491b8c6478a57cdfe58be72d7d770e7c631 Mon Sep 17 00:00:00 2001
From: riahk <moar.riah@gmail.com>
Date: Wed, 30 Sep 2020 17:00:45 -0700
Subject: [PATCH 1/6] update sql lab save query modal to use antd

---
 .../src/SqlLab/components/SaveQuery.jsx       | 47 ++++++++++---------
 1 file changed, 26 insertions(+), 21 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/SaveQuery.jsx b/superset-frontend/src/SqlLab/components/SaveQuery.jsx
index 9dfb7fd20c9bc..3892846573ac0 100644
--- a/superset-frontend/src/SqlLab/components/SaveQuery.jsx
+++ b/superset-frontend/src/SqlLab/components/SaveQuery.jsx
@@ -23,7 +23,7 @@ import { t } from '@superset-ui/core';
 
 import Button from 'src/components/Button';
 import FormLabel from 'src/components/FormLabel';
-import ModalTrigger from 'src/components/ModalTrigger';
+import Modal from 'src/common/components/Modal';
 
 const propTypes = {
   query: PropTypes.object,
@@ -87,7 +87,8 @@ class SaveQuery extends React.PureComponent {
   }
 
   close() {
-    if (this.saveModal) this.saveModal.close();
+    this.setState(prevState => ({ showSave: false }));
+    // if (this.saveModal) this.saveModal.close();
   }
 
   toggleSave() {
@@ -147,6 +148,7 @@ class SaveQuery extends React.PureComponent {
                 buttonStyle="primary"
                 onClick={this.onUpdate}
                 className="m-r-3"
+                cta
               >
                 {t('Update')}
               </Button>
@@ -155,10 +157,11 @@ class SaveQuery extends React.PureComponent {
               buttonStyle={isSaved ? undefined : 'primary'}
               onClick={this.onSave}
               className="m-r-3"
+              cta
             >
               {isSaved ? t('Save New') : t('Save')}
             </Button>
-            <Button onClick={this.onCancel} className="cancelQuery">
+            <Button onClick={this.onCancel} className="cancelQuery" cta>
               {t('Cancel')}
             </Button>
           </Col>
@@ -168,26 +171,28 @@ class SaveQuery extends React.PureComponent {
   }
 
   render() {
+    const isSaved = !!this.props.query.remoteId;
+
     return (
       <span className="SaveQuery">
-        <ModalTrigger
-          ref={ref => {
-            this.saveModal = ref;
-          }}
-          modalTitle={t('Save Query')}
-          modalBody={this.renderModalBody()}
-          backdrop="static"
-          triggerNode={
-            <Button
-              buttonSize="small"
-              className="toggleSave"
-              onClick={this.toggleSave}
-            >
-              <i className="fa fa-save" /> {t('Save')}
-            </Button>
-          }
-          bsSize="small"
-        />
+        <Button
+          buttonSize="small"
+          className="toggleSave"
+          onClick={this.toggleSave}
+        >
+          <i className="fa fa-save" /> {t('Save')}
+        </Button>
+        <Modal
+          className="save-query-modal"
+          onHandledPrimaryAction={this.onSave}
+          onHide={this.onCancel}
+          primaryButtonName={isSaved ? t('Save') : t('Add')}
+          width="350px"
+          show={this.state.showSave}
+          title={<h4>{t('Save Query')}</h4>}
+        >
+          {this.renderModalBody()}
+        </Modal>
       </span>
     );
   }

From 6dc055f879945fea2b2aa85985aa6b1f70c479d9 Mon Sep 17 00:00:00 2001
From: riahk <moar.riah@gmail.com>
Date: Thu, 1 Oct 2020 11:31:53 -0700
Subject: [PATCH 2/6] finish modal updates, update test

---
 .../javascripts/sqllab/SaveQuery_spec.jsx     |  6 ++--
 .../src/SqlLab/components/SaveQuery.jsx       | 29 +++++++++++++++----
 .../src/common/components/Modal.tsx           |  4 ++-
 3 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/superset-frontend/spec/javascripts/sqllab/SaveQuery_spec.jsx b/superset-frontend/spec/javascripts/sqllab/SaveQuery_spec.jsx
index 514b52ff3568a..140a995e0fd7d 100644
--- a/superset-frontend/spec/javascripts/sqllab/SaveQuery_spec.jsx
+++ b/superset-frontend/spec/javascripts/sqllab/SaveQuery_spec.jsx
@@ -21,7 +21,7 @@ import { FormControl } from 'react-bootstrap';
 import { shallow } from 'enzyme';
 import * as sinon from 'sinon';
 import SaveQuery from 'src/SqlLab/components/SaveQuery';
-import ModalTrigger from 'src/components/ModalTrigger';
+import Modal from 'src/common/components/Modal';
 import Button from 'src/components/Button';
 
 describe('SavedQuery', () => {
@@ -40,9 +40,9 @@ describe('SavedQuery', () => {
   it('is valid with props', () => {
     expect(React.isValidElement(<SaveQuery {...mockedProps} />)).toBe(true);
   });
-  it('has a ModalTrigger', () => {
+  it('has a Modal', () => {
     const wrapper = shallow(<SaveQuery {...mockedProps} />);
-    expect(wrapper.find(ModalTrigger)).toExist();
+    expect(wrapper.find(Modal)).toExist();
   });
   it('has a cancel button', () => {
     const wrapper = shallow(<SaveQuery {...mockedProps} />);
diff --git a/superset-frontend/src/SqlLab/components/SaveQuery.jsx b/superset-frontend/src/SqlLab/components/SaveQuery.jsx
index 3892846573ac0..fbbcf3538c062 100644
--- a/superset-frontend/src/SqlLab/components/SaveQuery.jsx
+++ b/superset-frontend/src/SqlLab/components/SaveQuery.jsx
@@ -19,7 +19,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormControl, FormGroup, Row, Col } from 'react-bootstrap';
-import { t } from '@superset-ui/core';
+import { t, styled } from '@superset-ui/core';
 
 import Button from 'src/components/Button';
 import FormLabel from 'src/components/FormLabel';
@@ -40,6 +40,23 @@ const defaultProps = {
   saveQueryWarning: null,
 };
 
+const StyledRow = styled(Row)`
+  div {
+    display: flex;
+    justify-content: flex-start;
+  }
+
+  button.cta {
+    margin: 0 7px;
+    min-width: 105px;
+    font-size: 12px;
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+`;
+
 class SaveQuery extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -87,8 +104,7 @@ class SaveQuery extends React.PureComponent {
   }
 
   close() {
-    this.setState(prevState => ({ showSave: false }));
-    // if (this.saveModal) this.saveModal.close();
+    this.setState(() => ({ showSave: false }));
   }
 
   toggleSave() {
@@ -141,7 +157,7 @@ class SaveQuery extends React.PureComponent {
             <br />
           </div>
         )}
-        <Row>
+        <StyledRow>
           <Col md={12}>
             {isSaved && (
               <Button
@@ -165,7 +181,7 @@ class SaveQuery extends React.PureComponent {
               {t('Cancel')}
             </Button>
           </Col>
-        </Row>
+        </StyledRow>
       </FormGroup>
     );
   }
@@ -187,9 +203,10 @@ class SaveQuery extends React.PureComponent {
           onHandledPrimaryAction={this.onSave}
           onHide={this.onCancel}
           primaryButtonName={isSaved ? t('Save') : t('Add')}
-          width="350px"
+          width="390px"
           show={this.state.showSave}
           title={<h4>{t('Save Query')}</h4>}
+          hideFooter
         >
           {this.renderModalBody()}
         </Modal>
diff --git a/superset-frontend/src/common/components/Modal.tsx b/superset-frontend/src/common/components/Modal.tsx
index 42f7192393e4d..30971aa6c9fa4 100644
--- a/superset-frontend/src/common/components/Modal.tsx
+++ b/superset-frontend/src/common/components/Modal.tsx
@@ -33,6 +33,7 @@ interface ModalProps {
   show: boolean;
   title: React.ReactNode;
   width?: string;
+  hideFooter?: boolean;
   centered?: boolean;
   footer?: React.ReactNode;
 }
@@ -99,6 +100,7 @@ export default function Modal({
   width,
   centered,
   footer,
+  hideFooter,
   ...rest
 }: ModalProps) {
   const modalFooter = isNil(footer)
@@ -131,7 +133,7 @@ export default function Modal({
           ×
         </span>
       }
-      footer={modalFooter}
+      footer={!hideFooter ? modalFooter : null}
       {...rest}
     >
       {children}

From 540f13c039155bb5571df9b10df52c2bc8450b64 Mon Sep 17 00:00:00 2001
From: riahk <moar.riah@gmail.com>
Date: Fri, 2 Oct 2020 10:08:49 -0700
Subject: [PATCH 3/6] typescript conversion

---
 .../{SaveQuery.jsx => SaveQuery.tsx}          | 185 ++++++++----------
 1 file changed, 78 insertions(+), 107 deletions(-)
 rename superset-frontend/src/SqlLab/components/{SaveQuery.jsx => SaveQuery.tsx} (50%)

diff --git a/superset-frontend/src/SqlLab/components/SaveQuery.jsx b/superset-frontend/src/SqlLab/components/SaveQuery.tsx
similarity index 50%
rename from superset-frontend/src/SqlLab/components/SaveQuery.jsx
rename to superset-frontend/src/SqlLab/components/SaveQuery.tsx
index fbbcf3538c062..3e9dcd22d4f6f 100644
--- a/superset-frontend/src/SqlLab/components/SaveQuery.jsx
+++ b/superset-frontend/src/SqlLab/components/SaveQuery.tsx
@@ -16,8 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { useState } from 'react';
 import { FormControl, FormGroup, Row, Col } from 'react-bootstrap';
 import { t, styled } from '@superset-ui/core';
 
@@ -25,20 +24,13 @@ import Button from 'src/components/Button';
 import FormLabel from 'src/components/FormLabel';
 import Modal from 'src/common/components/Modal';
 
-const propTypes = {
-  query: PropTypes.object,
-  defaultLabel: PropTypes.string,
-  animation: PropTypes.bool,
-  onSave: PropTypes.func,
-  onUpdate: PropTypes.func,
-  saveQueryWarning: PropTypes.string,
-};
-const defaultProps = {
-  defaultLabel: t('Undefined'),
-  animation: true,
-  onSave: () => {},
-  saveQueryWarning: null,
-};
+interface SaveQueryProps {
+  query: any;
+  defaultLabel: string;
+  onSave: () => void;
+  onUpdate: () => void;
+  saveQueryWarning: string | null;
+}
 
 const StyledRow = styled(Row)`
   div {
@@ -51,68 +43,59 @@ const StyledRow = styled(Row)`
     min-width: 105px;
     font-size: 12px;
 
-    &:first-child {
+    &:first-of-type {
       margin-left: 0;
     }
   }
 `;
 
-class SaveQuery extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      description: '',
-      label: props.defaultLabel,
-      showSave: false,
+export default function SaveQuery({
+  query,
+  defaultLabel = t('Undefined'),
+  onSave = () => {},
+  onUpdate,
+  saveQueryWarning = null,
+}: SaveQueryProps) {
+  const [description, setDescription] = useState<string>('');
+  const [label, setLabel] = useState<string>(defaultLabel);
+  const [showSave, setShowSave] = useState<boolean>(false);
+  const isSaved = !!query.remoteId;
+
+  const queryPayload = () => {
+    return {
+      ...query,
+      title: label,
+      description,
     };
-    this.toggleSave = this.toggleSave.bind(this);
-    this.onSave = this.onSave.bind(this);
-    this.onUpdate = this.onUpdate.bind(this);
-    this.onCancel = this.onCancel.bind(this);
-    this.onLabelChange = this.onLabelChange.bind(this);
-    this.onDescriptionChange = this.onDescriptionChange.bind(this);
-  }
+  };
 
-  onSave() {
-    this.props.onSave(this.queryPayload());
-    this.close();
-  }
+  const close = () => {
+    setShowSave(false);
+  };
 
-  onUpdate() {
-    this.props.onUpdate(this.queryPayload());
-    this.close();
-  }
+  const onSaveWrapper = () => {
+    onSave(queryPayload());
+    close();
+  };
 
-  onCancel() {
-    this.close();
-  }
+  const onUpdateWrapper = () => {
+    onUpdate(queryPayload());
+    close();
+  };
 
-  onLabelChange(e) {
-    this.setState({ label: e.target.value });
-  }
-
-  onDescriptionChange(e) {
-    this.setState({ description: e.target.value });
-  }
-
-  queryPayload() {
-    return {
-      ...this.props.query,
-      title: this.state.label,
-      description: this.state.description,
-    };
-  }
+  const onLabelChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setLabel(e.target.value);
+  };
 
-  close() {
-    this.setState(() => ({ showSave: false }));
-  }
+  const onDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setDescription(e.target.value);
+  };
 
-  toggleSave() {
-    this.setState(prevState => ({ showSave: !prevState.showSave }));
-  }
+  const toggleSave = () => {
+    setShowSave(!showSave);
+  };
 
-  renderModalBody() {
-    const isSaved = !!this.props.query.remoteId;
+  const renderModalBody = () => {
     return (
       <FormGroup bsSize="small">
         <Row>
@@ -125,8 +108,8 @@ class SaveQuery extends React.PureComponent {
             <FormControl
               type="text"
               placeholder={t('Label for your query')}
-              value={this.state.label}
-              onChange={this.onLabelChange}
+              value={label}
+              onChange={onLabelChange}
             />
           </Col>
         </Row>
@@ -141,17 +124,17 @@ class SaveQuery extends React.PureComponent {
             <FormControl
               componentClass="textarea"
               placeholder={t('Write a description for your query')}
-              value={this.state.description}
-              onChange={this.onDescriptionChange}
+              value={description}
+              onChange={onDescriptionChange}
             />
           </Col>
         </Row>
         <br />
-        {this.props.saveQueryWarning && (
+        {saveQueryWarning && (
           <div>
             <Row>
               <Col md={12}>
-                <small>{this.props.saveQueryWarning}</small>
+                <small>{saveQueryWarning}</small>
               </Col>
             </Row>
             <br />
@@ -162,7 +145,7 @@ class SaveQuery extends React.PureComponent {
             {isSaved && (
               <Button
                 buttonStyle="primary"
-                onClick={this.onUpdate}
+                onClick={onUpdateWrapper}
                 className="m-r-3"
                 cta
               >
@@ -171,50 +154,38 @@ class SaveQuery extends React.PureComponent {
             )}
             <Button
               buttonStyle={isSaved ? undefined : 'primary'}
-              onClick={this.onSave}
+              onClick={onSaveWrapper}
               className="m-r-3"
               cta
             >
               {isSaved ? t('Save New') : t('Save')}
             </Button>
-            <Button onClick={this.onCancel} className="cancelQuery" cta>
+            <Button onClick={close} className="cancelQuery" cta>
               {t('Cancel')}
             </Button>
           </Col>
         </StyledRow>
       </FormGroup>
     );
-  }
-
-  render() {
-    const isSaved = !!this.props.query.remoteId;
-
-    return (
-      <span className="SaveQuery">
-        <Button
-          buttonSize="small"
-          className="toggleSave"
-          onClick={this.toggleSave}
-        >
-          <i className="fa fa-save" /> {t('Save')}
-        </Button>
-        <Modal
-          className="save-query-modal"
-          onHandledPrimaryAction={this.onSave}
-          onHide={this.onCancel}
-          primaryButtonName={isSaved ? t('Save') : t('Add')}
-          width="390px"
-          show={this.state.showSave}
-          title={<h4>{t('Save Query')}</h4>}
-          hideFooter
-        >
-          {this.renderModalBody()}
-        </Modal>
-      </span>
-    );
-  }
+  };
+
+  return (
+    <span className="SaveQuery">
+      <Button buttonSize="small" className="toggleSave" onClick={toggleSave}>
+        <i className="fa fa-save" /> {t('Save')}
+      </Button>
+      <Modal
+        className="save-query-modal"
+        onHandledPrimaryAction={onSaveWrapper}
+        onHide={close}
+        primaryButtonName={isSaved ? t('Save') : t('Add')}
+        width="390px"
+        show={showSave}
+        title={<h4>{t('Save Query')}</h4>}
+        hideFooter
+      >
+        {renderModalBody()}
+      </Modal>
+    </span>
+  );
 }
-SaveQuery.propTypes = propTypes;
-SaveQuery.defaultProps = defaultProps;
-
-export default SaveQuery;

From cdbd836f007d4564d5a6c7aa4d77cae888e3d26d Mon Sep 17 00:00:00 2001
From: riahk <moar.riah@gmail.com>
Date: Fri, 2 Oct 2020 11:28:21 -0700
Subject: [PATCH 4/6] rm extra className

---
 superset-frontend/src/SqlLab/components/SaveQuery.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/SaveQuery.tsx b/superset-frontend/src/SqlLab/components/SaveQuery.tsx
index 3e9dcd22d4f6f..305d7367e7bc1 100644
--- a/superset-frontend/src/SqlLab/components/SaveQuery.tsx
+++ b/superset-frontend/src/SqlLab/components/SaveQuery.tsx
@@ -101,9 +101,7 @@ export default function SaveQuery({
         <Row>
           <Col md={12}>
             <small>
-              <FormLabel className="control-label" htmlFor="embed-height">
-                {t('Label')}
-              </FormLabel>
+              <FormLabel htmlFor="embed-height">{t('Label')}</FormLabel>
             </small>
             <FormControl
               type="text"
@@ -117,9 +115,7 @@ export default function SaveQuery({
         <Row>
           <Col md={12}>
             <small>
-              <FormLabel className="control-label" htmlFor="embed-height">
-                {t('Description')}
-              </FormLabel>
+              <FormLabel htmlFor="embed-height">{t('Description')}</FormLabel>
             </small>
             <FormControl
               componentClass="textarea"

From 9f542425e47014c7f5d995848f97f3f8e54dd793 Mon Sep 17 00:00:00 2001
From: riahk <moar.riah@gmail.com>
Date: Fri, 2 Oct 2020 15:13:22 -0700
Subject: [PATCH 5/6] fix description overwriting title

---
 superset-frontend/src/SqlLab/components/SaveQuery.tsx | 2 +-
 superset-frontend/src/SqlLab/components/SqlEditor.jsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/SaveQuery.tsx b/superset-frontend/src/SqlLab/components/SaveQuery.tsx
index 305d7367e7bc1..1dcf8e4a106c0 100644
--- a/superset-frontend/src/SqlLab/components/SaveQuery.tsx
+++ b/superset-frontend/src/SqlLab/components/SaveQuery.tsx
@@ -56,7 +56,7 @@ export default function SaveQuery({
   onUpdate,
   saveQueryWarning = null,
 }: SaveQueryProps) {
-  const [description, setDescription] = useState<string>('');
+  const [description, setDescription] = useState<string>(query.description || '');
   const [label, setLabel] = useState<string>(defaultLabel);
   const [showSave, setShowSave] = useState<boolean>(false);
   const isSaved = !!query.remoteId;
diff --git a/superset-frontend/src/SqlLab/components/SqlEditor.jsx b/superset-frontend/src/SqlLab/components/SqlEditor.jsx
index aeaa9d0bd26dd..1f4d66aa9487c 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor.jsx
@@ -530,7 +530,7 @@ class SqlEditor extends React.PureComponent {
               <SaveQuery
                 query={qe}
                 defaultLabel={
-                  qe.description == null ? qe.title : qe.description
+                  qe.title || qe.description
                 }
                 onSave={this.props.actions.saveQuery}
                 onUpdate={this.props.actions.updateSavedQuery}

From 620a8c825d8c2925225a62a1347d83e3208acc12 Mon Sep 17 00:00:00 2001
From: riahk <moar.riah@gmail.com>
Date: Mon, 5 Oct 2020 11:48:03 -0700
Subject: [PATCH 6/6] fix lint and tests

---
 .../javascripts/sqllab/SaveQuery_spec.jsx     | 12 ++++--
 .../src/SqlLab/components/SaveQuery.tsx       | 42 +++++++++++++++----
 .../src/SqlLab/components/SqlEditor.jsx       |  4 +-
 3 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/superset-frontend/spec/javascripts/sqllab/SaveQuery_spec.jsx b/superset-frontend/spec/javascripts/sqllab/SaveQuery_spec.jsx
index 140a995e0fd7d..6baa96e25ed47 100644
--- a/superset-frontend/spec/javascripts/sqllab/SaveQuery_spec.jsx
+++ b/superset-frontend/spec/javascripts/sqllab/SaveQuery_spec.jsx
@@ -46,18 +46,21 @@ describe('SavedQuery', () => {
   });
   it('has a cancel button', () => {
     const wrapper = shallow(<SaveQuery {...mockedProps} />);
-    const modal = shallow(wrapper.instance().renderModalBody());
+    const modal = wrapper.find(Modal);
+
     expect(modal.find('.cancelQuery')).toHaveLength(1);
   });
   it('has 2 FormControls', () => {
     const wrapper = shallow(<SaveQuery {...mockedProps} />);
-    const modal = shallow(wrapper.instance().renderModalBody());
+    const modal = wrapper.find(Modal);
+
     expect(modal.find(FormControl)).toHaveLength(2);
   });
   it('has a save button if this is a new query', () => {
     const saveSpy = sinon.spy();
     const wrapper = shallow(<SaveQuery {...mockedProps} onSave={saveSpy} />);
-    const modal = shallow(wrapper.instance().renderModalBody());
+    const modal = wrapper.find(Modal);
+
     expect(modal.find(Button)).toHaveLength(2);
     modal.find(Button).at(0).simulate('click');
     expect(saveSpy.calledOnce).toBe(true);
@@ -72,7 +75,8 @@ describe('SavedQuery', () => {
       },
     };
     const wrapper = shallow(<SaveQuery {...props} onUpdate={updateSpy} />);
-    const modal = shallow(wrapper.instance().renderModalBody());
+    const modal = wrapper.find(Modal);
+
     expect(modal.find(Button)).toHaveLength(3);
     modal.find(Button).at(0).simulate('click');
     expect(updateSpy.calledOnce).toBe(true);
diff --git a/superset-frontend/src/SqlLab/components/SaveQuery.tsx b/superset-frontend/src/SqlLab/components/SaveQuery.tsx
index 1dcf8e4a106c0..26acbf059cd14 100644
--- a/superset-frontend/src/SqlLab/components/SaveQuery.tsx
+++ b/superset-frontend/src/SqlLab/components/SaveQuery.tsx
@@ -27,11 +27,37 @@ import Modal from 'src/common/components/Modal';
 interface SaveQueryProps {
   query: any;
   defaultLabel: string;
-  onSave: () => void;
-  onUpdate: () => void;
+  onSave: (arg0: QueryPayload) => void;
+  onUpdate: (arg0: QueryPayload) => void;
   saveQueryWarning: string | null;
 }
 
+type QueryPayload = {
+  autorun: boolean;
+  dbId: number;
+  description?: string;
+  id?: string;
+  latestQueryId: string;
+  queryLimit: number;
+  remoteId: number;
+  schema: string;
+  schemaOptions: Array<{
+    label: string;
+    title: string;
+    value: string;
+  }>;
+  selectedText: string | null;
+  sql: string;
+  tableOptions: Array<{
+    label: string;
+    schema: string;
+    title: string;
+    type: string;
+    value: string;
+  }>;
+  title: string;
+};
+
 const StyledRow = styled(Row)`
   div {
     display: flex;
@@ -56,7 +82,9 @@ export default function SaveQuery({
   onUpdate,
   saveQueryWarning = null,
 }: SaveQueryProps) {
-  const [description, setDescription] = useState<string>(query.description || '');
+  const [description, setDescription] = useState<string>(
+    query.description || '',
+  );
   const [label, setLabel] = useState<string>(defaultLabel);
   const [showSave, setShowSave] = useState<boolean>(false);
   const isSaved = !!query.remoteId;
@@ -83,12 +111,12 @@ export default function SaveQuery({
     close();
   };
 
-  const onLabelChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setLabel(e.target.value);
+  const onLabelChange = (e: React.FormEvent<FormControl>) => {
+    setLabel((e.target as HTMLInputElement).value);
   };
 
-  const onDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setDescription(e.target.value);
+  const onDescriptionChange = (e: React.FormEvent<FormControl>) => {
+    setDescription((e.target as HTMLInputElement).value);
   };
 
   const toggleSave = () => {
diff --git a/superset-frontend/src/SqlLab/components/SqlEditor.jsx b/superset-frontend/src/SqlLab/components/SqlEditor.jsx
index 1f4d66aa9487c..f51def0c78da1 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor.jsx
@@ -529,9 +529,7 @@ class SqlEditor extends React.PureComponent {
             <span>
               <SaveQuery
                 query={qe}
-                defaultLabel={
-                  qe.title || qe.description
-                }
+                defaultLabel={qe.title || qe.description}
                 onSave={this.props.actions.saveQuery}
                 onUpdate={this.props.actions.updateSavedQuery}
                 saveQueryWarning={this.props.saveQueryWarning}