Github issue #346 [Project Dashboard]There is no confirmation when assigning owner

-- Added modal confirmation before adding the first owner

Author: vikasrohit

src/components/TeamManagement/AddTeamMember.jsx

@@ -2,14 +2,15 @@ import React, {PropTypes} from 'react'
 import AutoCompleteInput from './AutoCompleteInput'
 import cn from 'classnames'
 import { Icons } from 'appirio-tech-react-components'
+import { PROJECT_ROLE_CUSTOMER } from '../../config/constants'
 
 
 const { XMarkIcon } = Icons
 
 const AddTeamMember = (props) => {
   const {
     isAddingTeamMember, onAddNewMember, onToggleAddTeamMember, onKeywordChange, selectedNewMember, error,
-    filterType, currentUser, onFilterTypeChange
+    filterType, currentUser, onFilterTypeChange, onToggleNewMemberConfirm, owner
   } = props
   const onTypeChangeCustomer = () => onFilterTypeChange('customer')
   const onTypeChangeCopilot = () => onFilterTypeChange('copilot')
@@ -18,6 +19,11 @@ const AddTeamMember = (props) => {
     onToggleAddTeamMember(false)
   }
   const onConfirmAddMember = () => {
+    // if adding a customer and there is no owner yet for the project
+    if(filterType === PROJECT_ROLE_CUSTOMER && !owner) {
+      onToggleNewMemberConfirm(true)
+      return
+    }
     onAddNewMember()
     onToggleAddTeamMember(false)
   }

src/components/TeamManagement/NewMemberConfirmModal.jsx

@@ -0,0 +1,27 @@
+import React, {PropTypes} from 'react'
+
+const NewMemberConfirmModal = ({ onCancel, onConfirm }) => {
+  return (
+    <div className="modal">
+      <div className="modal-title danger">
+        You are about to change the owner
+      </div>
+      <div className="modal-body">
+        <p className="message">
+          You are adding a customer to the team which would make them owner. This can not be undone by you later.
+        </p>
+        <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}>Add Owner</button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+NewMemberConfirmModal.propTypes = {
+  onCancel: PropTypes.func.isRequired,
+  onConfirm: PropTypes.func.isRequired
+}
+
+export default NewMemberConfirmModal

src/components/TeamManagement/TeamManagement.jsx

@@ -8,6 +8,7 @@ import Panel from '../Panel/Panel'
 import DeleteModal from './DeleteModal'
 import OwnerModal from './OwnerModal'
 import AddTeamMember from './AddTeamMember'
+import NewMemberConfirmModal from './NewMemberConfirmModal'
 import Join from './Join'
 import { PROJECT_ROLE_MANAGER, PROJECT_ROLE_CUSTOMER } from '../../config/constants'
 const userShape = PropTypes.shape({
@@ -37,18 +38,26 @@ const calcMemberPriority = m => {
 const TeamManagement = (props) => {
   const {
     currentUser, members, deletingMember, isAddingTeamMember, onMemberDeleteConfirm, onMemberDelete, isShowJoin,
-    newOwner, onChangeOwner, onChangeOwnerConfirm, onToggleAddTeamMember
+    newOwner, onChangeOwner, onChangeOwnerConfirm, onToggleAddTeamMember, showNewMemberConfirmation, onAddNewMember,
+    onToggleNewMemberConfirm, onKeywordChange
   } = props
   const currentMember = members.filter((member) => member.userId === currentUser.userId)[0]
   const owner = members.filter((member) => member.isPrimary && member.isCustomer)[0]
-  const modalActive = isAddingTeamMember || deletingMember || isShowJoin
+  const modalActive = isAddingTeamMember || deletingMember || isShowJoin || showNewMemberConfirmation
   const canJoin = !currentMember && (currentUser.isCopilot || currentUser.isManager)
 
   const sortedMembers = _.sortBy(members, [(member) => {
     return calcMemberPriority(member)
   }])
 
-
+  const _onAddNewMember = () => {
+    onToggleNewMemberConfirm(false)
+    onAddNewMember()
+  }
+  const _onAddMemberCancel = () => {
+    onKeywordChange('')
+    onToggleNewMemberConfirm(false)
+  }
   return (
     <div className="team-management">
       <Panel className={cn({'modal-active': modalActive})}>
@@ -105,7 +114,9 @@ const TeamManagement = (props) => {
         })}
 
         {canJoin && <Join {...props} isCopilot={currentUser.isCopilot} owner={owner} />}
-        {currentMember && <AddTeamMember {...props} />}
+        {currentMember && <AddTeamMember {...props} owner={owner} />}
+
+        { showNewMemberConfirmation && <NewMemberConfirmModal onConfirm={ _onAddNewMember } onCancel={ _onAddMemberCancel } />}
       </Panel>
     </div>
   )

src/projects/detail/containers/TeamManagementContainer.jsx

@@ -24,6 +24,7 @@ class TeamManagementContainer extends Component {
     this.onJoinConfirm = this.onJoinConfirm.bind(this)
     this.onChangeOwnerConfirm = this.onChangeOwnerConfirm.bind(this)
     this.onFilterTypeChange = this.onFilterTypeChange.bind(this)
+    this.onToggleNewMemberConfirm = this.onToggleNewMemberConfirm.bind(this)
   }
 
   componentWillMount() {
@@ -109,7 +110,8 @@ class TeamManagementContainer extends Component {
   }
 
   onAddNewMember() {
-    const { filterType, selectedNewMember } = this.state
+    const { allMembers } = this.props
+    const { filterType, selectedNewMember, showNewMemberConfirmation } = this.state
     const userId = selectedNewMember.userId
     this.props.addProjectMember(
       this.props.projectId, {
@@ -121,11 +123,14 @@ class TeamManagementContainer extends Component {
       keyword: '',
       selectedNewMember: null
     })
-
   }
 
   onToggleAddTeamMember(isAddingTeamMember) {
-    this.setState({isAddingTeamMember, error : null})
+    this.setState({ isAddingTeamMember, error : null })
+  }
+
+  onToggleNewMemberConfirm(showNewMemberConfirmation) {
+    this.setState({ showNewMemberConfirmation, isAddingTeamMember : false })
   }
 
   onMemberDeleteConfirm(member) {
@@ -188,6 +193,7 @@ class TeamManagementContainer extends Component {
           onKeywordChange={this.onKeywordChange}
           onSelectNewMember={this.onSelectNewMember}
           onAddNewMember={this.onAddNewMember}
+          onToggleNewMemberConfirm={ this.onToggleNewMemberConfirm }
           onToggleAddTeamMember={this.onToggleAddTeamMember}
           onMemberDeleteConfirm={this.onMemberDeleteConfirm}
           onJoinConfirm={this.onJoinConfirm}