Merge branch 'dev' of https://github.com/appirio-tech/connect-app into dev

Author: Parth Shah

src/projects/detail/components/FeatureSelector/CustomFeatureForm.jsx

@@ -3,7 +3,7 @@ import _ from 'lodash'
 import cn from 'classnames'
 import Panel from '../../../../components/Panel/Panel'
 import DeleteFeatureModal from './DeleteFeatureModal'
-import { Formsy, TCFormFields, SwitchButton } from 'appirio-tech-react-components'
+import { Icons, Formsy, TCFormFields, SwitchButton } from 'appirio-tech-react-components'
 
 require('./FeatureForm.scss')
 
@@ -12,38 +12,41 @@ class CustomFeatureForm extends Component {
   constructor(props) {
     super(props)
     this.toggleFeature = this.toggleFeature.bind(this)
-    this.state = { showDeleteModal : false }
+    this.state = { showDeleteModal : false, editMode : false }
     this.onSave = this.onSave.bind(this)
+    this.editFeature = this.editFeature.bind(this)
     this.onDelete = this.onDelete.bind(this)
     this.onDeleteIntent = this.onDeleteIntent.bind(this)
     this.onCancelDelete = this.onCancelDelete.bind(this)
+    this.onChange = this.onChange.bind(this)
   }
 
   componentWillMount() {
     this.componentWillReceiveProps(this.props)
   }
 
   componentWillReceiveProps(nextProps) {
-    const previousData = this.state.data || {}
     this.setState({
-      data: nextProps.featureData || previousData,
-      isActive: !!nextProps.featureData
+      data: nextProps.featureData,
+      isAdded: !!nextProps.featureData,
+      isActive: !!nextProps.featureData && !nextProps.featureData.disabled,
+      showDeleteModal: false
     })
   }
 
   toggleFeature() {
-    const { removeFeature, addFeature, featureData, isEdittable } = this.props
+    const { addFeature, isEdittable } = this.props
     if (isEdittable) {
-      if (this.state.isActive) {
-        // remove feature
-        removeFeature(featureData.id)
-      } else {
-        // add feature
-        addFeature(this.state.data)
-      }
+      addFeature({ ...this.state.data, disabled: !!this.state.isActive })
     }
   }
 
+  editFeature() {
+    this.setState({
+      editMode : true
+    })
+  }
+
   onDelete(data) {
     this.props.removeFeature(data.id)
   }
@@ -59,59 +62,82 @@ class CustomFeatureForm extends Component {
   onSave(data) {
     const { featureData } = this.props
     this.props.addFeature(_.merge({
-      id: data.title.toLowerCase().replace(' ', '_'),
+      id: data.title.toLowerCase().replace(/\s/g, '_'),
       categoryId: 'custom',
       notes: ''
     }, featureData, data))
+    // assumes addFeature to be a synchronous call, otherwise it could lead to inconsistent UI state 
+    // e.g. if async addFeature fails, it would close the edit mode
+    // this call is needed here because debounce call (for notes change) is closing the edit mode if
+    // we do set the editMode in componentWillReceiveProps method
+    this.setState({ editMode : false })
+  }
+
+  onChange(fieldName, value) {
+    const { featureData } = this.props
+    // following check is needed to prevent adding the feature again after removing
+    // because forms' onChange event gets fire with only form data when we lose focus from the form
+    // alternative to this check is to put the change handler on textarea instead of form
+    if (featureData) {// feature is already added
+      const data = {}
+      data[fieldName] = value
+      this.props.updateFeature(_.merge({}, featureData, data))
+    }
   }
 
   render() {
-    const { isEdittable, onCancel, featureData } = this.props
-    const { data, isActive, showDeleteModal } = this.state
-    const submitButton = !isActive
-      ? <button type="submit" className="tc-btn tc-btn-primary tc-btn-md" disabled={!isEdittable}>Save Feature</button>
-      : <button type="submit" className="tc-btn tc-btn-default tc-btn-md" disabled={!isEdittable}>Delete Custom Feature</button>
-    const formAction = isActive ? this.onDeleteIntent : this.onSave
+    const { isEdittable, onCancel } = this.props
+    const { data, isAdded, editMode, isActive, showDeleteModal } = this.state
+    // const _debouncedOnChange = _.debounce(this.onChange, 2000, { trailing: true, maxWait: 10000 })
     const formClasses = cn('feature-form', {
       'modal-active': showDeleteModal
     })
     return (
       <Panel className={ formClasses }>
-        <div className="feature-title-row">
-          <span className="title">{ _.get(data, 'title', 'Define a new feature')}</span>
-          <SwitchButton
-            disabled={!isEdittable}
-            onChange={ this.toggleFeature }
-            name="featue-active"
-            checked={isActive ? 'checked' : null }
-          />
-        </div>
+        { (isAdded && !editMode) &&
+          <div className="feature-title-row">
+            <span className="title">{ _.get(data, 'title', 'Define a new feature')}</span>
+              <div className="feature-actions">
+                { isAdded &&
+                  <SwitchButton
+                    disabled={!isEdittable}
+                    onChange={ this.toggleFeature }
+                    name="featue-active"
+                    checked={isActive ? 'checked' : null }
+                    label="Enable Feature"
+                  />
+                }
+                <div className="separator"/>
+                <button className="clean feature-edit-action" onClick={ this.editFeature }><Icons.IconUIPencil /></button>
+                <button className="clean feature-delete-action" onClick={ this.onDeleteIntent }><Icons.IconUITrashSimple /></button>
+              </div>
+          </div>
+        }
         <div className="feature-form-content">
-          <Formsy.Form className="custom-feature-form" disabled={!isEdittable} onValidSubmit={ formAction }>
-            { !isActive &&
+          <Formsy.Form className="custom-feature-form" disabled={!isEdittable} onValidSubmit={ this.onSave }>
+            { (!isAdded || editMode)  &&
               <TCFormFields.TextInput
                 name="title"
                 label="Feature name"
                 validations="minLength:1" required
                 validationError="Feature name is required"
                 wrapperClass="row"
-                // placeholder="My awesome feature"
                 value={ _.get(data, 'title', '') }
               />
             }
-            { !isActive ?
+            { (isActive && !editMode) ?
               <TCFormFields.Textarea
-                name="description"
-                label="Feature description"
-                wrapperClass="feature-description"
-                // placeholder="Briefly describe the feature, including how it will be used, and provide examples that will help designers and developers understand it."
-                value={ _.get(data, 'description', '') }
+                name="notes"
+                label="Feature Notes"
+                wrapperClass="feature-notes"
+                value={ _.get(data, 'notes', '') }
+                onChange={ this.onChange }
               />
-              : <p className="feature-description">{ featureData.description }</p>
+              : null
             }
             <div className="feature-form-actions">
-              { !isActive && <button type="button" className="tc-btn tc-btn-default tc-btn-md" onClick={ onCancel }>Cancel</button> }
-              { submitButton }
+              { (!isAdded || editMode) && <button type="button" className="tc-btn tc-btn-default tc-btn-md" onClick={ onCancel }>Cancel</button> }
+              { (!isAdded || editMode) && <button type="submit" className="tc-btn tc-btn-primary tc-btn-md" disabled={!isEdittable}>Save Feature</button> }
             </div>
           </Formsy.Form>
         </div>

src/projects/detail/components/FeatureSelector/DeleteFeatureModal.jsx

@@ -1,6 +1,9 @@
 import React, {PropTypes} from 'react'
 
 const DeleteFeatureModal = ({ feature, onCancel, onConfirm }) => {
+  const deleteFeature = () => {
+    onConfirm(feature)
+  }
   return (
     <div className="modal">
       <div className="modal-title danger flex center">
@@ -13,7 +16,7 @@ const DeleteFeatureModal = ({ feature, onCancel, onConfirm }) => {
 
         <div className="button-area flex center">
           <button className="tc-btn tc-btn-default tc-btn-sm btn-cancel" onClick={onCancel}>Cancel</button>
-          <button className="tc-btn tc-btn-warning tc-btn-sm" onClick={onConfirm}>Delete Custom Feature</button>
+          <button className="tc-btn tc-btn-warning tc-btn-sm" onClick={ deleteFeature }>Delete Custom Feature</button>
         </div>
       </div>
     </div>

src/projects/detail/components/FeatureSelector/FeatureForm.scss

@@ -17,6 +17,8 @@
     display: flex;
     justify-content: space-between;
     margin-bottom: 4 * $base-unit;
+    padding-bottom: 2 * $base-unit;
+    border-bottom: 1px solid $tc-gray-10;
 
     .title {
       @include tc-heading;
@@ -26,9 +28,33 @@
       color: $tc-black;
       white-space: nowrap;
     }
+
+    .separator {
+      width: 1px;
+      height: 25px;
+      background-color: $tc-gray-10;
+      margin: 0px 2 * $base-unit;
+    }
+
+    .feature-actions {
+      display: flex;
+      align-items: center;
+
+      .feature-edit-action {
+        margin-right: 2 * $base-unit;
+        fill: $tc-gray-40;
+        height: 16px;
+      }
+
+      .feature-delete-action {
+        fill: $tc-gray-40;
+        height: 16px;
+      }
+    }
   }
 
   .feature-form-content {
+
     .feature-description {
       @include roboto;
       font-size: $tc-body-md;

src/projects/detail/components/FeatureSelector/FeaturePicker.jsx

@@ -263,11 +263,22 @@ class FeaturePicker extends Component {
   }
 
   addFeature(feature) {
-    const newState = update(this.state, {
-      activeFeatureCount: {$set: this.state.activeFeatureCount + 1},
-      activeFeatureList: { $push : [feature] },
-      selectedFeatureId: { $set : feature.id }
-    })
+    let newState
+    const featureIndex = _.findIndex(this.state.activeFeatureList, (f) => f.id === feature.id )
+    // if feature is already added and is custom feature, update feature
+    if (feature.categoryId === 'custom' && featureIndex >= 0) {
+      newState = update(this.state, {
+        activeFeatureCount: { $set: this.state.activeFeatureCount - 1 },
+        activeFeatureList: { $splice : [[featureIndex, 1, feature]] },
+        selectedFeatureId: { $set : feature.id }
+      })
+    } else {// add standard feature
+      newState = update(this.state, {
+        activeFeatureCount: {$set: this.state.activeFeatureCount + 1},
+        activeFeatureList: { $push : [feature] },
+        selectedFeatureId: { $set : feature.id }
+      })
+    }
     this.setState(newState)
     this.props.onSave(newState.activeFeatureList)
   }
@@ -277,7 +288,9 @@ class FeaturePicker extends Component {
     const idx = _.findIndex(this.state.activeFeatureList, f => f.id === featureId )
     const newState = update(this.state, {
       activeFeatureCount: {$set: this.state.activeFeatureCount - 1},
-      activeFeatureList: { $splice: [[idx, 1]] }
+      activeFeatureList: { $splice: [[idx, 1]] },
+      showCutsomFeatureForm: { $set : false },
+      selectedFeatureId: { $set : null }
     })
     this.setState(newState)
     this.props.onSave(newState.activeFeatureList)

src/projects/detail/components/FeatureSelector/FlattenedFeatureList.jsx

@@ -10,6 +10,7 @@ const FlattenedFeatureList = ({ addedFeatures }) => {
   if (addedFeatures) {
     childrenDom = []
     addedFeatures.map((f, idx) => {
+      if (f.disabled) return
       const feature = f.categoryId === 'custom' ? f : allFeaturesMap[f.id]
       if (feature.categoryId === 'custom') {
         feature.icon = require('./images/custom-features.svg')
@@ -19,7 +20,7 @@ const FlattenedFeatureList = ({ addedFeatures }) => {
           {feature.icon && <div className="icon-col">{ <img src={feature.icon} /> }</div>}
           <div className="content-col">
             <h4>{ feature.title }</h4>
-            <p>{ feature.description }</p>
+            <p>{ feature.categoryId === 'custom' ? feature.notes : feature.description }</p>
           </div>
         </div>
       )

src/projects/detail/components/FeatureSelector/PickerFeatureList.jsx

@@ -20,7 +20,7 @@ class PickerFeatureList extends Component {
       allFeatures = _.filter(activeFeatureList, f => f.categoryId === id)
     }
     const renderFeature = (feature, idx) => {
-      const isActive = _.findIndex(activeFeatureList, f => f.id === feature.id) > -1
+      const isActive = _.findIndex(activeFeatureList, f => f.id === feature.id) > -1 && !feature.disabled
       const featureClasses = classNames('feature-list-feature', {
         'active-feature' : feature.id === selectedFeatureId,
         'selected-feature' : isActive