Add grouped view to the to-do list

Marco Tomasirequested to merge
627723-todos-grouped-view into master

What does this MR do and why?

Adds a grouped view to the to-do list, so to-dos about the same issue or merge request are shown together instead of scattered across the list.

The view is behind the todos_grouped_view wip feature flag, which is off by default in production.

  • Grouping per page: to-dos are grouped on the current page only. Pagination, mark as done, snooze and bulk actions work exactly as in the list view. When there is more than one page, a short notice says that other pages might have more to-dos for the same item. This was agreed in the refinement thread of the issue as a first iteration.
  • Sorting: cards follow the server's sort order. A card sits where its first to-do appears, and to-dos keep their order inside the card. Every sort option (Recommended, Updated, Label priority) works without client-side sorting.
  • Grouping key: targetUrl is not reliable for grouping. It can point at a note (#note_…) or, for failed pipelines, at the merge request's pipelines tab. The key uses the item's own path (targetEntity.webPath) when available, and falls back to targetUrl without the anchor.

The commits are split so each one can be reviewed on its own:

  1. Add the feature flag
  2. Add the grouping util
  3. Allow hiding the target name in to-do titles (the list view is unchanged)
  4. Add the grouped view

Open UX details still being settled with design, none of which block this MR because the flag is off:

  • The design for the Snoozed and Done tabs is under discussion in Pajamas. Today the toggle is hidden there.
  • The wording of the pagination notice.
  • Tracking for the toggle.

References

Screenshots or screen recordings

Screenshots will be added before this MR is marked as ready.

Feature flag OFF (current production todos page) Feature flag ON
image.png

How to set up and validate locally

  1. Enable the feature flag in the Rails console:

    Feature.enable(:todos_grouped_view)

  2. Make sure your user has several pending to-dos on the same issue or merge request. For example, ask for a review and mention yourself a few times on the same merge request.

  3. Visit http://gdk.test:3000/dashboard/todos.

  4. Select Grouped next to the sort dropdown. To-dos on the same item are shown in one card, in the same order as the list.

  5. Change the sort option and direction. The cards follow the new order.

  6. Collapse and expand a card. Mark a to-do as done from a card. Select to-dos in a card and use the bulk actions.

  7. With more to-dos than fit on one page, check that the notice above the cards is shown.

  8. Switch to the Snoozed and Done tabs. The toggle is hidden and the list is shown.

  9. Reload the page. The grouped view is still selected.

  10. Disable the flag with Feature.disable(:todos_grouped_view) and reload. The toggle is gone and the list view is unchanged.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Marco Tomasi

Merge request reports