simplified add feature toggle with a pure UI component

packages/unleash-frontend-next/src/component/feature/AddFeatureToggle.jsx

@@ -1,9 +1,7 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
-import { Input, Switch, Button } from 'react-toolbox';
 import { createFeatureToggles } from '../../store/feature-actions';
-import AddFeatureToggleStrategy from './AddFeatureToggleStrategy';
+import AddFeatureToggleUI from './AddFeatureToggleUI';
-import ConfiguredStrategies from './ConfiguredStrategies';
 
 const mapStateToProps = (state) => ({
     strategies: state.strategies.toJS(),
@@ -13,12 +11,10 @@ class AddFeatureToggle extends React.Component {
     constructor () {
         super();
         this.state = {
-            featureToggle: {
             name: '',
             description: '',
             enabled: false,
             strategies: [],
-            },
         };
     }
 
@@ -35,79 +31,44 @@ class AddFeatureToggle extends React.Component {
 
     onSubmit = (evt) => {
         evt.preventDefault();
-        this.props.dispatch(createFeatureToggles(this.state.featureToggle));
+        this.props.dispatch(createFeatureToggles(this.state));
         this.context.router.push('/features');
     };
 
-    handleChange = (key, value) => {
+    onCancel = (evt) => {
+        evt.preventDefault();
+        this.context.router.push('/features');
+    };
+
+    updateField = (key, value) => {
         const change = {};
         change[key] = value;
-        const updatedFeatureToggle = Object.assign({}, this.state.featureToggle, change);
+        this.setState(change);
-
-        this.setState({ featureToggle: updatedFeatureToggle });
     };
 
     addStrategy = (strategy) => {
-        const strategies = this.state.featureToggle.strategies;
+        const strategies = this.state.strategies;
         strategies.push(strategy);
-        const updatedFeatureToggle = Object.assign({}, this.state.featureToggle, { strategies });
+        this.setState({ strategies });
-        this.setState({ featureToggle: updatedFeatureToggle });
     }
 
     removeStrategy = (strategy) => {
-        const strategies = this.state.featureToggle.strategies.filter(s => s !== strategy);
+        const strategies = this.state.strategies.filter(s => s !== strategy);
-        const updatedFeatureToggle = Object.assign({}, this.state.featureToggle, { strategies });
+        this.setState({ strategies });
-        this.setState({ featureToggle: updatedFeatureToggle });
     }
 
     render () {
-        const configuredStrategies = this.state.featureToggle.strategies;
-
         return (
             <div>
-                <form onSubmit={this.onSubmit}>
+                <AddFeatureToggleUI
-                    <section>
-                        <Input
-                            type="text"
-                            label="Name"
-                            name="name"
-                            required
-                            value={this.state.featureToggle.name}
-                            onChange={this.handleChange.bind(this, 'name')} />
-                        <Input
-                            type="text"
-                            multiline label="Description"
-                            required
-                            value={this.state.featureToggle.description}
-                            onChange={this.handleChange.bind(this, 'description')} />
-
-                        <br />
-
-                        <Switch
-                            checked={this.state.featureToggle.enabled}
-                            label="Enabled"
-                            onChange={this.handleChange.bind(this, 'enabled')} />
-
-                        <br />
-                    </section>
-
-                    <section>
-                        <strong>Activation strategies</strong>
-                        <ConfiguredStrategies configuredStrategies={configuredStrategies} removeStrategy={this.removeStrategy} />
-                    </section>
-
-                    <section>
-                        <AddFeatureToggleStrategy
                     strategies={this.props.strategies}
+                    featureToggle={this.state}
+                    updateField={this.updateField}
                     addStrategy={this.addStrategy}
+                    removeStrategy={this.removeStrategy}
+                    onSubmit={this.onSubmit}
+                    onCancel={this.onCancel}
                 />
-                    </section>
-
-                    <br />
-
-
-                    <Button type="submit" raised primary label="Create" />
-                </form>
             </div>
         );
     }

packages/unleash-frontend-next/src/component/feature/AddFeatureToggleUI.jsx

@@ -0,0 +1,72 @@
+import React, { PropTypes } from 'react';
+import { Input, Switch, Button } from 'react-toolbox';
+import AddFeatureToggleStrategy from './AddFeatureToggleStrategy';
+import ConfiguredStrategies from './ConfiguredStrategies';
+
+class AddFeatureToggleUI extends React.Component {
+    static propTypes () {
+        return {
+            strategies: PropTypes.array.required,
+            featureToggle: PropTypes.object,
+            updateField: PropTypes.func.required,
+            addStrategy: PropTypes.func.required,
+            removeStrategy: PropTypes.func.required,
+            onSubmit: PropTypes.func.required,
+            onCancel: PropTypes.func.required,
+        };
+    }
+
+    render () {
+        const configuredStrategies = this.props.featureToggle.strategies;
+
+        return (
+            <form onSubmit={this.props.onSubmit}>
+                <section>
+                    <Input
+                        type="text"
+                        label="Name"
+                        name="name"
+                        required
+                        value={this.props.featureToggle.name}
+                        onChange={this.props.updateField.bind(this, 'name')} />
+                    <Input
+                        type="text"
+                        multiline label="Description"
+                        required
+                        value={this.props.featureToggle.description}
+                        onChange={this.props.updateField.bind(this, 'description')} />
+
+                    <br />
+
+                    <Switch
+                        checked={this.props.featureToggle.enabled}
+                        label="Enabled"
+                        onChange={this.props.updateField.bind(this, 'enabled')} />
+
+                    <br />
+                </section>
+
+                <section>
+                    <strong>Activation strategies</strong>
+                    <ConfiguredStrategies
+                        configuredStrategies={configuredStrategies}
+                        removeStrategy={this.props.removeStrategy} />
+                </section>
+
+                <section>
+                    <AddFeatureToggleStrategy
+                        strategies={this.props.strategies}
+                        addStrategy={this.props.addStrategy} />
+                </section>
+
+                <br />
+
+
+                <Button type="submit" raised primary label="Create" />
+                <Button type="cancel" raised label="Cancel" onClick={this.props.onCancel} />
+            </form>
+        );
+    }
+}
+
+export default AddFeatureToggleUI;

packages/unleash-frontend-next/src/component/feature/EditFeatureToggle.jsx

@@ -0,0 +1,41 @@
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+
+const mapStateToProps = (state) => ({
+    strategies: state.strategies.toJS(),
+});
+
+class EditFeatureToggle extends React.Component {
+    constructor () {
+        super();
+        this.state = {
+            featureToggle: {
+                name: '',
+                description: '',
+                enabled: false,
+                strategies: [],
+            },
+        };
+    }
+
+    static propTypes () {
+        return {
+            dispatch: PropTypes.func.isRequired,
+            strategies: PropTypes.array,
+        };
+    }
+
+    static contextTypes = {
+        router: React.PropTypes.object,
+    }
+
+    render () {
+        return (
+            <div>
+                <p>edit input</p>
+            </div>
+        );
+    }
+}
+
+export default connect(mapStateToProps)(EditFeatureToggle);

packages/unleash-frontend-next/src/component/feature/Feature.jsx

@@ -2,6 +2,7 @@
 
 import React, { PropTypes } from 'react';
 import { Switch, FontIcon } from 'react-toolbox';
+import { Link } from 'react-router';
 
 const Feature = ({ onClick, name, enabled, strategies }) => (
   <tr>
@@ -9,7 +10,9 @@ const Feature = ({ onClick, name, enabled, strategies }) => (
     <td><a href="/edit">{name}</a></td>
     <td>{strategies.map(s => s.name).join(', ')}</td>
     <td style={{ textAlign: 'right' }}>
+      <Link to={`/features/edit/${name}`}>
         <FontIcon value="edit" />
+      </Link>
       <FontIcon value="delete"  style={{ color: 'red' }} />
     </td>
   </tr>

packages/unleash-frontend-next/src/index.jsx

@@ -10,6 +10,7 @@ import App from './App';
 
 import Features from './page/features';
 import CreateFeatureToggle from './page/features/create';
+import EditFeatureToggle from './page/features/edit';
 import Strategies from './page/strategies';
 import HistoryPage from './page/history';
 import Archive from './page/archive';
@@ -28,6 +29,7 @@ ReactDOM.render(
                 <IndexRedirect to="/features" />
                 <Route path="/features" component={Features} />
                 <Route path="/features/create" component={CreateFeatureToggle} />
+                <Route path="/features/edit/:name" component={EditFeatureToggle} />
                 <Route path="/strategies" component={Strategies} />
                 <Route path="/history" component={HistoryPage} />
                 <Route path="/archive" component={Archive} />

packages/unleash-frontend-next/src/page/features/edit.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+import EditFeatureToggle from '../../component/feature/EditFeatureToggle';
+
+export default class Features extends Component {
+    render () {
+        return (
+            <div>
+                <h1>Edit Feature Toggle</h1>
+                <EditFeatureToggle />
+            </div>
+        );
+    }
+};