[sql-lab] revert react-virtualized-select

superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx

@@ -1,10 +1,9 @@
 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,
@@ -60,8 +59,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.
@@ -123,8 +122,6 @@ class SqlEditorLeftBar extends React.PureComponent {
   }
   render() {
     const shouldShowReset = window.location.search === '?reset=1';
-    const options = this.state.tableOptions;
-    const filterOptions = createFilterOptions({ options });
     return (
       <div className="scrollbar-container">
         <div className="clearfix sql-toolbar scrollbar-content">
@@ -170,13 +167,11 @@ class SqlEditorLeftBar extends React.PureComponent {
                 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 &&
-              <Select
-                async
+              <Select.Async
                 name="async-select-table"
                 ref="selectTable"
                 value={this.state.tableName}

superset/assets/package.json

@@ -66,7 +66,6 @@
     "nvd3": "1.8.5",
     "react": "^15.3.2",
     "react-ace": "^4.1.5",
-    "react-addons-shallow-compare": "^15.4.2",
     "react-bootstrap": "^0.30.3",
     "react-bootstrap-table": "^2.3.8",
     "react-dom": "^15.3.2",
@@ -77,9 +76,7 @@
     "react-redux": "^5.0.2",
     "react-resizable": "^1.3.3",
     "react-select": "^1.0.0-rc.2",
-    "react-select-fast-filter-options": "^0.2.1",
     "react-syntax-highlighter": "^5.0.0",
-    "react-virtualized-select": "^2.4.0",
     "reactable": "^0.14.0",
     "redux": "^3.5.2",
     "redux-localstorage": "^0.4.1",

superset/assets/stylesheets/react-select/select.less

@@ -91,31 +91,3 @@
 @import "../../node_modules/react-select/less/mixins.less";
 @import "../../node_modules/react-select/less/multi.less";
 @import "../../node_modules/react-select/less/spinner.less";
-@import "../../node_modules/react-virtualized/styles.css";
-
-// importing css from "../../node_modules/react-virtualized-select/styles.css";
-// so the background color of a selected option matches the other selects
-.VirtualSelectGrid {
-  z-index: 1;
-}
-.VirtualizedSelectOption {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  padding: 0 .5rem;
-}
-.VirtualizedSelectFocusedOption {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-.VirtualizedSelectFocusedOption:hover {
-  cursor: pointer;
-}
-.VirtualizedSelectDisabledOption {
-  opacity: 0.5;
-}
-.VirtualizedSelectSelectedOption {
-  font-weight: bold;
-}