From b8eda9599a8231f1046ce37436b6451006b7ccf0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= <ivarconr@gmail.com>
Date: Sat, 26 Oct 2019 22:55:52 +0200
Subject: [PATCH] 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
---
 .../view-component-test.jsx.snap              | 23 ++---
 .../form/update-description-component.jsx     | 83 +++++++++++++++++++
 .../src/component/feature/view-component.jsx  | 43 +++-------
 3 files changed, 102 insertions(+), 47 deletions(-)
 create mode 100644 frontend/src/component/feature/form/update-description-component.jsx

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 7eacca3a01..ae2edeee58 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,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}
diff --git a/frontend/src/component/feature/form/update-description-component.jsx b/frontend/src/component/feature/form/update-description-component.jsx
new file mode 100644
index 0000000000..66673795bf
--- /dev/null
+++ b/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);
+    }
+}
diff --git a/frontend/src/component/feature/view-component.jsx b/frontend/src/component/feature/view-component.jsx
index 17f99d488a..dcc36b78aa 100644
--- a/frontend/src/component/feature/view-component.jsx
+++ b/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}
-                        />
-                    ) : (
-                        <Textfield
-                            disabled
-                            floatingLabel
-                            style={{ width: '100%' }}
-                            rows={1}
-                            label="Description"
-                            required
-                            value={featureToggle.description}
-                        />
-                    )}
-                </CardText>
+                <CardTitle style={{ wordBreak: 'break-all' }}>{featureToggle.name}</CardTitle>
+                <UpdateDescriptionComponent
+                    isFeatureView={this.isFeatureView}
+                    description={featureToggle.description}
+                    update={updateDescription}
+                    hasPermission={hasPermission}
+                />
 
                 <CardActions
                     border