Topcoder Connect - Works - Design works

Implement functionality to enter design works.
(Almost now new components to implement in this challenge. Most of the components we already have and they can be reused.)

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 works for projects. Each work may have a timeline which we also implement in the recent challenge. And the timeline may have a different kind of milestones. For example, a design challenge has the next milestones:
- “round 1” (when participants create their first versions of design)

- “checkpoint review” (when customers check first versions of designs created by members and provide their feedback, they also check the best designs they like)

- “round 2” (participants get feedback and update their design using the feedback)

- final review (customers check the final designs from participants and select the winners)

In this challenge, we would implement the UI for copilots to enter designs links which they get from challenges during “round 1” or “round 2”. The functionality to review inputted design is implemented in the parallel challenge.

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-design-works branch

- User for testing is provided on the forum.

Individual requirements

To start work on this challenge:
- make sure that you use branch feature/workstreams-design-works and you deploy project locally, as per readme.
- create a new project which would support Workstreams, use only the next link http://local.topcoder-dev.com:3000/new-project/app_new_workstreams. 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.
- inside your project, go the Dashboard page and create a Work.
- inside that work click Delivery Management tab and after “Add timeline event” (screenshot) button and choose the milestone with type “Design work” (“design-work”)
- it would create an active milestone with “design-work” type
- NOTE: as in reality only one milestone could be active at a time, don’t create more than one milestone in one work. If you want to test from scratch another milestone, create a new work with an empty timeline and after that, create a new milestone there.

1. “Input Design Works” buttons

• When the work timeline has a milestone with type “design-work” in “active” status we should show buttons to enter design works in two places:
  - On the Work Details tab, see screenshot which is provided as marvel handoff (note, that we only show title, text and standard blue button like on screenshot, without previews). See explanation where data come from on the screenshot.
  - On the Dashboard page, show the button “Input Designs” as per screenshot (using existent default button style)

2. Input Design Works

• When we click any of two buttons “Input Designs” or “Input Design Works” during “design-work” milestone is “active”, we should open the view to input Design Works as per screeenshot. We don’t have a design source for this page, but we already have all the elements so you only have to implement spacing as per screenshot while reusing the existent elements.

• When a user clicks “Complete” button, we should show the loading indicator instead of “Complete” button and send a request to the server to change the status of the current milestone from “active” to “completed”. If the request is successful we should come back to the work “Details” tab. If not, show alert error and stay on this page while showing the “Complete” button again.

• Initially, under the “Complete” button we would only show the “Add Design Option” button, see screenshot.

• Clicking this button would create one more design option form like this while “Add Design Option” button stays bellow.

• “Title”: to enter title reuse component TextInputWithCounter.

• “Submission Id”: Add additional input under the “Title” which is not shown on the screenshot called “Submission Id”. It should only let us enter digits. Reuse component TCFormFields.TextInput for this field.

• We should be able to add, edit, remove presentation links. We already have this functionality implemented in reusable LinkList component. To see this component in action check this project, open the “Visual Design” phase and see “Checkpoint Review” milestone as on screenshot (DON’T click “Ready for review” button in this demo project).
  - note that here you see the old UI for doing the same thing which we want to implement in this challenge, but new UI has more fetures
  - in the old UI every time we add/edit/remove link we immediately save the data to the server, but in the new UI we wouldn’t do that. We will only save to the server when the user clicks “Save changes” button.
  - in the new UI we don’t show the icon for links. You may add additional props to the LinksList to hide icons
  - when you make any changes to existent components make sure that existent functionality is not broken

• We should be able to upload the design preview by clicking “Upload preview” button. We already have functionality for uploading files which may be reused or re-implemented a similar way.
  To see how file uploading is implemented you can check the same demo project, “Assets Library” page, button “Add new...”, see screenshot. The only difference is that we should not ask for file permission like this. Only show the file uploading dialog and after create an attachment directly which would be accessible by all users without asking permissions. You can use prop askForPermissions to disable asking permissions.

• When we click “Save” button, we should send a request to the server to update the milestone. During that time we should show the loading on a white background but keep the height of design option to avoid UI jumping, like this.
  - after we save changes, we should show the design option in read-view with “edit” button, like this.

• Clicking “Delete” should show confirmation popup similar to when we delete a milestone from the timeline, see screenshot. And delete it on confirm. During deletion show loading indicator without changing the height, same as when during saving.

• Clicking “Cancel” should cancel the changes we did to the design option and show the design option in read-view with “edit” button, like this.
  - if we click “Cancel” to the new design option which we not yet saved without the “Delete” button like this, we should remove the new design option form.

• When we click the “edit” icon of the read-mode design option we should toggle the view to edit mode.

• We should save the list of design options inside “milestone.details.content.designs” array. Each item with the next shape:
  {
    “title”: “Option 1 - Create Freedom”,
    “submissionId”: “123456”,
    “attahcmentId”: “1234”, // id of preview image attachment
    “links”: [
        { “title”: “001 Puppy Mobile”, “url”: “http://…” },
        { “title”: “001 Puppy Mobile”, “url”: “http://…” },
    ]
  }

Alerts

• For all the server-side operation show success and error alerts like: “Milestone is updated”, “Milestone updating failed: <error form server>” and so on. Can add them to this file.

Implementation requirements

• Please, try to keep all this new 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 DesignWorksOverviewContainer container component to include on Details tab and it should have all the logic inside to render the title, text and button to complete task 1. For showing button on the Dashboard tab, you may create a separate component which checks if this button should be shown or no.

• For showing the screen with forms to enter design option you may create another container component like DesignWorksContainer which would handle all the logic inside.

• 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 reviews put to “src/projects/detail/components/work-milestones”. 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.

• For white cards use width 760px as we already use everywhere in Connect App for consistency, don’t make it 960px as in new design, see screenshot.

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