Topcoder Connect - Works - Timeline

Implement functionality to view and edit work timeline with milestones.

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 challenge, we are implementing functionality to view and edit timeline with milestones.

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-timeline branch

- User for testing is provided on the forum.

API endpoints:

- get the list of timeliens for work: “GET {PROJECTS_API_URL}/v4/timelines?filter=reference=work&referenceId={workId}” each timeline would have “milestones” property with a list of milestones populated

- create milestone in the timeline: “POST {PROJECTS_API_URL}/v4/timelines/{timelineId}”
- get/updated/delete milestone in the timeline: “GET/PATCH/DELETE {PROJECTS_API_URL}/v4/timelines/{timelineId}/milestones/{milestoneId}”

For 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.

After that, inside you project, go the Dashboard page and create a Work. During work creation the timeline would be also created automatically on the server. (Previously created works don’t have timelines created.)

1. Timeline

• Implement new TimelineContainer component which would be connected to the Redux store and handle all the functionality for showing/editing timelines: <WorkTimelineContainer workId={workId} />

• By default, it should only display timeline as per this screenshot which is provided as marvel handoff.

• If we set editMode prop for TimelineContainer it should show additional “Add timeline event” button and edit button when we hover with the mouse on any milestone as shown on the screenshot and provided with marvel handoff.

• See explanation of the timeline on the screenshot.

• Show read-only timeline on the Details tab, and editable timeline on the Delivery management tab.

2. Milestone

• When we click “Add timeline event” or edit milestone we show the next form as per screenshot.

• When we click “Add timeline event”, set startDate as the endDate of the last milestone in the timeline. And the endDate as startDate + 5 days. This would be the value by default.

• Possible values for milestone types:
  - phase-specification: Phase Specification
  - community-work: Community Work
  - checkpoint-review: Checkpoint Review
  - final-designs: Final Designs
  - final-fix: Final Fixes

• For the form fields and buttons reuse existent components. The form for edit milestones use the UI elements as already implemented form for editing works. So you could use that form for reference.

• User proper input type and set validation rules as per Milestone 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. But don’t change the height of the milestone edit 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 “back” or “cancel” button should bring us back to the work view. Clicking close button should bring us back to the Dashboard 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.
  Note: if we click “cancel” button, no confirmation modal should be shown. Editing should be closed without confirmation.

• When we click “delete” icon show confirmation popup, same like we show when deleting a topic on the Message page, see screenshot. But the title is “WARNING!”, text: “Are you sure you want to delete this milestone?” and button “Delete Milestone”.

• When the user confirms deleting we should show the loading indicator same like when we click “Save Changes” and after close editing form so we see the previous screen with timeline.

Alerts

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

Implementation requirements

• Create a new property in Redux store workTimelines to store all the timelines for works. Also, create relative actions/reducers for work timelines.

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

• Create reusable dummy components (not connected to Redux store) when possible. Define all PropsTypes for them avoiding general types like: “any”/”object”/”shape (without properties)” whenever possible.

• All dummy component related to work timelines and milestones put to “src/projects/detail/components/work-timeline”. 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 round green buttons use rectengular 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.