fix: Update feature toggle description. (#198)

* fix: Update feature toggle description.

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

* fix: Don't show strategy description during configure

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

@@ -13,6 +13,7 @@ exports[`renders correctly with one feature 1`] = `
   <react-mdl-CardTitle
     style={
       Object {
+        "paddingBottom": 0,
         "wordBreak": "break-all",
       }
     }

frontend/src/component/feature/form/strategy-configure.jsx

@@ -96,6 +96,9 @@ class StrategyConfigure extends React.Component {
     };
 
     renderStrategContent(strategyDefinition) {
+        if (strategyDefinition.name === 'default') {
+            return <h6>{strategyDefinition.description}</h6>;
+        }
         if (strategyDefinition.name === 'flexibleRollout') {
             return (
                 <FlexibleRolloutStrategyInput
@@ -106,12 +109,7 @@ class StrategyConfigure extends React.Component {
                 />
             );
         } else {
-            return (
-                <div>
-                    <br />
-                    {this.renderInputFields(strategyDefinition)}
-                </div>
-            );
+            return <div>{this.renderInputFields(strategyDefinition)}</div>;
         }
     }
 
@@ -217,6 +215,7 @@ class StrategyConfigure extends React.Component {
 
     render() {
         const { isDragging, connectDragPreview, connectDragSource, connectDropTarget } = this.props;
+        const description = this.props.strategyDefinition.description;
 
         let item;
         if (this.props.strategyDefinition) {
@@ -224,17 +223,22 @@ class StrategyConfigure extends React.Component {
             const { name } = this.props.strategy;
             item = (
                 <Card shadow={0} className={styles.card} style={{ opacity: isDragging ? '0.1' : '1' }}>
-                    <CardTitle className={styles.cardTitle}>
+                    <CardTitle className={styles.cardTitle} title={description}>
                         <Icon name="extension" />
                         &nbsp;
                         {name}
                     </CardTitle>
-                    <CardText>{this.props.strategyDefinition.description}</CardText>
+
                     {strategyContent && <CardActions border>{strategyContent}</CardActions>}
 
                     <CardMenu className="mdl-color-text--white">
-                        <Link title="View strategy" to={`/strategies/view/${name}`} className={styles.editLink}>
-                            <Icon name="link" />
+                        <Link
+                            title="View strategy"
+                            to={`/strategies/view/${name}`}
+                            className={styles.editLink}
+                            title={description}
+                        >
+                            <Icon name="info" />
                         </Link>
                         {this.props.removeStrategy ? (
                             <IconButton title="Remove strategy from toggle" name="delete" onClick={this.handleRemove} />

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

@@ -147,7 +147,7 @@ export default class ViewFeatureToggleComponent extends React.Component {
 
         return (
             <Card shadow={0} className={commonStyles.fullwidth} style={{ overflow: 'visible' }}>
-                <CardTitle style={{ wordBreak: 'break-all' }}>{featureToggle.name}</CardTitle>
+                <CardTitle style={{ wordBreak: 'break-all', paddingBottom: 0 }}>{featureToggle.name}</CardTitle>
                 <UpdateDescriptionComponent
                     isFeatureView={this.isFeatureView}
                     description={featureToggle.description}