diff --git a/superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx b/superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx index 0d65c230ddbfe..333d72dc93541 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 { 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, @@ -59,8 +60,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. @@ -124,6 +125,8 @@ ${this.props.queryEditor.schema}/${input}`; } render() { const shouldShowReset = window.location.search === '?reset=1'; + const options = this.state.tableOptions; + const filterOptions = createFilterOptions({ options }); return (
@@ -169,11 +172,13 @@ ${this.props.queryEditor.schema}/${input}`; placeholder={`Add a table (${this.state.tableOptions.length})`} autosize={false} onChange={this.changeTable.bind(this)} + filterOptions={filterOptions} options={this.state.tableOptions} /> } {!this.props.queryEditor.schema && -