diff --git a/superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx b/superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx index 13f0f865b0b..5a2c2d312ee 100644 --- a/superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx +++ b/superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx @@ -1,9 +1,10 @@ const $ = window.$ = require('jquery'); import React from 'react'; -import Select from 'react-select'; import { Label, Button } from 'react-bootstrap'; import TableElement from './TableElement'; import AsyncSelect from '../../components/AsyncSelect'; +import Select from 'react-virtualized-select'; +import createFilterOptions from 'react-select-fast-filter-options'; const propTypes = { queryEditor: React.PropTypes.object.isRequired, @@ -62,8 +63,8 @@ class SqlEditorLeftBar extends React.PureComponent { if (!this.props.queryEditor.dbId || !input) { return Promise.resolve({ options: [] }); } - const url = `/superset/tables/${this.props.queryEditor.dbId}/\ -${this.props.queryEditor.schema}/${input}`; + const url = `/superset/tables/${this.props.queryEditor.dbId}/` + + `${this.props.queryEditor.schema}/${input}`; return $.get(url).then((data) => ({ options: data.options })); } // TODO: move fetching methods to the actions. @@ -129,6 +130,8 @@ ${this.props.queryEditor.schema}/${input}`; networkAlert =

; } const shouldShowReset = window.location.search === '?reset=1'; + const options = this.state.tableOptions; + const filterOptions = createFilterOptions({ options }); return (
@@ -148,6 +151,8 @@ ${this.props.queryEditor.schema}/${input}`; mutator={this.dbMutator.bind(this)} placeholder="Select a database" /> +
+