[sql lab]Add autoSelect (#2713)

In sql editor database dropdown list, we want to auto-select the first available option.

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

@@ -155,6 +155,7 @@ class SqlEditorLeftBar extends React.PureComponent {
             )}
             mutator={this.dbMutator.bind(this)}
             placeholder="Select a database"
+            autoSelect
           />
         </div>
         <div className="m-t-5">

superset/assets/javascripts/components/AsyncSelect.jsx

@@ -11,6 +11,7 @@ const propTypes = {
   value: PropTypes.number,
   valueRenderer: PropTypes.func,
   placeholder: PropTypes.string,
+  autoSelect: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -37,6 +38,10 @@ class AsyncSelect extends React.PureComponent {
     const mutator = this.props.mutator;
     $.get(this.props.dataEndpoint, (data) => {
       this.setState({ options: mutator ? mutator(data) : data, isLoading: false });
+
+      if (this.props.autoSelect && this.state.options.length) {
+        this.onChange(this.state.options[0]);
+      }
     });
   }
   render() {

superset/assets/spec/javascripts/components/AsyncSelect_spec.jsx

@@ -4,14 +4,18 @@ import { shallow } from 'enzyme';
 import { describe, it } from 'mocha';
 import { expect } from 'chai';
 import sinon from 'sinon';
+import $ from 'jquery';
 
 import AsyncSelect from '../../../javascripts/components/AsyncSelect';
 
 describe('AsyncSelect', () => {
   const mockedProps = {
     dataEndpoint: '/slicemodelview/api/read',
     onChange: sinon.spy(),
-    mutator: () => {},
+    mutator: () => [
+      { value: 1, label: 'main' },
+      { value: 2, label: 'another' },
+    ],
   };
   it('is valid element', () => {
     expect(
@@ -33,4 +37,33 @@ describe('AsyncSelect', () => {
     wrapper.find(Select).simulate('change', { value: 1 });
     expect(mockedProps.onChange).to.have.property('callCount', 1);
   });
+
+  describe('auto select', () => {
+    let stub;
+    beforeEach(() => {
+      stub = sinon.stub($, 'get');
+      stub.yields();
+    });
+    afterEach(() => {
+      stub.restore();
+    });
+    it('should be off by default', () => {
+      const wrapper = shallow(
+        <AsyncSelect {...mockedProps} />,
+      );
+      const spy = sinon.spy(wrapper.instance(), 'onChange');
+
+      wrapper.instance().fetchOptions();
+      expect(spy.callCount).to.equal(0);
+    });
+    it('should auto select first option', () => {
+      const wrapper = shallow(
+        <AsyncSelect {...mockedProps} autoSelect />,
+      );
+      const spy = sinon.spy(wrapper.instance(), 'onChange');
+
+      wrapper.instance().fetchOptions();
+      expect(spy.calledWith(wrapper.instance().state.options[0])).to.equal(true);
+    });
+  });
 });