add new slice form improvements (#2928)

* dont set first datasource as default

* not used

* add a disabled class if datasource is not selected

* sort datasources alphabettically

* make btn disabled is no datasource is selected

* fix linting

superset/assets/javascripts/addSlice/AddSliceContainer.jsx

@@ -17,9 +17,6 @@ export default class AddSliceContainer extends React.PureComponent {
     const visTypeKeys = Object.keys(visTypes);
     this.vizTypeOptions = visTypeKeys.map(vt => ({ label: visTypes[vt].label, value: vt }));
     this.state = {
-      datasourceValue: this.props.datasources[0].value,
-      datasourceId: this.props.datasources[0].value.split('__')[0],
-      datasourceType: this.props.datasources[0].value.split('__')[1],
       visType: 'table',
     };
   }
@@ -42,14 +39,14 @@ export default class AddSliceContainer extends React.PureComponent {
     });
   }
 
-  changeSliceName(e) {
-    this.setState({ sliceName: e.target.value });
-  }
-
   changeVisType(e) {
     this.setState({ visType: e.value });
   }
 
+  isBtnDisabled() {
+    return !(this.state.datasourceId && this.state.visType);
+  }
+
   render() {
     return (
       <div className="container">
@@ -81,7 +78,11 @@ export default class AddSliceContainer extends React.PureComponent {
                   />
                 </div>
                 <br />
-                <Button bsStyle="primary" onClick={this.gotoSlice.bind(this)}>
+                <Button
+                  bsStyle="primary"
+                  disabled={this.isBtnDisabled()}
+                  onClick={this.gotoSlice.bind(this)}
+                >
                   Create new slice
                 </Button>
                 <br /><br />

superset/assets/spec/javascripts/addSlice/AddSliceContainer_spec.jsx

@@ -32,7 +32,27 @@ describe('AddSliceContainer', () => {
     expect(wrapper.find(Button)).to.have.lengthOf(1);
   });
 
+  it('renders a disabled button if no datasource is selected', () => {
+    expect(wrapper.find(Button).dive().find('.btn[disabled=true]')).to.have.length(1);
+  });
+
+  it('renders an enabled button if datasource is selected', () => {
+    const datasourceValue = defaultProps.datasources[0].value;
+    wrapper.setState({
+      datasourceValue,
+      datasourceId: datasourceValue.split('__')[0],
+      datasourceType: datasourceValue.split('__')[1],
+    });
+    expect(wrapper.find(Button).dive().find('.btn[disabled=false]')).to.have.length(1);
+  });
+
   it('formats explore url', () => {
+    const datasourceValue = defaultProps.datasources[0].value;
+    wrapper.setState({
+      datasourceValue,
+      datasourceId: datasourceValue.split('__')[0],
+      datasourceType: datasourceValue.split('__')[1],
+    });
     const formattedUrl = '/superset/explore/table/1?form_data=%7B%22viz_type%22%3A%22table%22%7D';
     expect(wrapper.instance().exploreUrl()).to.equal(formattedUrl);
   });

superset/views/core.py

@@ -380,7 +380,7 @@ class SliceModelView(SupersetModelView, DeleteMixin):  # noqa
         return self.render_template(
             "superset/add_slice.html",
             bootstrap_data=json.dumps({
-                'datasources': datasources,
+                'datasources': sorted(datasources),
             }),
         )