Merge branch 'cf19' into hotfix/post-release-2.4.15.2

# Conflicts:
#	src/config/constants.js
#	src/projects/actions/projectMember.js

Author: maxceem

src/components/TeamManagement/TeamManagement.scss

@@ -453,6 +453,45 @@
     }
   }
 
+  .decline-btn {
+    @include roboto;
+    cursor: pointer;
+    padding: $base-unit*2 $base-unit*3;
+    display: flex;
+    align-items: center;
+    height: 40px;
+    border: 1px solid $tc-gray-10;
+    border-radius: 20px !important;
+    margin: $base-unit*2 0 $base-unit 0;
+    color: $tc-gray-70;
+    font-size: $tc-label-md;
+    text-align: center;
+    justify-content: center;
+    width: 130px;
+    margin: 5px;
+
+    svg {
+      margin-right: $base-unit * 0.5;
+      transform: scale(.6);
+      fill: $tc-gray-90;
+    }
+
+    &.in-grid {
+      width: 103px;
+      margin: 0 5px 5px 5px;
+    }
+  }
+
+  .accept-btn {
+    border-radius: 20px !important;
+    white-space: nowrap;
+    margin: 5px;
+
+    &.in-grid {
+      padding: 0px 11px !important;
+    }
+  }
+
   .join-btn {
     @include roboto;
     cursor: pointer;
@@ -472,6 +511,7 @@
       fill: $tc-gray-90;
     }
   }
+
 }
 
 .separator {

src/config/constants.js

@@ -652,6 +652,21 @@ export const ROLE_PROGRAM_MANAGER = 'Program Manager'
 export const ROLE_SOLUTION_ARCHITECT = 'Solution Architect'
 export const ROLE_PROJECT_MANAGER = 'Project Manager'
 
+export const ADMIN_ROLES = [ROLE_ADMINISTRATOR, ROLE_CONNECT_ADMIN]
+
+export const MANAGER_ROLES = [
+  ...ADMIN_ROLES,
+  ROLE_CONNECT_MANAGER,
+  ROLE_CONNECT_ACCOUNT_MANAGER,
+  ROLE_CONNECT_COPILOT_MANAGER,
+  ROLE_BUSINESS_DEVELOPMENT_REPRESENTATIVE,
+  ROLE_PRESALES,
+  ROLE_ACCOUNT_EXECUTIVE,
+  ROLE_PROGRAM_MANAGER,
+  ROLE_SOLUTION_ARCHITECT,
+  ROLE_PROJECT_MANAGER,
+]
+
 // to be able to start the Connect App we should pass at least the dummy value for `FILE_PICKER_API_KEY`
 // but if we want to test file uploading we should provide the real value in `FILE_PICKER_API_KEY` env variable
 export const FILE_PICKER_API_KEY = process.env.FILE_PICKER_API_KEY || 'DUMMY'

src/projects/actions/projectMember.js

@@ -161,11 +161,18 @@ export function inviteProjectMembers(projectId, emailIds, handles) {
   }
 }
 
