The NotificationOverlay is an example of an Overlay that adds OOjs UI components inside an Overlay, however right now it mixes the two things.
We will pull out a NotificationList component that looks like this:
Acceptance criteria
- A factory function creates the notification overlay with the header "Notifications" and footer link "All notifications"
- NotificationsOverlay becomes a NotificationList that extends View
- The NotificationsOverlay no longer uses the loadingOverlay following the examples of the TalkOverlay and LanguageOverlay
Descoped:
- Code coverage is added for the newly spun out components (currently it is 0%)
QA steps
Run the following for LTR and RTL displays and on tablet and mobile.
- Log in
- Click the icon in the top right of your screen (top left in RTL mode)
- Expected: A drawer slides in
- I can close the drawer with back button
- I can close the drawer by clicking outside it (tablet)
- I can close the drawer by clicking on the close icon
- Visit https://en.m.wikipedia.org/wiki/Special:Notifications
- Click the filter icon
- Confirm the filter overlay displays and can be closed via close icon or back button
- Make sure you test the above when you have notifications
- Make sure you test the above when you do not have notifications (bell icon displays)
To get notifications:
- Open an incognito window and log in as user B
- Find an edit made the user A you want to give a notification on Special:Contributions/<username for A>
- Thank the user A for their edit
- User A should have a notification.
Sign off steps
- Ensure tasks are spun out for descoped acceptance criteria.
QA Results
| Status | Details |
| ✅ Passed | T217296#5068401 |
