Introduce preview pane to view notification in-context

Release notes

TODO

Problem to solve

  • Team leads are often involved in many concurrent discussions on issues, epics, and merge requests.
  • They have to jump from topic to topic as they review notifications on these items.
  • This requires a significant amount of time spent context switching between pages in GitLab.

Proposal

Introduce a preview drawer so people can get more information in context. This panel will give additional information about the to-do/notification and allow for people to take action on the notification immediately, and/or to decide which notifications require further follow up. A prototype of how this could work/look is visible here.

  • When a user clicks on a notification on the notification page, they should see a drawer view that provides information about the topic of the notification.
  • The drawer view should show the information most important to the given topic, whether they are comments or updates on issues/MRs, pipeline failures, or any other message.
  • Users should be able to navigate to the full-page view of the record from the drawer. They can also access the list actions like snoozing and "marking as done/archiving" from within the drawer. In addition, we'll allow them to jump between notification previews with previous/next buttons.
  • Shortcuts can be introduced to make this preview pane quicker to use. We could start with previous/next shortcuts, but could add shortcuts for snoozing, marking as done/archiving, or opening up the notification in a new tab.
  • We can start building this based on the content that currently shows up on the to-do list. We can add additional views when we add additional notification events to the UI list. The content of those notifications would initially be based on the content from email notifications but, we can continue to improve that content, in future, so the previews are more useful for all notification types.

A few example screens (full set of screens is visible in the prototype linked above, and in Figma):

Replying to a comment Comment in thread Pipeline preview Token expiration MR merged example Basic update example Pushed commits example Danger bot example Additional bot message example
To-do_list-8 To-do_list-7 To-do_list To-do_list-6 To-do_list-5 To-do_list-1 To-do_list-2 To-do_list-3 To-do_list-4

Figma file

Intended users

Feature Usage Metrics

  • % of users on notifications page that drill into preview pane
  • Weekly user retention for notifications page
Edited by Amelia Bauerly