[sqllab] adding more descriptive labels to left panel (#1407)

caravel/assets/javascripts/SqlLab/components/DatabaseSelect.jsx

@@ -39,6 +39,7 @@ class DatabaseSelect extends React.Component {
           isLoading={this.state.databaseLoading}
           autosize={false}
           onChange={this.changeDb.bind(this)}
+          valueRenderer={this.props.valueRenderer}
         />
       </div>
     );
@@ -49,6 +50,7 @@ DatabaseSelect.propTypes = {
   onChange: React.PropTypes.func,
   actions: React.PropTypes.object,
   databaseId: React.PropTypes.number,
+  valueRenderer: React.PropTypes.func,
 };
 
 DatabaseSelect.defaultProps = {

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

@@ -127,6 +127,11 @@ class SqlEditorLeftBar extends React.Component {
           <DatabaseSelect
             onChange={this.onChange.bind(this)}
             databaseId={this.props.queryEditor.dbId}
+            valueRenderer={(o) => (
+              <div>
+                <span className="text-muted">Database:</span> {o.label}
+              </div>
+            )}
           />
         </div>
         <div className="m-t-5">
@@ -135,6 +140,11 @@ class SqlEditorLeftBar extends React.Component {
             placeholder={`Select a schema (${this.state.schemaOptions.length})`}
             options={this.state.schemaOptions}
             value={this.props.queryEditor.schema}
+            valueRenderer={(o) => (
+              <div>
+                <span className="text-muted">Schema:</span> {o.label}
+              </div>
+            )}
             isLoading={this.state.schemaLoading}
             autosize={false}
             onChange={this.changeSchema.bind(this)}