Challenge Overview
Attention! This is a 96h challenge. Some phases are shorter than usual. Make sure you don’t miss any deadline.
Implement ability to filter data in the table of files and links and make small UI fixes.
Project Background
Topcode Connect is a client-facing application of Topcoder. Customers use Topcoder Connect to input requirements of their projects, then managers and copilots take it from there.
User can attach files and links to the project on “Assets Library” page, see the demo link and screenshot. Also, users may attach files and create link inside posts on the Messages page. For easy searching files and links are extracted from the posts and also shown on “Assets Library” page inside folders. So each folder represents one topic and contains all the files and links that are extracted from the posts of that topic. As on the “Assets Library” page many files and links could be shown we want to make it easier for users to quickly locate a file or link.
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 branch dev commit 3663fb065b4d98ff56981b7ca3626b12eca345fb or later.
- Demo user is provided on the forum.
Individual requirements
Small fixes
- rename “Modified” column name to “Date”
- in the “Created by” column show user “handle” instead of the full name to save the space - ignore
- align all column headers and data to the right, except of “...” buttons, see screenshot
- make the width of the last column smaller to sage the space
- make the font-size for column headers same: `$tc-body-sm` (13px)
Add a column “Shared With”
Add column after “Name” column. In this column, we should show who can view this file/link.
- if a file has `allowedUsers` as non-empty array `[123456, 234566]`, then show a comma-separated list of user handles similar to how we show a user in “Created By” column updated: then show a list of user avatars as we do it in the project listing page, see link and screenshot (with tooltip with user details when hovering avatar by mouse). If there are many, they should wrap to the next line.
- if a file has `allowedUsers` as empty array `[]`, then show “Only Admins”
- if a file has `allowedUsers` as `null`, then show “All Project Members”
- if a link comes from the private topic, then show “Only Topcoder Members”
- if a link comes from the non-private topic, then show “All Project Members” (private topic is one that has `tag === “MESSAGES”`, see screenshot)
Implement filters
Add the ability to filter files and links by each of the columns. Implement the same UI as we have for the filtering list of projects, see link and screenshot.
- Table column names should have a “tick” icon to indicate that it’s filterable
- Clicking column name should open a dropdown with filter
- Clicking anywhere outside or to the column name again should close the dropdown with filter
- Rows in the table should be filtered instantly on typing. Files inside folders should be also filtered. There are 2 possible ways to do it: when filter is applied show all the files matching filter in a flat list without folders or still show folders that contain files matching filter and hide folders without files matching filter.
- “Name” column should be filterable by any text (case insensitive)
- “Date” column should be filterable by the date range. Place 2 date fields one under one “vertically”, use the same field as we use on phase editing form, see link and screenshot. We should be able to set both dates or only one, as soon as one of the dates is set/updated, rows should be filtered immediately.
- “Shared With” column should be filterable by user handles: full or part of the handle (case insensitive)
- If any filter is applied, then in the header, where we are showing the “All Files”/”All links”/”<current folder name>” we should change text to “Filtered Files”/”Filtered Links”/”Filtered <current folder name>” we should additionally show a button to clear all the filters like on the screenshot.
General requirements
-
Support browsers: IE11, Microsoft Edge, Firefox latest version, Safari latest version, Chrome latest version
-
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 it 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
If you have any questions or concerns, feel free to raise a question on the forum.
Final Submission Guidelines
Submit a zip file which would include:
-
Git patch with changes you’ve made to the code in our repository.
Additionally, the winner would be required to raise a pull request to the repository after the challenge is completed.