diff --git a/caravel/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx b/caravel/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx index 4f458d8d4d5c1..ae2e5af9b726d 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,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 (