[sql lab] fix table dropdown with large schema make UI unresponsive (#…

…2547)

Indexing was done on render, moving to doing it only when the data
changes.

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

@@ -3,12 +3,15 @@ import Button from '../../components/Button';
 
 const propTypes = {
   allowAsync: PropTypes.bool.isRequired,
-  dbId: PropTypes.number.isRequired,
+  dbId: PropTypes.number,
   queryState: PropTypes.string.isRequired,
   runQuery: PropTypes.func.isRequired,
   selectedText: PropTypes.string,
   stopQuery: PropTypes.func.isRequired,
 };
+const defaultProps = {
+  allowAsync: false,
+};
 
 export default function RunQueryActionButton(props) {
   const runBtnText = props.selectedText ? 'Run Selected Query' : 'Run Query';
@@ -69,3 +72,4 @@ export default function RunQueryActionButton(props) {
 }
 
 RunQueryActionButton.propTypes = propTypes;
+RunQueryActionButton.defaultProps = defaultProps;

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

@@ -148,7 +148,7 @@ class SqlEditor extends React.PureComponent {
         <div className="pull-left">
           <Form inline>
             <RunQueryActionButton
-              allowAsync={this.props.database && this.props.database.allow_run_async}
+              allowAsync={this.props.database ? this.props.database.allow_run_async : false}
               dbId={this.props.queryEditor.dbId}
               queryState={this.props.latestQuery && this.props.latestQuery.state}
               runQuery={this.runQuery.bind(this)}

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

@@ -65,20 +65,22 @@ class SqlEditorLeftBar extends React.PureComponent {
                 `${this.props.queryEditor.schema}/${input}`;
     return $.get(url).then((data) => ({ options: data.options }));
   }
-  // TODO: move fetching methods to the actions.
   fetchTables(dbId, schema, substr) {
+    // This can be large so it shouldn't be put in the Redux store
     if (dbId && schema) {
       this.setState({ tableLoading: true, tableOptions: [] });
       const url = `/superset/tables/${dbId}/${schema}/${substr}/`;
       $.get(url, (data) => {
+        const filterOptions = createFilterOptions({ options: data.options });
         this.setState({
+          filterOptions,
           tableLoading: false,
           tableOptions: data.options,
           tableLength: data.tableLength,
         });
       });
     } else {
-      this.setState({ tableLoading: false, tableOptions: [] });
+      this.setState({ tableLoading: false, tableOptions: [], filterOptions: null });
     }
   }
   changeTable(tableOpt) {
@@ -126,8 +128,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">
@@ -173,7 +173,7 @@ class SqlEditorLeftBar extends React.PureComponent {
                 placeholder={`Add a table (${this.state.tableOptions.length})`}
                 autosize={false}
                 onChange={this.changeTable.bind(this)}
-                filterOptions={filterOptions}
+                filterOptions={this.state.filterOptions}
                 options={this.state.tableOptions}
               />
             }