Topcoder Connect - Works - Work Items

Implement functionality to list and add work items for works.

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.

In the recent challenge, we’ve implemented the basic functionality to manage workstreams with works for projects. So we already have the next structure:
- Each project may have several Workstreams (like Development Workstream, Design Workstreams, QA Workstreams and so on).
- Each Workstream may have several Works inside (which would represent some piece of functionality).

What we would do in this challenge, is adding the ability for each Work to have several WorkItems. Each WorkItem would represent one Topcoder challenge. So one piece of Work may be done using several challenges. We would only implement functionality to associate existent Topcoder challenges with Works. No need to manage or create challenges by itself.

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

- User for testing is provided on the forum.

Individual requirements

To create a new project which would support Workstreams, use the next link http://local.topcoder-dev.com:3000/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 your project, go the Dashboard page and create a Work.

1. List WorkItems

• Show the list of the work items on the Delivery Management tab as per screenshot provided as a marvel handoff.

• API endpoint to get this list: “GET {PROJECTS_API_URL}/v4/projects/{projectId}/workstreams/{workstreamId}/works/{workId}/workitems”

• Show a loader indicator during loading of the list between the title and button bellow like on the screenshot. Keep button disabled during loading.

• WorkItems don’t have stat/end date, we should get it from the associated challenge. We can get start/end for all challenges of workItems with one request “GET {TC_API_URL}/v4/challenges/?filter=id=in(<challengeId>,<challengeId>,...,<challengeId>)”.Don’t wait until the start/end dates are loaded, show the list, and let start/end date appear after as soon as they are loaded with this request.

- <challengeId> is stored in “WorkItem.details.challengeId”
- to calculate the workItem startDate and endDate, you can use the list of phases inside each challenge “allPhases”. startDate would be the minimal value of start time of all phases. Note, that phase may have scheduledStartTime and actualStartTime. If actualStartTime is defined, we should use it, if no, then we use scheduledStartTime. Similar for endDate we should find the maximal end date for all phases.

• “Manager details” link should open the next link to edit challenge in a new browser tab “DIRECT_PROJECT_URL<challengeId>”

• Don’t show the cost column for now.

• Add one more column and show a button with three dots. Clicking this button should show dropdown menu with only one item “Delete”. Clicking “Delete” should show confirmation modal and delete workItem if confirm. Same like we have for posts, see screenshot 1 and screenshot 2. API endpint to delete workItem “DELETE {PROJECTS_API_URL}/v4/projects/{projectId}/workstreams/{workstreamId}/works/{workId}/workitems/{workitemId}”

• To show “icon” and “work item type” we should find a ProductTemplate, associated with such a workItem. Use “workItem.templateId” and find Product Template in redux store “templates.productTemplates” with such “id”. Now using ProductTemplate we can show:
  - Icon - use the value of “ProductTemplate.icon” which has the next format: “challenge-{subTrack}”. Create a new component which would show the icon using such a value “challenge-{subTrack}”. To determine which letters to show for each “{subTrack}” use the next mapping.
  - Work Item Type - show “ProductTemplate.name” as work item type.

• Don’t implement “0 milestones” and “Design WORK BUDGET: Available: $4,500” for now, see screenshot.

2. Add WorkItem

• Clicking “Add Challenge/Task” button should open the next dialog provided as marvel handoff.

• By default, it should show all the “my challenges” as we show on https://www.topcoder.com/challenges when filtered by “my challenges”, see screenshot.

• Don’t show the challenges which we’ve already added as workItems and show on the WorkItems list.

• To get the list of “my challenges” use API endpoint:
  - GET {TC_API_URL}/v4/members/{user_handle}/challenges/?filter=status%3DACTIVE&limit=50&offset=0
  To get the list of all the challenges, not only “my, use API endpoint:
  - GET {TC_API_URL}/v4/challenges/?filter=status%3DACTIVE&limit=50&offset=0

• As we can only get 50 challenges per request. If we get not all challenges, show button “Show next {count} challenges”. Clicking it should show the loading indicator instead of the button. And when the request is done the loaded list should be added to the end of the current list. When we already loaded all the challenges show text “End of list” instead of a button. So this is kind of infinite scrolling, but we have to manually press button “Show next {count} challenges”.

• When we type something into the search field and press “Enter”. We should reload the list of challenges making a new search request with filtering by name like:
  - GET {TC_API_URL}/v4/members/{user_handle}/challenges/?filter=status%3DACTIVE%26name%3D<SEARCH_NAME>&limit=50&offset=0
  - GET {TC_API_URL}/v4/challenges/?filter=status%3DACTIVE%26name%3D<SEARCH_NAME>&limit=50&offset=0
  Denepnd on if “my challenges” filter is on or off.

• During the challenge list loading, we should show loading indicator under the search field and above buttons like on the screenshot.

• Don’t show prices for the challenges for now.

• If no challenges on the list is selected with checkbox, button “Add to Work Card” should be disabled.

• We should be able to select one or more challenges and click “Add to Work Card” button. This should show the loading indicator like on the screenshot and create new WorkItems for each selected challenge. When we show the loader, the height of the card should not jump and should stay the same. If WorkItems were created successfully we should come back to the previous screen with Delivery Management tab. Otherwise, we should hide loader indicator and show an alert with error like this while still staying on the screen with choosing challenges to add.

• API endpoint to create a WorkItem: “POST {PROJECTS_API_URL}/v4/projects/{projectId}/workstreams/{workstreamId}/works/{workId}/workitems”

• WorkItem is represented by PhaseProduct model in Project Service, here are how we create it:
  - name = challenge.name
  - directProjectId = challenge.projectId
  - type = “challenge-{challenge.subTrack}”
  - templateId, we should find Product Template with productKey=“challenge-{challenge.subTrack}” in the reduxt store “templates.productTemplates”, so we set “WorkItem.templateId=ProductTemplate.id”
  - details = { challengeId: challenge.id }

• Clicking “Back” button returns us to the Delivery Management tab. Clicking “Close” button should close the current work and return us to the Dashboard page of the project.

• Clicking “Create New Challenge/Task” should open link “https://{DOMAIN}/direct/launch/home” in a new broswer ta.

Alerts

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

Implementation requirements

• Please, try to keep all the functionality separately from the basic code components. Instead of adding the logic directly into existent components keep it in separate components and just include these new components to be rendered on the proper tabs.
  For this purpose, you may also create containers to avoid passing many properties from the parent components. For example, you can create WorkItemsContainer container component to include on Delivery Management tab and it should have all the logic inside to render the work items list for task 1. For task 2 you may also create some separate dummy component or container like AddWorkItem or AddWorkItemContrainer which would handle all the logic for adding challenges as workitms to the work.

• User React and Redux best practices. Keep the main data in the Redux store. You may still keep some “local” small pieces of data in the components state.

• 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 workitems put to “src/projects/detail/components/workstreams”. All containers to “src/project/details/containers”. All general dummy component to “src/components”.

General requirements

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

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

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

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