provide a little bit of handling on case where a db exists but it has no tables.

frontend/src/css/query_builder.css

@@ -711,6 +711,15 @@
     color: white;
 }
 
+.List-item-disabled {
+    color: var(--grey-text-color);
+}
+
+.List-item:hover .List-item-disabled,
+.List-item--selected .List-item-disabled {
+    color: white;
+}
+
 .List-item:hover .Icon,
 .List-item--selected .Icon {
     color: white;

frontend/src/query_builder/AccordianList.jsx

@@ -38,11 +38,16 @@ export default class AccordianList extends Component {
         onChange: PropTypes.func,
         onChangeSection: PropTypes.func,
         itemIsSelected: PropTypes.func,
+        itemIsClickable: PropTypes.func,
         renderItem: PropTypes.func,
         renderSectionIcon: PropTypes.func,
         getItemClasses: PropTypes.func
     };
 
+    static defaultProps = {
+        itemIsClickable: () => true
+    };
+
     toggleSection(sectionIndex) {
         if (this.props.onChangeSection) {
             if (this.props.onChangeSection(sectionIndex) === false) {
@@ -164,7 +169,7 @@ export default class AccordianList extends Component {
                                         <a
                                             className="flex-full flex align-center px1 cursor-pointer"
                                             style={{ paddingTop: "0.25rem", paddingBottom: "0.25rem" }}
-                                            onClick={this.onChange.bind(this, item)}
+                                            onClick={this.props.itemIsClickable(item, itemIndex) ? this.onChange.bind(this, item) : null}
                                         >
                                             { this.renderItemIcon(item, itemIndex) }
                                             <h4 className="List-item-title ml2">{item.name}</h4>

frontend/src/query_builder/DataSelector.jsx

@@ -99,6 +99,13 @@ export default class DataSelector extends Component {
     onChangeDatabase(index) {
         let database = this.state.databases[index];
         let schema = database && (database.schemas.length > 1 ? null : database.schemas[0]);
+        if (database && database.tables.length === 0) {
+            schema = {
+                database: database,
+                name: "",
+                tables: []
+            };
+        }
         this.setState({
             selectedSchema: schema,
             showTablePicker: !!schema
@@ -187,14 +194,18 @@ export default class DataSelector extends Component {
                 database: schema.database
             }))
         }];
+        if (schema.tables.length === 0) {
+            sections[0].items = [{name: "No tables found in this database.", database: null, table: null}];
+        }
         return (
             <AccordianList
                 key="tablePicker"
                 className="text-brand"
                 sections={sections}
                 onChange={this.onChangeTable}
-                itemIsSelected={(item) => item.table.id === this.getTableId()}
-                renderItemIcon={() => <Icon name="table2" width="18" height="18" />}
+                itemIsSelected={(item) => item.table ? item.table.id === this.getTableId() : false}
+                itemIsClickable={(item) => item.table}
+                renderItemIcon={(item) => item.table ? <Icon name="table2" width="18" height="18" /> : null}
             />
         );
     }