Merge branch 'dev' into feature/permalink_for_feeds_messages

* dev:
  Github issue#880, Features changes are not reflected in side panel without saving the changes -- Fixed issue with change alert being shown even after saving the changes.
  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
  Github issue#802, can add more screen -- Utilized the on the fly update of other form sections on every form change event. Updated SpecQuestion component to use dirty project value for numberOfScreens question

Author: Vikas Agarwal

src/projects/detail/components/EditProjectForm.jsx

@@ -2,11 +2,42 @@ import React, { Component, PropTypes } from 'react'
 import { withRouter } from 'react-router'
 import Modal from 'react-modal'
 import _ from 'lodash'
+import { unflatten } from 'flat'
 import update from 'react-addons-update'
 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 {
 
@@ -34,8 +65,15 @@ class EditProjectForm extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    // we receipt property updates from PROJECT_DIRTY REDUX state
-    if (nextProps.project.isDirty) return
+    // we received property updates from PROJECT_DIRTY REDUX state
+    if (nextProps.project.isDirty) {
+      this.setState({
+        // sets a new state variable with dirty project
+        // any component who wants to listen for unsaved changes in project form can listen to this state variable
+        dirtyProject : Object.assign({}, nextProps.project)
+      })
+      return
+    }
     let updatedProject = Object.assign({}, nextProps.project)
     if (this.state.isFeaturesDirty && !this.state.isSaving) {
       updatedProject = update(updatedProject, {
@@ -127,10 +165,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)
   }
@@ -143,20 +180,21 @@ class EditProjectForm extends Component {
    */
   handleChange(change) {
     // removed check for isChanged argument to fire the PROJECT_DIRTY event for every change in the form
-    this.props.fireProjectDirty(change)
+    this.props.fireProjectDirty(unflatten(change))
   }
 
 
   render() {
     const { isEdittable, sections } = this.props
-    const { project } = this.state
+    const { project, dirtyProject } = this.state
     const renderSection = (section, idx) => {
       const anySectionInvalid = _.some(this.props.sections, (s) => s.isInvalid)
       return (
         <div key={idx}>
           <SpecSection
             {...section}
             project={project}
+            dirtyProject={dirtyProject}
             sectionNumber={idx + 1}
             resetFeatures={this.onFeaturesSaveAttachedClick}
             showFeaturesDialog={this.showFeaturesDialog}
@@ -183,21 +221,17 @@ 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 }
+            value={ _.get(project, 'details.appDefinition.features', {})}
           />
-          <div onClick={ this.hideFeaturesDialog } className="feature-selection-dialog-close">
-            Save and close <Icons.XMarkIcon />
-          </div>
-        </Modal>
+        </Formsy.Form>
+        
       </div>
     )
   }

src/projects/detail/components/SpecQuestions.jsx

@@ -26,7 +26,7 @@ const getIcon = icon => {
   }
 }
 
-const SpecQuestions = ({questions, project, resetFeatures, showFeaturesDialog, isRequired}) => {
+const SpecQuestions = ({questions, project, dirtyProject, resetFeatures, showFeaturesDialog, isRequired}) => {
 
   const renderQ = (q, index) => {
     // let child = null
@@ -36,9 +36,9 @@ const SpecQuestions = ({questions, project, resetFeatures, showFeaturesDialog, i
       label: q.label,
       value: _.get(project, q.fieldName, '')
     }
-
     if (q.fieldName === 'details.appDefinition.numberScreens') {
-      const screens = _.get(project, 'details.appScreens.screens', [])
+      const p = dirtyProject ? dirtyProject : project
+      const screens = _.get(p, 'details.appScreens.screens', [])
       const definedScreens = screens.length
       _.each(q.options, (option) => {
         let maxValue = 0
@@ -145,9 +145,26 @@ const SpecQuestions = ({questions, project, resetFeatures, showFeaturesDialog, i
 }
 
 SpecQuestions.propTypes = {
+  /**
+   * Original project object for which questions are to be rendered
+   */
   project: PropTypes.object.isRequired,
+  /**
+   * Dirty project with all unsaved changes
+   */
+  dirtyProject: PropTypes.object,
+  /**
+   * Callback to be called when user clicks on Add/Edit Features button in feature picker component
+   */
   showFeaturesDialog: PropTypes.func.isRequired,
+  /**
+   * Call back to be called when user resets features from feature picker.
+   * NOTE: It seems it is not used as of now by feature picker component
+   */
   resetFeatures: PropTypes.func.isRequired,
+  /**
+   * Array of questions to be rendered. This comes from the spec template for the product
+   */
   questions: PropTypes.arrayOf(PropTypes.object).isRequired
 }
 

src/projects/detail/components/SpecSection.jsx

@@ -10,6 +10,7 @@ import { PROJECT_STATUS_DRAFT, PROJECT_NAME_MAX_LENGTH, PROJECT_REF_CODE_MAX_LEN
 const SpecSection = props => {
   const {
     project,
+    dirtyProject,
     resetFeatures,
     showFeaturesDialog,
     id,
@@ -61,6 +62,7 @@ const SpecSection = props => {
           resetFeatures={resetFeatures}
           questions={props.questions}
           project={project}
+          dirtyProject={dirtyProject}
           isRequired={props.required}
         />
       )

src/projects/reducers/project.js

@@ -1,4 +1,3 @@
-import { unflatten } from 'flat'
 import {
   LOAD_PROJECT_PENDING, LOAD_PROJECT_SUCCESS, LOAD_PROJECT_FAILURE, LOAD_DIRECT_PROJECT_SUCCESS,
   CREATE_PROJECT_PENDING, CREATE_PROJECT_SUCCESS, CREATE_PROJECT_FAILURE, CLEAR_LOADED_PROJECT,
@@ -193,9 +192,16 @@ export const projectState = function (state=initialState, action) {
     })
   }
 
-  case PROJECT_DIRTY: {
+  case PROJECT_DIRTY: {// payload contains only changed values from the project form
     return Object.assign({}, state, {
-      project: _.merge({}, state.project, unflatten(action.payload), { isDirty : true})
+      project: _.mergeWith({}, state.project, action.payload, { isDirty : true},
+        // customizer to override screens array with changed values
+        (objValue, srcValue, key) => {
+          if (key === 'screens' || key === 'features') {
+            return srcValue// srcValue contains the changed values from action payload
+          }
+        }
+      )
     })
   }