New "Users" tab

[jmgasper]

Expected behavior

Currently, in Topcoder Direct, an admin on a project can add users with specific Read, Write, or "Full Access" rights:

What we would like to do is add a new Users tab to the Work Manager UI that allows a copilot or admin to add users similarly.

Implementation

When the user clicks the Users tab, they will only see a drop down of the active projects they have access to. Once they select a project, they will see a table of the users and rights each user has to the project.

This information can come from the Projects API, like:

GET https://api.topcoder-dev.com/v5/projects/22307/

The response will have a members array:

    "members": [
        {
            "lastName": "sadsa",
            "role": "manager",
            "updatedBy": 40029484,
            "handle": "jcori",
            "userId": 40029484,
            "deletedBy": null,
            "createdAt": "2022-09-14T06:49:22.806Z",
            "firstName": "James",
            "createdBy": 40029484,
            "isPrimary": true,
            "id": 20524,
            "projectId": 22307,
            "email": "jcori+dev@topcoder.com",
            "updatedAt": "2022-09-14T06:49:22.843Z"
        },
        {
            "lastName": "dsa",
            "role": "customer",
            "updatedBy": 305384,
            "handle": "mess",
            "userId": 305384,
            "deletedBy": null,
            "createdAt": "2022-09-14T07:08:29.387Z",
            "firstName": "dsadsadas",
            "createdBy": 305384,
            "isPrimary": false,
            "id": 20525,
            "projectId": 22307,
            "email": "mess@appirio.com",
            "updatedAt": "2022-09-14T07:08:29.388Z"
        },
        {
            "lastName": "Dev",
            "role": "customer",
            "updatedBy": 40159018,
            "handle": "TopConnCustomer",
            "userId": 40159018,
            "deletedBy": null,
            "createdAt": "2022-09-14T07:11:55.774Z",
            "firstName": "Connect Customer",
            "createdBy": 40159018,
            "isPrimary": false,
            "id": 20526,
            "projectId": 22307,
            "email": "topcoderconnect+Customer@gmail.com",
            "updatedAt": "2022-09-14T07:11:55.774Z"
        },
        {
            "lastName": "Doe",
            "role": "copilot",
            "updatedBy": 40158994,
            "handle": "TCConnCopilot",
            "userId": 40158994,
            "deletedBy": null,
            "createdAt": "2022-09-14T08:21:31.731Z",
            "firstName": "John",
            "createdBy": 40158994,
            "isPrimary": false,
            "id": 20528,
            "projectId": 22307,
            "email": "topcoderconnect+Copilot@gmail.com",
            "updatedAt": "2022-09-14T08:21:31.731Z"
        },
        {
            "lastName": "İşbilir",
            "role": "customer",
            "updatedBy": 88778924,
            "handle": "eisbilir",
            "userId": 88778924,
            "deletedBy": null,
            "createdAt": "2022-10-11T10:06:33.003Z",
            "firstName": "Emre",
            "createdBy": 88778924,
            "isPrimary": false,
            "id": 20768,
            "projectId": 22307,
            "email": "emre.isbilir@topcoder.com",
            "updatedAt": "2022-10-11T10:06:33.003Z"
        }
    ],

Each record will map to a row in the table shown in Work Manager.

There will be radio buttons for access:

• Read maps to the observer role
• Write maps to the customer role
• Full Access maps to the manager role
• Copilot will map to the copilot role --> Note that this isn't shown in Direct currently, but we'll add it to Work Manager

We will need to have an Add User button above the table that allows a copilot or admin to add a new user record to the table.

The Add User button should show a popup with a text field drop down to autocomplete a user handle. We already have this field in Work Manager, called Assigned Member when editing a challenge. This field allows a user to enter a partial handle and it will autocomplete in the drop down. The Member field in the Add User popup should work exactly the same:

In addition to the Member field, we will have a Role field of Radio buttons with 4 options:

• Read (maps to observer role)
• Write (maps to `customer role)
• Full Access (maps to manager role)
• Copilot (maps to copilot role)

The default should be Read

Finally, there should be an Add User button to confirm the action, add the user, and close the popup, along with a Cancel button to just close the popup without confirming the action.

Adding a user

A user can be added to a project via a POST to https://api.topcoder-dev.com/v5/projects/{projectID}/members

Sample body:

{
    "userId":151743,
    "role":"manager"
}

Please ensure the endpoint is configurable so that it works correctly for both prod (api.topcoder.com) and dev (api.topcoder-dev.com).

Forum notifications and challenge notifications

Note that the Direct screenshot above has columns for Forums notifications and Challenge notifications. Those will NOT be in scope for this ticket.

Remove

There should be a column with a Remove link for each row / member in the table. Clicking this will prompt the user with a popup - "Are you sure you want to remove {handle} from this project?". If they click "OK", call DELETE https://api.topcoder-dev.com/v5/projects/{projectID}/members/{member record ID}. The member record ID is the id field from the members array above, not the member's user ID.

If they click "Cancel" in the prompt, just close the prompt popup.

Update

The table should allow the user to update permissions via the radio buttons. The projects API accepts PATCH calls for https://api.topcoder-dev.com/v5/projects/{projectID}/members/{member record ID} The member record ID is the id field from the members array above, not the member's user ID.

A sample body would look like:

{
    "role":"{new role}"
}

Errors

Any "message" fields should be displayed to the user in the user popup so they can correct the input. For instance, there are overall role checks before a user can be added as a manager. This will be the response from the POST to adding a user to the project if the user doesn't have the right global roles:

{
    "message": "User doesn't have required roles to be added to the project as \"manager\".",
    "debug": "Error: User doesn't have required roles to be added to the project as \"manager\".\n    at module.exports (/usr/src/app/dist/routes/projectMembers/create.js:84:18)"
}