From 3dea6e0da538ed1c0a7761ccbf97bd8f12ac7f2f Mon Sep 17 00:00:00 2001
From: Maxime Beauchemin <maximebeauchemin@gmail.com>
Date: Fri, 21 Oct 2016 12:51:50 -0700
Subject: [PATCH] [sqllab] adding more descriptive labels to left panel (#1407)

---
 .../javascripts/SqlLab/components/DatabaseSelect.jsx   |  2 ++
 .../javascripts/SqlLab/components/SqlEditorLeftBar.jsx | 10 ++++++++++
 2 files changed, 12 insertions(+)

diff --git a/caravel/assets/javascripts/SqlLab/components/DatabaseSelect.jsx b/caravel/assets/javascripts/SqlLab/components/DatabaseSelect.jsx
index d692925cc2..55c1166e03 100644
--- a/caravel/assets/javascripts/SqlLab/components/DatabaseSelect.jsx
+++ b/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 = {
diff --git a/caravel/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx b/caravel/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx
index 4b9322d003..1b5ff686ea 100644
--- a/caravel/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx
+++ b/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)}