Add Comments to Research Module

Description

This component is intended to add the ability to leave comments on each step of user-published Research Modules. It builds upon past work on the Comments feature (#1127, #1128, #1170, #1171).

Acceptance Criteria Checklist:

• Users can add and edit comments of their own only when logged in.
• If there are comments on a research step, a button appears at the end of its container that toggles open the comment viewer.
  • When expanded, comments are shown, followed by a comment submission form. These components should be reused from previous Comments feature work.
  • If the user is not logged in, the only difference is there is no comment submission form available to the user.
• If the there are no comments and the user is logged in, they will see a similar toggle button that invites them to start the discussion.
  • When expanded, this looked identical to the expanded comments section described above, but with no previous comments between the toggle button and the comment submission form.
• If there are no comments and the user is logged out, no toggle button or indication of comments are shown.
• All buttons have hover/focus states that align with the mockups and the existing design system.

Related Pages

Will be used in:

• Research Module (#1110, #1111)

Mockups

Visit the Figma space where the mockups are hosted to fulling inspect the mockups. Comments and questions about them can be added by pressing C and clicking where you want to pin a discussion, tag @franknoirot or @davehakkens within.

Here are screenshots of the 3 main layouts taken on 30/12/21:

1. A logged-in user’s view of 3 research steps: no comments, comments collapsed, and comments expanded

2. Hover/active states of a logged-in user’s view. Note that the “no comments” step is shown expanded to add the first comment:

3. A logged-out user’s view of the same 3 research steps:

Example(s)

See existing Comment component

Build suggestions

I recommend creating a component that wraps the existing Comments component in a toggle button and container. The main state variables that influence this wrapper component are:

• Is the user logged in/authenticated
• Are there comments on this step or not
• Is this toggle to control the container on or off

There is backend work that will require someone with more knowledge on the system to weigh in on, but I believe Firestore Subcollections could serve to associate comments to steps within a Research module. The comments should follow the data model used to implement them elsewhere on the platform.

[thisislawatts]

Thanks @jojudre, let me know if you want to jump on a kick-off call to talk through anything. Otherwise happy to chat async here or on the PR.

[jojudre]

Hey! i will try to do this)