[sqllab] bind alt+enter shortcut in AceEditor to run a query (#1554)

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

@@ -11,6 +11,7 @@ const langTools = ace.acequire('ace/ext/language_tools');
 const propTypes = {
   actions: React.PropTypes.object.isRequired,
   onBlur: React.PropTypes.func,
+  onAltEnter: React.PropTypes.func,
   sql: React.PropTypes.string.isRequired,
   tables: React.PropTypes.array,
   queryEditor: React.PropTypes.object.isRequired,
@@ -18,6 +19,7 @@ const propTypes = {
 
 const defaultProps = {
   onBlur: () => {},
+  onAltEnter: () => {},
   tables: [],
 };
 
@@ -48,6 +50,13 @@ class AceEditorWrapper extends React.PureComponent {
     callback(null, this.state.words);
   }
   onEditorLoad(editor) {
+    editor.commands.addCommand({
+      name: 'runQuery',
+      bindKey: { win: 'Alt-enter', mac: 'Alt-enter' },
+      exec: () => {
+        this.props.onAltEnter();
+      },
+    });
     editor.$blockScrolling = Infinity; // eslint-disable-line no-param-reassign
     editor.selection.on('changeSelection', () => {
       this.props.actions.queryEditorSetSelectedText(

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

@@ -59,7 +59,11 @@ class SqlEditor extends React.PureComponent {
     }
   }
   runQuery(runAsync = false) {
-    this.startQuery(runAsync);
+    let effectiveRunAsync = runAsync;
+    if (!this.props.database.allow_run_sync) {
+      effectiveRunAsync = true;
+    }
+    this.startQuery(effectiveRunAsync);
   }
   startQuery(runAsync = false, ctas = false) {
     const qe = this.props.queryEditor;
@@ -225,11 +229,12 @@ class SqlEditor extends React.PureComponent {
           <Col md={this.props.hideLeftBar ? 12 : 9}>
             <div className="scrollbar">
               <AceEditorWrapper
-                tables={this.props.tables}
                 actions={this.props.actions}
-                queryEditor={this.props.queryEditor}
-                sql={this.props.queryEditor.sql}
                 onBlur={this.setQueryEditorSql.bind(this)}
+                queryEditor={this.props.queryEditor}
+                onAltEnter={this.runQuery.bind(this)}
+                sql={this.props.queryEditor.sql}
+                tables={this.props.tables}
               />
               {editorBottomBar}
               <br />

docs/sqllab.rst

@@ -21,6 +21,9 @@ Feature Overview
   `Jinja templating language <http://jinja.pocoo.org/docs/dev/>`_
   which allows for using macros in your SQL code
 
+Extra features
+--------------
+- Hit ``alt + enter`` as a keyboard shortcut to run your query
 
 Templating with Jinja
 ---------------------