[sql lab] improvements to the left panel (#2709)

* [sql lab] improvements to the left panel

* better error handling with error notifications
* table is added instantly with a loading image

* Fixing tests

* Fixed tests

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

@@ -1,3 +1,4 @@
+/* global notify */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button } from 'react-bootstrap';
@@ -82,6 +83,10 @@ class SqlEditorLeftBar extends React.PureComponent {
           tableOptions: data.options,
           tableLength: data.tableLength,
         });
+      })
+      .fail(() => {
+        this.setState({ tableLoading: false, tableOptions: [], tableLength: 0 });
+        notify.error('Error while fetching table list');
       });
     } else {
       this.setState({ tableLoading: false, tableOptions: [], filterOptions: null });
@@ -104,11 +109,7 @@ class SqlEditorLeftBar extends React.PureComponent {
       this.props.actions.queryEditorSetSchema(this.props.queryEditor, schemaName);
       this.fetchTables(this.props.queryEditor.dbId, schemaName);
     }
-    this.setState({ tableLoading: true });
-    // TODO: handle setting the tableLoading state depending on success or
-    //       failure of the addTable async call in the action.
     this.props.actions.addTable(this.props.queryEditor, tableName, schemaName);
-    this.setState({ tableLoading: false });
   }
   changeSchema(schemaOpt) {
     const schema = (schemaOpt) ? schemaOpt.value : null;
@@ -122,8 +123,11 @@ class SqlEditorLeftBar extends React.PureComponent {
       const url = `/superset/schemas/${actualDbId}/`;
       $.get(url, (data) => {
         const schemaOptions = data.schemas.map(s => ({ value: s, label: s }));
-        this.setState({ schemaOptions });
-        this.setState({ schemaLoading: false });
+        this.setState({ schemaOptions, schemaLoading: false });
+      })
+      .fail(() => {
+        this.setState({ schemaLoading: false, schemaOptions: [] });
+        notify.error('Error while fetching schema list');
       });
     }
   }
@@ -145,6 +149,7 @@ class SqlEditorLeftBar extends React.PureComponent {
               '_od_DatabaseView=asc'
             }
             onChange={this.onDatabaseChange.bind(this)}
+            onAsyncError={() => notify.error('Error while fetching database list')}
             value={this.props.queryEditor.dbId}
             databaseId={this.props.queryEditor.dbId}
             actions={this.props.actions}

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

@@ -8,6 +8,7 @@ import CopyToClipboard from '../../components/CopyToClipboard';
 import Link from './Link';
 import ColumnElement from './ColumnElement';
 import ModalTrigger from '../../components/ModalTrigger';
