Renaming field to control (#2210)

apache · Feb 22, 2017 · 1e47d6f · 1e47d6f
1 parent d5ba88b
commit 1e47d6f
Show file tree

Hide file tree

Showing 30 changed files with 415 additions and 411 deletions.
diff --git a/superset/assets/javascripts/explorev2/actions/exploreActions.js b/superset/assets/javascripts/explorev2/actions/exploreActions.js
@@ -49,7 +49,7 @@ export function fetchDatasourcesFailed(error) {
 }
 
 export const RESET_FIELDS = 'RESET_FIELDS';
-export function resetFields() {
+export function resetControls() {
   return { type: RESET_FIELDS };
 }
 
@@ -68,7 +68,7 @@ export function fetchDatasourceMetadata(datasourceKey, alsoTriggerQuery = false)
       success: (data) => {
         dispatch(setDatasource(data));
         dispatch(fetchDatasourceSucceeded());
-        dispatch(resetFields());
+        dispatch(resetControls());
         if (alsoTriggerQuery) {
           dispatch(triggerQuery());
         }
@@ -126,8 +126,8 @@ export function saveFaveStar(sliceId, isStarred) {
 }
 
 export const SET_FIELD_VALUE = 'SET_FIELD_VALUE';
-export function setFieldValue(fieldName, value, validationErrors) {
-  return { type: SET_FIELD_VALUE, fieldName, value, validationErrors };
+export function setControlValue(controlName, value, validationErrors) {
+  return { type: SET_FIELD_VALUE, controlName, value, validationErrors };
 }
 
 export const CHART_UPDATE_STARTED = 'CHART_UPDATE_STARTED';

diff --git a/superset/assets/javascripts/explorev2/components/ChartContainer.jsx b/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,

diff --git a/...scripts/explorev2/components/FieldSet.jsx → ...ascripts/explorev2/components/Control.jsx b/...scripts/explorev2/components/FieldSet.jsx → ...ascripts/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;
diff --git a/superset/assets/javascripts/explorev2/components/ControlPanelsContainer.jsx b/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,
   };
 }

diff --git a/superset/assets/javascripts/explorev2/components/ControlRow.jsx b/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;
diff --git a/superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx b/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,

diff --git a/superset/assets/javascripts/explorev2/components/FieldSetRow.jsx b/superset/assets/javascripts/explorev2/components/FieldSetRow.jsx
diff --git a/...ts/explorev2/components/CheckboxField.jsx → ...2/components/controls/CheckboxControl.jsx b/...ts/explorev2/components/CheckboxField.jsx → ...2/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;