Merge pull request #126 from corinnekrych/feature.view.with.disable.toggle

fix(feature): toggle correctly display for list and update feature

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"
     />

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)}

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

@@ -27,6 +27,7 @@ ShallowWrapper {
               "name": "feature",
               "nameError": Object {},
             },
+            undefined,
           ],
         ],
       }

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,

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)

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)}