+import Loading from '../../components/Loading';
 
 const propTypes = {
   table: PropTypes.object,
@@ -62,7 +63,7 @@ class TableElement extends React.PureComponent {
     this.props.actions.removeTable(this.props.table);
   }
 
-  renderHeader() {
+  renderWell() {
     const table = this.props.table;
     let header;
     if (table.partitions) {
@@ -97,37 +98,9 @@ class TableElement extends React.PureComponent {
     }
     return header;
   }
-  renderMetadata() {
-    const table = this.props.table;
-    let cols;
-    if (table.columns) {
-      cols = table.columns.slice();
-      if (this.state.sortColumns) {
-        cols.sort((a, b) => a.name.toUpperCase() > b.name.toUpperCase());
-      }
-    }
-    const metadata = (
-      <Collapse
-        in={table.expanded}
-        timeout={this.props.timeout}
-      >
-        <div>
-          {this.renderHeader()}
-          <div className="table-columns">
-            {cols && cols.map(col => (
-              <ColumnElement column={col} key={col.name} />
-            ))}
-            <hr />
-          </div>
-        </div>
-      </Collapse>
-    );
-    return metadata;
-  }
-
-  render() {
-    const table = this.props.table;
+  renderControls() {
     let keyLink;
+    const table = this.props.table;
     if (table.indexes && table.indexes.length > 0) {
       keyLink = (
         <ModalTrigger
@@ -148,6 +121,94 @@ class TableElement extends React.PureComponent {
         />
       );
     }
+    return (
+      <ButtonGroup className="ws-el-controls pull-right">
+        {keyLink}
+        <Link
+          className={
+            `fa fa-sort-${!this.state.sortColumns ? 'alpha' : 'numeric'}-asc ` +
+            'pull-left sort-cols m-l-2'}
+          onClick={this.toggleSortColumns.bind(this)}
+          tooltip={
+            !this.state.sortColumns ?
+            'Sort columns alphabetically' :
+            'Original table column order'}
+          href="#"
+        />
+        {table.selectStar &&
+          <CopyToClipboard
+            copyNode={
+              <a className="fa fa-clipboard pull-left m-l-2" />
+            }
+            text={table.selectStar}
+            shouldShowText={false}
+            tooltipText="Copy SELECT statement to clipboard"
+          />
+        }
+        <Link
+          className="fa fa-times table-remove pull-left m-l-2"
+          onClick={this.removeTable.bind(this)}
+          tooltip="Remove table preview"
+          href="#"
+        />
+      </ButtonGroup>
+    );
+  }
+  renderHeader() {
+    const table = this.props.table;
+    return (
+      <div className="clearfix">
+        <div className="pull-left">
+          <a
+            href="#"
+            className="table-name"
+            onClick={(e) => { this.toggleTable(e); }}
+          >
+            <strong>{table.name}</strong>
+            <small className="m-l-5">
+              <i className={`fa fa-${table.expanded ? 'minus' : 'plus'}-square-o`} />
+            </small>
+          </a>
+        </div>
+        <div className="pull-right">
+          {table.isMetadataLoading || table.isExtraMetadataLoading ?
+            <Loading size={20} />
+            :
+            this.renderControls()
+          }
+        </div>
+      </div>
+    );
+  }
+  renderBody() {
+    const table = this.props.table;
+    let cols;
+    if (table.columns) {
+      cols = table.columns.slice();
+      if (this.state.sortColumns) {
+        cols.sort((a, b) => a.name.toUpperCase() > b.name.toUpperCase());
+      }
+    }
+    const metadata = (
+      <Collapse
+        in={table.expanded}
+        timeout={this.props.timeout}
+      >
+        <div>
+          {this.renderWell()}
+          <div className="table-columns">
+            {cols && cols.map(col => (
+              <ColumnElement column={col} key={col.name} />
+            ))}
+            <hr />
+          </div>
+        </div>
+      </Collapse>
+    );
+    return metadata;
+  }
+
+  render() {
     return (
       <Collapse
         in={this.state.expanded}
@@ -156,54 +217,9 @@ class TableElement extends React.PureComponent {
         onExited={this.removeFromStore.bind(this)}
       >
         <div className="TableElement">
-          <div className="clearfix">
-            <div className="pull-left">
-              <a
-                href="#"
-                className="table-name"
-                onClick={(e) => { this.toggleTable(e); }}
-              >
-                <strong>{table.name}</strong>
-                <small className="m-l-5">
-                  <i className={`fa fa-${table.expanded ? 'minus' : 'plus'}-square-o`} />
-                </small>
-              </a>
-            </div>
-            <div className="pull-right">
-              <ButtonGroup className="ws-el-controls pull-right">
-                {keyLink}
-                <Link
-                  className={
-                    `fa fa-sort-${!this.state.sortColumns ? 'alpha' : 'numeric'}-asc ` +
-                    'pull-left sort-cols m-l-2'}
-                  onClick={this.toggleSortColumns.bind(this)}
-                  tooltip={
-                    !this.state.sortColumns ?
-                    'Sort columns alphabetically' :
-                    'Original table column order'}
-                  href="#"
-                />
-                {table.selectStar &&
-                  <CopyToClipboard
-                    copyNode={
-                      <a className="fa fa-clipboard pull-left m-l-2" />
-                    }
-                    text={table.selectStar}
-                    shouldShowText={false}
-                    tooltipText="Copy SELECT statement to clipboard"
-                  />
-                }
-                <Link
-                  className="fa fa-trash table-remove pull-left m-l-2"
-                  onClick={this.removeTable.bind(this)}
-                  tooltip="Remove table preview"
-                  href="#"
-                />
-              </ButtonGroup>
-            </div>
-          </div>
+          {this.renderHeader()}
           <div>
-            {this.renderMetadata()}
+            {this.renderBody()}
           </div>
         </div>
       </Collapse>