Fix bugs related to scope change request

src/projects/detail/components/Accordion/Accordion.jsx

@@ -75,14 +75,28 @@ class Accordion extends React.Component {
   }
 
   componentDidMount() {
-    const { children } = this.props
+    const { name, value } = this.getFormControlValue(this.props)
+    this.updateValue(name, value)
+  }
+
+  componentDidUpdate(oldProps) {
+    if (this.props.isFormReset && !oldProps.isFormReset) {
+      const { name, value } = this.getFormControlValue(this.props)
+      this.updateValue(name, value)
+    }
+  }
+
+  getFormControlValue(props) {
+    let name
+    let value
 
-    // find formzy controls which have `value` property and get initial value for `value`
-    React.Children.forEach(children, (listItem) => {
+    // find formzy controls which have `value` property and get initial value
+    React.Children.forEach(props.children, (listItem) => {
       React.Children.forEach(listItem.props.children, (control) => {
-        this.updateValue(control.props.name, control.props.value)
+        ({ name, value } = control.props)
       })
     })
+    return { name, value }
   }
 
   toggle(evt) {

src/projects/detail/components/ScopeChangeRequest/ScopeChangeRequest.jsx

@@ -57,6 +57,30 @@ class ScopeChangeRequest extends React.Component {
     return fieldDescriptionObject.summaryTitle || fieldDescriptionObject.title
   }
 
+  /*
+    Gets the readable labels (E.g. "Banking or Financial Services") for the values (E.g. finserv)
+    using the field key (E.g. details.appDefinition.mobilityTestingType)
+  */
+  deduceValueLabel(template, invertedScopeFieldPaths, fieldkey, value) {
+    const key = invertedScopeFieldPaths[`details.${fieldkey}`].replace(/\.fieldName$/, '')
+    const fieldDescriptionObject = _.get(template, key)
+
+    // We can deduce the label only for predefined values. Otherwise, fall back to actual value entered.
+    if (fieldDescriptionObject.options) {
+      const valueLabelMap = _.keyBy(fieldDescriptionObject.options, o => o.value)
+      const getLabel = option => option.label || option.title
+
+      // Checkbox like questions result in an array. Radio button like questions result in premitive value
+      if (value instanceof Array) {
+        return value.map(v => getLabel(valueLabelMap[v]))
+      } else {
+        return getLabel(valueLabelMap[value])
+      }
+    } else {
+      return value
+    }
+  }
+
   /*
     Fieldnames from the template holds the full property path for values in the form
     e.g. "details.appDefinition.numberScreens" could be the full property path for the value of "number of screens"
@@ -98,7 +122,8 @@ class ScopeChangeRequest extends React.Component {
       const oldVal = _.get(oldScope, diffKey)
       const label = this.deduceFieldLabel(template, invertedScopeFieldPaths, diffKey)
 
-      const formatValue = value => (_.isEmpty(value) ? '(empty)' : JSON.stringify(value, null, ' '))
+      const valueToLabel = value => this.deduceValueLabel(template, invertedScopeFieldPaths, diffKey, value)
+      const formatValue = value => (_.isEmpty(value) ? '(empty)' : JSON.stringify(valueToLabel(value), null, ' '))
 
       return {
         label,

src/projects/detail/components/SpecQuestions.jsx

@@ -380,6 +380,7 @@ class SpecQuestions extends React.Component {
       productTemplates,
       productCategories,
       isCreation,
+      isProjectDirty
     } = this.props
     const { skillOptions } = this.state
 
@@ -406,6 +407,7 @@ class SpecQuestions extends React.Component {
                 title={q.summaryTitle || q.title}
                 type={q.type}
                 question={q}
+                isFormReset={!isProjectDirty}
                 options={q.options || skillOptions || buildAddonsOptions(q, productTemplates, productCategories)}
               >
                 {this.renderQ(q, index)}

src/projects/reducers/project.js

@@ -379,7 +379,16 @@ export const projectState = function (state=initialState, action) {
       state.project.scopeChangeRequests,
       action.payload
     )
-    const updatedDetails = _.merge({}, state.project.details, _.cloneDeep(action.payload.newScope))
+    const updatedDetails = _.mergeWith(
+      {},
+      state.project.details,
+      _.cloneDeep(action.payload.newScope),
+      (_objValue, srcValue) => {
+        if (_.isArray(srcValue)) {
+          return srcValue
+        }
+      }
+    )
     const project = update(state.project, {
       scopeChangeRequests: {
         $set: updatedScopeChangeRequests