Topcoder Connect - Works - Basic features CRUD

Implement basic features (CRUD) for the new work managing functionality.

Project Background

Topcode Connect is a client-facing application of Topcoder. Customer use Topcoder Connect to input requirements of their projects, then managers and copilots take it from there.

Currently, we have the functionality to manage phases for a project. We are working on the big improvement of the workflow. In the new workflow instead of having one list of phases for a project, we would have several lists of phases which we call Workstreams. Each workstream would hold phases related to some type of work: development, design, QA etc. Also, in the new workflow, we would call phases as works. So one Workstream would have a list of works (old name phases) inside.

We would implement this new workflow in a series of challenges. And in this first challenge, we are implementing some basic functionality which would serve as a skeleton for the feature challenges.
- showing workstreams list with works
- showing basic work details: status and tabs with NO content

- creating/editing basic work data

Technology Stack

• React

• Redux

• CSS Modules

Code access

The work for this challenge has to be done in one repository:

- Connect App repo https://github.com/appirio-tech/connect-app feature/workstreams branch

- User for testing is provided on the forum.

API endpoints:

- get the list of workstreams: “GET {PROJECTS_API_URL}/v4/projects/{projectId}/workstreams”
- get the list of works for workstream: “GET {PROJECTS_API_URL}/v4/projects/{projectId}/workstreams/{workstreamId}/works”
- create a work in workstream: “POST {PROJECTS_API_URL}/v4/projects/{projectId}/workstreams/{workstreamId}/works”
- get/updated/delete a work in workstream: “GET/PATCH/DELETE {PROJECTS_API_URL}/v4/projects/{projectId}/workstreams/{workstreamId}/works/{workId}”

For the the details see the swagger file, postman file and Project Service repo in general.

Individual requirements

To create a new project which would support Workstreams, use the next link https://connect.topcoder-dev.com/new-project/app_new_workstreams to create your own project to not interfere with other participants. During project creation choose Design and Development&QA as per screenshot. Also, see my example of a project with workstreams.

1. Workstreams list

[Major] Currently, for the projects on the Dashboard page, we are showing a list of phases see live project and screenshot. For the new projects, which have “details.settings.workstreams = true” instead of showing a list of phases, we should show a list of workstreams with works as per screenshot provided as marvel handhoff.
[Major] For old projects, we should still be showing list phases as it is now.

• During loading of the workstreams and works on the Dashboard page, show loader indicator like on the screenshot. Note, that there can be visible or hidden ProjectEstimations component. 

• If there are not workstreams, show the next message on the screenshot (we will update the text later), see live project with such message for phases.

• For the workstream header explanation, see screenshot.

• For the work card explanation, see screenshot.
  - Use work status values to text mapping.
  - Show the random value of unread messages for now.

• The name of Workstream and Work should be always displayed in one line and take all the space until the data in the right part. If it’s too long it should be truncated with “...” at the end (via CSS).

2. Work view

[Major] When we click on any work card on the workstreams list we should be navigated to the work page with URL “/projects/{projectId}/works/{workId}” which would look as shown in the screenshot and provided as marvel handoff.

• Keep the same sidebar and top bar as we have now for the project page.

• Content of work tabs is out of scope. But tabs should be implemented and show different demo text.
  - For the Assets tab hardcode some counter value for now.

• For the Status Select use SelectDropdown component which we already have. Don’t update the design. For possible values use PHASE_STATUS.
  - When we change status, show loader at the center of the screen while hiding all the data. But don’t change the height of the work card. So no matter what is the content height, when we show loader it should become white with loader at the center with the same height. See screenshot.

• Clicking on the “cross” in the top right corner should bring us back to the Dashboard page with workstreams list.

3. Work edit

[Major] When we click the edit button. We should show the work edit form as shown in the screenshot.

• The design of the back arrow, title, delete button and close button is provided as marvel handoff.

• For the form fields and button reuse existent components, don’t update the design. See how we use them for editing phases.

• User proper input type and set validation rules as per ProjectPhase model which we are editing here.

• “Save Changes” button should be only enabled if there are some changes in the form and the form is valid. And should be disabled otherwise.

• When we click “Save Changes” the loader indicator should be shown the same like when we update status, described above.

• Clicking “back” or “cancel” button should bring us back to the work view. Clicking close button should bring us back to the Dashbaord page.

• If we started editing form (made some changes) and try to leave this page, by clicking “cross” or some other link on the page we should show a confirmation prompt to warn the user that changes would be lost: “You haven’t saved your change. If you leave this page, your update will not be saved. Are you sure you want to leave?”. Similar like when we start creating or editing messages on the Messages page. See demo video. 

4. Work delete

[Major] When we click “delete” icon show confirmation popup, same like we show when deleting a topic on the Message page, see screenshot. But the text as per screenshot.

• When the user confirms deleting we should show the loading indicator same like when we click “Save Changes” and after come back to the Dashboard page.

5. Work create

[Major] When we click “Add Work” button on the Dashboard page, we should show an empty form for creating a work, same like we show when we edit the form.

• Instead of “Save Changes” button show “Create Work” button. It should be only enabled when form is valid.

• No “back” button and no “cancel” button during creating. Only “close” button at the top rigth corner which should lead back to the Dashboard page.

• After clicking “Create Work” button, the loading incidicator should be shown the same as described above and after we should be redirected back to the Dashboard page.

Alerts

For all the server-side operation show success and error alerts: “Work is created”, “Work is updated”, “Work is deleted”, “Work creating failed: <error form server>”, “Work updating failed: <error form server>”, “Work deleting failed: <error form server>”. Can add them to this file.

Implementation requirements

• [Major] Move all the logic for showing phases from DashboardContainer to a separate component PhasesContainer. And create a separate component WorkstreamsContainer for the new workstreams. After, just render one of these components in DashboardContainer depend on the “details.settings.workstreams”.

• [Major] Create WorkContainer component for work view/edit pages similar like we have for other project details pages.

• Create separate files for workstreams and works for apis/actions/reducers. Also, keep the data for them separately in Redux store: in workstreams and works fields. It’s better to create reusable helper methods whenever you need to aggregate workstreams/work data from the Redux store. Can keep such methods in a single “helpers/workstreams.js” file.

• Separate dummy components with design and container components with logic as much as possible.

• Create reusable dummy component (not connected to Redux store) when possible. At least the next components should be created: WorkList, WorkListHeader, WorkListCard. Define all PropsTypes for them avoiding general types like: “any”/”object”/”shape (without properties)” whenever possible.

• All dummy component related to workstreams put to “src/projects/detail/components/workstreams”. All containers to “src/project/details/containers”. All general dummy component to “src/components”.

General requirements

• Support screens until 922px. Mobile screens are out of scope. 

• Don’t implement new round buttons. Use the same styles for buttons which we already have. Instead of green buttons use blue ones.

• For styling use ONLY colors from the https://github.com/appirio-tech/tc-ui/blob/feature/connectv2/src/styles/_variables.scss. If some new color is introduced in design, please replace with the closest one from the variables. The exception is for a new green color, replace it with the blue color $tc-dark-blue-100. If you have any concerns regarding the colors, please, ask on the forum.

• Avoid using multilevel nesting in SCSS. As we use CSS Modules we don’t have to add prefixes or nest class selectors.

• Don’t use :global in CSS Modules unless you have to change some global styles. New styles shouldn’t use :global.

• User React and Redux best practices.

• Lint should pass

• Existent unit tests should pass

Would you have any questions or concerns, don’t hesitate to raise a question on the forum.

Final Submission Guidelines

• Patch to the Connect App.

• The winner would be required to raise a PR to the repository.