From dd9c4bd1ab7a9eaea82e7bf683c048bfffddd506 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= <ivarconr@gmail.com>
Date: Sun, 27 Oct 2019 19:40:41 +0100
Subject: [PATCH] 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
---
 .../view-component-test.jsx.snap              |  1 +
 .../feature/form/strategy-configure.jsx       | 24 +++++++++++--------
 .../src/component/feature/view-component.jsx  |  2 +-
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/frontend/src/component/feature/__tests__/__snapshots__/view-component-test.jsx.snap b/frontend/src/component/feature/__tests__/__snapshots__/view-component-test.jsx.snap
index ae2edeee58..f30374cbbd 100644
--- a/frontend/src/component/feature/__tests__/__snapshots__/view-component-test.jsx.snap
+++ b/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",
       }
     }
diff --git a/frontend/src/component/feature/form/strategy-configure.jsx b/frontend/src/component/feature/form/strategy-configure.jsx
index 73ab30f9a5..7519b8b88d 100644
--- a/frontend/src/component/feature/form/strategy-configure.jsx
+++ b/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} />
diff --git a/frontend/src/component/feature/view-component.jsx b/frontend/src/component/feature/view-component.jsx
index dcc36b78aa..5072f924a0 100644
--- a/frontend/src/component/feature/view-component.jsx
+++ b/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}