Vliu link form data explore v2 (#1540)

* Put default form_data and viz in store

* Link fields to store by firing setFormData action

* Fixed tests for Container and actions

* Moved onChange to ControlPanelsContainer, retrieve defaultFormData from fields in store

* Deleted switch statement in reducer

* Removed resetFormData and refactored setFormData in reducers

* Added text for fields

* Changed test statements

caravel/assets/javascripts/explorev2/actions/exploreActions.js

@@ -17,7 +17,7 @@ export const CHANGE_FILTER_VALUE = 'CHANGE_FILTER_VALUE';
 export const RESET_FORM_DATA = 'RESET_FORM_DATA';
 export const CLEAR_ALL_OPTS = 'CLEAR_ALL_OPTS';
 export const SET_DATASOURCE_TYPE = 'SET_DATASOURCE_TYPE';
-export const SET_FORM_DATA = 'SET_FORM_DATA';
+export const SET_FIELD_VALUE = 'SET_FIELD_VALUE';
 
 export function setTimeColumnOpts(timeColumnOpts) {
   return { type: SET_TIME_COLUMN_OPTS, timeColumnOpts };
@@ -47,19 +47,10 @@ export function setFilterColumnOpts(filterColumnOpts) {
   return { type: SET_FILTER_COLUMN_OPTS, filterColumnOpts };
 }
 
-export function resetFormData() {
-  // Clear all form data when switching datasource
-  return { type: RESET_FORM_DATA };
-}
-
 export function clearAllOpts() {
   return { type: CLEAR_ALL_OPTS };
 }
 
-export function setDatasourceType(datasourceType) {
-  return { type: SET_DATASOURCE_TYPE, datasourceType };
-}
-
 export function setFormOpts(datasourceId, datasourceType) {
   return function (dispatch) {
     const timeColumnOpts = [];
@@ -114,15 +105,6 @@ export function setFormOpts(datasourceId, datasourceType) {
     }
   };
 }
-
-export function setDatasource(datasourceId) {
-  return { type: SET_DATASOURCE, datasourceId };
-}
-
-export function toggleSearchBox(searchBox) {
-  return { type: TOGGLE_SEARCHBOX, searchBox };
-}
-
 export function addFilter(filter) {
   return { type: ADD_FILTER, filter };
 }
@@ -143,6 +125,6 @@ export function changeFilterValue(filter, value) {
   return { type: CHANGE_FILTER_VALUE, filter, value };
 }
 
-export function setFormData(key, value) {
-  return { type: SET_FORM_DATA, key, value };
+export function setFieldValue(key, value) {
+  return { type: SET_FIELD_VALUE, key, value };
 }

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

@@ -6,12 +6,12 @@ import visMap from '../../../visualizations/main';
 import { d3format } from '../../modules/utils';
 
 const propTypes = {
-  sliceName: PropTypes.string.isRequired,
-  vizType: PropTypes.string.isRequired,
+  slice_name: PropTypes.string.isRequired,
+  viz_type: PropTypes.string.isRequired,
   height: PropTypes.string.isRequired,
   containerId: PropTypes.string.isRequired,
-  jsonEndpoint: PropTypes.string.isRequired,
-  columnFormats: PropTypes.object,
+  json_endpoint: PropTypes.string.isRequired,
+  column_formats: PropTypes.object,
 };
 
 class ChartContainer extends React.Component {
@@ -33,8 +33,7 @@ class ChartContainer extends React.Component {
   getMockedSliceObject() {
     return {
       containerId: this.props.containerId,
-
-      jsonEndpoint: () => this.props.jsonEndpoint,
+      jsonEndpoint: () => this.props.json_endpoint,
 
       container: {
         html: (data) => {
@@ -104,15 +103,15 @@ class ChartContainer extends React.Component {
 
       d3format: (col, number) => {
         // mock d3format function in Slice object in caravel.js
-        const format = this.props.columnFormats[col];
+        const format = this.props.column_formats[col];
         return d3format(format, number);
       },
     };
   }
 
   renderVis() {
     const slice = this.getMockedSliceObject();
-    visMap[this.props.vizType](slice).render();
+    visMap[this.props.viz_type](slice).render();
   }
 
   render() {
@@ -125,14 +124,14 @@ class ChartContainer extends React.Component {
               id="slice-header"
               className="panel-title"
             >
-              {this.props.sliceName}
+              {this.props.slice_name}
             </div>
           }
         >
           <div
             id={this.props.containerId}
             ref={(ref) => { this.chartContainerRef = ref; }}
-            className={this.props.vizType}
+            className={this.props.viz_type}
           />
         </Panel>
       </div>
@@ -144,11 +143,11 @@ ChartContainer.propTypes = propTypes;
 
 function mapStateToProps(state) {
   return {
-    sliceName: state.sliceName,
-    vizType: state.viz.formData.vizType,
-    containerId: `slice-container-${state.viz.formData.sliceId}`,
-    jsonEndpoint: state.viz.jsonEndPoint,
-    columnFormats: state.viz.columnFormats,
+    containerId: `slice-container-${state.viz.form_data.slice_id}`,
+    slice_name: state.viz.form_data.slice_name,
+    viz_type: state.viz.form_data.viz_type,
+    json_endpoint: state.viz.json_endpoint,
+    column_formats: state.viz.column_formats,
   };
 }
 

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

@@ -3,21 +3,29 @@ import { Checkbox } from 'react-bootstrap';
 import ControlLabelWithTooltip from './ControlLabelWithTooltip';
 
 const propTypes = {
+  name: PropTypes.string.isRequired,
   label: PropTypes.string,
   description: PropTypes.string,
+  onChange: PropTypes.func,
 };
 
 const defaultProps = {
   label: null,
   description: null,
+  onChange: () => {},
 };
 
-export default function CheckboxField({ label, description }) {
-  return (
-    <Checkbox>
-      <ControlLabelWithTooltip label={label} description={description} />
-    </Checkbox>
-  );
+export default class CheckboxField extends React.Component {
+  onToggle() {
+    this.props.onChange(this.props.name);
+  }
+  render() {
+    return (
+      <Checkbox onChange={this.onToggle.bind(this)}>
+        <ControlLabelWithTooltip label={this.props.label} description={this.props.description} />
+      </Checkbox>
+    );
+  }
 }
 
 CheckboxField.propTypes = propTypes;

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

@@ -1,3 +1,4 @@
+/* eslint camelcase: 0 */
 import React, { PropTypes } from 'react';
 import { bindActionCreators } from 'redux';
 import * as actions from '../actions/exploreActions';
@@ -8,34 +9,38 @@ import ControlPanelSection from './ControlPanelSection';
 import FieldSetRow from './FieldSetRow';
 
 const propTypes = {
-  vizType: PropTypes.string,
-  datasourceId: PropTypes.number.isRequired,
-  datasourceType: PropTypes.string.isRequired,
+  viz_type: PropTypes.string,
+  datasource_id: PropTypes.number.isRequired,
+  datasource_type: PropTypes.string.isRequired,
   actions: PropTypes.object.isRequired,
 };
 
 const defaultProps = {
-  vizType: null,
+  viz_type: null,
 };
 
 class ControlPanelsContainer extends React.Component {
   componentWillMount() {
-    const { datasourceId, datasourceType } = this.props;
-    if (datasourceId) {
-      this.props.actions.setFormOpts(datasourceId, datasourceType);
+    const { datasource_id, datasource_type } = this.props;
+    if (datasource_id) {
+      this.props.actions.setFormOpts(datasource_id, datasource_type);
     }
   }
 
+  onChange(name, value) {
+    this.props.actions.setFieldValue(name, value);
+  }
+
   sectionsToRender() {
-    const viz = visTypes[this.props.vizType];
+    const viz = visTypes[this.props.viz_type];
     const { datasourceAndVizType, sqlClause } = commonControlPanelSections;
     const sectionsToRender = [datasourceAndVizType].concat(viz.controlPanelSections, sqlClause);
 
     return sectionsToRender;
   }
 
   fieldOverrides() {
-    const viz = visTypes[this.props.vizType];
+    const viz = visTypes[this.props.viz_type];
     return viz.fieldOverrides;
   }
 
@@ -55,6 +60,7 @@ class ControlPanelsContainer extends React.Component {
                     key={`${section.label}-fieldSetRow-${i}`}
                     fieldSets={fieldSets}
                     fieldOverrides={this.fieldOverrides()}
+                    onChange={this.onChange.bind(this)}
                   />
                 ))}
               </ControlPanelSection>
@@ -72,9 +78,9 @@ ControlPanelsContainer.defaultProps = defaultProps;
 
 function mapStateToProps(state) {
   return {
-    datasourceId: state.datasourceId,
-    datasourceType: state.datasourceType,
-    vizType: state.viz.formData.vizType,
+    datasource_id: state.datasource_id,
+    datasource_type: state.datasource_type,
+    viz_type: state.viz.form_data.viz_type,
   };
 }
 

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

@@ -6,36 +6,51 @@ import SelectField from './SelectField';
 import { fieldTypes } from '../stores/store';
 
 const propTypes = {
+  name: PropTypes.string.isRequired,
   type: PropTypes.oneOf(fieldTypes).isRequired,
   label: PropTypes.string.isRequired,
   choices: PropTypes.arrayOf(PropTypes.array),
   description: PropTypes.string,
   places: PropTypes.number,
   validators: PropTypes.any,
+  onChange: React.PropTypes.func,
 };
 
 const defaultProps = {
   choices: null,
   description: null,
   places: null,
   validators: null,
+  onChange: () => {},
 };
 
 export default class FieldSet extends React.Component {
   renderCheckBoxField() {
-    return <CheckboxField {...this.props} />;
+    return (
+      <CheckboxField
+        {...this.props}
+      />);
   }
 
   renderTextAreaField() {
-    return <TextAreaField {...this.props} />;
+    return (
+      <TextAreaField
+        {...this.props}
+      />);
   }
 
   renderSelectField() {
-    return <SelectField {...this.props} />;
+    return (
+      <SelectField
+        {...this.props}
+      />);
   }
 
   renderTextField() {
-    return <TextField {...this.props} />;
+    return (
+      <TextField
+        {...this.props}
+      />);
   }
 
   render() {

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

@@ -5,10 +5,12 @@ import { fields } from '../stores/store';
 const propTypes = {
   fieldSets: PropTypes.array.isRequired,
   fieldOverrides: PropTypes.object,
+  onChange: PropTypes.func,
 };
 
 const defaultProps = {
   fieldOverrides: {},
+  onChange: () => {},
 };
 
 function getFieldData(fs, fieldOverrides) {
@@ -20,12 +22,15 @@ function getFieldData(fs, fieldOverrides) {
   return fieldData;
 }
 
-export default function FieldSetRow({ fieldSets, fieldOverrides }) {
+export default function FieldSetRow({ fieldSets, fieldOverrides, onChange }) {
   return (
     <ul className="list-unstyled">
       {fieldSets.map((fs) => {
         const fieldData = getFieldData(fs, fieldOverrides);
-        return <li key={fs}><FieldSet name={fs} {...fieldData} /></li>;
+        return (
+          <li key={fs}>
+            <FieldSet name={fs} onChange={onChange} {...fieldData} />
+          </li>);
       })}
     </ul>
   );

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

@@ -4,25 +4,40 @@ import ControlLabelWithTooltip from './ControlLabelWithTooltip';
 import { slugify } from '../../modules/utils';
 
 const propTypes = {
+  name: PropTypes.string.isRequired,
   label: PropTypes.string,
   description: PropTypes.string,
+  onChange: PropTypes.func,
 };
 
 const defaultProps = {
   label: null,
   description: null,
+  onChange: () => {},
 };
 
-export default function SelectField({ label, description }) {
-  return (
-    <FormGroup controlId={`formControlsSelect-${slugify(label)}`}>
-      <ControlLabelWithTooltip label={label} description={description} />
-      <FormControl componentClass="select" placeholder="select">
-        <option value="select">select</option>
-        <option value="other">...</option>
-      </FormControl>
-    </FormGroup>
-  );
+export default class SelectField extends React.Component {
+  onChange(opt) {
+    this.props.onChange(this.props.name, opt.target.value);
+  }
+  render() {
+    return (
+      <FormGroup controlId={`formControlsSelect-${slugify(this.props.label)}`}>
+        <ControlLabelWithTooltip
+          label={this.props.label}
+          description={this.props.description}
+        />
+        <FormControl
+          componentClass="select"
+          placeholder="select"
+          onChange={this.onChange.bind(this)}
+        >
+          <option value="select">select</option>
+          <option value="other">...</option>
+        </FormControl>
+      </FormGroup>
+    );
+  }
 }
 
 SelectField.propTypes = propTypes;