Skip to content

Design widget - Enable commenting

Summary

This issue is to add support for commenting on designs within the design management overlay (opening a design image), along with functionality such as editing comments, adding reactions (emojis), resolving threads, displaying comment counts in the main body widget, and similar functionality.

Acceptance criteria

Adding a new thread
  • Adding a new thread is only possible when the comments panel/sidebar is displayed (it can be hidden from the top toolbar).
  • User should be able to click on an area within the design (image) to create a thread/pin.
    • When hovering over the design/image, use the crosshair cursor
    • Once an area is selected (clicked/touched):
      • Display the image-comment-dark indicator/pin in that location (see this design for indicator - proposing slight change from legacy)
      • Display (and focus) the editor in the sidebar, directly under the last thread (if one already exists)
      • Actions under the editor should be Comment and Cancel
      • Comment (submit) button should be disabled until something is entered in the field.
      • Remove/hide the empty state message, if it exists. If the user cancels or doesn't submit the comment, the empty state message should return.
      • If a user adds content to the editor, and then chooses Cancel, display a confirmation modal with Continue creating and Discard changes as options
    • Once a new comment is submitted:
      • Update the Threads count (heading)
      • Change the marker (where image-comment-dark icon was) to be the corresponding thread count number
      • Show the new comment as a new thread in the sidebar (with the count indicator/circle above it)
Replying to a thread
  • User should be able to reply to any thread, through a Reply input at the bottom of the thread.
  • Once Reply is selected:
    • Show the editor, along with a Resolve thread checkbox at the bottom
    • Actions under the editor should be Comment and Cancel
    • If a user adds content to the editor, and then chooses Cancel, display a confirmation modal with Continue creating and Discard changes as options
Resolving threads
  • User should be able to Resolve thread on any thread that has been created
    • One way to do this is through a button (check-circle icon) displayed towards the top right of the comment .
    • Another way is when replying to a comment and using the Resolve thread checkbox when submitting (as mentioned above)
  • When a thread is resolved:
    • The thread moves under a collapsed (by default) Resolved threads (N) (N being the number of resolved threads) section. (Note: this copy is a slight change from legacy, which uses Resolved comments)
    • The threads in this section are ordered based on thread number (low - high)
    • Thread pins are no longer displayed by default, but only when the collapsed section is expanded.
    • Thread pins have slightly different visual treatment, using gray-500 as the color.
    • On the discussion in the sidebar, the Resolve thread button is replaced with a Unresolve thread button (check-circle-filled icon).
    • Thread replies are collapsed by default
    • Users can still reply to resolved threads
    • When replying to a resolved thread, display a Unresolve thread checkbox
      • When a user replies and checks this, the thread is no longer resolved and goes back to the default (unresolved) state.
    • Other actions/interactions such as Edit comment, Add reaction, Copy link, and Delete comment remain the same for Resolved comments.
Other interactions with a comment
  • User should be able to Edit their own comments.
    • Clicking the Edit comment (pencil icon) button on the comment displays it in Edit state
    • Actions under the editor should be Save comment and Cancel
    • If a user makes changes in the editor, and then chooses Cancel, display a confirmation modal with Continue editing and Discard changes as options
  • User should be able to Delete their own comments.
    • Clicking the Delete comment action from within the More actions menu (ellipsis icon) brings up a confirmation modal.
    • Actions from within this menu are Delete comment and Cancel
    • Confirming (Delete comment) removes the comment from the sidebar
    • If the comment was the main thread (a top level comment), remove the pin and also update the Thread count (this applies for both the Unresolved and Resolved sections).
    • If the thread being deleted was the last unresolved thread, display the empty state message after deletion.
    • If the thread being deleted was the last resolved thread in that section, remove the resolved section.
  • User should be able to add reactions to any comment
    • Clicking on the Add reaction (slight-smile icon on rest, smile icon on hover) button should open the common reactions disclosure (used in other areas of the product) where users can search, filter, and select emojis.
    • Once a reaction has been added, show the reaction underneath the comment content
    • If a user clicks/selects a reaction they have already added, it should remove the reaction
    • Ensure counts are shown on the reactions that have been added (the ones under the comment content)
  • User should be able to link to any comment Note: this is currently only working/displaying for a user's own comments currently, so this is a change from legacy.
    • Clicking the Copy link action from within the More actions menu (ellipsis icon) saves the URL to the users clipboard.
    • After selecting this option, display a Toast message of "Link copied to clipboard."

Resources

Spike MR: !147989 (closed)

Edited by Anastasia Khomchenko