Topcoder Connect - Redesign - Files & Links (Repost)

IMPORTANT: Review phase is shortened to 24 hours for this challenge.

Update design of the files and links. We are going to partially update design while keeping the most functionality as it is and reuse many of existent components. 

Project Background

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

We are in the process of a big UI redesign and improvements in the Connect app. In the series of challenges, we are going to make a first step in implementing new design elements while keeping the current functionality.

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/redesign branch

- User for testing is provided on the forum.

Individual requirements

Currently, we are showing files & links on the sidebar, see an example project and screenshot. We want to display them in a new design on a separate page instead of the sidebar.

• Create a new tab Assets Library here with route “/projects/:projectId/assets” which would display files and links assets as per new design. And don’t remove files and links from the sidebar.

• Design is provided as Marvel Handoff. Marvel file is slightly different from the design scheme file, please, follow the design file: ignore “important section”, “Payments”, “Final Deliverables”. Use existent blue style for the “Add new…” button and add one more column with 3-dots button “...”. Also, ignore sorting for table for now.

• For the file icons use all the icons for file types we currently have in the the assets/icons folder, see screenshot.

• For links, folders and file types we don’t have a special icon for, use the default.svg icon.

• When we click Add new button on the Files tab it should open standard file uploading dialog, same like we now click on “+” on the sidebar.

• When we click Add new button on the Links tab it should open the same dialog which is not shown when we click “+” on the sidebar for icons. But instead of showing it inline, we should show it in a modal in the center of the screen.

• Currently, when we are showing links and files inside folders on the sidebar, we show them as an accordion with the ability to collapse/expand folders. In the new design, we should implement it as a regular file manager. When we click the folder, we should see only the files/links from that folder and additional item on the top with the name “..” (two dots). Clicking such item would return us to the level up. We have only two levels at the moment.

• All the existent functionality for editing/deleting links and files should stay as it is. Now we are showing delete confirmation and edit form for links and file inline. Keep it that way - inline, just make these inline forms to take the whole width.

• You may reuse existent components to show files and links from the sidebar and adapt them for the new design. Where possible, create dummy reusable components for new design elements.

Keep features

All the existent features regarding files and links management should stay. Verify that deleting/editing files in the new design works same like on the sidebar. Here I would list the most important features.

• Files and links which are shown inside folders are not deletable/editable. They come from the posts on the Dashboard tab and phase on the Project Plan tab. So to edit files and links inside folders we should edit them inside respective posts. Folders also are not editable - these are names of topics and phases where the respective files and links are attached.

• Files can be only edited/deleted by the user who created them.

• Links can be edited/deleted by anyone.

• Private topics are not shown to customers users (like pshah_customer) so files and links from private topics are not shown for customers also.

General requirements

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

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

Verification

• For verification purpose, please don’t update the provided demo project. Instead, create a new project using the next link using provided user pshah_manger and name it with your handle so nobody would interfere with your work. 

• To test permissions for files and private topics, use user pshah_manger to invite another user pshah_customer (click Invite people). After in another browser login with pshah_customer and open the same project.

Final Submission Guidelines