Topcoder Connect - Links as Attachments and Tags

Are you new to Topcoder? You may implement this task and submit your solution until the deadline. Reviewers would score it and 2 people with higher scores (not less than minimal) would get the prizes. Learn "How to compete" and read the task below.

Challenge Objectives

Update endpoints to manage links as attachments and implement tags for files and links.

Project Background

Topcode Connect is a client-facing application of Topcoder. We have the functionality to manage “files” and “links” inside the projects, see screenshot and live demo page (demo user is provided on the forum).

At the moment we store "links'' inside “bookmarks'' field of the “project” object so we cannot track who and when creates and updates individual links properly for the individual links as all the links are included in the project object and always updated altogether. Unlike "links" we store and manage “files” using the ParojectAttachment model with relative endpoints which don't have such disadvantages. In the recent challenge, we've updated the ProjectAttachment model with respective endpoints so it can hold both "files" and "links". So now an attachment can be not only a "file" but also a "link". To understand if attachment is file or link we added a new field for attachments - "type" which can be "file" or "link". Additionally, we added the ability to add "tags" to attachments.

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 `feature/link-attachments` commit `aefd252aef553b813c785b0add3c7201e76c690d` or later.

- Demo user is provided on the forum.

- To work on this challenge you would have to set up locally Topcoder Project Service - the main backend service of the Connect App as we don't have a new implementation of attachments deployed online. Use repository https://github.com/topcoder-platform/tc-project-service branch "feature/link-attachments". Follow the "Local Development" guide using "Full" docker-compose file, after that "Import sample metadata projects" and follow steps to "Run Connect App with Project Service locally". During importing demo data, there could be a few failed records, that is ok and most data should be imported fine, see a screenshot of a good import process.

- Note, that the local setup of Topcoder Project Service is supported on macOS and Linux at the moment, but Windows is not supported.

- When your local setup is finished, create a new project locally for testing using the next link. Don't use projects created during importing data, as they might have broken data.

Individual requirements

1) Update endpoints

As we updated server-side code to store links in the same way as files, now we would use the same endpoints for links as we already use for files. For API details you may refer to the swagger file which can be opened via Online Swagger Editor.

• Update all the endpoints to create/get/edit/delete links and all related code like actions/reducers/services and so on to use the same URLs as we use for files. 

• Reuse the same actions/reducers/services for files and links where possible. Rename any actions/reducers/services appropriately, if before they handle only files and they handle both files and links. The word "attachment" can be used as a common word for both.

• As now the same endpoint returns both files and links together which before only returned files. Make sure that attachments are visually displayed correctly as files and links. And that for files and links we use correct dialogs to create and update them.

• We renamed the field "filePath" to "path" for attachments. So all the existing code related to files has to be updated accordingly.

• As we move links from "bookmarks" of the project object to the "attachments". All the code related to the old way of managing links inside "bookmarks" has to be removed.

2) Add and edit tags

Server-side we added a new field "tags" for attachments, which is arrays of strings. So now we can add tags to files and links.

• When we are adding a new file, on the last dialog we are asked to define file permissions, see screenshot. We have to update this dialog as per next screenshot and add a field for entering tags. So the attachment could be created with "tags".
  -  For entering tags use the same field, which we use to enter users to invite, see screenshot.
  -  - No autocomplete is needed, we just have to enter any text tags.
  -  - Allow spaces inside tags in this field for tags, so space shouldn't complete entering tag.
  -  - Allow the field for tags to go multiline, if we enter too many tags.
  - Add the same field for editing tags, in the file editing dialog too, see screenshot.

• Add ability to add and edit tags to the links too. See screenshot of link create dialog and screenshot of link editing dialog. 

• In each place where we add "tags" field, follow the styles of that dialog so the new field fits the styles.

3) Filter by tags

• In the table where we show files and links, show the list of tags for each file/link in the same column as title.
  - If tags are defined, show them under the title as a second line, as per screenshot. For the tags you may use the same style as we use to show REF code, see screenshot and live demo.

• Currently, we can filter files and links by "name", "shared by" and "date". We should also be able to filter by tags.
  - For this purpose add a second input field into the filter by name, see screenshot.
  - Add a label for each input, similar like we have for "date" filter, see screenshot.
  - Input field for tags filter should be a simple text input. We can enter any text there, and after find files/links which has at least one tag with the substring that we entered. So if we enter text "spec" we would show only file/links which have tags like: ["Specification", "Some other tag"] or ["non-spec"] and so on.

NOTE

• With the local setup of Project Service the file downloading feature would not work which is ok. The API would always return a dummy URL for downloading.

Deployment guide and validation document

Create a validation document that would show how to setup the project locally (we provide some short guide above, but make sure it's enough or add any details). Please, mention how to create a demo project and where to create files and links for testing the submission.

General requirements

• You might be asked to fix small existent issues server-side or client-side if such appear, in case they block implementing or validating the requirements in this challenge.

• User React and Redux best practices.

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

• For styling use ONLY colors from the https://github.com/appirio-tech/tc-ui/blob/feature/connectv2/src/styles/_variables.scss.

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

• Validation document in any common textual format.

Additionally, the winner would be required to raise a pull request to the repository after the challenge is completed.