Register
Submit a solution
The challenge is finished.

Challenge Overview

Challenge objectives

  • Integrate the new user interface for managing team members in Connect projects with the backend API

 

Project Background

Topcoder Connect is client facing application of Topcoder. Customer use Topcoder connect to input requirements of their projects, then managers and copilots take it from there. You can see Topcoder Connect in action here: https://connect.topcoder-dev.com

We're making changes to user management - users will be invited to projects and they will have the option of accepting and removing the invitation. Project members will be shown as two teams: Customer team and Topcoder team. Manager users will have the option to invite/remove members from both teams, customers will be able to manage customer team and copilots will only be allowed to invite members into customer team.

 

Technology Stack

  • ReactJS

  • Redux

  • HTML

  • SCSS

 

Code Access

Base code can be accessed at https://github.com/appirio-tech/connect-app/ - feature/teamManagement branch should be used as base.

Designs for the new team management features are available at https://projects.invisionapp.com/share/M7P2N375BUN

 

NOTE: you need to deploy project service locally, using feature/teamManagement branch from https://github.com/topcoder-platform/tc-project-service

 

Individual requirements

 

1. Update project listing page
Project listing page (search) is currently displaying “Join project” button for all projects. This button should be displayed only for projects that the user isn’t already a member, but his email or userId does appear in project.invites array (in the project search API response). Clicking the button will lead to the project details page.

 

2. Update Project details page

When user navigates to any project page (/projects/id/*) app should check if there is an existing invitation, and if so, display the Join Project dialog.

To get a pending invitation, call GET /v4/projects/:projectId/members/invite

If there is no pending invite, keep the current behavior (show the project page, or error page if user can’t access the project)

When user accepts (or refuses) to join the project, call PUT /v4/projects/:projectId/members/invite with body {param:{userId, email, status}} where status is “accepted” or “refused”

When user joins the project, reload the project page (project details will be shown); if invitation is canceled, navigate to project search page

 

3. Update the team management dialog

Team management dialog is a component that supports readonly mode and manage mode where new users can be invited, roles of existing users can be changed or users can be removed. See these screen designs for reference

NOTES:

  • Managers can manage both teams

  • Customers can manage only customer team

  • Copilots can only invite users into customer team

  • Available roles for the user are defined in src/config/constants.js#L445

 

All users in topcoder team should have “Manager”, “Observer” and “Copilot” roles as options for changing role (There is no BDR role shown in the designs)

When changing user role, call PATCH /v4/projects/:projectId/members/:id

When inviting users, call POST /v4/projects/:projectId/members/invite with body:{param:{emails, userIds, role}}

Emails is a list of email addresses entered into the invite field, userIds is a list of userIds for handles entered into invite field. To get a userId for a @handle, call GET /v3/members/_search/ - see src/api/projectMembers.js#getMembersById for an example (create a similar method that searches by handles instead of Ids)

To get a project role for invited users, add a dropdown field below the invite text box with options for “Manager”, “Observer” and “Copilot”. This dropdown is necessary when managing “Topcoder” team - it should not be visible in “Customer” team dialog as user role is already known - Customer.

 

4. Update confirmation dialogs

These dialogs should be implemented using a common component with configurable buttons and callback actions. Clicking a button that calls an api will disable that button until api action is complete.


General requirements

Both desktop and mobile views are in scope. All API actions should show toast messages on success/failure. User interface should not allow triggering same action while one API call is in progress (ex disable dialog buttons while API call is in progress)

 

What to submit

Submit a git patch with all the required changes

Submit a short verification guide



Final Submission Guidelines

Submit a git patch with all the required changes

Submit a short verification guide

ELIGIBLE EVENTS:

Topcoder Open 2019

Review style

Final Review

Community Review Board

Approval

User Sign-Off

ID: 30077357