aws-amplify / aws-amplify/amplify-ui

[StorageBrowser] Show how many pages a location has, and allow jumping to the last page

Open
#7,138 1 comment 0 reactions 0 assignees View on GitHub
feature-request
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.