[sqllab] add autocomplete to AceEditor for table and column names (#1475)

* [sqllab] add autocomplete to AceEditor for table and column names

* addressing comment about getCompletions as a component method

Author: mistercrunch

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

@@ -3,14 +3,19 @@ import AceEditor from 'react-ace';
 import 'brace/mode/sql';
 import 'brace/theme/github';
 import 'brace/ext/language_tools';
+import ace from 'brace';
+
+const langTools = ace.acequire('ace/ext/language_tools');
 
 const propTypes = {
-  sql: React.PropTypes.string.isRequired,
   onBlur: React.PropTypes.func,
+  sql: React.PropTypes.string.isRequired,
+  tables: React.PropTypes.array,
 };
 
 const defaultProps = {
   onBlur: () => {},
+  tables: [],
 };
 
 class AceEditorWrapper extends React.PureComponent {
@@ -26,8 +31,32 @@ class AceEditorWrapper extends React.PureComponent {
   onBlur() {
     this.props.onBlur(this.state.sql);
   }
-
+  getCompletions(aceEditor, session, pos, prefix, callback) {
+    let words = [];
+    const columns = {};
+    const tables = this.props.tables || [];
+    tables.forEach(t => {
+      words.push({ name: t.name, value: t.name, score: 55, meta: 'table' });
+      t.columns.forEach(col => {
+        columns[col.name] = null;  // using an object as a unique set
+      });
+    });
+    words = words.concat(Object.keys(columns).map(col => (
+      { name: col, value: col, score: 50, meta: 'column' }
+    )));
+    callback(null, words);
+  }
+  setAutoCompleter() {
+    // Loading table and column names as auto-completable words
+    const completer = {
+      getCompletions: this.getCompletions.bind(this),
+    };
+    if (langTools) {
+      langTools.setCompleters([completer, langTools.keyWordCompleter]);
+    }
+  }
   render() {
+    this.setAutoCompleter();
     return (
       <AceEditor
         mode="sql"

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

@@ -208,6 +208,7 @@ class SqlEditor extends React.PureComponent {
           </Col>
           <Col md={9}>
             <AceEditorWrapper
+              tables={this.props.tables}
               sql={this.props.queryEditor.sql}
               onBlur={this.setQueryEditorSql.bind(this)}
             />