fix(notification-center): add infinite scroll, delete events and loading states (#DS-5164)#1627
Conversation
🚨 E2E tests failedReview the report for details. 💡 Comment |
|
/approve-snapshots |
|
🔄 Updating snapshots. |
|
✅ Snapshots updated! |
🚨 E2E tests failedReview the report for details. 💡 Comment |
🚨 E2E tests failedReview the report for details. 💡 Comment |
|
/approve-snapshots |
|
🔄 Updating snapshots. |
|
✅ Snapshots updated! |
There was a problem hiding this comment.
Pull request overview
Adds infinite-scroll pagination and deletion signaling to the Notification Center component/service, with corresponding UI states, localization, docs, and examples.
Changes:
- Introduces infinite scroll via
KbqNotificationCenterService.onNextPage, plusloadingMore,loadMoreErrorMode,hasMore, and a configurablescrolledToBottomOffset. - Adds deletion event reporting (
onDeletewithKbqNotificationDeleteEvent) and toast tracking (toastId+hideToast()). - Updates Notification Center UI (bottom loader/error rows, test ids), locales/public API guard, docs, examples, and expands unit test coverage.
Reviewed changes
Copilot reviewed 27 out of 29 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| tools/public_api_guard/components/notification-center.api.md | Updates public API surface for new service fields/events and new types. |
| tools/public_api_guard/components/core.api.md | Extends locale typings to include the new loadingMore string. |
| packages/docs-examples/components/notification-center/notification-center-push/notification-center-push-example.html | Updates badge coloring behavior in the example. |
| packages/docs-examples/components/notification-center/notification-center-popover/notification-center-popover-example.html | Updates badge coloring behavior in the example. |
| packages/docs-examples/components/notification-center/notification-center-overview/notification-center-overview-example.html | Updates badge coloring behavior in the example. |
| packages/docs-examples/components/notification-center/notification-center-infinite-scroll/notification-center-infinite-scroll-example.ts | Adds a new infinite-scroll example showcasing paging + load-more error/retry. |
| packages/docs-examples/components/notification-center/notification-center-infinite-scroll/notification-center-infinite-scroll-example.html | Adds the trigger template for the new infinite-scroll example. |
| packages/docs-examples/components/notification-center/notification-center-error/notification-center-error-example.html | Updates badge coloring behavior in the example. |
| packages/docs-examples/components/notification-center/notification-center-empty/notification-center-empty-example.html | Updates badge coloring behavior in the example. |
| packages/docs-examples/components/notification-center/index.ts | Registers/exports the new infinite-scroll docs example. |
| packages/components/notification-center/notification-item.ts | Adds test id and prevents duplicate onRead emissions once already read. |
| packages/components/notification-center/notification-item.html | Adds a test id to the remove button. |
| packages/components/notification-center/notification-center.ts | Implements scroll-to-bottom detection + offset input wiring; adds spinner module; minor subscription safety tweak. |
| packages/components/notification-center/notification-center.spec.ts | Adds unit tests for infinite scroll, deletion events, toast hiding, ordering, and read-once behavior. |
| packages/components/notification-center/notification-center.service.ts | Adds paging state subjects, deletion event emitter/type, toast id tracking + hideToast, and deterministic grouping order. |
| packages/components/notification-center/notification-center.scss | Adjusts layout padding and adds styles for load-more spinner/error rows. |
| packages/components/notification-center/notification-center.ru.md | Documents infinite scroll and deletion behavior (RU). |
| packages/components/notification-center/notification-center.html | Adds load-more UI states, binds scroll handler, and adds test ids for key UI elements. |
| packages/components/notification-center/notification-center.en.md | Documents infinite scroll and deletion behavior (EN). |
| packages/components/notification-center/_notification-center-theme.scss | Ensures error styling applies to the new load-more error row. |
| packages/components/navbar/navbar-item.scss | Adjusts badge filled fade-contrast background behavior in navbar context. |
| packages/components/core/locales/tk-TM.ts | Adds loadingMore locale string. |
| packages/components/core/locales/ru-RU.ts | Adds loadingMore locale string. |
| packages/components/core/locales/pt-BR.ts | Adds loadingMore locale string. |
| packages/components/core/locales/es-LA.ts | Adds loadingMore locale string. |
| packages/components/core/locales/en-US.ts | Adds loadingMore locale string. |
| packages/components-dev/notification-center/module.ts | Displays the new infinite-scroll example in the dev module. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
🚨 E2E tests failedReview the report for details. 💡 Comment |
|
/approve-snapshots |
|
🔄 Updating snapshots. |
|
✅ Snapshots updated! |
No description provided.