Pass values from global store to fields in exploreV2 (apache#1561)

* Link fields to store by firing setFormData action * Moved onChange to ControlPanelsContainer, retrieve defaultFormData from fields in store * Pass data from store to checkbox/select/text Field * Fixed tests * Changed reducer back to old Object.assign() style
soedr · Nov 9, 2016 · ad1cd55 · ad1cd55
1 parent 55668ca
commit ad1cd55
Show file tree

Hide file tree

Showing 12 changed files with 56 additions and 27 deletions.
diff --git a/caravel/assets/javascripts/explorev2/actions/exploreActions.js b/caravel/assets/javascripts/explorev2/actions/exploreActions.js
@@ -9,7 +9,6 @@ export const REMOVE_FILTER = 'REMOVE_FILTER';
 export const CHANGE_FILTER_FIELD = 'CHANGE_FILTER_FIELD';
 export const CHANGE_FILTER_OP = 'CHANGE_FILTER_OP';
 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_FIELD_VALUE = 'SET_FIELD_VALUE';

diff --git a/caravel/assets/javascripts/explorev2/components/CheckboxField.jsx b/caravel/assets/javascripts/explorev2/components/CheckboxField.jsx
@@ -4,12 +4,14 @@ import ControlLabelWithTooltip from './ControlLabelWithTooltip';
 
 const propTypes = {
   name: PropTypes.string.isRequired,
+  value: PropTypes.bool,
   label: PropTypes.string,
   description: PropTypes.string,
   onChange: PropTypes.func,
 };
 
 const defaultProps = {
+  value: false,
   label: null,
   description: null,
   onChange: () => {},
@@ -21,7 +23,11 @@ export default class CheckboxField extends React.Component {
   }
   render() {
     return (
-      <Checkbox onChange={this.onToggle.bind(this)} inline>
+      <Checkbox
+        inline
+        checked={this.props.value}
+        onChange={this.onToggle.bind(this)}
+      >
         <ControlLabelWithTooltip label={this.props.label} description={this.props.description} />
       </Checkbox>
     );

diff --git a/caravel/assets/javascripts/explorev2/components/ControlPanelsContainer.jsx b/caravel/assets/javascripts/explorev2/components/ControlPanelsContainer.jsx
@@ -9,16 +9,13 @@ import ControlPanelSection from './ControlPanelSection';
 import FieldSetRow from './FieldSetRow';
 
 const propTypes = {
-  viz_type: PropTypes.string,
   datasource_id: PropTypes.number.isRequired,
   datasource_type: PropTypes.string.isRequired,
   actions: PropTypes.object.isRequired,
   fields: PropTypes.object.isRequired,
   isDatasourceMetaLoading: PropTypes.bool.isRequired,
-};
-
-const defaultProps = {
-  viz_type: null,
+  form_data: PropTypes.object.isRequired,
+  y_axis_zero: PropTypes.any,
 };
 
 class ControlPanelsContainer extends React.Component {
@@ -34,15 +31,15 @@ class ControlPanelsContainer extends React.Component {
   }
 
   sectionsToRender() {
-    const viz = visTypes[this.props.viz_type];
+    const viz = visTypes[this.props.form_data.viz_type];
     const { datasourceAndVizType, sqlClause } = commonControlPanelSections;
     const sectionsToRender = [datasourceAndVizType].concat(viz.controlPanelSections, sqlClause);
 
     return sectionsToRender;
   }
 
   fieldOverrides() {
-    const viz = visTypes[this.props.viz_type];
+    const viz = visTypes[this.props.form_data.viz_type];
     return viz.fieldOverrides;
   }
 
@@ -65,6 +62,7 @@ class ControlPanelsContainer extends React.Component {
                       fieldOverrides={this.fieldOverrides()}
                       onChange={this.onChange.bind(this)}
                       fields={this.props.fields}
+                      form_data={this.props.form_data}
                     />
                   ))}
                 </ControlPanelSection>
@@ -79,15 +77,14 @@ class ControlPanelsContainer extends React.Component {
 }
 
 ControlPanelsContainer.propTypes = propTypes;
-ControlPanelsContainer.defaultProps = defaultProps;
 
 function mapStateToProps(state) {
   return {
     isDatasourceMetaLoading: state.isDatasourceMetaLoading,
     fields: state.fields,
     datasource_id: state.datasource_id,
     datasource_type: state.datasource_type,
-    viz_type: state.viz.form_data.viz_type,
+    form_data: state.viz.form_data,
   };
 }
 

diff --git a/caravel/assets/javascripts/explorev2/components/FieldSet.jsx b/caravel/assets/javascripts/explorev2/components/FieldSet.jsx
@@ -14,6 +14,7 @@ const propTypes = {
   places: PropTypes.number,
   validators: PropTypes.any,
   onChange: React.PropTypes.func,
+  value: PropTypes.oneOf([PropTypes.string, PropTypes.bool, PropTypes.array]).isRequired,
 };
 
 const defaultProps = {

diff --git a/caravel/assets/javascripts/explorev2/components/FieldSetRow.jsx b/caravel/assets/javascripts/explorev2/components/FieldSetRow.jsx
@@ -8,6 +8,7 @@ const propTypes = {
   fieldSets: PropTypes.array.isRequired,
   fieldOverrides: PropTypes.object,
   onChange: PropTypes.func,
+  form_data: PropTypes.object.isRequired,
 };
 
 const defaultProps = {
@@ -25,17 +26,20 @@ export default class FieldSetRow extends React.Component {
     }
     return fieldData;
   }
-
   render() {
     const colSize = NUM_COLUMNS / this.props.fieldSets.length;
-    const { onChange } = this.props;
     return (
       <div className="row">
         {this.props.fieldSets.map((fs) => {
           const fieldData = this.getFieldData(fs);
           return (
             <div className={`col-lg-${colSize} col-xs-12`} key={fs}>
-              <FieldSet name={fs} onChange={onChange} {...fieldData} />
+              <FieldSet
+                name={fs}
+                onChange={this.props.onChange}
+                value={this.props.form_data[fs]}
+                {...fieldData}
+              />
             </div>
           );
         })}

diff --git a/caravel/assets/javascripts/explorev2/components/SelectField.jsx b/caravel/assets/javascripts/explorev2/components/SelectField.jsx
@@ -6,12 +6,14 @@ import { slugify } from '../../modules/utils';
 const propTypes = {
   name: PropTypes.string.isRequired,
   choices: PropTypes.array,
+  value: PropTypes.string,
   label: PropTypes.string,
   description: PropTypes.string,
   onChange: PropTypes.func,
 };
 
 const defaultProps = {
+  value: '',
   label: null,
   description: null,
   onChange: () => {},
@@ -33,6 +35,7 @@ export default class SelectField extends React.Component {
           componentClass="select"
           placeholder="select"
           onChange={this.onChange.bind(this)}
+          value={this.props.value}
         >
           {this.props.choices.map((c) => <option key={c[0]} value={c[0]}>{c[1]}</option>)}
         </FormControl>

diff --git a/caravel/assets/javascripts/explorev2/components/TextAreaField.jsx b/caravel/assets/javascripts/explorev2/components/TextAreaField.jsx
@@ -7,12 +7,14 @@ const propTypes = {
   label: PropTypes.string,
   description: PropTypes.string,
   onChange: PropTypes.func,
+  value: PropTypes.string,
 };
 
 const defaultProps = {
   label: null,
   description: null,
   onChange: () => {},
+  value: '',
 };
 
 export default class TextAreaField extends React.Component {
@@ -27,6 +29,7 @@ export default class TextAreaField extends React.Component {
           componentClass="textarea"
           placeholder="textarea"
           onChange={this.onChange.bind(this)}
+          value={this.props.value}
         />
       </FormGroup>
     );

diff --git a/caravel/assets/javascripts/explorev2/components/TextField.jsx b/caravel/assets/javascripts/explorev2/components/TextField.jsx
@@ -7,12 +7,14 @@ const propTypes = {
   label: PropTypes.string,
   description: PropTypes.string,
   onChange: PropTypes.func,
+  value: PropTypes.string,
 };
 
 const defaultProps = {
   label: null,
   description: null,
   onChange: () => {},
+  value: '',
 };
 
 export default class TextField extends React.Component {
@@ -26,7 +28,12 @@ export default class TextField extends React.Component {
           label={this.props.label}
           description={this.props.description}
         />
-        <FormControl type="text" placeholder="" onChange={this.onChange.bind(this)} />
+        <FormControl
+          type="text"
+          placeholder=""
+          onChange={this.onChange.bind(this)}
+          value={this.props.value}
+        />
       </FormGroup>
     );
   }

diff --git a/caravel/assets/javascripts/explorev2/reducers/exploreReducer.js b/caravel/assets/javascripts/explorev2/reducers/exploreReducer.js
@@ -59,10 +59,14 @@ export const exploreReducer = function (state, action) {
       return Object.assign({}, state, defaultOpts);
     },
     [actions.SET_FIELD_VALUE]() {
-      const newState = Object.assign({}, state);
-      newState.viz.form_data[action.key] =
-        action.value ? action.value : (!state.viz.form_data[action.key]);
-      return newState;
+      const newFormData = Object.assign({}, state.viz.form_data);
+      newFormData[action.key] = action.value ? action.value : (!state.viz.form_data[action.key]);
+
+      return Object.assign(
+        {},
+        state,
+        { viz: Object.assign({}, state.viz, { form_data: newFormData }) }
+      );
     },
   };
   if (action.type in actionHandlers) {

diff --git a/caravel/assets/javascripts/explorev2/stores/store.js b/caravel/assets/javascripts/explorev2/stores/store.js
@@ -1628,10 +1628,14 @@ export const fields = {
   },
 };
 
-const defaultFormData = {};
-defaultFormData.slice_name = null;
-defaultFormData.slice_id = null;
-Object.keys(fields).forEach((k) => { defaultFormData[k] = fields[k].default; });
+export function defaultFormData() {
+  const data = {
+    slice_name: null,
+    slice_id: null,
+  };
+  Object.keys(fields).forEach((k) => { data[k] = fields[k].default; });
+  return data;
+}
 
 export const defaultViz = {
   cached_key: null,
@@ -1641,7 +1645,7 @@ export const defaultViz = {
   csv_endpoint: null,
   is_cached: false,
   data: [],
-  form_data: defaultFormData,
+  form_data: defaultFormData(),
   json_endpoint: null,
   query: null,
   standalone_endpoint: null,

diff --git a/caravel/assets/spec/javascripts/explorev2/components/ControlPanelsContainer_spec.js b/caravel/assets/spec/javascripts/explorev2/components/ControlPanelsContainer_spec.js
@@ -3,15 +3,16 @@ import { expect } from 'chai';
 import { describe, it, beforeEach } from 'mocha';
 import { shallow } from 'enzyme';
 import { Panel } from 'react-bootstrap';
+import { defaultFormData } from '../../../../javascripts/explorev2/stores/store';
 
 import {
   ControlPanelsContainer,
 } from '../../../../javascripts/explorev2/components/ControlPanelsContainer';
 
 const defaultProps = {
-  viz_type: 'dist_bar',
   datasource_id: 1,
   datasource_type: 'type',
+  form_data: defaultFormData(),
   actions: {
     fetchFieldOptions: () => {
       // noop

diff --git a/caravel/assets/spec/javascripts/explorev2/components/FieldSetRow_spec.js b/caravel/assets/spec/javascripts/explorev2/components/FieldSetRow_spec.js
@@ -2,14 +2,14 @@ import React from 'react';
 import { expect } from 'chai';
 import { describe, it, beforeEach } from 'mocha';
 import { shallow } from 'enzyme';
-import { fields } from '../../../../javascripts/explorev2/stores/store';
-
+import { fields, defaultFormData } from '../../../../javascripts/explorev2/stores/store';
 import FieldSetRow from '../../../../javascripts/explorev2/components/FieldSetRow';
 import FieldSet from '../../../../javascripts/explorev2/components/FieldSet';
 
 const defaultProps = {
   fields,
   fieldSets: ['columns', 'metrics'],
+  form_data: defaultFormData(),
 };
 
 describe('FieldSetRow', () => {