-export function acceptOrRefuseInvite(projectId, item) {
+/**
+ * Accept or refuse invite
+ * @param {Number} projectId project id
+ * @param {Object} item accept or refuse invite info
+ * @param {Object} currentUser current user info
+ */
+export function acceptOrRefuseInvite(projectId, item, currentUser) {
   return (dispatch) => {
     return dispatch({
       type: ACCEPT_OR_REFUSE_INVITE,
-      payload: updateProjectMemberInvite(projectId, item)
+      payload: updateProjectMemberInvite(projectId, item),
+      meta: { projectId, currentUser },
     })
   }
 }

src/projects/components/projectsCard/ProjectCard.jsx

@@ -1,14 +1,15 @@
 import React from 'react'
 import PT from 'prop-types'
 import _ from 'lodash'
-import { withRouter, Link } from 'react-router-dom'
+import { withRouter } from 'react-router-dom'
 import { getProjectRoleForCurrentUser } from '../../../helpers/projectHelper'
 import ProjectCardHeader from './ProjectCardHeader'
 import ProjectCardBody from './ProjectCardBody'
 import ProjectManagerAvatars from '../../list/components/Projects/ProjectManagerAvatars'
+import LoadingIndicator from '../../../components/LoadingIndicator/LoadingIndicator'
 import './ProjectCard.scss'
 
-function ProjectCard({ project, duration, disabled, currentUser, history, onChangeStatus, projectTemplates, unreadMentionsCount }) {
+function ProjectCard({ project, duration, disabled, currentUser, history, onChangeStatus, projectTemplates, unreadMentionsCount, callInviteRequest, isAcceptingInvite }) {
   const className = `ProjectCard ${ disabled ? 'disabled' : 'enabled'}`
   if (!project) return null
   const currentMemberRole = getProjectRoleForCurrentUser({ project, currentUserId: currentUser.userId})
@@ -41,11 +42,27 @@ function ProjectCard({ project, duration, disabled, currentUser, history, onChan
         <ProjectManagerAvatars managers={project.members} maxShownNum={10} />
         <div>
           {(!isMember && isInvited) &&
-            <Link to={`/projects/${project.id}`} className="spacing">
-              <div className="join-btn" style={{margin: '5px'}}>
-                Join project
-              </div>
-            </Link>
+            <div className="spacing join-btn-container">
+              {(!isAcceptingInvite) && (
+                <button
+                  onClick={(event) => {
+                    event.stopPropagation()
+                    callInviteRequest(project, true)
+                  }}
+                  className={'tc-btn tc-btn-primary tc-btn-md blue accept-btn'}
+                >
+                  Join project
+                </button>)}
+              {(!isAcceptingInvite) && (
+                <button
+                  onClick={(event) => {
+                    event.stopPropagation()
+                    callInviteRequest(project, false)
+                  }}
+                  className="decline-btn"
+                >Decline</button>)}
+              {isAcceptingInvite && (<LoadingIndicator isSmall />)}
+            </div>
           }
         </div>
       </div>
@@ -54,13 +71,17 @@ function ProjectCard({ project, duration, disabled, currentUser, history, onChan
 }
 
 ProjectCard.defaultTypes = {
+  callInviteRequest: () => {},
+  isAcceptingInvite: false,
 }
 
 ProjectCard.propTypes = {
   project: PT.object.isRequired,
   currentMemberRole: PT.string,
   projectTemplates: PT.array.isRequired,
-  unreadMentionsCount: PT.number.isRequired
+  unreadMentionsCount: PT.number.isRequired,
+  callInviteRequest: PT.func,
+  isAcceptingInvite: PT.bool
   // duration: PT.object.isRequired,
 }
 

src/projects/components/projectsCard/ProjectCard.scss

@@ -84,10 +84,15 @@
 
     .card-footer {
       // padding-top: 4 * $base_unit;
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
     }
 
-    .join-btn {
-      float: right;
+    .join-btn-container {
+      display: flex;
+      align-items: flex-end;
+      flex-direction: column;
     }
   }
 }

src/projects/components/projectsCard/ProjectsCardView.jsx

@@ -20,7 +20,8 @@ const ProjectsCardView = props => {
   //const { projects, members, totalCount, criteria, pageNum, applyFilters, sortHandler, onPageChange, error, isLoading, onNewProjectIntent } = props
   // TODO: use applyFilters and onNewProjectIntent. Temporary delete to avoid lint errors.
   const { projects, members, currentUser, onPageChange, pageNum, totalCount, infiniteAutoload, newProjectLink,
-    setInfiniteAutoload, isLoading, onChangeStatus, projectsStatus, projectTemplates, applyFilters, notifications } = props
+    setInfiniteAutoload, isLoading, onChangeStatus, projectsStatus, projectTemplates, applyFilters, notifications,
+    callInviteRequest, isAcceptingInvite } = props
   // const currentSortField = _.get(criteria, 'sort', '')
 
   // annotate projects with member data
@@ -50,6 +51,8 @@ const ProjectsCardView = props => {
         onChangeStatus={onChangeStatus}
         projectTemplates={projectTemplates}
         unreadMentionsCount={unreadMentionsCount}
+        callInviteRequest={callInviteRequest}
+        isAcceptingInvite={isAcceptingInvite[project.id]}
       />
     </div>)
   }
@@ -97,7 +100,7 @@ const ProjectsCardView = props => {
         hasMore={hasMore}
         threshold={500}
       >
-        { [...projects, ...placeholders].map(renderProject)}
+        { [...projects, ...placeholders].map((project) => renderProject(project))}
         {moreProject(true)}
         <div className="project-card project-card-new">
           <NewProjectCard link={newProjectLink} />
@@ -129,6 +132,8 @@ ProjectsCardView.propTypes = {
   applyFilters: PropTypes.func,
   isLoading: PropTypes.bool,
   projectTemplates: PropTypes.array.isRequired,
+  callInviteRequest: PropTypes.func,
+  isAcceptingInvite: PropTypes.object,
 }
 
 

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

@@ -9,6 +9,7 @@ import CoderBot from '../../../../components/CoderBot/CoderBot'
 import ProjectListNavHeader from './ProjectListNavHeader'
 import ProjectsGridView from './ProjectsGridView'
 import ProjectsCardView from '../../../components/projectsCard/ProjectsCardView'
+import { acceptOrRefuseInvite } from '../../../actions/projectMember'
 import { loadProjects, setInfiniteAutoload, setProjectsListView } from '../../../actions/loadProjects'
 import { loadProjectsMetadata } from '../../../../actions/templates'
 import { sortProjects } from '../../../actions/sortProjects'
@@ -18,7 +19,9 @@ import { updateProject } from '../../../actions/project'
 import { getNewProjectLink } from '../../../../helpers/projectHelper'
 import { ROLE_CONNECT_MANAGER, ROLE_CONNECT_ACCOUNT_MANAGER, ROLE_CONNECT_COPILOT, ROLE_ADMINISTRATOR,
   ROLE_CONNECT_ADMIN, PROJECT_STATUS, PROJECT_STATUS_CANCELLED,
-  PROJECT_LIST_DEFAULT_CRITERIA, PROJECTS_LIST_VIEW, PROJECTS_LIST_PER_PAGE, SCREEN_BREAKPOINT_MD } from '../../../../config/constants'
+  PROJECT_LIST_DEFAULT_CRITERIA, PROJECTS_LIST_VIEW, PROJECTS_LIST_PER_PAGE, SCREEN_BREAKPOINT_MD,
+  PROJECT_MEMBER_INVITE_STATUS_ACCEPTED, PROJECT_MEMBER_INVITE_STATUS_REFUSED,
+} from '../../../../config/constants'
 import TwoColsLayout from '../../../../components/TwoColsLayout'
 import UserSidebar from '../../../../components/UserSidebar/UserSidebar'
 
@@ -37,7 +40,9 @@ const EnhancedCards = dataLoadHandler(errorHandler(ProjectsCardView))
 class Projects extends Component {
   constructor(props) {
     super(props)
-    this.state = {}
+    this.state = {
+      isAcceptingInvite: {}
+    }
     this.sortHandler = this.sortHandler.bind(this)
     this.onChangeStatus = this.onChangeStatus.bind(this)
     this.onPageChange = this.onPageChange.bind(this)
@@ -47,6 +52,7 @@ class Projects extends Component {
     this.changeView = this.changeView.bind(this)
     this.init = this.init.bind(this)
     this.removeScrollPosition = this.removeScrollPosition.bind(this)
+    this.callInviteRequest = this.callInviteRequest.bind(this)
   }
 
   componentWillUnmount(){
@@ -191,9 +197,37 @@ class Projects extends Component {
     this.props.loadProjects(criteria)
   }
 
+  /**
+   * Call request to accept or decline invite
+   * @param {Object} project project info
+   * @param {Bool} isAccept is accept invite
+   */
+  callInviteRequest(project, isAccept) {
+    const isAcceptingInvite = (isAcception) => {
+      const { isAcceptingInvite } = this.state
+      isAcceptingInvite[project.id] = isAcception
+      this.setState({ isAcceptingInvite })
+    }
+
+    isAcceptingInvite(true)
+
+    this.props.acceptOrRefuseInvite(project.id, {
+      userId: this.props.currentUser.userId,
+      email: this.props.currentUser.email,
+      status: isAccept ? PROJECT_MEMBER_INVITE_STATUS_ACCEPTED : PROJECT_MEMBER_INVITE_STATUS_REFUSED
+    }, this.props.currentUser).then(() => {
+      isAcceptingInvite(false)
+    }) .catch((err) => {
+      // if we fail to accept invite
+      console.log(err)
+      isAcceptingInvite(false)
+    })
+  }
+
   render() {
     const { isPowerUser, isCustomer, isLoading, totalCount, criteria, projectsListView, setProjectsListView,
       setInfiniteAutoload, loadProjects, history, orgConfig, allProjectsCount, user } = this.props
+    const { isAcceptingInvite } = this.state
     // show walk through if user is customer and no projects were returned
     // for default filters
     const showWalkThrough = !isLoading && !isPowerUser && totalCount === 0 && allProjectsCount === 0 &&
@@ -212,6 +246,8 @@ class Projects extends Component {
         setFilter={this.setFilter}
         criteria={criteria}
         isCustomer={isCustomer}
+        callInviteRequest={this.callInviteRequest}
+        isAcceptingInvite={isAcceptingInvite}
       />
     )
     const cardView = (
@@ -224,6 +260,8 @@ class Projects extends Component {
         onChangeStatus={this.onChangeStatus}
         projectsStatus={getStatusCriteriaText(criteria)}
         newProjectLink={getNewProjectLink(orgConfig)}
+        callInviteRequest={this.callInviteRequest}
+        isAcceptingInvite={isAcceptingInvite}
       />
     )
     let projectsView
@@ -324,6 +362,14 @@ const mapStateToProps = ({ projectSearch, members, loadUser, projectState, templ
   }
 }
 
-const actionsToBind = { loadProjects, setInfiniteAutoload, updateProject, setProjectsListView, sortProjects, loadProjectsMetadata }
+const actionsToBind = {
+  loadProjects,
+  setInfiniteAutoload,
+  updateProject,
+  setProjectsListView,
+  sortProjects,
+  loadProjectsMetadata,
+  acceptOrRefuseInvite
+}
 
 export default withRouter(connect(mapStateToProps, actionsToBind)(Projects))