Minor refactoring

public/js/components/feature/Feature.jsx

@@ -68,8 +68,8 @@ var Feature = React.createClass({
                         {this.props.feature.strategy}
                     </td>
 
-                    <td className="rightify">
-                        <input type='button' value='Edit' onClick={this.toggleEditMode}/>
+                    <td>
+                        <input className="mrs mbs" type='button' value='Edit' onClick={this.toggleEditMode}/>
                         <input type='button' value='History' onClick={this.toggleHistory} />
                     </td>
                 </tr>

public/js/components/feature/FeatureForm.jsx

@@ -11,23 +11,11 @@ var FeatureForm = React.createClass({
     },
 
     handleStrategyResponse: function(response) {
-      var strategyNames = response.strategies.map(function(strategy) {
-        return strategy.name;
-      });
-
+      var strategyNames = response.strategies.map(function(s) { return s.name; });
       this.setState({strategyOptions: strategyNames});
     },
 
     render: function() {
-        var currentStrategy = this.props.feature ? this.props.feature.strategy : "";
-        var strategyNodes = this.state.strategyOptions.map(function(name) {
-          return (
-            <option value={name} selected={name === currentStrategy}>
-              {name}
-            </option>
-            );
-        });
-
         var feature = this.props.feature || {
           name: '',
           strategy: 'default',
@@ -64,7 +52,7 @@ var FeatureForm = React.createClass({
                         ref="strategy"
                         className=""
                         defaultValue={feature.strategy}>
-                  {strategyNodes}
+                  {this.renderStrategyOptions()}
                 </select>
               </div>
 
@@ -82,6 +70,18 @@ var FeatureForm = React.createClass({
         );
     },
 
+    renderStrategyOptions: function() {
+        var currentStrategy = this.props.feature ? this.props.feature.strategy : "";
+
+        return this.state.strategyOptions.map(function(name) {
+            return (
+              <option key={name} value={name} selected={name === currentStrategy}>
+                {name}
+              </option>
+            );
+        });
+    },
+
     saveFeature: function(e) {
         e.preventDefault();
 
@@ -90,7 +90,7 @@ var FeatureForm = React.createClass({
             description: this.refs.description.getDOMNode().value,
             strategy: this.refs.strategy.getDOMNode().value,
             enabled: this.refs.enabled.getDOMNode().checked
-        }
+        };
 
         this.props.onSubmit(feature);
     },

public/js/components/strategy/StrategyForm.jsx

@@ -35,6 +35,12 @@ var StrategyForm = React.createClass({
         this.props.onSave(strategy);
     },
 
+    onCancel: function(event) {
+        event.preventDefault();
+
+        this.props.onCancelNewStrategy();
+    },
+
     onAddParam: function(event) {
         event.preventDefault();
         var id = this.state.parameters.length + 1;
@@ -70,14 +76,14 @@ var StrategyForm = React.createClass({
                                 name="description"
                                 label="Description"
                                 ref="description"
-                                placeholder="Please write a short descriptio" />
+                                placeholder="Please write a short description" />
 
                             {this.renderParameters()}
                             {this.renderRemoveLink()}
 
                             <div className="actions">
                                 <input type="submit" value="Save" className="primary mrs" />
-                                <button onClick={this.props.handleCancelNewStrategy} className="mrs">Cancel</button>
+                                <button onClick={this.onCancel} className="mrs">Cancel</button>
                                 {this.renderAddLink()}
                             </div>
                         </fieldset>