From 38d6494683b36e8b777149b0f2acdeca01de7a5c Mon Sep 17 00:00:00 2001
From: Corinne Krych <corinnekrych@gmail.com>
Date: Tue, 17 Apr 2018 11:23:15 +0200
Subject: [PATCH] fix(feature): toggle correctly display for list and update
 feature

---
 .../feature-list-item-component-test.jsx.snap     |  2 +-
 .../feature/feature-list-item-component.jsx       |  2 +-
 .../form-update-feature-component-test.jsx.snap   |  1 +
 .../form/form-update-feature-component.jsx        | 15 ++++++++++++---
 .../form/form-update-feature-container.jsx        |  5 ++++-
 frontend/src/component/feature/view-component.jsx |  6 +++---
 6 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/frontend/src/component/feature/__tests__/__snapshots__/feature-list-item-component-test.jsx.snap b/frontend/src/component/feature/__tests__/__snapshots__/feature-list-item-component-test.jsx.snap
index fe9c8e6a76..96acaef791 100644
--- a/frontend/src/component/feature/__tests__/__snapshots__/feature-list-item-component-test.jsx.snap
+++ b/frontend/src/component/feature/__tests__/__snapshots__/feature-list-item-component-test.jsx.snap
@@ -22,7 +22,7 @@ exports[`renders correctly with one feature 1`] = `
   >
     <react-mdl-Switch
       checked={false}
-      disabled={true}
+      disabled={false}
       onChange={[Function]}
       title="Toggle Another"
     />
diff --git a/frontend/src/component/feature/feature-list-item-component.jsx b/frontend/src/component/feature/feature-list-item-component.jsx
index 47221a1428..4db409569e 100644
--- a/frontend/src/component/feature/feature-list-item-component.jsx
+++ b/frontend/src/component/feature/feature-list-item-component.jsx
@@ -42,7 +42,7 @@ const Feature = ({
             </span>
             <span className={styles.listItemToggle}>
                 <Switch
-                    disabled={toggleFeature !== undefined}
+                    disabled={toggleFeature === undefined}
                     title={`Toggle ${name}`}
                     key="left-actions"
                     onChange={() => toggleFeature(name)}
diff --git a/frontend/src/component/feature/form/__tests__/__snapshots__/form-update-feature-component-test.jsx.snap b/frontend/src/component/feature/form/__tests__/__snapshots__/form-update-feature-component-test.jsx.snap
index 8125a56293..5a87d36f34 100644
--- a/frontend/src/component/feature/form/__tests__/__snapshots__/form-update-feature-component-test.jsx.snap
+++ b/frontend/src/component/feature/form/__tests__/__snapshots__/form-update-feature-component-test.jsx.snap
@@ -27,6 +27,7 @@ ShallowWrapper {
               "name": "feature",
               "nameError": Object {},
             },
+            undefined,
           ],
         ],
       }
diff --git a/frontend/src/component/feature/form/form-update-feature-component.jsx b/frontend/src/component/feature/form/form-update-feature-component.jsx
index b624f340ef..8311259bad 100644
--- a/frontend/src/component/feature/form/form-update-feature-component.jsx
+++ b/frontend/src/component/feature/form/form-update-feature-component.jsx
@@ -14,15 +14,23 @@ class UpdateFeatureComponent extends Component {
     }
 
     render() {
-        const { input, addStrategy, removeStrategy, updateStrategy, moveStrategy, onSubmit, onCancel } = this.props;
-
+        const {
+            input,
+            features,
+            addStrategy,
+            removeStrategy,
+            updateStrategy,
+            moveStrategy,
+            onSubmit,
+            onCancel,
+        } = this.props;
         const {
             name, // eslint-disable-line
         } = input;
         const configuredStrategies = input.strategies || [];
 
         return (
-            <form onSubmit={onSubmit(input)}>
+            <form onSubmit={onSubmit(input, features)}>
                 <section style={{ padding: '16px' }}>
                     <StrategiesSection
                         configuredStrategies={configuredStrategies}
@@ -42,6 +50,7 @@ class UpdateFeatureComponent extends Component {
 
 UpdateFeatureComponent.propTypes = {
     input: PropTypes.object,
+    features: PropTypes.array,
     setValue: PropTypes.func.isRequired,
     addStrategy: PropTypes.func.isRequired,
     removeStrategy: PropTypes.func.isRequired,
diff --git a/frontend/src/component/feature/form/form-update-feature-container.jsx b/frontend/src/component/feature/form/form-update-feature-container.jsx
index f4b0f08637..8366db1794 100644
--- a/frontend/src/component/feature/form/form-update-feature-container.jsx
+++ b/frontend/src/component/feature/form/form-update-feature-container.jsx
@@ -26,7 +26,7 @@ const mapStateToProps = createMapper({
 });
 
 const prepare = (methods, dispatch) => {
-    methods.onSubmit = input => e => {
+    methods.onSubmit = (input, features) => e => {
         e.preventDefault();
 
         if (Array.isArray(input.strategies)) {
@@ -35,6 +35,9 @@ const prepare = (methods, dispatch) => {
             });
         }
         delete input.description;
+        // take the status of the feature toggles from the central store in case `toggleFeature` function was called
+        const feat = features.find(f => f.name === input.name);
+        input.enabled = feat.enabled;
 
         // TODO: should add error handling
         requestUpdateFeatureToggle(input)(dispatch)
diff --git a/frontend/src/component/feature/view-component.jsx b/frontend/src/component/feature/view-component.jsx
index 2d287456fd..e76954bf29 100644
--- a/frontend/src/component/feature/view-component.jsx
+++ b/frontend/src/component/feature/view-component.jsx
@@ -46,13 +46,13 @@ export default class ViewFeatureToggleComponent extends React.Component {
     }
 
     getTabContent(activeTab) {
-        const { featureToggle, featureToggleName } = this.props;
+        const { features, featureToggle, featureToggleName } = this.props;
 
         if (TABS[activeTab] === TABS.history) {
             return <HistoryComponent toggleName={featureToggleName} />;
         } else if (TABS[activeTab] === TABS.strategies) {
             if (this.isFeatureView) {
-                return <EditFeatureToggle featureToggle={featureToggle} />;
+                return <EditFeatureToggle featureToggle={featureToggle} features={features} />;
             }
             return <ViewFeatureToggle featureToggle={featureToggle} />;
         } else {
@@ -165,7 +165,7 @@ export default class ViewFeatureToggleComponent extends React.Component {
                 >
                     <span style={{ paddingRight: '24px' }}>
                         <Switch
-                            disabled={this.isFeatureView}
+                            disabled={!this.isFeatureView}
                             ripple
                             checked={featureToggle.enabled}
                             onChange={() => toggleFeature(featureToggle.name)}