Create a new toast-like notification that is displayed when there are pending updates

[acelaya]

We are currently displaying an actionable button in the sidebar's top bar when there are pending updates. However, this is a bit too subtle and not everyone understands what is it for, ending up ignoring it.

We want to transition into a more intuitive notification that is displayed with an animation, and basically indicates the availability of pending updates.

notification-2024-03-13_15.16.51.mp4

Considerations:

• Handle feature through a feature flag.
• The notification should be accessible, announcing screen readers when it appears.

Documents:

• PRD: https://docs.google.com/document/d/12j0AGx4h8bExsicRTyp478TdDlyxXtQ4lkLwNj_06SA/edit#heading=h.gjdgxs
• Design: https://www.figma.com/file/g4JcVE36CLLaPHwwpyHuIu/Load-Newer-Annotations?type=design&node-id=0-1&mode=design&t=q7JjnvWuB6tv1c67-0

TODO

• Feature flag
• Basic notification implementation
• Implement slide-from-right animation
• Make deletion updates to be displayed like other updates
• Highlight new/changed annotations that are loaded when updates are applied
  • Highlight with a subtle border in the brand color.
  • Think for how long the highlighting style should be visible (a few seconds, until the user interacts with the page, etc.)
• Scroll to the latest annotation that is appended when updates are applied
  • Scroll to first highlighted annotation when loaded #6337
  • Scroll to most recent highlighted annotation #6338
• Consider debouncing the addition of pending updates -> We'll do only if it becomes too annoying
• Find a way to track clicks on the notification: As a starting point, we could add some endpoint in h backend where the client sends events and the BE just logs them as standard application logs. Later on we could evolve this to send events to some off-the-self analytics service.
  • Add route to log pushed analytics events h#8623
  • Switch to {app}.{area}.{event} format for analytics events h#8643
  • Track every time the pending updates notification is clicked #6275
• Use icon from designs.
  • Add download icon frontend-shared#1494
  • Pending updates notification improvements #6274
• Small improvements/fixes
  • Display "update" in singular when there's only one update.
  • Verify expanding/collapsing notification works hovering over icon.
  • Confirm font color used in notification matches designs.

[acelaya]

Icon from design in SVG (copied from figma)

<svg width="16" height="16" viewBox="0 0 16 16" fill="red" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.70711 11.7071L8.6129 11.7903L8.5114 11.8596C8.12751 12.0884 7.62334 12.0375 7.29289 11.7071L3.29289 7.70711L3.2097 7.6129C2.90468 7.22061 2.93241 6.65338 3.29289 6.29289L3.3871 6.2097C3.77939 5.90468 4.34662 5.93241 4.70711 6.29289L7 8.585V1L7.00673 0.883379C7.06449 0.38604 7.48716 0 8 0C8.55229 0 9 0.447715 9 1V8.585L11.2929 6.29289L11.3871 6.2097C11.7794 5.90468 12.3466 5.93241 12.7071 6.29289C13.0976 6.68342 13.0976 7.31658 12.7071 7.70711L8.70711 11.7071ZM15.9933 9.88338C15.9355 9.38604 15.5128 9 15 9L14.8834 9.00673C14.386 9.06449 14 9.48716 14 10V14H2V10L1.99327 9.88338C1.93551 9.38604 1.51284 9 1 9C0.447715 9 0 9.44771 0 10V15L0.00672773 15.1166C0.0644928 15.614 0.487164 16 1 16H15L15.1166 15.9933C15.614 15.9355 16 15.5128 16 15V10L15.9933 9.88338Z" fill="black"/>
</svg>

[acelaya]

I'm closing this as completed, but the feature is still disabled via FF. There's ongoing conversations around when to enable it.

There will be some potential follow-up tasks to improve some aspects around highlighting and scrolling into loaded annotations.