aws-amplify / aws-amplify/amplify-ui
[StorageBrowser] Show how many pages a location has, and allow jumping to the last page
- Dominant language
- TypeScript
- Stars
- 1.1k
- Forks
- 347
- Avg merge
- 18h 29m
- Merged PRs (30d)
- 9
Description
### On which framework/platform would you like to see this feature implemented?
React
### Which UI component is this feature-request for?
Storage
### Please describe your feature-request in detail.
In `LocationDetailView`, the page numbers only go as far as the pages already reached. There is no total page count and no way to go to the last page.
On `main` (b837a59) and in 3.18.2, the default pagination passes `highestPageVisited` as the total:
https://github.com/aws-amplify/amplify-ui/blob/b837a59ea21a3d89f6430c71742af2a9913898f3/packages/react-storage/src/components/StorageBrowser/components/defaults.tsx#L55-L66
and `highestPageVisited` is the highest page the user has opened:
https://github.com/aws-amplify/amplify-ui/blob/b837a59ea21a3d89f6430c71742af2a9913898f3/packages/react-storage/src/components/StorageBrowser/views/hooks/usePaginate.ts#L27-L66
So a location with 250 objects first shows page `1` and a next arrow. Page `2` appears once page 2 is opened, and page `3` once page 3 is opened. Until the user has walked through every page, the pagination gives no sign of how many there are, and the last page can only be reached by pressing next repeatedly. In 3.9.1 the count was derived from the items loaded so far instead, which shows one page ahead but has the same limit.
With a few thousand objects this means many clicks, each of which lists another page from S3, and files near the end of a large location are hard to reach.
I understand the constraint: `ListObjectsV2` returns a continuation token rather than a total, so the number of pages is not known until the listing has been read to the end. Search already works around this by listing up to `SEARCH_LIMIT` (10,000) items before filtering:
https://github.com/aws-amplify/amplify-ui/blob/b837a59ea21a3d89f6430c71742af2a9913898f3/packages/react-storage/src/components/StorageBrowser/useAction/createEnhancedListHandler.ts#L62-L74
Related but different: #6627 is about the page size of `listLocationItems`; this request is about moving between pages.
### Please describe a solution you'd like.
Any of these would help, roughly from least to most involved:
1. **Number every page whose items are already loaded**, not only the pages visited, so the user can jump straight to any of them. This needs no extra requests.
2. **Show the total once it is known.** When the listing reaches the end (no `nextToken`), the page count is exact and can be shown in full.
3. **A "last page" action** that lists the remaining pages, bounded the same way search is by `SEARCH_LIMIT`, and then shows the total.
4. **Pass more to a custom `Pagination` component.** It can already be overridden, but it receives only `page`, `hasNextPage` and `highestPageVisited`, so an application cannot show a count or offer a jump even if it wants to accept the extra requests. Passing the number of loaded items and whether the listing is complete would make that possible.
### We love contributors! Is this something you'd be interested in working on?
- [x] 👋 I may be able to implement this feature request.
- [ ] ⚠️ This feature might incur a breaking change.
Contributor guide
Research direction
Start by tracing pagination from packages/react-storage/src/components/StorageBrowser/components/defaults.tsx through views/hooks/usePaginate.ts, then compare the listing flow in useAction/createEnhancedListHandler.ts. Review the proposed approaches with maintainers before choosing one; done means LocationDetailView exposes useful page navigation without assuming an unavailable S3 total.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- aws, react, typescript
- Domain
- cloud, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100