[explore V2] render all control panels and fields dynamically for each vis type (#1493)

* export functions directly rather than object at the bottom

* move viztypes to controlPanelMappings, add fieldset rows and section data

* for each viz type, render a controlPanelsContainer, controlPanelSections, FieldSetRows, and FieldsSets

* add comments, move mappings to store

* organize store and add default sections

* render all the needed sections

* add tooltip to sections

* remove console log

* use only panel panel-default, not panel-body, no need the padding

* render fields for all fields in field set

* add the rest of the control panel sections and field overrides

* fix naming

* add fieldTypes array

* don't use default section

* pass only needed state via mapStateToProps

* fix code climate errors

* linting

* move field components to their own files

* render field sets as lists

* fix field components

* use SFC

* update modal trigger test to be more accurate

* add FieldSetRow test

* add test for controlpanelsContainer

* fix test

* make code climate happy

* add freeform select field

caravel/assets/javascripts/explorev2/components/CheckboxField.jsx

@@ -0,0 +1,24 @@
+import React, { PropTypes } from 'react';
+import { Checkbox } from 'react-bootstrap';
+import ControlLabelWithTooltip from './ControlLabelWithTooltip';
+
+const propTypes = {
+  label: PropTypes.string,
+  description: PropTypes.string,
+};
+
+const defaultProps = {
+  label: null,
+  description: null,
+};
+
+export default function CheckboxField({ label, description }) {
+  return (
+    <Checkbox>
+      <ControlLabelWithTooltip label={label} description={description} />
+    </Checkbox>
+  );
+}
+
+CheckboxField.propTypes = propTypes;
+CheckboxField.defaultProps = defaultProps;

caravel/assets/javascripts/explorev2/components/ControlLabelWithTooltip.jsx

@@ -0,0 +1,27 @@
+import React, { PropTypes } from 'react';
+import { ControlLabel } from 'react-bootstrap';
+import InfoTooltipWithTrigger from '../../components/InfoTooltipWithTrigger';
+
+const propTypes = {
+  label: PropTypes.string,
+  description: PropTypes.string,
+};
+
+const defaultProps = {
+  label: null,
+  description: null,
+};
+
+export default function ControlLabelWithTooltip({ label, description }) {
+  return (
+    <ControlLabel>
+      {label} &nbsp;
+      {description &&
+        <InfoTooltipWithTrigger label={label} tooltip={description} />
+      }
+    </ControlLabel>
+  );
+}
+
+ControlLabelWithTooltip.propTypes = propTypes;
+ControlLabelWithTooltip.defaultProps = defaultProps;

caravel/assets/javascripts/explorev2/components/ControlPanelSection.jsx

@@ -0,0 +1,43 @@
+import React, { PropTypes } from 'react';
+import { Panel } from 'react-bootstrap';
+import InfoTooltipWithTrigger from '../../components/InfoTooltipWithTrigger';
+
+const propTypes = {
+  label: PropTypes.string,
+  description: PropTypes.string,
+  tooltip: PropTypes.string,
+  children: PropTypes.node.isRequired,
+};
+
+const defaultProps = {
+  label: null,
+  description: null,
+  tooltip: null,
+};
+
+export default class ControlPanelSection extends React.Component {
+  header() {
+    const { label, tooltip } = this.props;
+    let header;
+    if (label) {
+      header = (
+        <div className="panel-title">
+          {label} &nbsp;
+          {tooltip && <InfoTooltipWithTrigger label={label} tooltip={tooltip} />}
+        </div>
+      );
+    }
+    return header;
+  }
+
+  render() {
+    return (
+      <Panel header={this.header()}>
+        {this.props.children}
+      </Panel>
+    );
+  }
+}
+
+ControlPanelSection.propTypes = propTypes;
+ControlPanelSection.defaultProps = defaultProps;

caravel/assets/javascripts/explorev2/components/ControlPanelsContainer.jsx

@@ -1,27 +1,62 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
+import { bindActionCreators } from 'redux';
+import * as actions from '../actions/exploreActions';
 import { connect } from 'react-redux';
 import { Panel } from 'react-bootstrap';
-import { DefaultControls, VIZ_CONTROL_MAPPING } from '../constants';
+import { visTypes, commonControlPanelSections } from '../stores/store';
+import ControlPanelSection from './ControlPanelSection';
+import FieldSetRow from './FieldSetRow';
 
 const propTypes = {
-  vizType: React.PropTypes.string,
+  vizType: PropTypes.string,
+  datasourceId: PropTypes.number.isRequired,
+  datasourceType: PropTypes.string.isRequired,
+  actions: PropTypes.object.isRequired,
 };
 
 const defaultProps = {
   vizType: null,
 };
 
-function ControlPanelsContainer(props) {
-  return (
-    <Panel>
-      <div className="scrollbar-container">
-        <div className="scrollbar-content">
-          {DefaultControls}
-          {VIZ_CONTROL_MAPPING[props.vizType]}
+function getSectionsToRender(vizSections) {
+  const { datasourceAndVizType, sqlClause } = commonControlPanelSections;
+  const sectionsToRender = [datasourceAndVizType].concat(vizSections, sqlClause);
+  return sectionsToRender;
+}
+
+class ControlPanelsContainer extends React.Component {
+  componentWillMount() {
+    const { datasourceId, datasourceType } = this.props;
+    if (datasourceId) {
+      this.props.actions.setFormOpts(datasourceId, datasourceType);
+    }
+  }
+
+  render() {
+    const viz = visTypes[this.props.vizType];
+    const sectionsToRender = getSectionsToRender(viz.controlPanelSections);
+
+    return (
+      <Panel>
+        <div className="scrollbar-container">
+          <div className="scrollbar-content">
+            {sectionsToRender.map((section) => (
+              <ControlPanelSection
+                key={section.label}
+                label={section.label}
+                tooltip={section.description}
+              >
+                {section.fieldSetRows.map((fieldSets, i) => (
+                  <FieldSetRow key={`${section.label}-fieldSetRow-${i}`} fieldSets={fieldSets} />
+                ))}
+              </ControlPanelSection>
+            ))}
+           {/* TODO: add filters section */}
+          </div>
         </div>
-      </div>
-    </Panel>
-  );
+      </Panel>
+    );
+  }
 }
 
 ControlPanelsContainer.propTypes = propTypes;
@@ -29,12 +64,18 @@ ControlPanelsContainer.defaultProps = defaultProps;
 
 function mapStateToProps(state) {
   return {
+    datasourceId: state.datasourceId,
+    datasourceType: state.datasourceType,
     vizType: state.viz.formData.vizType,
   };
 }
 
-function mapDispatchToProps() {
-  return {};
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+  };
 }
 
+export { ControlPanelsContainer };
+
 export default connect(mapStateToProps, mapDispatchToProps)(ControlPanelsContainer);

caravel/assets/javascripts/explorev2/components/FieldSet.jsx

@@ -0,0 +1,63 @@
+import React, { PropTypes } from 'react';
+import TextField from './TextField';
+import CheckboxField from './CheckboxField';
+import TextAreaField from './TextAreaField';
+import SelectField from './SelectField';
+import { fieldTypes } from '../stores/store';
+
+const propTypes = {
+  type: PropTypes.oneOf(fieldTypes).isRequired,
+  label: PropTypes.string.isRequired,
+  choices: PropTypes.arrayOf(PropTypes.array),
+  description: PropTypes.string,
+  places: PropTypes.number,
+  validators: PropTypes.any,
+};
+
+const defaultProps = {
+  choices: null,
+  description: null,
+  places: null,
+  validators: null,
+};
+
+export default class FieldSet extends React.Component {
+  renderCheckBoxField() {
+    return <CheckboxField label={this.props.label} description={this.props.description} />;
+  }
+
+  renderTextAreaField() {
+    return <TextAreaField label={this.props.label} description={this.props.description} />;
+  }
+
+  renderSelectField() {
+    return <SelectField label={this.props.label} description={this.props.description} />;
+  }
+
+  renderTextField() {
+    return <TextField label={this.props.label} description={this.props.description} />;
+  }
+
+  render() {
+    const type = this.props.type;
+    let html;
+
+    if (type === 'CheckboxField') {
+      html = this.renderCheckBoxField();
+    } else if (type === 'SelectField' ||
+               type === 'SelectCustomMultiField' ||
+               type === 'SelectMultipleSortableField' ||
+               type === 'FreeFormSelectField') {
+      html = this.renderSelectField();
+    } else if (type === 'TextField' || type === 'IntegerField') {
+      html = this.renderTextField();
+    } else if (type === 'TextAreaField') {
+      this.renderTextAreaField();
+    }
+
+    return html;
+  }
+}
+
+FieldSet.propTypes = propTypes;
+FieldSet.defaultProps = defaultProps;

caravel/assets/javascripts/explorev2/components/FieldSetRow.jsx

@@ -0,0 +1,17 @@
+import React, { PropTypes } from 'react';
+import FieldSet from './FieldSet';
+import { fields } from '../stores/store';
+
+const propTypes = {
+  fieldSets: PropTypes.array.isRequired,
+};
+
+export default function FieldSetRow({ fieldSets }) {
+  return (
+    <ul className="list-unstyled">
+      {fieldSets.map((fs) => <li key={fs}><FieldSet {...fields[fs]} /></li>)}
+    </ul>
+  );
+}
+
+FieldSetRow.propTypes = propTypes;

caravel/assets/javascripts/explorev2/components/SelectField.jsx

@@ -0,0 +1,28 @@
+import React, { PropTypes } from 'react';
+import { FormGroup, FormControl } from 'react-bootstrap';
+import ControlLabelWithTooltip from './ControlLabelWithTooltip';
+
+const propTypes = {
+  label: PropTypes.string,
+  description: PropTypes.string,
+};
+
+const defaultProps = {
+  label: null,
+  description: null,
+};
+
+export default function SelectField({ label, description }) {
+  return (
+    <FormGroup controlId={`formControlsSelect-${label}`}>
+      <ControlLabelWithTooltip label={label} description={description} />
+      <FormControl componentClass="select" placeholder="select">
+        <option value="select">select</option>
+        <option value="other">...</option>
+      </FormControl>
+    </FormGroup>
+  );
+}
+
+SelectField.propTypes = propTypes;
+SelectField.defaultProps = defaultProps;

caravel/assets/javascripts/explorev2/components/TextAreaField.jsx

@@ -0,0 +1,25 @@
+import React, { PropTypes } from 'react';
+import { FormGroup, FormControl } from 'react-bootstrap';
+import ControlLabelWithTooltip from './ControlLabelWithTooltip';
+
+const propTypes = {
+  label: PropTypes.string,
+  description: PropTypes.string,
+};
+
+const defaultProps = {
+  label: null,
+  description: null,
+};
+
+export default function TextAreaField({ label, description }) {
+  return (
+    <FormGroup controlId="formControlsTextarea">
+      <ControlLabelWithTooltip label={label} description={description} />
+      <FormControl componentClass="textarea" placeholder="textarea" />
+    </FormGroup>
+  );
+}
+
+TextAreaField.propTypes = propTypes;
+TextAreaField.defaultProps = defaultProps;

caravel/assets/javascripts/explorev2/components/TextField.jsx

@@ -0,0 +1,25 @@
+import React, { PropTypes } from 'react';
+import { FormGroup, FormControl } from 'react-bootstrap';
+import ControlLabelWithTooltip from './ControlLabelWithTooltip';
+
+const propTypes = {
+  label: PropTypes.string,
+  description: PropTypes.string,
+};
+
+const defaultProps = {
+  label: null,
+  description: null,
+};
+
+export default function TextField({ label, description }) {
+  return (
+    <FormGroup controlId="formInlineName">
+      <ControlLabelWithTooltip label={label} description={description} />
+      <FormControl type="text" placeholder="" />
+    </FormGroup>
+  );
+}
+
+TextField.propTypes = propTypes;
+TextField.defaultProps = defaultProps;