feat: copilot invitation with email

Author: hentrymartin

config/constants/development.js

@@ -22,6 +22,7 @@ module.exports = {
   PROJECT_API_URL: `${DEV_API_HOSTNAME}/v5/projects`,
   GROUPS_API_URL: `${DEV_API_HOSTNAME}/v5/groups`,
   TERMS_API_URL: `${DEV_API_HOSTNAME}/v5/terms`,
+  MEMBERS_API_URL: `${DEV_API_HOSTNAME}/v5/members`,
   RESOURCES_API_URL: `${DEV_API_HOSTNAME}/v5/resources`,
   RESOURCE_ROLES_API_URL: `${DEV_API_HOSTNAME}/v5/resource-roles`,
   SUBMISSIONS_API_URL: `${DEV_API_HOSTNAME}/v5/submissions`,

config/constants/production.js

@@ -21,6 +21,7 @@ module.exports = {
   PROJECT_API_URL: `${PROD_API_HOSTNAME}/v5/projects`,
   GROUPS_API_URL: `${PROD_API_HOSTNAME}/v5/groups`,
   TERMS_API_URL: `${PROD_API_HOSTNAME}/v5/terms`,
+  MEMBERS_API_URL: `${PROD_API_HOSTNAME}/v5/members`,
   RESOURCES_API_URL: `${PROD_API_HOSTNAME}/v5/resources`,
   RESOURCE_ROLES_API_URL: `${PROD_API_HOSTNAME}/v5/resource-roles`,
   SUBMISSIONS_API_URL: `${PROD_API_HOSTNAME}/v5/submissions`,

src/components/Users/index.js

@@ -221,6 +221,7 @@ class Users extends Component {
             <UserAddModalContent
               projectId={this.state.projectOption.value}
               addNewProjectMember={this.props.addNewProjectMember}
+              onMemberInvited={this.props.addNewProjectInvite}
               onClose={this.resetAddUserState}
             />
           )

src/components/Users/invite-user.modal.js

@@ -55,7 +55,10 @@ const InviteUserModalContent = ({ projectId, onClose, onMemberInvited, projectMe
 
     try {
       // api restriction: ONLY "customer" role can be invited via email
-      const { success: invitations = [], failed } = await inviteUserToProject(projectId, emailToInvite, PROJECT_ROLES.CUSTOMER)
+      const { success: invitations = [], failed } = await inviteUserToProject(projectId, {
+        emails: [emailToInvite],
+        role: PROJECT_ROLES.CUSTOMER
+      })
 
       if (failed) {
         const error = get(failed, '0.message', 'Unable to invite user')

src/components/Users/user-add.modal.js

@@ -6,15 +6,15 @@ import Modal from '../Modal'
 import SelectUserAutocomplete from '../SelectUserAutocomplete'
 import { PROJECT_ROLES } from '../../config/constants'
 import PrimaryButton from '../Buttons/PrimaryButton'
-import { addUserToProject } from '../../services/projects'
+import { addUserToProject, inviteUserToProject } from '../../services/projects'
 
 import styles from './Users.module.scss'
 
 const theme = {
   container: styles.modalContainer
 }
 
-const UserAddModalContent = ({ projectId, addNewProjectMember, onClose }) => {
+const UserAddModalContent = ({ projectId, addNewProjectMember, onMemberInvited, onClose }) => {
   const [userToAdd, setUserToAdd] = useState(null)
   const [userPermissionToAdd, setUserPermissionToAdd] = useState(PROJECT_ROLES.READ)
   const [showSelectUserError, setShowSelectUserError] = useState(false)
@@ -45,10 +45,25 @@ const UserAddModalContent = ({ projectId, addNewProjectMember, onClose }) => {
     setAddUserError(null)
 
     try {
-      const newUserInfo = await addUserToProject(projectId, userToAdd.userId, userPermissionToAdd)
-      newUserInfo.handle = userToAdd.handle
-      addNewProjectMember(newUserInfo)
-      onClose()
+      if (userPermissionToAdd === PROJECT_ROLES.COPILOT) {
+        const { success: invitations = [], failed } = await inviteUserToProject(projectId, {
+          handles: [userToAdd.handle],
+          role: userPermissionToAdd
+        })
+        if (failed) {
+          const error = get(failed, '0.message', 'Unable to invite user')
+          setAddUserError(error)
+          setIsAdding(false)
+        } else {
+          onMemberInvited(invitations[0] || {})
+          onClose()
+        }
+      } else {
+        const newUserInfo = await addUserToProject(projectId, userToAdd.userId, userPermissionToAdd)
+        newUserInfo.handle = userToAdd.handle
+        addNewProjectMember(newUserInfo)
+        onClose()
+      }
     } catch (e) {
       const error = get(e, 'response.data.message', 'Unable to add user')
       setAddUserError(error)
@@ -169,6 +184,7 @@ const UserAddModalContent = ({ projectId, addNewProjectMember, onClose }) => {
 UserAddModalContent.propTypes = {
   projectId: PropTypes.number.isRequired,
   addNewProjectMember: PropTypes.func.isRequired,
+  onMemberInvited: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired
 }
 

src/config/constants.js

@@ -59,6 +59,7 @@ export const FILE_PICKER_PROGRESS_INTERVAL = 100
 export const FILE_PICKER_UPLOAD_RETRY = 2
 export const FILE_PICKER_UPLOAD_TIMEOUT = 30 * 60 * 1000 // 30 minutes
 export const SPECIFICATION_ATTACHMENTS_FOLDER = 'SPECIFICATION_ATTACHMENTS'
+export const MEMBERS_API_URL = process.env.MEMBERS_API_URL
 
 export const getAWSContainerFileURL = (key) => `https://${FILE_PICKER_CONTAINER_NAME}.s3.amazonaws.com/${key}`
 

src/containers/Users/index.js

@@ -4,7 +4,7 @@ import _ from 'lodash'
 import PT from 'prop-types'
 import UsersComponent from '../../components/Users'
 import { PROJECT_ROLES } from '../../config/constants'
-import { fetchProjectById } from '../../services/projects'
+import { fetchInviteMembers, fetchProjectById } from '../../services/projects'
 import { checkAdmin, checkManager } from '../../util/tc'
 
 import {
@@ -80,12 +80,18 @@ class Users extends Component {
   }
 
   loadProject (projectId) {
-    fetchProjectById(projectId).then((project) => {
+    fetchProjectById(projectId).then(async (project) => {
       const projectMembers = _.get(project, 'members')
       const invitedMembers = _.get(project, 'invites')
+      const invitedUserIds = _.filter(_.map(invitedMembers, 'userId'))
+      const invitedUsers = await fetchInviteMembers(invitedUserIds)
+
       this.setState({
         projectMembers,
-        invitedMembers
+        invitedMembers: invitedMembers.map(m => ({
+          ...m,
+          email: m.email || invitedUsers[m.userId].email
+        }))
       })
       const { loggedInUser } = this.props
       this.updateLoginUserRoleInProject(projectMembers, loggedInUser)

src/services/projects.js

@@ -8,7 +8,8 @@ import {
   GENERIC_PROJECT_MILESTONE_PRODUCT_TYPE,
   PHASE_PRODUCT_CHALLENGE_ID_FIELD,
   PHASE_PRODUCT_TEMPLATE_ID,
-  PROJECTS_API_URL
+  PROJECTS_API_URL,
+  MEMBERS_API_URL
 } from '../config/constants'
 import { paginationHeaders } from '../util/pagination'
 import { createProjectMemberInvite } from './projectMemberInvites'
@@ -68,6 +69,19 @@ export async function fetchProjectById (id) {
   return _.get(response, 'data')
 }
 
+/**
+ * This fetches the user corresponding to the given userIds
+ * @param {*} userIds
+ */
+export async function fetchInviteMembers (userIds) {
+  const url = `${MEMBERS_API_URL}?${userIds.map(id => `userIds[]=${id}`).join('&')}`
+  const { data = [] } = await axiosInstance.get(url)
+  return data.reduce((acc, member) => {
+    acc[member.userId] = member
+    return acc
+  }, {})
+}
+
 /**
  * Api request for fetching project phases
  * @param id Project id
@@ -118,11 +132,8 @@ export async function addUserToProject (projectId, userId, role) {
  * @param role
  * @returns {Promise<*>}
  */
-export async function inviteUserToProject (projectId, email, role) {
-  return createProjectMemberInvite(projectId, {
-    emails: [email],
-    role: role
-  })
+export async function inviteUserToProject (projectId, params) {
+  return createProjectMemberInvite(projectId, params)
 }
 
 /**