From 4dd033c30e7bc9293a8d1ee344cb32cd36c18de2 Mon Sep 17 00:00:00 2001
From: Corinne Krych <corinnekrych@gmail.com>
Date: Sun, 11 Feb 2018 17:56:00 +0100
Subject: [PATCH 1/6] fix(feature): display strategies tab as default

---
 .../feature/feature-list-item-component.jsx   |  2 +-
 .../component/feature/form-edit-container.jsx |  2 +-
 frontend/src/component/feature/form/index.jsx | 28 +------------------
 .../src/component/feature/view-component.jsx  | 10 +++----
 .../strategies/strategy-details-component.jsx |  2 +-
 5 files changed, 9 insertions(+), 35 deletions(-)

diff --git a/frontend/src/component/feature/feature-list-item-component.jsx b/frontend/src/component/feature/feature-list-item-component.jsx
index 23991b5479..6d4a831f8a 100644
--- a/frontend/src/component/feature/feature-list-item-component.jsx
+++ b/frontend/src/component/feature/feature-list-item-component.jsx
@@ -52,7 +52,7 @@ const Feature = ({
             </span>
             <span className={['mdl-list__item-primary-content', styles.listItemLink].join(' ')}>
                 <Link
-                    to={`/features/view/${name}`}
+                    to={`/features/strategies/${name}`}
                     className={[commonStyles.listLink, commonStyles.truncate].join(' ')}
                 >
                     {name}
diff --git a/frontend/src/component/feature/form-edit-container.jsx b/frontend/src/component/feature/form-edit-container.jsx
index ee3d9e7e6c..21681a77b8 100644
--- a/frontend/src/component/feature/form-edit-container.jsx
+++ b/frontend/src/component/feature/form-edit-container.jsx
@@ -37,7 +37,7 @@ const prepare = (methods, dispatch) => {
         // TODO: should add error handling
         requestUpdateFeatureToggle(input)(dispatch)
             .then(() => methods.clear())
-            .then(() => hashHistory.push(`/features/view/${input.name}`));
+            .then(() => hashHistory.push(`/features/strategies/${input.name}`));
     };
 
     methods.onCancel = evt => {
diff --git a/frontend/src/component/feature/form/index.jsx b/frontend/src/component/feature/form/index.jsx
index 366227d139..07217e4550 100644
--- a/frontend/src/component/feature/form/index.jsx
+++ b/frontend/src/component/feature/form/index.jsx
@@ -5,14 +5,6 @@ import StrategiesSection from './strategies-section-container';
 
 import { FormButtons } from '../../common';
 
-const trim = value => {
-    if (value && value.trim) {
-        return value.trim();
-    } else {
-        return value;
-    }
-};
-
 class AddFeatureToggleComponent extends Component {
     componentWillMount() {
         // TODO unwind this stuff
@@ -25,7 +17,6 @@ class AddFeatureToggleComponent extends Component {
         const {
             input,
             setValue,
-            validateName,
             addStrategy,
             removeStrategy,
             updateStrategy,
@@ -35,29 +26,12 @@ class AddFeatureToggleComponent extends Component {
             editmode = false,
         } = this.props;
 
-        const {
-            name, // eslint-disable-line
-            nameError,
-            description,
-            enabled,
-        } = input;
+        const { description, enabled } = input;
         const configuredStrategies = input.strategies || [];
 
         return (
             <form onSubmit={onSubmit(input)}>
                 <section style={{ padding: '16px' }}>
-                    <Textfield
-                        floatingLabel
-                        label="Name"
-                        name="name"
-                        disabled={editmode}
-                        required
-                        value={name}
-                        error={nameError}
-                        onBlur={v => validateName(v.target.value)}
-                        onChange={v => setValue('name', trim(v.target.value))}
-                    />
-                    <br />
                     <Textfield
                         floatingLabel
                         style={{ width: '100%' }}
diff --git a/frontend/src/component/feature/view-component.jsx b/frontend/src/component/feature/view-component.jsx
index 6f03ad49a9..2387b71050 100644
--- a/frontend/src/component/feature/view-component.jsx
+++ b/frontend/src/component/feature/view-component.jsx
@@ -9,8 +9,8 @@ import EditFeatureToggle from './form-edit-container.jsx';
 import { styles as commonStyles } from '../common';
 
 const TABS = {
-    view: 0,
-    edit: 1,
+    strategies: 0,
+    view: 1,
     history: 2,
 };
 
@@ -40,7 +40,7 @@ export default class ViewFeatureToggleComponent extends React.Component {
 
         if (TABS[activeTab] === TABS.history) {
             return <HistoryComponent toggleName={featureToggleName} />;
-        } else if (TABS[activeTab] === TABS.edit) {
+        } else if (TABS[activeTab] === TABS.strategies) {
             return <EditFeatureToggle featureToggle={featureToggle} />;
         } else {
             return <MetricComponent featureToggle={featureToggle} />;
@@ -80,7 +80,7 @@ export default class ViewFeatureToggleComponent extends React.Component {
             );
         }
 
-        const activeTabId = TABS[this.props.activeTab] ? TABS[this.props.activeTab] : TABS.view;
+        const activeTabId = TABS[this.props.activeTab] ? TABS[this.props.activeTab] : TABS.strategies;
         const tabContent = this.getTabContent(activeTab);
 
         const removeToggle = () => {
@@ -125,8 +125,8 @@ export default class ViewFeatureToggleComponent extends React.Component {
                     tabBarProps={{ style: { width: '100%' } }}
                     className="mdl-color--grey-100"
                 >
+                    <Tab onClick={() => this.goToTab('strategies', featureToggleName)}>Strategies</Tab>
                     <Tab onClick={() => this.goToTab('view', featureToggleName)}>Metrics</Tab>
-                    <Tab onClick={() => this.goToTab('edit', featureToggleName)}>Edit</Tab>
                     <Tab onClick={() => this.goToTab('history', featureToggleName)}>History</Tab>
                 </Tabs>
                 {tabContent}
diff --git a/frontend/src/component/strategies/strategy-details-component.jsx b/frontend/src/component/strategies/strategy-details-component.jsx
index 967830be70..c9762b8e05 100644
--- a/frontend/src/component/strategies/strategy-details-component.jsx
+++ b/frontend/src/component/strategies/strategy-details-component.jsx
@@ -54,7 +54,7 @@ export default class StrategyDetails extends Component {
     }
 
     render() {
-        const activeTabId = TABS[this.props.activeTab] ? TABS[this.props.activeTab] : TABS.view;
+        const activeTabId = TABS[this.props.activeTab] ? TABS[this.props.activeTab] : TABS.strategies;
         const strategy = this.props.strategy;
         if (!strategy) {
             return <ProgressBar indeterminate />;

From 2781c4304c4c0183c138cf8015f458daa9b74115 Mon Sep 17 00:00:00 2001
From: Corinne Krych <corinnekrych@gmail.com>
Date: Sun, 11 Feb 2018 18:31:48 +0100
Subject: [PATCH 2/6] fix(feature): naviagation issue when updating feature

---
 frontend/src/component/feature/form-edit-container.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/component/feature/form-edit-container.jsx b/frontend/src/component/feature/form-edit-container.jsx
index 21681a77b8..9b68e43b33 100644
--- a/frontend/src/component/feature/form-edit-container.jsx
+++ b/frontend/src/component/feature/form-edit-container.jsx
@@ -37,6 +37,7 @@ const prepare = (methods, dispatch) => {
         // TODO: should add error handling
         requestUpdateFeatureToggle(input)(dispatch)
             .then(() => methods.clear())
+            .then(() => hashHistory.push(`/features`))
             .then(() => hashHistory.push(`/features/strategies/${input.name}`));
     };
 

From ea5858b33dc981c7ea847513785dbf5ebfe2669a Mon Sep 17 00:00:00 2001
From: Corinne Krych <corinnekrych@gmail.com>
Date: Sun, 11 Feb 2018 18:35:26 +0100
Subject: [PATCH 3/6] fix(feature): remove duplicate description in feature
 deatil view

---
 frontend/src/component/feature/view-component.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/component/feature/view-component.jsx b/frontend/src/component/feature/view-component.jsx
index 2387b71050..54c5a88898 100644
--- a/frontend/src/component/feature/view-component.jsx
+++ b/frontend/src/component/feature/view-component.jsx
@@ -96,7 +96,6 @@ export default class ViewFeatureToggleComponent extends React.Component {
         return (
             <Card shadow={0} className={commonStyles.fullwidth} style={{ overflow: 'visible' }}>
                 <CardTitle style={{ paddingTop: '24px', wordBreak: 'break-all' }}>{featureToggle.name}</CardTitle>
-                <CardText>{featureToggle.description}</CardText>
                 <CardActions
                     border
                     style={{

From 4dfddd6615fb5b61745e81c7738140bb000c6b40 Mon Sep 17 00:00:00 2001
From: Corinne Krych <corinnekrych@gmail.com>
Date: Mon, 12 Feb 2018 09:23:50 +0100
Subject: [PATCH 4/6] fix(feature): get rid of the regression, create feature
 can have a name

---
 frontend/src/component/feature/form/index.jsx | 29 ++++++++++++++++++-
 .../src/component/feature/view-component.jsx  |  2 +-
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/frontend/src/component/feature/form/index.jsx b/frontend/src/component/feature/form/index.jsx
index 07217e4550..1d2c249f22 100644
--- a/frontend/src/component/feature/form/index.jsx
+++ b/frontend/src/component/feature/form/index.jsx
@@ -5,6 +5,14 @@ import StrategiesSection from './strategies-section-container';
 
 import { FormButtons } from '../../common';
 
+const trim = value => {
+    if (value && value.trim) {
+        return value.trim();
+    } else {
+        return value;
+    }
+};
+
 class AddFeatureToggleComponent extends Component {
     componentWillMount() {
         // TODO unwind this stuff
@@ -17,6 +25,7 @@ class AddFeatureToggleComponent extends Component {
         const {
             input,
             setValue,
+            validateName,
             addStrategy,
             removeStrategy,
             updateStrategy,
@@ -26,12 +35,30 @@ class AddFeatureToggleComponent extends Component {
             editmode = false,
         } = this.props;
 
-        const { description, enabled } = input;
+        const {
+            name, // eslint-disable-line
+            nameError,
+            description,
+            enabled,
+        } = input;
         const configuredStrategies = input.strategies || [];
 
         return (
             <form onSubmit={onSubmit(input)}>
                 <section style={{ padding: '16px' }}>
+                    {!editmode && (
+                        <Textfield
+                            floatingLabel
+                            label="Name"
+                            name="name"
+                            disabled={editmode}
+                            required
+                            value={name}
+                            error={nameError}
+                            onBlur={v => validateName(v.target.value)}
+                            onChange={v => setValue('name', trim(v.target.value))}
+                        />
+                    )}
                     <Textfield
                         floatingLabel
                         style={{ width: '100%' }}
diff --git a/frontend/src/component/feature/view-component.jsx b/frontend/src/component/feature/view-component.jsx
index 54c5a88898..b9a0ee1931 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, CardTitle, CardText, CardActions, Switch } from 'react-mdl';
+import { Tabs, Tab, ProgressBar, Button, Card, CardTitle, CardActions, Switch } from 'react-mdl';
 import { hashHistory, Link } from 'react-router';
 
 import HistoryComponent from '../history/history-list-toggle-container';

From 35bfc3f869e58a6b5007ab579f665fa5be03f102 Mon Sep 17 00:00:00 2001
From: Corinne Krych <corinnekrych@gmail.com>
Date: Thu, 15 Feb 2018 17:09:00 +0100
Subject: [PATCH 5/6] fixt(feature): move description outside of strategies
 block

---
 .../component/feature/form-add-container.jsx  |  2 +-
 .../component/feature/form-edit-container.jsx |  4 +++
 frontend/src/component/feature/form/index.jsx | 23 +++++++-------
 .../src/component/feature/view-component.jsx  | 31 ++++++++++++++++++-
 .../src/component/feature/view-container.jsx  |  8 ++++-
 5 files changed, 54 insertions(+), 14 deletions(-)

diff --git a/frontend/src/component/feature/form-add-container.jsx b/frontend/src/component/feature/form-add-container.jsx
index d058ce0cf8..9699f49c36 100644
--- a/frontend/src/component/feature/form-add-container.jsx
+++ b/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 => {
diff --git a/frontend/src/component/feature/form-edit-container.jsx b/frontend/src/component/feature/form-edit-container.jsx
index 9b68e43b33..f75961dad4 100644
--- a/frontend/src/component/feature/form-edit-container.jsx
+++ b/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())
diff --git a/frontend/src/component/feature/form/index.jsx b/frontend/src/component/feature/form/index.jsx
index 1d2c249f22..43d6575874 100644
--- a/frontend/src/component/feature/form/index.jsx
+++ b/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,16 +59,17 @@ class AddFeatureToggleComponent extends Component {
                             onChange={v => setValue('name', trim(v.target.value))}
                         />
                     )}
-                    <Textfield
-                        floatingLabel
-                        style={{ width: '100%' }}
-                        rows={1}
-                        label="Description"
-                        required
-                        value={description}
-                        onChange={v => setValue('description', v.target.value)}
-                    />
-
+                    {!editmode && (
+                        <Textfield
+                            floatingLabel
+                            style={{ width: '100%' }}
+                            rows={1}
+                            label="Description"
+                            required
+                            value={description}
+                            onChange={v => setValue('description', v.target.value)}
+                        />
+                    )}
                     {!editmode && (
                         <div>
                             <br />
diff --git a/frontend/src/component/feature/view-component.jsx b/frontend/src/component/feature/view-component.jsx
index b9a0ee1931..b186460892 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, 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={{
diff --git a/frontend/src/component/feature/view-container.jsx b/frontend/src/component/feature/view-container.jsx
index 8310b6bf14..6827012bfd 100644
--- a/frontend/src/component/feature/view-container.jsx
+++ b/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);

From 8dbd0d4cec4e2b8a50618eec6e69efde717a866d Mon Sep 17 00:00:00 2001
From: Corinne Krych <corinnekrych@gmail.com>
Date: Thu, 15 Feb 2018 17:28:09 +0100
Subject: [PATCH 6/6] clean(feature): remove unused code

---
 frontend/src/component/feature/form-edit-container.jsx | 4 +---
 frontend/src/component/feature/form/index.jsx          | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/frontend/src/component/feature/form-edit-container.jsx b/frontend/src/component/feature/form-edit-container.jsx
index f75961dad4..eb0821f723 100644
--- a/frontend/src/component/feature/form-edit-container.jsx
+++ b/frontend/src/component/feature/form-edit-container.jsx
@@ -34,9 +34,7 @@ const prepare = (methods, dispatch) => {
                 delete s.id;
             });
         }
-        if (input.editmode) {
-            delete input.description;
-        }
+        delete input.description;
 
         // TODO: should add error handling
         requestUpdateFeatureToggle(input)(dispatch)
diff --git a/frontend/src/component/feature/form/index.jsx b/frontend/src/component/feature/form/index.jsx
index 43d6575874..4f0ec44809 100644
--- a/frontend/src/component/feature/form/index.jsx
+++ b/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' }}>