feat(dashboard): Persist pagination in list pages fixes NV-6997 by scopsy · Pull Request #9702 · novuhq/novu

scopsy · 2025-12-21T19:19:36Z

What changed? Why was the change needed?

This PR introduces a new usePersistedPageSize hook to store user-selected pagination page sizes in localStorage. This hook manages a single map (novu-page-sizes) where each tableId is mapped to its selected page size.

The change was needed to persist user-selected pagination values across sessions for various paginated lists in the dashboard, improving user experience by remembering their preferences.

Affected components now using this persistence:

Workflows list
Subscribers list
Topics list
Layouts list
Activity table
HTTP Logs table
Contexts list

Relevant link: NV-6997

Screenshots

N/A

Expand for optional sections

Related enterprise PR

N/A

Special notes for your reviewer

N/A

Linear Issue: NV-6997

Introduce a hook to manage and persist table page sizes, improving user experience by remembering their preferences across sessions. Co-authored-by: dima <dima@novu.co>

cursor · 2025-12-21T19:19:38Z

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

linear · 2025-12-21T19:19:40Z

NV-6997 Persist store size pagination in workflows list

netlify · 2025-12-21T19:19:43Z

✅ Deploy Preview for dashboard-v2-novu-staging ready!

Name	Link
🔨 Latest commit	`610aea8`
🔍 Latest deploy log	https://app.netlify.com/projects/dashboard-v2-novu-staging/deploys/6964b5235414d70008ca1ecb
😎 Deploy Preview	https://deploy-preview-9702.dashboard-v2.novu-staging.co
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

…ws-842f

scopsy · 2026-01-12T08:49:07Z

@coderabbitai review

coderabbitai · 2026-01-12T08:49:15Z

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

coderabbitai · 2026-01-12T08:52:10Z

Walkthrough

This pull request introduces a persistent page size mechanism across multiple dashboard tables. A new hook use-persisted-page-size is added to store page size preferences in local storage, keyed by table identifiers. Multiple components and URL state hooks are updated to initialize and update page sizes via this persistence layer instead of relying solely on in-memory state or URL parameters. Additionally, the ActivityTable component API is expanded with new props for filters and loading states, and page size change logic now supports conditional navigation based on a feature flag.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat(dashboard): Persist pagination in list pages fixes NV-6997' accurately and specifically describes the main change in the changeset - introducing pagination persistence to multiple dashboard list pages.
Description check	✅ Passed	The description clearly explains what was changed (new usePersistedPageSize hook for localStorage), why it was needed (improve UX by remembering user preferences), which components are affected, and provides a reference to the related Linear issue.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (3)

apps/dashboard/src/components/layouts/layout-list.tsx (1)
9-13: Move constant definition after all imports.

The LAYOUTS_TABLE_ID constant is defined between import statements (lines 11-12), breaking import grouping conventions. Move it after all imports for cleaner organization.

Additionally, this constant is duplicated in use-layouts-url-state.tsx. Consider exporting it from a single location to avoid potential drift.
Suggested organization
 import {
   LayoutsFilter,
   LayoutsSortableColumn,
   LayoutsUrlState,
   useLayoutsUrlState,
 } from '@/components/layouts/hooks/use-layouts-url-state';
 import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
-
-const LAYOUTS_TABLE_ID = 'layouts-list';
-
 import { LayoutListBlank } from '@/components/layouts/layout-list-blank';
 import { LayoutRow, LayoutRowSkeleton } from '@/components/layouts/layout-row';
+// ... other imports ...
+
+const LAYOUTS_TABLE_ID = 'layouts-list';
Or better, export the constant from use-layouts-url-state.tsx and import it here.
apps/dashboard/src/components/layouts/hooks/use-layouts-url-state.tsx (1)
4-6: Consider consolidating the LAYOUTS_TABLE_ID constant.

This constant is also defined in layout-list.tsx. Having the same constant in two files risks them drifting apart. Consider exporting it from this file so layout-list.tsx can import it:
-const LAYOUTS_TABLE_ID = 'layouts-list';
+export const LAYOUTS_TABLE_ID = 'layouts-list';
Also applies to: 18-24
apps/dashboard/src/hooks/use-persisted-page-size.ts (1)
36-43: Consider simplifying the useEffect dependency.

The useEffect includes pageSize in its dependency array, but its purpose is primarily to sync state when tableId changes. Including pageSize causes the effect to run on every page size change, even though the condition prevents unnecessary state updates.
♻️ Optional: Remove pageSize from dependencies
  useEffect(() => {
    const map = getPageSizeMap();
    const stored = map[tableId];

-   if (stored !== undefined && stored !== pageSize) {
+   if (stored !== undefined) {
      setPageSizeState(stored);
    }
- }, [tableId, pageSize]);
+ }, [tableId]);
This ensures the effect only runs when tableId changes, which is the primary use case. When setPageSize is called, it updates both state and storage synchronously, so no additional sync is needed.

📜 Review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between cd1191a and 610aea8.

📒 Files selected for processing (10)

apps/dashboard/src/components/activity/activity-table.tsx
apps/dashboard/src/components/contexts/hooks/use-contexts-url-state.ts
apps/dashboard/src/components/http-logs/logs-table.tsx
apps/dashboard/src/components/layouts/hooks/use-layouts-url-state.tsx
apps/dashboard/src/components/layouts/layout-list.tsx
apps/dashboard/src/components/subscribers/hooks/use-subscribers-url-state.ts
apps/dashboard/src/components/topics/hooks/use-topics-url-state.ts
apps/dashboard/src/hooks/use-logs-url-state.ts
apps/dashboard/src/hooks/use-persisted-page-size.ts
apps/dashboard/src/pages/workflows.tsx

🧰 Additional context used

📓 Path-based instructions (10)

**/*.{ts,tsx}