Merge pull request #3807 from appirio-tech/feature/restful-invites-and-masked-email

Restful Invites + PII

Author: maxceem

src/api/projectMemberInvites.js

@@ -4,15 +4,27 @@ import { PROJECTS_API_URL } from '../config/constants'
 /**
  * Update project member invite based on project's id & given member
  * @param  {integer} projectId unique identifier of the project
- * @param  {object}  member invite to update
+ * @param  {integer} inviteId unique identifier of the invite
+ * @param  {string}  status the new status for invitation
  * @return {object}  project member invite returned by api
  */
-export function updateProjectMemberInvite(projectId, member) {
-  const url = `${PROJECTS_API_URL}/v5/projects/${projectId}/members/invite/`
-  return axios.put(url, member)
+export function updateProjectMemberInvite(projectId, inviteId, status) {
+  const url = `${PROJECTS_API_URL}/v5/projects/${projectId}/invites/${inviteId}`
+  return axios.patch(url, { status })
     .then(resp => resp.data)
 }
 
+/**
+ * Delete project member invite based on project's id & given invite's id
+ * @param  {integer} projectId unique identifier of the project
+ * @param  {integer}  inviteId unique identifier of the invite
+ * @return {object}  project member invite returned by api
+ */
+export function deleteProjectMemberInvite(projectId, inviteId) {
+  const url = `${PROJECTS_API_URL}/v5/projects/${projectId}/invites/${inviteId}`
+  return axios.delete(url)
+}
+
 /**
  * Create a project member invite based on project's id & given member
  * @param  {integer} projectId unique identifier of the project
@@ -21,7 +33,7 @@ export function updateProjectMemberInvite(projectId, member) {
  */
 export function createProjectMemberInvite(projectId, member) {
   const fields = 'id,projectId,userId,email,role,status,createdAt,updatedAt,createdBy,updatedBy,handle'
-  const url = `${PROJECTS_API_URL}/v5/projects/${projectId}/members/invite/?fields=` + encodeURIComponent(fields)
+  const url = `${PROJECTS_API_URL}/v5/projects/${projectId}/invites/?fields=` + encodeURIComponent(fields)
   return axios({
     method: 'post',
     url,
@@ -35,7 +47,7 @@ export function createProjectMemberInvite(projectId, member) {
 
 export function getProjectMemberInvites(projectId) {
   const fields = 'id,projectId,userId,email,role,status,createdAt,updatedAt,createdBy,updatedBy,handle'
-  const url = `${PROJECTS_API_URL}/v5/projects/${projectId}/members/invites/?fields=`
+  const url = `${PROJECTS_API_URL}/v5/projects/${projectId}/invites/?fields=`
     + encodeURIComponent(fields)
   return axios.get(url)
     .then( resp => {
@@ -49,6 +61,6 @@ export function getProjectMemberInvites(projectId) {
  * @return {object}  project member invite returned by api
  */
 export function getProjectInviteById(projectId) {
-  return axios.get(`${PROJECTS_API_URL}/v5/projects/${projectId}/members/invite/`)
+  return axios.get(`${PROJECTS_API_URL}/v5/projects/${projectId}/invites`)
     .then(resp => resp.data)
 }

src/components/TeamManagement/ProjectManagementDialog.js

@@ -57,28 +57,16 @@ class ProjectManagementDialog extends React.Component {
   isSelectedMemberAlreadyInvited(projectTeamInvites = [], selectedMember) {
     return !!projectTeamInvites.find((invite) => (
       (invite.email && compareEmail(invite.email, selectedMember.label)) ||
-      (invite.userId && compareHandles(this.resolveUserHandle(invite.userId), selectedMember.label))
+      (invite.userId && compareHandles(invite.handle, 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 _.get(_.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)
+        failed.email ? failed.email : failed.handle
       ))
 
       return ({

src/components/TeamManagement/TeamManagement.scss

@@ -175,6 +175,7 @@
             @include roboto-bold;
             color: $tc-black;
             font-size: $tc-label-lg;
+            line-height: 20px;
             max-width: calc(100% - 60px);
             flex: 1;
             overflow: hidden;

src/components/TeamManagement/TopcoderManagementDialog.js

@@ -114,28 +114,16 @@ class TopcoderManagementDialog extends React.Component {
   isSelectedMemberAlreadyInvited(topcoderTeamInvites = [], selectedMember) {
     return !!topcoderTeamInvites.find((invite) => (
       (invite.email && compareEmail(invite.email, selectedMember.label)) ||
-      (invite.userId && compareHandles(this.resolveUserHandle(invite.userId), selectedMember.label))
+      (invite.userId && compareHandles(invite.handle, 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 _.get(_.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)
+        failed.email ? failed.email : failed.handle
       ))
 
       return ({
@@ -276,7 +264,7 @@ class TopcoderManagementDialog extends React.Component {
               const approve = () => {
                 this.setState(prevState => ({ processingInviteRequestIds: [ ...prevState.processingInviteRequestIds, invite.id ] }))
                 approveOrDecline({
-                  userId: invite.userId,
+                  id: invite.id,
                   status: 'request_approved'
                 }).then(() => {
                   this.setState(prevState => ({ processingInviteRequestIds: _.xor(prevState.processingInviteRequestIds, [invite.id]) }))
@@ -285,7 +273,7 @@ class TopcoderManagementDialog extends React.Component {
               const decline = () => {
                 this.setState(prevState => ({ processingInviteRequestIds: [ ...prevState.processingInviteRequestIds, invite.id ] }))
                 approveOrDecline({
-                  userId: invite.userId,
+                  id: invite.id,
                   status: 'request_rejected'
                 }).then(() => {
                   this.setState(prevState => ({ processingInviteRequestIds: _.xor(prevState.processingInviteRequestIds, [invite.id]) }))

src/projects/actions/project.js

@@ -133,10 +133,19 @@ export function loadProject(projectId) {
 }
 
 export function loadProjectInvite(projectId) {
-  return (dispatch) => {
+  return (dispatch, getState) => {
+    const loadUserState = getState().loadUser
     return dispatch({
       type: LOAD_PROJECT_MEMBER_INVITE,
       payload: getProjectInviteById(projectId)
+        .then((invites) => {
+          if (loadUserState.isLoggedIn && loadUserState.user) {
+            const user = loadUserState.user
+            return Promise.resolve({ invites, currentUserId: user.userId, currentUserEmail: user.email })
+          } else {
+            return Promise.resolve(invites)
+          }
+        })
     })
   }
 

src/projects/actions/projectMember.js

@@ -4,10 +4,10 @@ import { addProjectMember as addMember,
   loadMemberSuggestions as loadMemberSuggestionsAPI
 } from '../../api/projectMembers'
 import { createProjectMemberInvite as createProjectMemberInvite,
-  updateProjectMemberInvite as updateProjectMemberInvite
+  updateProjectMemberInvite as updateProjectMemberInvite,
+  deleteProjectMemberInvite as deleteProjectMemberInvite,
 } from '../../api/projectMemberInvites'
 import { loadProjectMember, loadProjectMembers, loadProjectMemberInvites } from './project'
-import { loadMembersByHandle } from '../../actions/members'
 
 import {ADD_PROJECT_MEMBER, REMOVE_PROJECT_MEMBER, UPDATE_PROJECT_MEMBER,
   LOAD_MEMBER_SUGGESTIONS,
@@ -17,7 +17,6 @@ import {ADD_PROJECT_MEMBER, REMOVE_PROJECT_MEMBER, UPDATE_PROJECT_MEMBER,
   INVITE_CUSTOMER,
   ACCEPT_OR_REFUSE_INVITE,
   PROJECT_ROLE_CUSTOMER,
-  PROJECT_MEMBER_INVITE_STATUS_CANCELED,
   CLEAR_MEMBER_SUGGESTIONS,
   ACCEPT_OR_REFUSE_INVITE_FAILURE,
   ES_REINDEX_DELAY,
@@ -95,20 +94,17 @@ function inviteMembersWithData(dispatch, projectId, emailIds, handles, role) {
   return new Promise((resolve, reject) => {
     // remove `@` from handles before making a request to the server as server may not support format with `@`
     const clearedHandles = handles ? handles.map(handle => handle.replace(/^@/, '')) : []
-    return dispatch(loadMembersByHandle(clearedHandles))
-      .then(({ value }) => {
-        const req = {}
-        if(value && value.length > 0) {
-          req.userIds = value.map(member => member.userId)
-        }
-        if(emailIds && emailIds.length > 0) {
-          req.emails = emailIds
-        }
-        req.role = role
-        createProjectMemberInvite(projectId, req)
-          .then((res) => resolve(res))
-          .catch(err => reject(err))
-      })
+    const req = {}
+    if(clearedHandles && clearedHandles.length > 0) {
+      req.handles = clearedHandles
+    }
+    if(emailIds && emailIds.length > 0) {
+      req.emails = emailIds
+    }
+    req.role = role
+    createProjectMemberInvite(projectId, req)
+      .then((res) => resolve(res))
+      .catch(err => reject(err))
   })
 }
 
@@ -121,26 +117,12 @@ export function inviteTopcoderMembers(projectId, items) {
   }
 }
 
-function deleteTopcoderMemberInviteWithData(projectId, invite) {
-  return new Promise((resolve, reject) => {
-    const req = {}
-    if(invite.item.userId) {
-      req.userId = invite.item.userId
-    } else {
-      req.email = invite.item.email
-    }
-    req.status = PROJECT_MEMBER_INVITE_STATUS_CANCELED
-    updateProjectMemberInvite(projectId, req)
-      .then((res) => resolve(res))
-      .catch(err => reject(err))
-  })
-}
-
 export function deleteTopcoderMemberInvite(projectId, invite) {
   return (dispatch) => {
     dispatch({
       type: REMOVE_TOPCODER_MEMBER_INVITE,
-      payload: deleteTopcoderMemberInviteWithData(projectId, invite)
+      payload: deleteProjectMemberInvite(projectId, invite.item.id),
+      meta: { inviteId: invite.item.id }
     })
   }
 }
@@ -149,7 +131,8 @@ export function deleteProjectInvite(projectId, invite) {
   return (dispatch) => {
     dispatch({
       type: REMOVE_CUSTOMER_INVITE,
-      payload: deleteTopcoderMemberInviteWithData(projectId, invite)
+      payload: deleteProjectMemberInvite(projectId, invite.item.id),
+      meta: { inviteId: invite.item.id }
     })
   }
 }
@@ -170,10 +153,12 @@ export function inviteProjectMembers(projectId, emailIds, handles) {
  * @param {Object} currentUser current user info
  */
 export function acceptOrRefuseInvite(projectId, item, currentUser) {
-  return (dispatch) => {
+  return (dispatch, getState) => {
+    const projectState = getState().projectState
+    const inviteId = item.id ? item.id : projectState.userInvitationId
     return dispatch({
       type: ACCEPT_OR_REFUSE_INVITE,
-      payload: updateProjectMemberInvite(projectId, item).then((response) =>
+      payload: updateProjectMemberInvite(projectId, inviteId, item.status).then((response) =>
         // we have to add delay before applying the result of accepting/declining invitation
         // as it takes some time for the update to be reindexed in ES so the new state is reflected
         // everywhere

src/projects/detail/ProjectDetail.jsx

@@ -199,8 +199,7 @@ class ProjectDetail extends Component {
       isUserAcceptedInvitation,
     })
     acceptOrRefuseInvite(this.props.match.params.projectId, {
-      userId: this.props.currentUserId,
-      email: this.props.currentUserEmail,
+      id: this.props.userInvitationId,
       status: isUserAcceptedInvitation ? PROJECT_MEMBER_INVITE_STATUS_ACCEPTED : PROJECT_MEMBER_INVITE_STATUS_REFUSED
     })
       .then(() => {
@@ -252,7 +251,7 @@ class ProjectDetail extends Component {
       return (<LoadingIndicator />)
     }
     return (
-      !showUserInvited?
+      !(showUserInvited || this.shouldForceCallAcceptRefuseRequest(this.props))?
         <EnhancedProjectDetailView
           {...this.props}
           currentMemberRole={currentMemberRole}
@@ -298,7 +297,8 @@ const mapStateToProps = ({projectState, projectDashboard, loadUser, productsTime
     productsTimelines,
     allProductTemplates: templates.productTemplates,
     currentUserRoles: loadUser.user.roles,
-    showUserInvited: projectState.showUserInvited
+    showUserInvited: projectState.showUserInvited,
+    userInvitationId: projectState.userInvitationId
   }
 }
 

src/projects/list/components/Projects/Projects.jsx

@@ -203,6 +203,7 @@ class Projects extends Component {
    * @param {Bool} isAccept is accept invite
    */
   callInviteRequest(project, isAccept) {
+    const { currentUser } = this.props
     const setIsAcceptingInvite = (isAccepting) => {
       const { isAcceptingInvite } = this.state
 
@@ -216,11 +217,15 @@ class Projects extends Component {
 
     setIsAcceptingInvite(true)
 
+    const invite = _.find(project.invites, m => ((m.userId === currentUser.userId || m.email === currentUser.email) && !m.deletedAt && m.status === 'pending'))
+    if (!invite) {
+      return
+    }
+
     this.props.acceptOrRefuseInvite(project.id, {
-      userId: this.props.currentUser.userId,
-      email: this.props.currentUser.email,
+      id: invite.id,
       status: isAccept ? PROJECT_MEMBER_INVITE_STATUS_ACCEPTED : PROJECT_MEMBER_INVITE_STATUS_REFUSED
-    }, this.props.currentUser).then(() => {
+    }, currentUser).then(() => {
       setIsAcceptingInvite(false)
     }) .catch((err) => {
       // if we fail to accept invite

src/projects/reducers/project.js

@@ -51,6 +51,7 @@ const initialState = {
   phasesNonDirty: null,
   isLoadingPhases: false,
   showUserInvited: false,
+  userInvitationId: null,
   phasesStates: {} // controls opened phases and tabs of the phases
 }
 
@@ -206,8 +207,14 @@ export const projectState = function (state=initialState, action) {
     })
 
   case LOAD_PROJECT_MEMBER_INVITE_SUCCESS: {
+    const { invites, currentUserId, currentUserEmail } = action.payload
+    let invite
+    if (invites && invites.length > 0) {
+      invite = _.find(invites, m => ((m.userId === currentUserId || m.email === currentUserEmail) && !m.deletedAt && m.status === 'pending'))
+    }
     return Object.assign({}, state, {
-      showUserInvited: true
+      showUserInvited: !!invite,
+      userInvitationId: invite ? invite.id : null
     })
   }
 
@@ -697,20 +704,14 @@ export const projectState = function (state=initialState, action) {
     return newState
   }
 
-  case REMOVE_CUSTOMER_INVITE_SUCCESS: {
-    const newState = Object.assign({}, state)
-    _.remove(newState.project.invites, i => action.payload.id === i.id)
-    newState.projectNonDirty.invites = newState.project.invites
-    newState.processingInvites = false
-    return newState
-  }
-
+  case REMOVE_CUSTOMER_INVITE_SUCCESS:
   case REMOVE_TOPCODER_MEMBER_INVITE_SUCCESS: {
-    const newState = Object.assign({}, state)
-    _.remove(newState.project.invites, i => action.payload.id === i.id)
-    newState.projectNonDirty.invites = newState.project.invites
-    newState.processingInvites = false
-    return newState
+    const idx = _.findIndex(state.project.invites, { id: action.meta.inviteId })
+    return update(state, {
+      processingInvites: { $set : false },
+      project: { invites: { $splice: [[idx, 1]] } },
+      projectNonDirty: { invites: { $splice: [[idx, 1]] } }
+    })
   }
 
   case UPDATE_PROJECT_MEMBER_SUCCESS: {