Topcoder Connect - Redesign - Topics

Update design of the topics and show posts in the drawer. 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 UI redesign in the Connect app. In the series of challenges, we are going to implement some parts of new design 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 topics with posts listed on the Dashboard tab of the projects, see an example project and screenshot. 

Topics list

• Create new tab Messages with route “/projects/:projectId/messages” which would display the list of topics as per new design. And don’t show topics on the Dashboard tab anymore.

• Design is provided as Marvel Handoff. Icons for this design can be extracted from another marvel handoff.

• Ignore archived topics.

• Ignore New Discussion button in marvel design and reuse existen component for creating a new topic which should be placed at the top the Messages tab.

• Implement dummy reusable components for the new Messages tab, see screenshot: CardListHeader, TopicCard. Define all the propTypes for them.

• Before we group topics by private and public and show private topics always on the top. Now we don’t group topics by public/private and show them together sorted by date. Topics with latest posts are listed first.

• In the NEW MESSAGES list, we should show topics which have unread posts. We call post unread if it has related unread notification, see explanation. So for each topic we find the notifications which:
  - belong to the same project (projectId)
  - refer to the topic (topicId)
  - is unread (isRead == false)
  - eventType is one of EVENT_TYPE.POST.CREATED, EVENT_TYPE.POST.UPDATED, EVENT_TYPE.POST.MENTION or EVENT_TYPE.TOPIC.CREATED.
  This way we can count how many unread posts a topic has.

• Note, as soon as a post becomes visible, the related notification is marked as read automatically. Because of this, you should first hide posts and move them the drawer as described in the second task, so post are not visible immediately when we see topics.

• Implement filtering topics by: “All”, “Admin Only” - show only private topics.

• Each of the topic card should be a react-router link to /projects/:projectId/messages/:topicId.

TopicDrawer with posts

• When we click the link like with format /projects/{{projectId}}/messages/{{topicId}} or /projects/{{projectId}}/messages/{{topicId}}#comment-{{postId}} from outside (like email or enter directly to URL) or by clicking the topic card on the new Messages tab, the drawer should be opened with posts inside. We already have all the reusable components for drawer, refer to ProjectScopeDrawer as an example, see demo.

• Let’s call this drawer TopicDrawer. Inside TopicDrawer show posts with all the functionality as it is now as per draft.

• All the functionality to add/edit/delete posts should work as it is.

• Each topic also has the ability to edit/delete through the dropdown menu, see screenshot. We should show this menu in the new drawer header for 3-dots button.
  - In the old design, we can edit the topic title. We should implement it in the new design inside drawer header as shown on this draft. For the buttons, use save and close icons. Background color under icons is $tc-gray-10, border radius 3px.
  - Delete topic button should also work as it is.

• Notifications regarding post and topics have link to the topics and post. As we are moving topics and posts to another page URL, we should update link in notifications:
  - change TOPIC to /projects/{{projectId}}/messages/{{topicId}}
  - change POST to /projects/{{projectId}}/messages/{{topicId}}#comment-{{postId}}
  - Also, update the old links to new one everywhere in the code.
  - We have updated links to the topics and posts. As we already used the old links in the emails and other places outside Coonect app, we should implement redirecting old URLs to the new URLs.
  - Make sure that all the features like openeing drawer work good after such redirect and old link is not present in browser history.

• Remove functionality related to the full screen mode which is broken at the moment. Here is some code to start from.

Keep features

• When we start creating/editing topic/post and trying to navigate to another page, we get confimation alert. This should also work with the new design and when we are trying to close TopicDrawer after started creating/editing new topic/post.

• We keep mobile screens out of scope for the new design. Though on mobile devices we have a separate button for creating topics, please keep mobile button as it is (on the Messages tab) with all the functionality.

• Posts inside phases should work as it is.

• New notifications are checked in the background every 1 minute. When we are already on the Dashboard page and a new notification about topic/post arrives there are two possible actions happens:
  - if we don’t scroll on the page, the page with topics is reloaded automatically
  - if we scroll down a bit, a button to reload topics manually is shown
  This is handled by this component. This functionality should be moved to the new Messages tab.

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 unread 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. Now create new topics/posts, which would trigger notifications.

Final Submission Guidelines

• Patch to the feature/redesign branch of Connect App

• The winner would be required to raise a PR to the repository.