Contextual Discussions on Wiki Pages

Problem

GitLab for Knowledge Management features two prominent solutions, GitLab Pages and GitLab Wiki. GitLab Wiki allows users to create Pages detailing specific projects, order them in a tree, see version history, and manually link these Pages to Issues/Epics/MRs/etc. However, it is very challenging to have conversations around the content of a Page. Users report having to manually link an Issue to a Page, the linked Issue being where conversations around the Page happen. These types of workflows decrease productivity and disconnect users from the very context they need to effectively move forward on a project.

Solution

Comments should be available in GitLab Wiki Pages for better usability of Wiki Pages. Comments provide an avenue for effective discussion, questions, and collaboration, and ultimately allow projects to move forward more efficiently.

There are several areas in which we can enable comments:

1: At the bottom of a Wiki pages (similar to what an activity thread looks like today on an Issue or Epic object type).

2: Adjacent to a specific line of text by highlighting it. A user could highlight and add a comment similar to how we are able to do so on lines of code today.

Requirements

1. Contextual discussions
   • Goal: Allow people to be able to select and quote some text on the page and start a discussion. The comment can similarly have replies as well. This should work similar to how comments on merge request diffs work today.

Implementation Guide

This builds on the work in Top-Level Discussion on Wiki Pages (#465370 - closed)

1. Wiki pages use Markdown underneath. Selecting and quoting a text to start a discussion requires knowing the line number and range of the text selected. This can be determined using markdown source-maps.
2. Use the above additional information to send additional context when creating a note.
3. Allow the ability to select some text and add a start a discussion, by showing a "Comment" button in a tooltip.
4. When the wiki page is rendered, determine which location the previously added comment needs to be rendered at. If the location cannot be determined because the page was edited since the comment was added, we hide the comment in a separate "Hidden Comments" section.
5. Add tests in Jest and feature specs like in Phase 1.