Convert FieldWidget to ES6, make color configurable and default to text-brand

resources/frontend_client/app/query_builder/AggregationWidget.react.js

@@ -88,6 +88,7 @@ export default class AggregationWidget extends Component {
                 <div className="flex align-center">
                     <span className="text-bold">of</span>
                     <FieldWidget
+                        color="green"
                         className="View-section-aggregation-target SelectionModule p1"
                         tableName={this.props.tableMetadata.display_name}
                         field={this.props.aggregation[1]}

resources/frontend_client/app/query_builder/DataSelector.react.js

@@ -114,6 +114,7 @@ export default class DataSelector extends Component {
                     }}
                 >
                     <AccordianList
+                        className="text-brand"
                         sections={sections}
                         onChange={this.onChange}
                         sectionIsSelected={this.sectionIsSelected}

resources/frontend_client/app/query_builder/FieldWidget.react.js

 "use strict";
 
+import React, { Component, PropTypes } from "react";
+
 import FieldList from "./FieldList.react";
 import FieldName from "./FieldName.react";
 import Popover from "metabase/components/Popover.react";
 
 import Query from "metabase/lib/query";
 
-export default React.createClass({
-    displayName: "FieldWidget",
-    propTypes: {
-        field: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.array]),
-        fieldOptions: React.PropTypes.object.isRequired,
-        setField: React.PropTypes.func.isRequired,
-        removeField: React.PropTypes.func,
-        isInitiallyOpen: React.PropTypes.bool
-    },
+import _ from "underscore";
+
+export default class FieldWidget extends Component {
+    constructor(props) {
+        super(props);
 
-    getInitialState: function() {
-        return {
-            isOpen: this.props.isInitiallyOpen || false
+        this.state = {
+            isOpen: props.isInitiallyOpen || false
         };
-    },
 
-    setField:function(value) {
+        _.bindAll(this, "toggle", "setField");
+    }
+
+    setField(value) {
         this.props.setField(value);
         if (Query.isValidField(value)) {
             this.toggle();
         }
-    },
+    }
 
-    toggle: function() {
+    toggle() {
         this.setState({ isOpen: !this.state.isOpen });
-    },
+    }
 
-    renderPopover: function() {
+    renderPopover() {
         if (this.state.isOpen) {
             var tetherOptions = {
                 attachment: 'top center',
@@ -48,7 +47,7 @@ export default React.createClass({
                     onClose={this.toggle}
                 >
                     <FieldList
-                        className="text-green"
+                        className={"text-" + this.props.color}
                         tableName={this.props.tableName}
                         field={this.props.field}
                         fieldOptions={this.props.fieldOptions}
@@ -58,9 +57,9 @@ export default React.createClass({
                 </Popover>
             );
         }
-    },
+    }
 
-    render: function() {
+    render() {
         return (
             <div className="flex align-center">
                 <FieldName
@@ -74,4 +73,16 @@ export default React.createClass({
             </div>
         );
     }
-});
+}
+
+FieldWidget.propTypes = {
+    field: PropTypes.oneOfType([PropTypes.number, PropTypes.array]),
+    fieldOptions: PropTypes.object.isRequired,
+    setField: PropTypes.func.isRequired,
+    removeField: PropTypes.func,
+    isInitiallyOpen: PropTypes.bool
+};
+
+FieldWidget.defaultProps = {
+    color: "brand"
+};

resources/frontend_client/app/query_builder/GuiQueryEditor.react.js

@@ -272,6 +272,7 @@ export default class GuiQueryEditor extends Component {
                 breakoutList.push(
                     <FieldWidget
                         key={index}
+                        color="green"
                         className="View-section-breakout SelectionModule p1"
                         placeholder='field'
                         field={breakout}