Github issue#880, Features changes are not reflected in side panel without saving the changes

-- Initial commit to update features value in formsy form model

Author: Vikas Agarwal

src/projects/detail/components/EditProjectForm.jsx

@@ -7,6 +7,36 @@ import FeaturePicker from './FeatureSelector/FeaturePicker'
 import { Formsy, Icons } from 'appirio-tech-react-components'
 
 import SpecSection from './SpecSection'
+import { HOC as hoc } from 'formsy-react'
+
+const FeaturePickerModal = ({ project, isEdittable, showFeaturesDialog, hideFeaturesDialog, saveFeatures, setValue }) => {
+  const setFormValue = (features, featureSeeAttached=false) => {
+    const featureObj = {
+      value: features,
+      seeAttached: featureSeeAttached
+    }
+    setValue(featureObj)
+    saveFeatures(features, featureSeeAttached)
+  }
+  return (
+    <Modal
+      isOpen={ showFeaturesDialog }
+      className="feature-selection-dialog"
+      overlayClassName="feature-selection-dialog-overlay"
+      onRequestClose={ hideFeaturesDialog }
+    >
+      <FeaturePicker
+        features={ _.get(project, 'details.appDefinition.features.value', []) }
+        isEdittable={isEdittable} onSave={ setFormValue }
+      />
+      <div onClick={ hideFeaturesDialog } className="feature-selection-dialog-close">
+        Save and close <Icons.XMarkIcon />
+      </div>
+    </Modal>
+  )
+}
+
+const FeaturePickerFormField = hoc(FeaturePickerModal)
 
 class EditProjectForm extends Component {
 
@@ -128,9 +158,9 @@ class EditProjectForm extends Component {
 
   submit(model) {
     console.log('submit', this.isChanged())
-    if (this.state.isFeaturesDirty) {
-      model.details.appDefinition.features = this.state.project.details.appDefinition.features
-    }
+    // if (this.state.isFeaturesDirty) {
+    //   model.details.appDefinition.features = this.state.project.details.appDefinition.features
+    // }
     this.setState({isSaving: true })
     this.props.submitHandler(model)
   }
@@ -183,21 +213,16 @@ class EditProjectForm extends Component {
           onChange={ this.handleChange }
         >
           {sections.map(renderSection)}
-        </Formsy.Form>
-        <Modal
-          isOpen={ this.state.showFeaturesDialog }
-          className="feature-selection-dialog"
-          overlayClassName="feature-selection-dialog-overlay"
-          onRequestClose={ this.hideFeaturesDialog }
-        >
-          <FeaturePicker
-            features={ _.get(project, 'details.appDefinition.features.value', []) }
-            isEdittable={isEdittable} onSave={ this.saveFeatures }
+          <FeaturePickerFormField
+            name='details.appDefinition.features'
+            project={ project }
+            isEdittable={ isEdittable }
+            showFeaturesDialog={ this.state.showFeaturesDialog }
+            hideFeaturesDialog={ this.hideFeaturesDialog }
+            saveFeatures={ this.saveFeatures }
           />
-          <div onClick={ this.hideFeaturesDialog } className="feature-selection-dialog-close">
-            Save and close <Icons.XMarkIcon />
-          </div>
-        </Modal>
+        </Formsy.Form>
+        
       </div>
     )
   }