Merge pull request #2877 from maxceem/feature/individual-invitation-errors

Feature/individual invitation errors

Author: RishiRajSahu

src/api/projectMemberInvites.js

@@ -23,7 +23,16 @@ export function updateProjectMemberInvite(projectId, member) {
  */
 export function createProjectMemberInvite(projectId, member) {
   const url = `${PROJECTS_API_URL}/v4/projects/${projectId}/members/invite/`
-  return axios.post(url, { param: member})
+  return axios({
+    method: 'post',
+    url,
+    data: {
+      param: member
+    },
+    validateStatus (status) {
+      return (status >= 200 && status < 300) || status === 403
+    },
+  })
     .then(resp => {
       return resp.data.result.content
     })

src/components/TeamManagement/AutocompleteInput.jsx

@@ -41,7 +41,6 @@ class AutocompleteInput extends React.Component {
 AutocompleteInput.defaultProps = {
   placeholder: 'Enter one or more user handles',
   selectedMembers: [],
-  allMembers: [],
   disabled: false
 }
 
@@ -71,11 +70,6 @@ AutocompleteInput.propTypes = {
    * The flag if component is disabled
    */
   disabled: PropTypes.bool,
-
-  /**
-   * List of both current and invited members of project
-   */
-  allMembers: PropTypes.arrayOf(PropTypes.object)
 }
 
 export default AutocompleteInput

src/components/TeamManagement/AutocompleteInputContainer.jsx

@@ -35,7 +35,7 @@ class AutocompleteInputContainer extends React.Component {
 
   render() {
 
-    const { placeholder, currentUser, selectedMembers, disabled, allMembers} = this.props
+    const { placeholder, currentUser, selectedMembers, disabled } = this.props
 
     return (
       <AutocompleteInput
@@ -46,7 +46,6 @@ class AutocompleteInputContainer extends React.Component {
         currentUser={currentUser}
         selectedMembers={selectedMembers}
         disabled={disabled}
-        allMembers={allMembers}
       />
     )
   }

src/components/TeamManagement/ProjectManagementDialog.js

@@ -8,54 +8,95 @@ import Avatar from 'appirio-tech-react-components/components/Avatar/Avatar'
 import {getAvatarResized} from '../../helpers/tcHelpers'
 import AutocompleteInputContainer from './AutocompleteInputContainer'
 
-class Dialog extends React.Component {
+class ProjectManagementDialog extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      clearText: false,
       showAlreadyMemberError: false,
-      invitedMembers: {},
-      members: {}
+      errorMessage: null
     }
     this.onChange = this.onChange.bind(this)
+    this.showIndividualErrors = this.showIndividualErrors.bind(this)
   }
 
-  componentWillMount() {
+  componentWillReceiveProps(nextProps) {
+    const { processingInvites, selectedMembers } = this.props
+
+    if (processingInvites && !nextProps.processingInvites ) {
+      const notInvitedSelectedMembers = _.reject(selectedMembers, (selectedMember) => (
+        this.isSelectedMemberAlreadyInvited(nextProps.invites, selectedMember)
+      ))
+
+      this.props.onSelectedMembersUpdate(notInvitedSelectedMembers)
+
+      if (nextProps.error) {
+        this.showIndividualErrors(nextProps.error, notInvitedSelectedMembers)
+      }
+    }
+  }
+
+  onChange(selectedMembers) {
+    const { invites } = this.props
+
+    const present = _.some(selectedMembers, (selectedMember) => (
+      this.isSelectedMemberAlreadyInvited(invites, selectedMember)
+    ))
+
     this.setState({
-      invitedMembers: this.props.invites,
-      members: this.props.members
+      validUserText: !present,
+      showAlreadyMemberError: present,
+      errorMessage: null,
     })
+
+    this.props.onSelectedMembersUpdate(selectedMembers)
   }
 
-  onChange(selectedMembers) {
-    // If a member invited with email exists in selectedMembers
-    let present = _.some(this.state.invitedMembers, invited => _.findIndex(selectedMembers,
-      selectedMember => selectedMember.isEmail && selectedMember.label === invited.email) > -1)
-    // If a member invited with handle exists in selectedMembers
-    present = present || _.some(this.state.invitedMembers, invited => {
-      if (!invited.member) {
-        return false
-      }
-      return _.findIndex(selectedMembers,
-        selectedMember => !selectedMember.isEmail && selectedMember.label === invited.member.handle) > -1
+  isSelectedMemberAlreadyInvited(invites = [], selectedMember) {
+    return !!invites.find((invite) => (
+      invite.email && invite.email === selectedMember.label ||
+      invite.userId && this.resolveUserHandle(invite.userId) === selectedMember.label
+    ))
+  }
+
+  /**
+   * Get user handle using `allMembers` which comes from props and contains all the users
+   * which are loaded to `members.members` in the Redux store
+   *
+   * @param {Number} userId user id
+   */
+  resolveUserHandle(userId) {
+    const { allMembers } = this.props
+
+    return _.find(allMembers, { userId }).handle
+  }
+
+  showIndividualErrors(error) {
+    const uniqueMessages = _.groupBy(error.failed, 'message')
+
+    const msgs = _.keys(uniqueMessages).map((message) => {
+      const users = uniqueMessages[message].map((failed) => (
+        failed.email ? failed.email : this.resolveUserHandle(failed.userId)
+      ))
+
+      return ({
+        message,
+        users,
+      })
     })
-    // If members exist in selectedMembers
-    present = present || _.some(this.state.members, m => _.findIndex(selectedMembers,
-      selectedMember => selectedMember.label === m.handle) > -1)
+
+    const listMessages = msgs.map((m) => `${m.users.join(', ')}: ${m.message}`)
+
     this.setState({
-      validInviteText: !present,
-      showAlreadyMemberError: present
+      errorMessage: listMessages.length > 0 ? listMessages.join('\n') : null
     })
-    this.props.onSelectedMembersUpdate(selectedMembers)
   }
 
   render() {
     const {
       members, currentUser, isMember, removeMember, removeInvite,
-      onCancel, invites = [], selectedMembers, processingInvites
+      onCancel, invites = [], selectedMembers, processingInvites,
     } = this.props
     const showRemove = currentUser.isAdmin || (!currentUser.isCopilot && isMember)
-    const allMembers = [...members, ...invites.map(i => i.member)]
     let i = 0
     return (
       <Modal
@@ -156,15 +197,17 @@ class Dialog extends React.Component {
               currentUser={currentUser}
               selectedMembers={selectedMembers}
               disabled={processingInvites || (!currentUser.isAdmin && !isMember)}
-              allMembers={allMembers}
             />
             {this.state.showAlreadyMemberError && <div className="error-message">
               Project Member(s) can't be invited again. Please remove them from list.
             </div>}
+            { this.state.errorMessage  && <div className="error-message">
+              {this.state.errorMessage}
+            </div> }
             <button
               className="tc-btn tc-btn-primary tc-btn-md"
               type="submit"
-              disabled={processingInvites || !this.state.validInviteText || this.state.clearText}
+              disabled={processingInvites || this.state.showAlreadyMemberError || selectedMembers.length === 0}
               onClick={this.props.sendInvite}
             >
               Send Invite
@@ -177,15 +220,16 @@ class Dialog extends React.Component {
   }
 }
 
-Dialog.defaultProps = {
+ProjectManagementDialog.defaultProps = {
   invites: [],
   members: []
 }
 
-Dialog.propTypes = {
+ProjectManagementDialog.propTypes = {
   error: PT.oneOfType([PT.object, PT.bool]),
   currentUser: PT.object.isRequired,
   members: PT.arrayOf(PT.object).isRequired,
+  allMembers: PT.arrayOf(PT.object).isRequired,
   isMember: PT.bool.isRequired,
   onCancel: PT.func.isRequired,
   removeMember: PT.func.isRequired,
@@ -197,4 +241,4 @@ Dialog.propTypes = {
   processingInvites: PT.bool.isRequired,
 }
 
-export default Dialog
+export default ProjectManagementDialog

src/components/TeamManagement/TeamManagement.jsx

@@ -57,7 +57,7 @@ class TeamManagement extends React.Component {
       projectTeamInvites, onProjectInviteDeleteConfirm, onProjectInviteSend, deletingInvite, changeRole,
       onDeleteInvite, isShowTopcoderDialog, onShowTopcoderDialog, processingInvites, processingMembers,
       onTopcoderInviteSend, onTopcoderInviteDeleteConfirm, topcoderTeamInvites, onAcceptOrRefuse, error,
-      onSelectedMembersUpdate, selectedMembers
+      onSelectedMembersUpdate, selectedMembers, allMembers,
     } = this.props
     const currentMember = members.filter((member) => member.userId === currentUser.userId)[0]
     const modalActive = isAddingTeamMember || deletingMember || isShowJoin || showNewMemberConfirmation || deletingInvite
@@ -192,6 +192,7 @@ class TeamManagement extends React.Component {
               error={error}
               currentUser={currentUser}
               members={members}
+              allMembers={allMembers}
               isMember={!!currentMember}
               onCancel={onClickCancel}
               removeMember={removeMember}
@@ -221,6 +222,7 @@ class TeamManagement extends React.Component {
               error={error}
               currentUser={currentUser}
               members={members}
+              allMembers={allMembers}
               isMember={!!currentMember}
               onCancel={onClickCancel}
               removeMember={removeMember}
@@ -304,6 +306,11 @@ TeamManagement.propTypes = {
    */
   members: PropTypes.arrayOf(userShape).isRequired,
 
+  /**
+   * The list of all members which data is loaded client side at the moment
+   */
+  allMembers: PropTypes.arrayOf(PropTypes.object).isRequired,
+
   /**
    * The current deleting member. When defined a confirmation overlay will be displayed
    */