Paginate the asset library with infinite scroll (Closes #970)#973
Merged
Conversation
…970) The My Assets and Admin Assets pages fetched only the first page (server default 50) and rendered a static "Showing X of Y" footer with no way to load the rest, so a user with more than 50 assets could never see them. Both pages now use useInfiniteQuery-backed hooks (useInfiniteAssets / useInfiniteSharedWithMe / useInfiniteAdminAssets) that accumulate pages with id-deduplication, plus a shared useInfiniteScroll hook that auto-loads the next page as the list scrolls near the bottom (issue asked for "more assets load as I scroll down"). A "Load more" button remains as a manual fallback and loading indicator, and the behaviour is identical in grid (thumbnail) and table views. IntersectionObserver proved unreliable inside the portal's nested overflow-auto container, so the hook uses a scroll listener with a near-bottom threshold and degrades to the button where there is no scroll container (jsdom/tests).
make dev now detects when the default host ports (5432/8080/9000/11434) are held by another stack (e.g. a running DataHub or leftover e2e postgres) and shifts postgres/api/s3/ollama together to the first free port window, threading the resolved DEV_*_PORT values through docker-compose, platform.yaml, seed-s3.sh, Vite (VITE_API_TARGET) and every curl. Keycloak, Vite, Prometheus, the metrics endpoint and the upstream fixtures stay on their fixed ports so the Keycloak realm's OIDC redirect URIs and the Prometheus scrape target keep working; the API-port move stays invisible to OIDC because the browser reaches the server through Vite's :5173 proxy. Resolved ports are persisted to gitignored dev/.dev-ports.env so make dev-info reprints correct URLs. The dev seed also creates 120 generated demo assets (126 total, content uploaded per type by seed-s3.sh) so the portal library exercises pagination out of the box.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #973 +/- ##
=======================================
Coverage 89.03% 89.04%
=======================================
Files 424 424
Lines 48581 48581
=======================================
+ Hits 43255 43257 +2
+ Misses 3550 3549 -1
+ Partials 1776 1775 -1 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The portal asset library now loads every asset via infinite scroll instead of stopping at the first page, resolving #970. A small set of local
make devimprovements is bundled in so the change is demonstrable out of the box:make devno longer collides with other running stacks, and the dev seed carries enough assets to actually exercise pagination.Closes #970.
The asset pagination fix
Before, the My Assets and Admin Assets pages fetched only the first page (server default of 50) and rendered a static "Showing X of Y" footer with no way to reach the rest, so a user with more than 50 assets could never see them.
Now both pages accumulate pages and load everything:
Implementation:
useInfiniteQuery-backed hooks (useInfiniteAssets,useInfiniteSharedWithMe,useInfiniteAdminAssets) accumulate pages and de-duplicate rows by id, so offset paging over acreated_at DESClist cannot re-emit a row or overcount when the window shifts. Page total is taken from the latest page so items added after the first fetch stay reachable, and an empty trailing page ends pagination so the control cannot spin forever.useInfiniteScrollhook (ui/src/hooks/useInfiniteScroll.ts) drives the auto-load for both pages. It uses a scroll listener with a near-bottom threshold rather than an IntersectionObserver, which did not fire reliably for content inside the portal's nestedoverflow-autocontainer. It attaches to the nearest scroll parent, reads the latest callback through a ref so scope and filter changes are picked up without re-attaching, and no-ops on degenerate layouts (zero scroll height, e.g. jsdom) so the "Load more" button remains the fallback.No backend change is required: the
/portal/assets,/portal/shared-with-me, and admin/assetsendpoints already supportlimitandoffsetand return a realtotal.Local dev improvements (bundled so the fix is demonstrable)
make devport auto-relocation:make devnow shifts those four together to the first free port window and threads the resolved values through docker-compose,platform.yaml(via${DEV_*_PORT}expansion),seed-s3.sh, Vite (VITE_API_TARGET), and every startup curl. No flags and no host setup are required; with no conflict the ports are unchanged.dev/.dev-ports.envsomake dev-inforeprints the correct URLs.Dev seed volume:
make devcomes up. Six assets never surfaced the 50-per-page behavior.Testing
eslintreports 0 errors,tsc --noEmitclean, production build succeeds.assets.test.ts), theuseInfiniteScrollhook across its near-bottom, no-more, in-flight, and degenerate-layout cases (useInfiniteScroll.test.ts), and the page-level pagination and empty-state behavior (MyAssetsPage.test.tsx).shellcheckclean andseed.sqlwas validated against a migrated schema (126 assets, even spread across the five content types).make dev: with 126 seeded assets, scrolling auto-loads 50 to 126 in both grid and table views, and the footer and "Load more" control retire once everything is loaded.Scope and follow-up
This PR paginates the asset library only. A survey of the other portal list surfaces (Resources, Collections, Feedback, Knowledge Pages, Users, Changelog, and the DataHub-backed browse tabs) found the same first-page cap on several of them; that work is tracked separately in #972 and reuses the
useInfiniteScrollhook introduced here.