Add new notification displayed when there are pending updates

[acelaya]

Part of #6255

This PR adds the initial logic to display a toast-like notification when new updates are available (new annotations, updated annotations, etc).

The notification is fully displayed for 5 seconds, and then collapsed to be less intrusive. When hovered it gets uncollapsed. When clicked, it loads all pending updates.

The notification replaces the existing PendingUpdatesButton, and is currently handled by a feature flag.

notification-2024-03-15_15.32.30.mp4

Testing steps

1. Check out this branch
2. Open http://localhost:3000 in two different browsers
3. Create an annotation in one of them. The other one should show the existing PendingUpdatesButton.
4. Go to http://localhost:5000/admin/features and enable the pending_updates_notification feature.
5. Repeat step 3 and check that the new notification is displayed this time, instead of the PendingUpdatesButton
6. If you wait for ~5 seconds, the notification should collapse to show only the icon and number of updates.
7. If you click the notification, it should load the new updates.

Out of scope

Some things will be eventually implemented but are out of the scope of this specific PR:

• The example in https://codepen.io/jaredpdesigns/full/bGQRKwO uses a slide-from-right animation when the notification is presented. I just added a fade-in because the existing slide-in-from-right one expects the element to be positioned based on the left side, so we would need a variation of it.
• The example also shows a behavior in which new updates are not "appended" right away, but debounced. I left that out of the scope of this PR for now, so it updates based on how new stuff is streamed.
• The notifications count is incremented with a slide-up animation. I did not implement that here.
• When the notification is clicked, the design shows how the user is scrolled to the new annotations. That is not implemented here, as it has several considerations:
  • We need to decide to which annotation we scroll, as they could be in a few places.
  • We need to decide if there's some case in which the user should not be scrolled to the new annotations, for example if an annotation creation/edition is in progress.

Considerations

• The icon in the notification is the same we have in the existing button, as we don't have one like in the designs.

TODO

• Evaluate final color for notification
• Make notification "collapse" after a couple of seconds, and fully show on hover
• Implement notification in notebook
• Add tests

[codecov]

Codecov Report

Attention: Patch coverage is 95.23810% with 2 lines in your changes are missing coverage. Please review.

Project coverage is 99.43%. Comparing base (3ad17ab) to head (5b6d1b3).

❗ Current head 5b6d1b3 differs from pull request most recent head 7a76ae3. Consider uploading reports for the commit 7a76ae3 to get more accurate results

Files	Patch %	Lines
.../sidebar/components/PendingUpdatesNotification.tsx	94.11%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6256      +/-   ##
==========================================
- Coverage   99.44%   99.43%   -0.02%     
==========================================
  Files         266      267       +1     
  Lines       10135    10177      +42     
  Branches     2400     2418      +18     
==========================================
+ Hits        10079    10119      +40     
- Misses         56       58       +2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[acelaya]

Codecov is marking as not covered two lines annotated with istanbul ignore next 🤔

[robertknight]

I found an issue where the notice does not appear when there are pending deletions but no pending updates.

1. Create two annotations
2. Open two tabs
3. Delete one annotation in tab A. No notification appears in the other tab.
4. Update the other annotation in tab A. A notification appears in the other tab with the text "Load 2 updates"

[acelaya]

I found an issue where the notice does not appear when there are pending deletions but no pending updates.

1. Create two annotations
2. Open two tabs
3. Delete one annotation in tab A. No notification appears in the other tab.
4. Update the other annotation in tab A. A notification appears in the other tab with the text "Load 2 updates"

I experienced the same during testing, but I thought this was by design, because the existing PendingUpdatesButton behaves the same.

[robertknight]

I experienced the same during testing, but I thought this was by design, because the existing PendingUpdatesButton behaves the same.

I'm can't remember if that was intentional or not. Looking at the behavior with fresh eyes, I think it would be better to change this so that deletions, additions and updates are all handled the same way.

[robertknight]

This looks good. I provided some feedback on handling of deletions but I think that can be addressed in a subsequent PR.

[robertknight]

wrapper.update's main function is to sync the wrapper with the rendered DOM, which is not immediately updated after the timeout fires, however it does also flush any pending state updates first. Since the state update is queued inside the timeout callback, this is OK.

[acelaya]

I'm can't remember if that was intentional or not. Looking at the behavior with fresh eyes, I think it would be better to change this so that deletions, additions and updates are all handled the same way.

Agreed. I found it a bit counter-intuitive when I saw it.