[slices] add simple new slice form (#2800)

* initial structure for add new slice page

* simplify add slice form

* add a test

* fix long line

* use underscore for template name

* fix controls path

* fix vis types select

superset/assets/javascripts/addSlice/AddSliceContainer.jsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Panel, Grid, Row, Col } from 'react-bootstrap';
+import Select from 'react-virtualized-select';
+import visTypes from '../explore/stores/visTypes';
+
+const propTypes = {
+  datasources: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+  })).isRequired,
+};
+
+export default class AddSliceContainer extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    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',
+    };
+  }
+
+  exploreUrl() {
+    const baseUrl = `/superset/explore/${this.state.datasourceType}/${this.state.datasourceId}`;
+    const formData = encodeURIComponent(JSON.stringify({ viz_type: this.state.visType }));
+    return `${baseUrl}?form_data=${formData}`;
+  }
+
+  gotoSlice() {
+    window.location.href = this.exploreUrl();
+  }
+
+  changeDatasource(e) {
+    this.setState({
+      datasourceValue: e.value,
+      datasourceId: e.value.split('__')[0],
+      datasourceType: e.value.split('__')[1],
+    });
+  }
+
+  changeSliceName(e) {
+    this.setState({ sliceName: e.target.value });
+  }
+
+  changeVisType(e) {
+    this.setState({ visType: e.value });
+  }
+
+  render() {
+    return (
+      <div className="container">
+        <Panel header={<h3>Create a new slice</h3>}>
+          <Grid>
+            <Row>
+              <Col xs={12} sm={6}>
+                <div>
+                  <p>Choose a datasource</p>
+                  <Select
+                    clearable={false}
+                    name="select-datasource"
+                    onChange={this.changeDatasource.bind(this)}
+                    options={this.props.datasources}
+                    placeholder="Choose a datasource"
+                    value={this.state.datasourceValue}
+                  />
+                </div>
+                <br />
+                <div>
+                  <p>Choose a visualization type</p>
+                  <Select
+                    clearable={false}
+                    name="select-vis-type"
+                    onChange={this.changeVisType.bind(this)}
+                    options={this.vizTypeOptions}
+                    placeholder="Choose a visualization type"
+                    value={this.state.visType}
+                  />
+                </div>
+                <br />
+                <Button bsStyle="primary" onClick={this.gotoSlice.bind(this)}>
+                  Create new slice
+                </Button>
+                <br /><br />
+              </Col>
+            </Row>
+          </Grid>
+        </Panel>
+      </div>
+    );
+  }
+}
+
+AddSliceContainer.propTypes = propTypes;

superset/assets/javascripts/addSlice/index.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { appSetup } from '../common';
+import AddSliceContainer from './AddSliceContainer';
+
+appSetup();
+
+const addSliceContainer = document.getElementById('js-add-slice-container');
+const bootstrapData = JSON.parse(addSliceContainer.getAttribute('data-bootstrap'));
+
+ReactDOM.render(
+  <AddSliceContainer datasources={bootstrapData.datasources} />,
+  addSliceContainer,
+);