UI for editing feature toggles

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

@@ -13,6 +13,7 @@ class AddFeatureToggleUI extends React.Component {
             removeStrategy: PropTypes.func.required,
             onSubmit: PropTypes.func.required,
             onCancel: PropTypes.func.required,
+            editmode: PropTypes.bool,
         };
     }
 
@@ -26,6 +27,7 @@ class AddFeatureToggleUI extends React.Component {
                         type="text"
                         label="Name"
                         name="name"
+                        disabled={this.props.editmode}
                         required
                         value={this.props.featureToggle.name}
                         onChange={this.props.updateField.bind(this, 'name')} />
@@ -62,7 +64,7 @@ class AddFeatureToggleUI extends React.Component {
                 <br />
 
 
-                <Button type="submit" raised primary label="Create" />
+                <Button type="submit" raised primary label={this.props.editmode ? 'Update' : 'Create'} />
                 <Button type="cancel" raised label="Cancel" onClick={this.props.onCancel} />
             </form>
         );

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

@@ -1,20 +1,21 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
+import { updateFeatureToggle } from '../../store/feature-actions';
+import AddFeatureToggleUI from './AddFeatureToggleUI';
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = (state, ownProps) => ({
     strategies: state.strategies.toJS(),
+    featureToggle: state.features.toJS().find(toggle => toggle.name === ownProps.featureToggleName) || {},
 });
 
-class EditFeatureToggle extends React.Component {
+class AddFeatureToggle extends React.Component {
-    constructor () {
+    constructor (props) {
-        super();
+        super(props);
         this.state = {
-            featureToggle: {
+            name: props.featureToggle.name || '',
-                name: '',
+            description: props.featureToggle.description || '',
-                description: '',
+            enabled: props.featureToggle.enabled || false,
-                enabled: false,
+            strategies: props.featureToggle.strategies || [],
-                strategies: [],
-            },
         };
     }
 
@@ -22,6 +23,8 @@ class EditFeatureToggle extends React.Component {
         return {
             dispatch: PropTypes.func.isRequired,
             strategies: PropTypes.array,
+            featureToggle: PropTypes.featureToggle.isRequired,
+            fetchFeatureToggles: PropTypes.func.isRequired,
         };
     }
 
@@ -29,13 +32,51 @@ class EditFeatureToggle extends React.Component {
         router: React.PropTypes.object,
     }
 
+    onSubmit = (evt) => {
+        evt.preventDefault();
+        this.props.dispatch(updateFeatureToggle(this.state));
+        this.context.router.push('/features');
+    };
+
+    onCancel = (evt) => {
+        evt.preventDefault();
+        this.context.router.push('/features');
+    };
+
+    updateField = (key, value) => {
+        const change = {};
+        change[key] = value;
+        this.setState(change);
+    };
+
+    addStrategy = (strategy) => {
+        const strategies = this.state.strategies;
+        strategies.push(strategy);
+        this.setState({ strategies });
+    }
+
+    removeStrategy = (strategy) => {
+        const strategies = this.state.strategies.filter(s => s !== strategy);
+        this.setState({ strategies });
+    }
+
     render () {
         return (
             <div>
-                <p>edit input</p>
+                <AddFeatureToggleUI
+                    editmode="true"
+                    strategies={this.props.strategies}
+                    featureToggle={this.state}
+                    updateField={this.updateField}
+                    addStrategy={this.addStrategy}
+                    removeStrategy={this.removeStrategy}
+                    onSubmit={this.onSubmit}
+                    onCancel={this.onCancel}
+                    
+                />
             </div>
         );
     }
 }
 
-export default connect(mapStateToProps)(EditFeatureToggle);
+export default connect(mapStateToProps)(AddFeatureToggle);

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

@@ -10,10 +10,10 @@ 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}`}>
+      <Link to={`/features/edit/${name}`} title={`Edit ${name}`}>
         <FontIcon value="edit" />
       </Link>
-      <FontIcon value="delete"  style={{ color: 'red' }} />
+      <FontIcon value="delete" />
     </td>
   </tr>
 );

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

@@ -2,11 +2,15 @@ import React, { Component } from 'react';
 import EditFeatureToggle from '../../component/feature/EditFeatureToggle';
 
 export default class Features extends Component {
+    static contextTypes = {
+        router: React.PropTypes.object,
+    }
+
     render () {
         return (
             <div>
                 <h1>Edit Feature Toggle</h1>
-                <EditFeatureToggle />
+                <EditFeatureToggle featureToggleName={this.props.params.name} />
             </div>
         );
     }