Get rid of 'unsaved features'

public/js/components/feature/Feature.jsx

@@ -1,6 +1,6 @@
 var React = require('react');
 
-var SavedFeature = React.createClass({
+var Feature = React.createClass({
     onChange: function(event) {
         this.props.onChange({
             name: this.props.feature.name,
@@ -28,4 +28,4 @@ var SavedFeature = React.createClass({
     }
 });
 
-module.exports = SavedFeature;
+module.exports = Feature;

public/js/components/feature/FeatureForm.jsx

@@ -1,13 +1,13 @@
 var React = require('react');
 
-var UnsavedFeature = React.createClass({
+var FeatureForm = React.createClass({
     render: function() {
         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={this.props.feature.enabled} />
+                <input ref="enabled" type="checkbox" defaultValue={false} />
               </div>
 
               <div className="unit r-size2of5">
@@ -16,7 +16,6 @@ var UnsavedFeature = React.createClass({
                    className="mbs"
                    id="name"
                    ref="name"
-                   defaultValue={this.props.feature.name}
                    placeholder="Enter name" />
 
                 <input className=""
@@ -29,7 +28,7 @@ var UnsavedFeature = React.createClass({
                 <select id="strategy"
                         ref="strategy"
                         className=""
-                        defaultValue={this.props.feature.strategy}>
+                        defaultValue="default">
                   <option value="default">default</option>
                 </select>
               </div>
@@ -51,18 +50,20 @@ var UnsavedFeature = React.createClass({
     saveFeature: function(e) {
         e.preventDefault();
 
-        this.props.feature.name        = this.refs.name.getDOMNode().value;
-        this.props.feature.description = this.refs.description.getDOMNode().value;
-        this.props.feature.strategy    = this.refs.strategy.getDOMNode().value;
-        this.props.feature.enabled     = this.refs.enabled.getDOMNode().checked;
+        var feature = {
+            name: this.refs.name.getDOMNode().value,
+            description: this.refs.description.getDOMNode().value,
+            strategy: this.refs.strategy.getDOMNode().value,
+            enabled: this.refs.enabled.getDOMNode().checked
+        }
 
-        this.props.onSubmit(this.props.feature);
+        this.props.onSubmit(feature);
     },
 
     cancelFeature: function(e) {
         e.preventDefault();
-        this.props.onCancel(this.props.feature);
+        this.props.onCancel();
     }
 });
 
-module.exports = UnsavedFeature;
+module.exports = FeatureForm;

public/js/components/feature/FeatureList.jsx

@@ -1,47 +1,18 @@
-var React          = require('react');
-var SavedFeature   = require('./SavedFeature');
-var UnsavedFeature = require('./UnsavedFeature');
+var React   = require('react');
+var Feature = require('./Feature');
 
 var FeatureList = React.createClass({
     render: function() {
-        var featureNodes = [];
-
-        this.props.unsavedFeatures.forEach(function(feature, idx) {
-            var key = 'new-' + idx;
-            featureNodes.push(
-                <UnsavedFeature
-                  key={key}
-                  feature={feature}
-                  onSubmit={this.props.onFeatureSubmit}
-                  onCancel={this.props.onFeatureCancel} />
-            );
-        }.bind(this));
-
-        this.props.savedFeatures.forEach(function(feature) {
-            featureNodes.push(
-                <SavedFeature
+        var featureNodes = this.props.features.map(function(feature) {
+            return (
+                <Feature
                   key={feature.name}
                   feature={feature}
                   onChange={this.props.onFeatureChanged} />
             );
         }.bind(this));
 
-        return (
-            <div>
-                <div className="line">
-                    <div className="unit r-size1of4">
-                        <h2>Features</h2>
-                    </div>
-
-                    <div className="unit r-size3of4 rightify prl ptm">
-                        <button className="" onClick={this.props.onNewFeature}>New</button>
-                    </div>
-                </div>
-
-                <hr />
-                {featureNodes}
-            </div>
-            );
+        return <div>{featureNodes}</div>;
     }
 });
 

public/js/components/feature/FeatureToggleComponent.jsx

@@ -2,14 +2,15 @@ var React         = require('react');
 var Timer         = require('../../utils/Timer');
 var ErrorMessages = require('../ErrorMessages');
 var FeatureList   = require('./FeatureList');
+var FeatureForm   = require('./FeatureForm');
 var FeatureStore  = require('../../stores/FeatureStore');
 
 var FeatureToggleComponent = React.createClass({
     getInitialState: function() {
         return {
-            savedFeatures: [],
-            unsavedFeatures: [],
+            features: [],
             errors: [],
+            createView: false,
             featurePoller: new Timer(this.loadFeaturesFromServer, this.props.pollInterval),
             featureStore: new FeatureStore()
         };
@@ -29,7 +30,7 @@ var FeatureToggleComponent = React.createClass({
     },
 
     setFeatures: function (data) {
-        this.setState({savedFeatures: data.features});
+        this.setState({features: data.features});
     },
 
     handleError: function (error) {
@@ -38,7 +39,7 @@ var FeatureToggleComponent = React.createClass({
     },
 
     updateFeature: function (changeRequest) {
-        var newFeatures = this.state.savedFeatures;
+        var newFeatures = this.state.features;
         newFeatures.forEach(function(f){
             if(f.name === changeRequest.name) {
                 f[changeRequest.field] = changeRequest.value;
@@ -63,49 +64,17 @@ var FeatureToggleComponent = React.createClass({
     },
 
     createFeature: function (feature) {
-        var created = function() {
-            var unsaved = [], state = this.state;
-
-            this.state.unsavedFeatures.forEach(function(f) {
-                // TODO: make sure we don't overwrite an existing feature
-                if (f.name === feature.name) {
-                    state.savedFeatures.unshift(f);
-                } else {
-                    unsaved.push(f);
-                }
-            });
-
-            this.setState({unsavedFeatures: unsaved});
-        }.bind(this);
-
-
         this.state.featureStore.createFeature(feature)
-          .then(created)
+          .then(this.cancelNewFeature)
           .catch(this.handleError);
     },
 
     newFeature: function() {
-        var blankFeature = {
-            name: '',
-            enabled: false,
-            strategy: 'default',
-            parameters: {}
-        };
-
-        this.state.unsavedFeatures.push(blankFeature);
-        this.forceUpdate();
+        this.setState({createView: true});
     },
 
     cancelNewFeature: function (feature) {
-        var unsaved = [];
-
-        this.state.unsavedFeatures.forEach(function (f) {
-            if (f.name !== feature.name) {
-                unsaved.push(f);
-            }
-        });
-
-        this.setState({unsavedFeatures: unsaved});
+        this.setState({createView: false});
     },
 
     clearErrors: function() {
@@ -118,16 +87,30 @@ var FeatureToggleComponent = React.createClass({
                 <ErrorMessages
                   errors={this.state.errors}
                   onClearErrors={this.clearErrors} />
+
+                {this.state.createView ? this.renderCreateView() : this.renderCreateButton()}
+
+                <hr />
+
                 <FeatureList
-                  unsavedFeatures={this.state.unsavedFeatures}
-                  savedFeatures={this.state.savedFeatures}
+                  features={this.state.features}
                   onFeatureChanged={this.updateFeature}
                   onFeatureSubmit={this.createFeature}
                   onFeatureCancel={this.cancelNewFeature}
                   onNewFeature={this.newFeature} />
             </div>
         );
+    },
+
+    renderCreateView: function() {
+        return <FeatureForm onCancel={this.cancelNewFeature} onSubmit={this.createFeature} />
+    },
+
+    renderCreateButton: function() {
+        return <button className="mal" onClick={this.newFeature}>Create feature toggle</button>
     }
 });
 
+
+
 module.exports = FeatureToggleComponent;

public/js/components/strategy/StrategyComponent.jsx

@@ -69,10 +69,8 @@ var StrategyComponent = React.createClass({
 
     renderCreateButton: function() {
         return (
-            <p className="">
-                <button className="" onClick={this.handleNewStrategy}>Create strategy</button>
-            </p>
-            );
+            <button className="mal" onClick={this.handleNewStrategy}>Create strategy</button>
+        );
     }
 });