Register
Submit a solution
The challenge is finished.

Challenge Overview

Challenge objectives

  • Create new user interface for managing team members in Connect projects

 

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/ - dev branch should be used as base.

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

 

Individual requirements

 

  1. Remove the current team management features

This is the current screen for user management

Remove the “ADD A TEAM MEMBER” dialog and all related code and components

 

2. Update team “Project team” section in the sidebar

Project team section should be updated with new designs to show two separate teams: Customer and Topcoder. All members with role CUSTOMER should be displayed in customer team - all other users should be in the Topcoder team. These are the screens displaying the sidebar with different user roles (note that some roles can see the “View” link to manage the team, some roles see the “Join” button (copilots and managers that aren’t team members yet)

Here is the design for mobile screens - https://projects.invisionapp.com/share/M7P2N375BUN#/screens/332500888

NOTES:

  • some roles (copilots) can see the “View” link to see the readonly project team details

  • Some roles have “Manage” link to manage team members (managers can manage both teams, customers can manage customer team)

  • “Join project” button is shown only to manager users that aren’t part of the team

  • “Join project as copilot” is shown only to copilots not part of the team

 

3. Create the team management dialog

Team management dialog should be 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.

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

 

4. Create 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.

5. Add a "Join project" button to the project listing
In the project listing page (project search) we should add a "Join project" button if the current user is invited to the project but hasn't joined yet. Button should be shown on the right, before the "Managers" column. API is not yet updated to return invite information so you can mock this state for now. Clicking the button should lead to project details page for now.

General requirements

Both desktop and mobile views are in scope. All API actions can be mocked to return sample data (ex inviting users would return a list of invited members that should update properties of team management dialog)

 

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: 30075545