fix: persist customers pagination/search in URL state and improve table layout

[impoiler]

Summary

Improves the layout of governance pages (Customers, Virtual Keys, Access Profiles, RBAC) so that tables fill the available viewport height without causing the full page to scroll. Also migrates the Customers page search and pagination state into URL query parameters so that filters and page position are preserved in browser history.

Changes

• Applied h-[calc(100vh_-_50px)] flex flex-col to governance page wrappers so content fills the viewport and inner tables can grow to fill remaining space.
• Replaced useState for search and offset on the Customers page with nuqs useQueryStates, syncing both values to the URL with history: "push". Resetting search now also resets offset to 0 in a single state update.
• Added isFetching prop to CustomersTable and VirtualKeysTable to prevent the empty state from flashing while a fetch is in progress.
• Refactored CustomersTable layout to use flex flex-col grow so the table container expands to fill available space and the pagination bar stays anchored at the bottom.
• Redesigned the customers pagination controls to use ghost icon-only prev/next buttons with a "Page X of Y" label, and formatted entry counts with toLocaleString.
• Removed the Save icon from the customer sheet submit button.

Type of change

• Bug fix
• Feature
• Refactor
• Documentation
• Chore/CI

Affected areas

• Core (Go)
• Transports (HTTP)
• Providers/Integrations
• Plugins
• UI (React)
• Docs

How to test

1. Navigate to the Customers governance page and verify the table fills the viewport without a full-page scrollbar.
2. Enter a search term and paginate — confirm the search and page offset are reflected in the URL and survive a browser back/forward navigation.
3. Clear the search and confirm the offset resets to 0.
4. Delete the last item on the last page and confirm the offset snaps back correctly.
5. Verify no empty-state flash occurs while data is loading on the Customers and Virtual Keys pages.

cd ui
pnpm i
pnpm build

Screenshots/Recordings

Add before/after screenshots of the governance table pages showing the full-height layout and updated pagination controls.

Breaking changes

• Yes
• No

Related issues

Security considerations

None. URL state contains only non-sensitive pagination and search values.

Checklist

• I read docs/contributing/README.md and followed the guidelines
• I added/updated tests where appropriate
• I updated documentation where needed
• I verified builds succeed (Go and UI)
• I verified the CI pipeline passes locally if applicable

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ea545971-7105-481d-ad8d-41ac462ee95f

📥 Commits

Reviewing files that changed from the base of the PR and between ceb6243 and 7f9e347.

📒 Files selected for processing (7)

• ui/app/workspace/governance/access-profiles/page.tsx
• ui/app/workspace/governance/customers/page.tsx
• ui/app/workspace/governance/rbac/page.tsx
• ui/app/workspace/governance/views/customerSheet.tsx
• ui/app/workspace/governance/views/customerTable.tsx
• ui/app/workspace/governance/virtual-keys/page.tsx
• ui/app/workspace/virtual-keys/views/virtualKeysTable.tsx

---

📝 Walkthrough

Summary by CodeRabbit

Release Notes

• New Features

  • Customers page search and pagination now sync with the URL for shareable, bookmarkable links

• Bug Fixes

  • Fixed empty state display appearing while data is loading

• Style

  • Updated pagination controls and layout spacing on governance pages

Walkthrough

This PR refactors the customers page to use URL-backed state for search and pagination via nuqs, adds an isFetching prop to customers and virtual-keys table components to suppress empty-state UI during data loading, redesigns the pagination UI with a compact format, and applies cosmetic improvements to the CustomerSheet and governance page layouts.

Changes

Governance state management and table empty-state handling

Layer / File(s)	Summary
Table loading-state prop contracts ui/app/workspace/governance/views/customerTable.tsx, ui/app/workspace/virtual-keys/views/virtualKeysTable.tsx	CustomersTable and VirtualKeysTable interfaces add optional isFetching?: boolean prop; both components destructure the new prop.
Customers page URL-backed state migration ui/app/workspace/governance/customers/page.tsx	Replace local state with nuqs useQueryStates for search and pagination offset. Customer fetch and offset snap-back logic now read/write URL state instead of component state.
CustomersTable isFetching integration and pagination redesign ui/app/workspace/governance/views/customerTable.tsx	Implement isFetching prop to prevent empty-state display during loading. Redesign pagination bar as compact text-xs layout with ghost icon buttons. Update table header and spacing. Rewire CustomersTable props to use URL state for search/offset and receive isFetching.
VirtualKeysTable and virtual-keys page isFetching wiring ui/app/workspace/governance/virtual-keys/page.tsx, ui/app/workspace/virtual-keys/views/virtualKeysTable.tsx	VirtualKeysTable empty-state condition updated to require !isFetching. Virtual-keys page destructures isFetching from hook and passes it to the table.
CustomerSheet import reordering and icon removal ui/app/workspace/governance/views/customerSheet.tsx	Reorder component imports (Input/Label before NumberAndSelect), remove Save icon import and rendering from submit button, reformat Validator rule arrays without changing validation logic.
Governance page layout styling updates ui/app/workspace/governance/access-profiles/page.tsx, ui/app/workspace/governance/rbac/page.tsx	Access-profiles and RBAC pages add viewport-based height constraint and scrollable layout styling (h-[calc(100vh_-_50px)], flex, overflow-y-auto).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• maximhq/bifrost#3675: Both PRs remove the Save icon from sheet submit buttons in governance views.
• maximhq/bifrost#3487: Both PRs modify customers and virtual-keys table components with overlapping UI refinements.
• maximhq/bifrost#3560: Both PRs extend VirtualKeysTable functionality with loading state handling and virtual-keys page integration.

