[sql lab] ctrl-r hotkey should run latest SQL (#4719)

Turns out the SQL would only be committed to the redux store `onBlur`
event to avoid the laggy typing. The delay come from the localStorage
binding that add enough millisecs of delay to feel odd while typing.

I now store the most recent SQL in the local and use that instead.

superset/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx

@@ -37,10 +37,12 @@ const propTypes = {
     descr: PropTypes.string.isRequired,
     func: PropTypes.func.isRequired,
   })),
+  onChange: PropTypes.func,
 };
 
 const defaultProps = {
   onBlur: () => {},
+  onChange: () => {},
   tables: [],
 };
 
@@ -51,6 +53,7 @@ class AceEditorWrapper extends React.PureComponent {
       sql: props.sql,
       selectedText: '',
     };
+    this.onChange = this.onChange.bind(this);
   }
   componentDidMount() {
     // Making sure no text is selected from previous mount
@@ -97,6 +100,10 @@ class AceEditorWrapper extends React.PureComponent {
       }
     });
   }
+  onChange(text) {
+    this.setState({ sql: text });
+    this.props.onChange(text);
+  }
   getCompletions(aceEditor, session, pos, prefix, callback) {
     callback(null, this.state.words);
   }
@@ -125,9 +132,6 @@ class AceEditorWrapper extends React.PureComponent {
       }
     });
   }
-  textChange(text) {
-    this.setState({ sql: text });
-  }
   render() {
     return (
       <AceEditor
@@ -136,7 +140,7 @@ class AceEditorWrapper extends React.PureComponent {
         onLoad={this.onEditorLoad.bind(this)}
         onBlur={this.onBlur.bind(this)}
         height={this.props.height}
-        onChange={this.textChange.bind(this)}
+        onChange={this.onChange}
         width="100%"
         editorProps={{ $blockScrolling: true }}
         enableLiveAutocompletion

superset/assets/javascripts/SqlLab/components/SqlEditor.jsx

@@ -53,12 +53,15 @@ class SqlEditor extends React.PureComponent {
     this.state = {
       autorun: props.queryEditor.autorun,
       ctas: '',
+      sql: props.queryEditor.sql,
     };
 
     this.onResize = this.onResize.bind(this);
     this.throttledResize = throttle(this.onResize, 250);
     this.runQuery = this.runQuery.bind(this);
     this.stopQuery = this.stopQuery.bind(this);
+    this.onSqlChanged = this.onSqlChanged.bind(this);
+    this.setQueryEditorSql = this.setQueryEditorSql.bind(this);
   }
   componentWillMount() {
     if (this.state.autorun) {
@@ -88,6 +91,9 @@ class SqlEditor extends React.PureComponent {
       this.props.actions.persistEditorHeight(this.props.queryEditor, this.refs.ace.clientHeight);
     }
   }
+  onSqlChanged(sql) {
+    this.setState({ sql });
+  }
   getHotkeyConfig() {
     return [
       {
@@ -126,7 +132,7 @@ class SqlEditor extends React.PureComponent {
     const qe = this.props.queryEditor;
     const query = {
       dbId: qe.dbId,
-      sql: qe.selectedText ? qe.selectedText : qe.sql,
+      sql: qe.selectedText ? qe.selectedText : this.state.sql,
       sqlEditorId: qe.id,
       tab: qe.title,
       schema: qe.schema,
@@ -301,7 +307,8 @@ class SqlEditor extends React.PureComponent {
                 <div>
                   <AceEditorWrapper
                     actions={this.props.actions}
-                    onBlur={this.setQueryEditorSql.bind(this)}
+                    onBlur={this.setQueryEditorSql}
+                    onChange={this.onSqlChanged}
                     queryEditor={this.props.queryEditor}
                     sql={this.props.queryEditor.sql}
                     tables={this.props.tables}