Change Details

The NotificationOverlay is an example of an Overlay that adds OOjs UI components inside an Overlay, however right now it mixes the two things. {F28296505} We will pull out a NotificationList component that looks like this: {F28296504} = 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 = Sign off steps [] Ensure tasks are spun out for descoped acceptance criteria.

The NotificationOverlay is an example of an Overlay that adds OOjs UI components inside an Overlay, however right now it mixes the two things. {F28296505} We will pull out a NotificationList component that looks like this: {F28296504} = 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.

The NotificationOverlay is an example of an Overlay that adds OOjs UI components inside an Overlay, however right now it mixes the two things. {F28296505} We will pull out a NotificationList component that looks like this: {F28296504} = 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.