fixt(feature): move description outside of strategies block

frontend/src/component/feature/form-add-container.jsx

@@ -31,7 +31,7 @@ const prepare = (methods, dispatch) => {
 
         createFeatureToggles(input)(dispatch)
             .then(() => methods.clear())
-            .then(() => hashHistory.push(`/features/edit/${input.name}`));
+            .then(() => hashHistory.push(`/features/strategies/${input.name}`));
     };
 
     methods.onCancel = evt => {

frontend/src/component/feature/form-edit-container.jsx

@@ -34,6 +34,10 @@ const prepare = (methods, dispatch) => {
                 delete s.id;
             });
         }
+        if (input.editmode) {
+            delete input.description;
+        }
+
         // TODO: should add error handling
         requestUpdateFeatureToggle(input)(dispatch)
             .then(() => methods.clear())

frontend/src/component/feature/form/index.jsx

@@ -42,7 +42,7 @@ class AddFeatureToggleComponent extends Component {
             enabled,
         } = input;
         const configuredStrategies = input.strategies || [];
-
+        input.editmode = editmode;
         return (
             <form onSubmit={onSubmit(input)}>
                 <section style={{ padding: '16px' }}>
@@ -59,6 +59,7 @@ class AddFeatureToggleComponent extends Component {
                             onChange={v => setValue('name', trim(v.target.value))}
                         />
                     )}
+                    {!editmode && (
                         <Textfield
                             floatingLabel
                             style={{ width: '100%' }}
@@ -68,7 +69,7 @@ class AddFeatureToggleComponent extends Component {
                             value={description}
                             onChange={v => setValue('description', v.target.value)}
                         />
-
+                    )}
                     {!editmode && (
                         <div>
                             <br />

frontend/src/component/feature/view-component.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Tabs, Tab, ProgressBar, Button, Card, CardTitle, CardActions, Switch } from 'react-mdl';
+import { Tabs, Tab, ProgressBar, Button, Card, CardText, CardTitle, CardActions, Textfield, Switch } from 'react-mdl';
 import { hashHistory, Link } from 'react-router';
 
 import HistoryComponent from '../history/history-list-toggle-container';
@@ -26,6 +26,7 @@ export default class ViewFeatureToggleComponent extends React.Component {
         toggleFeature: PropTypes.func.isRequired,
         removeFeatureToggle: PropTypes.func.isRequired,
         fetchFeatureToggles: PropTypes.func.isRequired,
+        editFeatureToggle: PropTypes.func.isRequired,
         featureToggle: PropTypes.object,
     };
 
@@ -56,6 +57,7 @@ export default class ViewFeatureToggleComponent extends React.Component {
             featureToggle,
             features,
             activeTab,
+            // setValue,
             featureToggleName,
             toggleFeature,
             removeFeatureToggle,
@@ -92,10 +94,37 @@ export default class ViewFeatureToggleComponent extends React.Component {
                 hashHistory.push('/features');
             }
         };
+        const updateFeatureToggle = () => {
+            let feature = { ...featureToggle };
+            if (Array.isArray(feature.strategies)) {
+                feature.strategies.forEach(s => {
+                    delete s.id;
+                });
+            }
+
+            this.props.editFeatureToggle(feature);
+        };
+        const setValue = (v, event) => {
+            featureToggle[v] = event.target.value;
+            this.forceUpdate();
+        };
 
         return (
             <Card shadow={0} className={commonStyles.fullwidth} style={{ overflow: 'visible' }}>
                 <CardTitle style={{ paddingTop: '24px', wordBreak: 'break-all' }}>{featureToggle.name}</CardTitle>
+                <CardText>
+                    <Textfield
+                        floatingLabel
+                        style={{ width: '100%' }}
+                        rows={1}
+                        label="Description"
+                        required
+                        value={featureToggle.description}
+                        onChange={v => setValue('description', v)}
+                        onBlur={updateFeatureToggle}
+                    />
+                </CardText>
+
                 <CardActions
                     border
                     style={{

frontend/src/component/feature/view-container.jsx

@@ -1,6 +1,11 @@
 import { connect } from 'react-redux';
 
-import { fetchFeatureToggles, toggleFeature, removeFeatureToggle } from '../../store/feature-actions';
+import {
+    fetchFeatureToggles,
+    toggleFeature,
+    removeFeatureToggle,
+    editFeatureToggle,
+} from '../../store/feature-actions';
 
 import ViewToggleComponent from './view-component';
 
@@ -14,5 +19,6 @@ export default connect(
         fetchFeatureToggles,
         toggleFeature,
         removeFeatureToggle,
+        editFeatureToggle,
     }
 )(ViewToggleComponent);