Suggested reviewers

• danpiths
• akshaydeo

Poem

🐰 Tables now know when they're hungry—
Behold the isFetching dance,
URLs remember journeys past,
Icons fade to elegant silence,
Layouts stretch to fill the void. ✨

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 05-26-fix_governance_pages_views_and_layout_fixes

---

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

[impoiler]

• feat: replace enabled badge with toggle switch and add edit action in MCP clients table #3809
• fix: exclude sonner toast elements from sheet outside-click detection #3805
• refactor: reuse SheetNavigationButtons component and useSheetNavigation hook #3804
• refactor: extract dashboard tab data-fetching into dedicated TabView components #3797
• feat: add GetDimensionRankings API and dashboard tabs for team, customer, BU, and user rankings #3766
• refactor: replace TeamDialog with TeamSheet and improve teams table layout #3757
• feat: add SearchSelect component with sync and async support #3752
• fix: persist customers pagination/search in URL state and improve table layout #3751 👈 (View in Graphite)
• feat: add prev/next navigation to RoutingRuleInfoSheet #3745
• feat: add prev/next navigation to MCPClientSheet #3744
• feat: add keyboard navigation and URL state for virtual key detail sheet #3740
• feat: add useSheetNavigation hook and SheetNavigationButtons component #3739
• refactor: replace CustomerDialog with CustomerSheet for customer create/edit #3726
• feat: log database type when connecting in NewConfigStore #3724
• dev

This stack of pull requests is managed by Graphite. Learn more about stacking.

[greptile-apps]

Confidence Score: 4/5

Safe to merge after fixing the snap-back guard; the current logic fires a redundant setUrlState on every poll cycle when the list is empty.

The snap-back effect in customers/page.tsx calls setUrlState on every 5-second poll whenever the list is empty, because the guard urlState.offset < customersTotal evaluates to 0 < 0 = false and lets the call through even when offset is already 0. The rest of the changes are straightforward and carry no logic risk.

ui/app/workspace/governance/customers/page.tsx — the snap-back useEffect guard needs a no-op check before calling setUrlState.

Important Files Changed

Filename	Overview
ui/app/workspace/governance/customers/page.tsx	Migrates search/offset to nuqs URL state; snap-back effect fires unnecessarily (and pushes history) when both offset and total are 0, which re-triggers on every 5-second poll.
ui/app/workspace/governance/views/customerTable.tsx	Layout refactored to flex/grow; isFetching guard prevents initial flash but causes the empty state to flicker away on every polling cycle when the list is empty.
ui/app/workspace/governance/virtual-keys/page.tsx	Adds isFetching prop to VirtualKeysTable; same polling-vs-empty-state tradeoff as the customers table but no new logic changes.
ui/app/workspace/virtual-keys/views/virtualKeysTable.tsx	Accepts optional isFetching prop and adds it to the empty-state guard; no other logic changes.
ui/app/workspace/governance/views/customerSheet.tsx	Removes the Save icon from the submit button and fixes indentation in the Validator array spreads; no logic changes.
ui/app/workspace/governance/access-profiles/page.tsx	Adds viewport-height flex layout to the wrapper div; purely cosmetic.
ui/app/workspace/governance/rbac/page.tsx	Adds viewport-height flex layout with overflow-y-auto; purely cosmetic.

_{Reviews (4): Last reviewed commit: "fix: governance pages views and layout f..." | Re-trigger Greptile}

[akshaydeo]

Merge activity

• May 27, 1:44 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• May 27, 1:52 PM UTC: Graphite rebased this pull request as part of a merge.
• May 27, 1:53 PM UTC: @akshaydeo merged this pull request with Graphite.

The base branch was changed.