Renaming field to control (#2210)

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

@@ -9,7 +9,7 @@ import FaveStar from '../../components/FaveStar';
 import TooltipWrapper from '../../components/TooltipWrapper';
 import Timer from '../../components/Timer';
 import { getExploreUrl } from '../exploreUtils';
-import { getFormDataFromFields } from '../stores/store';
+import { getFormDataFromControls } from '../stores/store';
 
 const CHART_STATUS_MAP = {
   failed: 'danger',
@@ -285,7 +285,7 @@ class ChartContainer extends React.PureComponent {
 ChartContainer.propTypes = propTypes;
 
 function mapStateToProps(state) {
-  const formData = getFormDataFromFields(state.fields);
+  const formData = getFormDataFromControls(state.controls);
   return {
     alert: state.chartAlert,
     can_download: state.can_download,

superset/assets/javascripts/explorev2/components/Control.jsx

@@ -1,26 +1,27 @@
 import React, { PropTypes } from 'react';
-import CheckboxField from './CheckboxField';
 import ControlHeader from './ControlHeader';
-import FilterField from './FilterField';
-import HiddenField from './HiddenField';
-import SelectField from './SelectField';
-import TextAreaField from './TextAreaField';
-import TextField from './TextField';
 
-const fieldMap = {
-  CheckboxField,
-  FilterField,
-  HiddenField,
-  SelectField,
-  TextAreaField,
-  TextField,
+import CheckboxControl from './controls/CheckboxControl';
+import FilterControl from './controls/FilterControl';
+import HiddenControl from './controls/HiddenControl';
+import SelectControl from './controls/SelectControl';
+import TextAreaControl from './controls/TextAreaControl';
+import TextControl from './controls/TextControl';
+
+const controlMap = {
+  CheckboxControl,
+  FilterControl,
+  HiddenControl,
+  SelectControl,
+  TextAreaControl,
+  TextControl,
 };
-const fieldTypes = Object.keys(fieldMap);
+const controlTypes = Object.keys(controlMap);
 
 const propTypes = {
   actions: PropTypes.object.isRequired,
   name: PropTypes.string.isRequired,
-  type: PropTypes.oneOf(fieldTypes).isRequired,
+  type: PropTypes.oneOf(controlTypes).isRequired,
   label: PropTypes.string.isRequired,
   choices: PropTypes.arrayOf(PropTypes.array),
   description: PropTypes.string,
@@ -42,7 +43,7 @@ const defaultProps = {
   validationErrors: [],
 };
 
-export default class FieldSet extends React.PureComponent {
+export default class Control extends React.PureComponent {
   constructor(props) {
     super(props);
     this.validate = this.validate.bind(this);
@@ -53,7 +54,7 @@ export default class FieldSet extends React.PureComponent {
     if (errors && errors.length > 0) {
       validationErrors = validationErrors.concat(errors);
     }
-    this.props.actions.setFieldValue(this.props.name, value, validationErrors);
+    this.props.actions.setControlValue(this.props.name, value, validationErrors);
   }
   validate(value) {
     const validators = this.props.validators;
@@ -69,7 +70,7 @@ export default class FieldSet extends React.PureComponent {
     return validationErrors;
   }
   render() {
-    const FieldType = fieldMap[this.props.type];
+    const ControlType = controlMap[this.props.type];
     const divStyle = this.props.hidden ? { display: 'none' } : null;
     return (
       <div style={divStyle}>
@@ -80,7 +81,7 @@ export default class FieldSet extends React.PureComponent {
           validationErrors={this.props.validationErrors}
           rightNode={this.props.rightNode}
         />
-        <FieldType
+        <ControlType
           onChange={this.onChange}
           {...this.props}
         />
@@ -89,5 +90,5 @@ export default class FieldSet extends React.PureComponent {
   }
 }
 
-FieldSet.propTypes = propTypes;
-FieldSet.defaultProps = defaultProps;
+Control.propTypes = propTypes;
+Control.defaultProps = defaultProps;

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

@@ -6,33 +6,33 @@ import { connect } from 'react-redux';
 import { Panel, Alert } from 'react-bootstrap';
 import { sectionsToRender } from '../stores/visTypes';
 import ControlPanelSection from './ControlPanelSection';
-import FieldSetRow from './FieldSetRow';
-import FieldSet from './FieldSet';
-import fields from '../stores/fields';
+import ControlRow from './ControlRow';
+import Control from './Control';
+import controls from '../stores/controls';
 
 const propTypes = {
-  datasource_type: PropTypes.string.isRequired,
   actions: PropTypes.object.isRequired,
-  fields: PropTypes.object.isRequired,
-  isDatasourceMetaLoading: PropTypes.bool.isRequired,
-  form_data: PropTypes.object.isRequired,
-  y_axis_zero: PropTypes.any,
   alert: PropTypes.string,
+  datasource_type: PropTypes.string.isRequired,
   exploreState: PropTypes.object.isRequired,
+  controls: PropTypes.object.isRequired,
+  form_data: PropTypes.object.isRequired,
+  isDatasourceMetaLoading: PropTypes.bool.isRequired,
+  y_axis_zero: PropTypes.any,
 };
 
 class ControlPanelsContainer extends React.Component {
   constructor(props) {
     super(props);
     this.removeAlert = this.removeAlert.bind(this);
-    this.getFieldData = this.getFieldData.bind(this);
+    this.getControlData = this.getControlData.bind(this);
   }
-  getFieldData(fieldName) {
-    const mapF = fields[fieldName].mapStateToProps;
+  getControlData(controlName) {
+    const mapF = controls[controlName].mapStateToProps;
     if (mapF) {
-      return Object.assign({}, this.props.fields[fieldName], mapF(this.props.exploreState));
+      return Object.assign({}, this.props.controls[controlName], mapF(this.props.exploreState));
     }
-    return this.props.fields[fieldName];
+    return this.props.controls[controlName];
   }
   sectionsToRender() {
     return sectionsToRender(this.props.form_data.viz_type, this.props.datasource_type);
@@ -60,17 +60,17 @@ class ControlPanelsContainer extends React.Component {
               label={section.label}
               tooltip={section.description}
             >
-              {section.fieldSetRows.map((fieldSets, i) => (
-                <FieldSetRow
-                  key={`fieldsetrow-${i}`}
-                  fields={fieldSets.map(fieldName => (
-                    <FieldSet
-                      name={fieldName}
-                      key={`field-${fieldName}`}
-                      value={this.props.form_data[fieldName]}
-                      validationErrors={this.props.fields[fieldName].validationErrors}
+              {section.controlSetRows.map((controlSets, i) => (
+                <ControlRow
+                  key={`controlsetrow-${i}`}
+                  controls={controlSets.map(controlName => (
+                    <Control
+                      name={controlName}
+                      key={`control-${controlName}`}
+                      value={this.props.form_data[controlName]}
+                      validationErrors={this.props.controls[controlName].validationErrors}
                       actions={this.props.actions}
-                      {...this.getFieldData(fieldName)}
+                      {...this.getControlData(controlName)}
                     />
                   ))}
                 />
@@ -89,7 +89,7 @@ function mapStateToProps(state) {
   return {
     alert: state.controlPanelAlert,
     isDatasourceMetaLoading: state.isDatasourceMetaLoading,
-    fields: state.fields,
+    controls: state.controls,
     exploreState: state,
   };
 }

superset/assets/javascripts/explorev2/components/ControlRow.jsx

@@ -0,0 +1,23 @@
+import React, { PropTypes } from 'react';
+
+const NUM_COLUMNS = 12;
+
+const propTypes = {
+  controls: PropTypes.arrayOf(PropTypes.object).isRequired,
+};
+
+function ControlSetRow(props) {
+  const colSize = NUM_COLUMNS / props.controls.length;
+  return (
+    <div className="row space-1">
+      {props.controls.map((control, i) => (
+        <div className={`col-lg-${colSize} col-xs-12`} key={i} >
+          {control}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+ControlSetRow.propTypes = propTypes;
+export default ControlSetRow;

superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx

@@ -8,13 +8,13 @@ import ControlPanelsContainer from './ControlPanelsContainer';
 import SaveModal from './SaveModal';
 import QueryAndSaveBtns from './QueryAndSaveBtns';
 import { getExploreUrl } from '../exploreUtils';
-import { getFormDataFromFields } from '../stores/store';
+import { getFormDataFromControls } from '../stores/store';
 
 const propTypes = {
   actions: PropTypes.object.isRequired,
   datasource_type: PropTypes.string.isRequired,
   chartStatus: PropTypes.string.isRequired,
-  fields: PropTypes.object.isRequired,
+  controls: PropTypes.object.isRequired,
   forcedHeight: PropTypes.string,
   form_data: PropTypes.object.isRequired,
   standalone: PropTypes.bool.isRequired,
@@ -37,11 +37,11 @@ class ExploreViewContainer extends React.Component {
   }
 
   componentWillReceiveProps(np) {
-    if (np.fields.viz_type.value !== this.props.fields.viz_type.value) {
-      this.props.actions.resetFields();
+    if (np.controls.viz_type.value !== this.props.controls.viz_type.value) {
+      this.props.actions.resetControls();
       this.props.actions.triggerQuery();
     }
-    if (np.fields.datasource.value !== this.props.fields.datasource.value) {
+    if (np.controls.datasource.value !== this.props.controls.datasource.value) {
       this.props.actions.fetchDatasourceMetadata(np.form_data.datasource, true);
     }
   }
@@ -98,13 +98,13 @@ class ExploreViewContainer extends React.Component {
   renderErrorMessage() {
     // Returns an error message as a node if any errors are in the store
     const errors = [];
-    for (const fieldName in this.props.fields) {
-      const field = this.props.fields[fieldName];
-      if (field.validationErrors && field.validationErrors.length > 0) {
+    for (const controlName in this.props.controls) {
+      const control = this.props.controls[controlName];
+      if (control.validationErrors && control.validationErrors.length > 0) {
         errors.push(
-          <div key={fieldName}>
-            <strong>{`[ ${field.label} ] `}</strong>
-            {field.validationErrors.join('. ')}
+          <div key={controlName}>
+            <strong>{`[ ${control.label} ] `}</strong>
+            {control.validationErrors.join('. ')}
           </div>
         );
       }
@@ -174,11 +174,11 @@ class ExploreViewContainer extends React.Component {
 ExploreViewContainer.propTypes = propTypes;
 
 function mapStateToProps(state) {
-  const form_data = getFormDataFromFields(state.fields);
+  const form_data = getFormDataFromControls(state.controls);
   return {
     chartStatus: state.chartStatus,
     datasource_type: state.datasource_type,
-    fields: state.fields,
+    controls: state.controls,
     form_data,
     standalone: state.standalone,
     triggerQuery: state.triggerQuery,

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

@@ -1,23 +0,0 @@
-import React, { PropTypes } from 'react';
-
-const NUM_COLUMNS = 12;
-
-const propTypes = {
-  fields: PropTypes.arrayOf(PropTypes.object).isRequired,
-};
-
-function FieldSetRow(props) {
-  const colSize = NUM_COLUMNS / props.fields.length;
-  return (
-    <div className="row space-1">
-      {props.fields.map((field, i) => (
-        <div className={`col-lg-${colSize} col-xs-12`} key={i} >
-          {field}
-        </div>
-      ))}
-    </div>
-  );
-}
-
-FieldSetRow.propTypes = propTypes;
-export default FieldSetRow;

superset/assets/javascripts/explorev2/components/controls/CheckboxControl.jsx

@@ -14,7 +14,7 @@ const defaultProps = {
   onChange: () => {},
 };
 
-export default class CheckboxField extends React.Component {
+export default class CheckboxControl extends React.Component {
   onToggle() {
     this.props.onChange(!this.props.value);
   }
@@ -28,5 +28,5 @@ export default class CheckboxField extends React.Component {
   }
 }
 
-CheckboxField.propTypes = propTypes;
-CheckboxField.defaultProps = defaultProps;
+CheckboxControl.propTypes = propTypes;
+CheckboxControl.defaultProps = defaultProps;

superset/assets/javascripts/explorev2/components/controls/Filter.jsx

@@ -2,7 +2,7 @@ const $ = window.$ = require('jquery');
 import React, { PropTypes } from 'react';
 import Select from 'react-select';
 import { Button, Row, Col } from 'react-bootstrap';
-import SelectField from './SelectField';
+import SelectControl from './SelectControl';
 
 const propTypes = {
   choices: PropTypes.array,
@@ -45,7 +45,7 @@ export default class Filter extends React.Component {
       });
     }
   }
-  changeFilter(field, event) {
+  changeFilter(control, event) {
     let value = event;
     if (event && event.target) {
       value = event.target.value;
@@ -53,15 +53,15 @@ export default class Filter extends React.Component {
     if (event && event.value) {
       value = event.value;
     }
-    this.props.changeFilter(field, value);
-    if (field === 'col' && value !== null && this.props.datasource.filter_select) {
+    this.props.changeFilter(control, value);
+    if (control === 'col' && value !== null && this.props.datasource.filter_select) {
       this.fetchFilterValues(value);
     }
   }
   removeFilter(filter) {
     this.props.removeFilter(filter);
   }
-  renderFilterFormField(filter) {
+  renderFilterFormControl(filter) {
     const datasource = this.props.datasource;
     if (datasource && datasource.filter_select) {
       if (!filter.choices) {
@@ -81,7 +81,7 @@ export default class Filter extends React.Component {
       );
     }
     return (
-      <SelectField
+      <SelectControl
         multi
         freeForm
         name="filter-value"
@@ -117,7 +117,7 @@ export default class Filter extends React.Component {
             />
           </Col>
           <Col md={7}>
-            {this.renderFilterFormField(filter)}
+            {this.renderFilterFormControl(filter)}
           </Col>
           <Col md={2}>
             <Button

superset/assets/javascripts/explorev2/components/controls/FilterControl.jsx

@@ -16,7 +16,7 @@ const defaultProps = {
   value: [],
 };
 
-export default class FilterField extends React.Component {
+export default class FilterControl extends React.Component {
   addFilter() {
     const newFilters = Object.assign([], this.props.value);
     newFilters.push({
@@ -26,10 +26,10 @@ export default class FilterField extends React.Component {
     });
     this.props.onChange(newFilters);
   }
-  changeFilter(index, field, value) {
+  changeFilter(index, control, value) {
     const newFilters = Object.assign([], this.props.value);
     const modifiedFilter = Object.assign({}, newFilters[index]);
-    modifiedFilter[field] = value;
+    modifiedFilter[control] = value;
     newFilters.splice(index, 1, modifiedFilter);
     this.props.onChange(newFilters);
   }
@@ -72,5 +72,5 @@ export default class FilterField extends React.Component {
   }
 }
 
-FilterField.propTypes = propTypes;
-FilterField.defaultProps = defaultProps;
+FilterControl.propTypes = propTypes;
+FilterControl.defaultProps = defaultProps;

superset/assets/javascripts/explorev2/components/controls/HiddenControl.jsx

@@ -13,12 +13,12 @@ const defaultProps = {
   onChange: () => {},
 };
 
-export default class HiddenField extends React.PureComponent {
+export default class HiddenControl extends React.PureComponent {
   render() {
     // This wouldn't be necessary but might as well
     return <FormControl type="hidden" value={this.props.value} />;
   }
 }
 
-HiddenField.propTypes = propTypes;
-HiddenField.defaultProps = defaultProps;
+HiddenControl.propTypes = propTypes;
+HiddenControl.defaultProps = defaultProps;

superset/assets/javascripts/explorev2/components/controls/SelectControl.jsx

@@ -25,7 +25,7 @@ const defaultProps = {
   onChange: () => {},
 };
 
-export default class SelectField extends React.PureComponent {
+export default class SelectControl extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = { options: this.getOptions(props) };
@@ -111,5 +111,5 @@ export default class SelectField extends React.PureComponent {
   }
 }
 
-SelectField.propTypes = propTypes;
-SelectField.defaultProps = defaultProps;
+SelectControl.propTypes = propTypes;
+SelectControl.defaultProps = defaultProps;

superset/assets/javascripts/explorev2/components/controls/TextAreaControl.jsx

@@ -16,7 +16,7 @@ const defaultProps = {
   value: '',
 };
 
-export default class TextAreaField extends React.Component {
+export default class TextAreaControl extends React.Component {
   onChange(event) {
     this.props.onChange(event.target.value);
   }
@@ -34,5 +34,5 @@ export default class TextAreaField extends React.Component {
   }
 }
 
-TextAreaField.propTypes = propTypes;
-TextAreaField.defaultProps = defaultProps;
+TextAreaControl.propTypes = propTypes;
+TextAreaControl.defaultProps = defaultProps;

superset/assets/javascripts/explorev2/components/controls/TextControl.jsx

@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react';
 import { FormGroup, FormControl } from 'react-bootstrap';
-import * as v from '../validators';
+import * as v from '../../validators';
 
 const propTypes = {
   name: PropTypes.string.isRequired,
@@ -24,7 +24,7 @@ const defaultProps = {
   isFloat: false,
 };
 
-export default class TextField extends React.Component {
+export default class TextControl extends React.Component {
   constructor(props) {
     super(props);
     const value = props.value ? props.value.toString() : '';
@@ -69,5 +69,5 @@ export default class TextField extends React.Component {
   }
 }
 
-TextField.propTypes = propTypes;
-TextField.defaultProps = defaultProps;
+TextControl.propTypes = propTypes;
+TextControl.defaultProps = defaultProps;