fix: Update feature toggle description. (#196)

Currently it is always in edit mode which can be a bit confusing.
Usually one do not want to edit a toggle descirption and if one
do it should be OK to enter edit mode.

Now it alos stores changes in local state on the component so any
updates from the server should not affect the local value currently
beeing edited by the user.

fixes #168

frontend/src/component/feature/__tests__/__snapshots__/view-component-test.jsx.snap

@@ -13,7 +13,6 @@ exports[`renders correctly with one feature 1`] = `
   <react-mdl-CardTitle
     style={
       Object {
-        "paddingTop": "24px",
         "wordBreak": "break-all",
       }
     }
@@ -21,20 +20,14 @@ exports[`renders correctly with one feature 1`] = `
     Another
   </react-mdl-CardTitle>
   <react-mdl-CardText>
-    <react-mdl-Textfield
-      floatingLabel={true}
-      label="Description"
-      onBlur={[Function]}
-      onChange={[Function]}
-      required={true}
-      rows={1}
-      style={
-        Object {
-          "width": "100%",
-        }
-      }
-      value="another's description"
-    />
+    another's description
+     
+    <a
+      href="#edit"
+      onClick={[Function]}
+    >
+      edit
+    </a>
   </react-mdl-CardText>
   <react-mdl-CardActions
     border={true}

frontend/src/component/feature/form/update-description-component.jsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, CardText, Textfield } from 'react-mdl';
+
+import { UPDATE_FEATURE } from '../../../permissions';
+
+export default class UpdateDescriptionComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { editMode: false };
+    }
+
+    static propTypes = {
+        isFeatureView: PropTypes.bool.isRequired,
+        update: PropTypes.func,
+        featureToggle: PropTypes.object,
+        hasPermission: PropTypes.func.isRequired,
+    };
+
+    onEditMode = (description, evt) => {
+        evt.preventDefault();
+        this.setState({ editMode: true, description });
+    };
+
+    updateValue = evt => {
+        evt.preventDefault();
+        this.setState({ description: evt.target.value });
+    };
+
+    onSave = evt => {
+        evt.preventDefault();
+        this.props.update(this.state.description);
+        this.setState({ editMode: false, description: undefined });
+    };
+
+    onCancel = evt => {
+        evt.preventDefault();
+        this.setState({ editMode: false, description: undefined });
+    };
+
+    renderRead({ description, isFeatureView, hasPermission }) {
+        return (
+            <CardText>
+                {description}&nbsp;
+                {isFeatureView && hasPermission(UPDATE_FEATURE) ? (
+                    <a href="#edit" onClick={this.onEditMode.bind(this, description)}>
+                        edit
+                    </a>
+                ) : null}
+            </CardText>
+        );
+    }
+
+    renderEdit() {
+        const { description } = this.state;
+        return (
+            <CardText>
+                <Textfield
+                    floatingLabel
+                    style={{ width: '100%' }}
+                    label="Description"
+                    required
+                    value={description}
+                    onChange={this.updateValue}
+                />
+                <div>
+                    <Button type="submit" raised accent onClick={this.onSave}>
+                        Save
+                    </Button>
+                    &nbsp;
+                    <Button type="cancel" raised onClick={this.onCancel}>
+                        Cancel
+                    </Button>
+                </div>
+            </CardText>
+        );
+    }
+
+    render() {
+        const { editMode } = this.state;
+        return editMode ? this.renderEdit(this.props) : this.renderRead(this.props);
+    }
+}

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, CardText, CardTitle, CardActions, Textfield, Switch } from 'react-mdl';
+import { Tabs, Tab, ProgressBar, Button, Card, CardTitle, CardActions, Switch } from 'react-mdl';
 import { Link } from 'react-router-dom';
 
 import HistoryComponent from '../history/history-list-toggle-container';
@@ -8,6 +8,7 @@ import MetricComponent from './metric-container';
 import EditFeatureToggle from './form/form-update-feature-container';
 import EditVariants from './variant/update-variant-container';
 import ViewFeatureToggle from './form/form-view-feature-container';
+import UpdateDescriptionComponent from './form/update-description-component';
 import { styles as commonStyles } from '../common';
 import { CREATE_FEATURE, DELETE_FEATURE, UPDATE_FEATURE } from '../../permissions';
 
@@ -133,8 +134,8 @@ export default class ViewFeatureToggleComponent extends React.Component {
             revive(featureToggle.name);
             this.props.history.push('/features');
         };
-        const updateFeatureToggle = e => {
-            let feature = { ...featureToggle, description: e.target.value };
+        const updateDescription = description => {
+            let feature = { ...featureToggle, description };
             if (Array.isArray(feature.strategies)) {
                 feature.strategies.forEach(s => {
                     delete s.id;
@@ -143,38 +144,16 @@ export default class ViewFeatureToggleComponent extends React.Component {
 
             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>
-                    {this.isFeatureView && hasPermission(UPDATE_FEATURE) ? (
-                        <Textfield
-                            floatingLabel
-                            style={{ width: '100%' }}
-                            rows={1}
-                            label="Description"
-                            required
-                            value={featureToggle.description}
-                            onChange={v => setValue('description', v)}
-                            onBlur={updateFeatureToggle}
+                <CardTitle style={{ wordBreak: 'break-all' }}>{featureToggle.name}</CardTitle>
+                <UpdateDescriptionComponent
+                    isFeatureView={this.isFeatureView}
+                    description={featureToggle.description}
+                    update={updateDescription}
+                    hasPermission={hasPermission}
                 />
-                    ) : (
-                        <Textfield
-                            disabled
-                            floatingLabel
-                            style={{ width: '100%' }}
-                            rows={1}
-                            label="Description"
-                            required
-                            value={featureToggle.description}
-                        />
-                    )}
-                </CardText>
 
                 <CardActions
                     border