admin - Edit button for existing features

public/js/components/feature/Feature.jsx

@@ -1,22 +1,42 @@
 var React = require('react');
+var FeatureForm = require('./FeatureForm');
 
 var Feature = React.createClass({
-    onChange: function(event) {
+    getInitialState: function() {
+        return {
+            editMode: false
+        };
+    },
+
+    toggleEditMode: function() {
+        this.setState({editMode: !this.state.editMode});
+    },
+
+    saveFeature: function(feature) {
         this.props.onChange({
-            name: this.props.feature.name,
+            name: feature.name,
             field: 'enabled',
-            value: event.target.checked
+            value: feature.enabled
         });
+        this.toggleEditMode();
     },
 
     render: function() {
-        return (
-            <div className='line mal'>
-                <div className='unit r-size1of5'>
-                    <input type='checkbox' checked={this.props.feature.enabled} onChange={this.onChange} />
-                </div>
+        return (<div className='line mal'>
+                {this.state.editMode ? this.renderEditMode() : this.renderViewMode()}
+                </div>);
+    },
 
-                <div className='unit r-size1of5'>
+    renderEditMode: function() {
+        return (<FeatureForm feature={this.props.feature} onSubmit={this.saveFeature} onCancel={this.toggleEditMode} />);
+
+    },
+
+    renderViewMode: function() {
+        var strikeThrough = this.props.feature.enabled ? '' : 'strikethrough';
+        return (
+            <div>
+                <div className={'unit r-size1of5 ' + strikeThrough}>
                   {this.props.feature.name}
                 </div>
 
@@ -24,9 +44,13 @@ var Feature = React.createClass({
                   {this.props.feature.description || '\u00a0'}
                 </div>
 
-                <div className='unit'>
+                <div className='unit r-size1of5'>
                     {this.props.feature.strategy}
                 </div>
+
+                <div className='unit r-size1of5'>
+                    <input type='button' value='Edit' onClick={this.toggleEditMode}/>
+                </div>
             </div>
         );
     }

public/js/components/feature/FeatureForm.jsx

@@ -6,7 +6,7 @@ var FeatureForm = React.createClass({
       return {strategyOptions: []};
     },
 
-    componentDidMount: function() {
+    componentWillMount: function() {
       strategyStore.getStrategies().then(this.handleStrategyResponse);
     },
 
@@ -19,16 +19,27 @@ var FeatureForm = React.createClass({
     },
 
     render: function() {
+        var currentStrategy = this.props.feature ? this.props.feature.strategy : "";
         var strategyNodes = this.state.strategyOptions.map(function(name) {
-          return <option value={name}>{name}</option>;
+          return (
+            <option value={name} selected={name === currentStrategy}>
+              {name}
+            </option>
+            );
         });
 
+        var feature = this.props.feature || {
+          name: '',
+          strategy: 'default',
+          enabled: false
+        };
+
         return (
           <form ref="form" className="bg-blue-xlt">
             <div className="line mal ptl pbl">
 
               <div className="unit prl r-size1of6">
-                <input ref="enabled" type="checkbox" defaultValue={false} />
+                <input ref="enabled" type="checkbox" defaultChecked={feature.enabled} />
               </div>
 
               <div className="unit r-size2of5">
@@ -37,11 +48,15 @@ var FeatureForm = React.createClass({
                    className="mbs"
                    id="name"
                    ref="name"
+                   disabled={feature.name.length}
+                   defaultValue={feature.name}
                    placeholder="Enter name" />
 
                 <input className=""
                    type="text"
                    ref="description"
+                   defaultValue={feature.description}
+                   disabled={feature.name.length}
                    placeholder="Enter description" />
               </div>
 
@@ -49,7 +64,8 @@ var FeatureForm = React.createClass({
                 <select id="strategy"
                         ref="strategy"
                         className=""
-                        defaultValue="default">
+                        disabled={feature.name.length}
+                        defaultValue={feature.strategy}>
                   {strategyNodes}
                 </select>
               </div>