From b43aaa1f4a3fe6fed0d527bd903b17ba6244d33f Mon Sep 17 00:00:00 2001
From: Maxime Beauchemin <maximebeauchemin@gmail.com>
Date: Fri, 28 Oct 2016 16:03:36 -0700
Subject: [PATCH 1/2] [sqllab] add autocomplete to AceEditor for table and
 column names

---
 .../SqlLab/components/AceEditorWrapper.jsx    | 32 +++++++++++++++++--
 .../SqlLab/components/SqlEditor.jsx           |  1 +
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/caravel/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx b/caravel/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx
index 4f458d8d4d5c1..b6e51f96173b6 100644
--- a/caravel/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx
+++ b/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,31 @@ class AceEditorWrapper extends React.PureComponent {
   onBlur() {
     this.props.onBlur(this.state.sql);
   }
-
+  setAutoCompleter() {
+    // Loading table and column names as auto-completable words
+    const completer = {
+      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);
+      },
+    };
+    if (langTools) {
+      langTools.setCompleters([completer, langTools.keyWordCompleter]);
+    }
+  }
   render() {
+    this.setAutoCompleter();
     return (
       <AceEditor
         mode="sql"
diff --git a/caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx b/caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx
index 82d69a28d814f..ab91024eb59cf 100644
--- a/caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx
+++ b/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)}
             />

From 1637a66ea92622a4225426d819f2d1d17d397f9f Mon Sep 17 00:00:00 2001
From: Maxime Beauchemin <maximebeauchemin@gmail.com>
Date: Fri, 28 Oct 2016 21:21:13 -0700
Subject: [PATCH 2/2] addressing comment about getCompletions as a component
 method

---
 .../SqlLab/components/AceEditorWrapper.jsx    | 31 ++++++++++---------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/caravel/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx b/caravel/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx
index b6e51f96173b6..ae2e5af9b726d 100644
--- a/caravel/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx
+++ b/caravel/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx
@@ -31,24 +31,25 @@ 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: (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);
-      },
+      getCompletions: this.getCompletions.bind(this),
     };
     if (langTools) {
       langTools.setCompleters([completer, langTools.keyWordCompleter]);