feat: implement jump to page #4113

ngynmt · 2025-12-16T06:20:23Z

Description

The current pagination component forces users to navigate sequentially through pages, creating poor user experience for large datasets. Users frequently need to access specific pages (e.g., jumping from page 1 to page 50) but must click through each intermediate page, leading to time-consuming navigation for large datasets. This change proposes additional options for user to navigate to a specific page.

How has this been tested?

Added examples of open-ended and closed-ended scenarios under tables pages

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

Changes include appropriate documentation updates.
Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
Changes do not include unsupported browser features, see CONTRIBUTING.md.
Changes were manually tested for accessibility, see accessibility guidelines.

Security

If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

Changes are covered with new/existing unit tests?
Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

gethinwebster

To update snapshots: npm run build && npx jest -c jest.unit.config.js -u documenter test-util

gethinwebster · 2026-01-06T16:39:15Z

src/input/internal.tsx

    },
  };

+  const renderMainInput = () => (


const renderMainInput = <WithNativeAttributes....

gethinwebster · 2026-01-06T16:41:21Z

src/input/styles.scss

+  margin-block-start: calc(awsui.$space-scaled-xs * -1);
+}
+
+.inline-label {


move this to mixin so it can be reused between select and input, probably move to https://github.com/cloudscape-design/components/blob/main/src/internal/styles/forms/mixins.scss

gethinwebster · 2026-01-06T16:44:47Z

src/pagination/internal.tsx

 };

+const defaultI18nStrings: Required<PaginationProps.I18nStrings> = {
+  jumpToPageLabel: 'Page',


remove hardcoded strings

gethinwebster · 2026-01-06T16:47:31Z

src/pagination/interfaces.ts

+    loading?: boolean;
+  }
+
+  export interface JumpToPageRef {


gethinwebster · 2026-01-06T16:49:22Z

src/pagination/internal.tsx

-type InternalPaginationProps = PaginationProps & InternalBaseComponentProps;
+type InternalPaginationProps = PaginationProps &
+  InternalBaseComponentProps & {
+    jumpToPageRef?: React.Ref<PaginationProps.JumpToPageRef>;


use forwardRef on the internal component as well, rather than manually adding it to the props

gethinwebster · 2026-01-06T16:51:23Z

src/pagination/internal.tsx

+  function handleJumpToPageClick(requestedPageIndex: number) {
+    if (requestedPageIndex < 1) {
+      // Out of range lower bound - navigate to first page
+      setJumpToPageValue('1');


replace these 3 lines with handlePageClick(1)

gethinwebster · 2026-01-06T16:53:30Z

src/pagination/internal.tsx

+        handlePageClick(requestedPageIndex);
+      } else {
+        // Out of range - set error and navigate to last page
+        setHasError(true);


use handlePageClick here (with additional param for error state)

gethinwebster · 2026-01-06T16:54:49Z

src/pagination/internal.tsx

    tableComponentContext.paginationRef.current.openEnd = openEnd;
  }
+
+  const renderJumpToPageButton = () => {


plain value rather than function

gethinwebster · 2026-01-06T16:56:58Z

src/test-utils/dom/pagination/index.ts

+  /**
+   * Returns the error popover for jump to page.
+   */
+  findPopover(): PopoverWrapper | null {


findJumpToPagePopover

…loudscape-design#4155)

Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Andrei Zhaleznichenka <zhalea@amazon.de>

) Co-authored-by: Andrei Zhaleznichenka <zhalea@amazon.de>

…esign#4162)

…ign#4163)

…ign#4040) (cloudscape-design#4118)

…e-design#4174)

…ape-design#4175)

gethinwebster · 2026-01-14T12:18:12Z

src/i18n/messages/all.en.json

there are some unrelated changes in the i18n folder, can you remove them? (I've just merged the latest from main into this PR branch, so there should no longer be any changes within the i18n folder needed at all)

Did I do it? I did git checkout upstream/main -- src/i18n but diff shows the new jump to page strings removed

Nvm, forgot to fetch :) done

codecov · 2026-01-16T08:10:19Z

Codecov Report

❌ Patch coverage is 95.48872% with 6 lines in your changes missing coverage. Please review.
✅ Project coverage is 97.14%. Comparing base (15e15bb) to head (58e9033).
⚠️ Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
src/pagination/internal.tsx	96.93%	3 Missing ⚠️
src/input/internal.tsx	50.00%	1 Missing and 1 partial ⚠️
src/popover/internal.tsx	95.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4113      +/-   ##
==========================================
- Coverage   97.15%   97.14%   -0.01%     
==========================================
  Files         875      878       +3     
  Lines       25673    25796     +123     
  Branches     9293     9334      +41     
==========================================
+ Hits        24942    25060     +118     
- Misses        684      688       +4     
- Partials       47       48       +1

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

ngynmt requested a review from a team as a code owner December 16, 2025 06:20

ngynmt requested review from YueyingLu and removed request for a team December 16, 2025 06:20

feat: implement pagination - jump to page

ab579b4

ngynmt force-pushed the new-jump-to-page-branch branch from 4a1ead1 to ab579b4 Compare January 5, 2026 23:19

Michelle Nguyen added 2 commits January 5, 2026 15:35

feat: add input inline label and popover controlled visibility

09ecdf6

fix: update demo pages to use ref-based error handling

7109f94

gethinwebster marked this pull request as draft January 6, 2026 15:36

gethinwebster reviewed Jan 6, 2026

View reviewed changes

pan-kot and others added 16 commits January 9, 2026 16:21

fix: Fixes drag handle UAP buttons to never render outside viewport (c…

b22f6c5

…loudscape-design#4155)

chore: switch build-tools to transition branch (cloudscape-design#4138)

94ac26c

chore: Bump qs and express (cloudscape-design#4145)

6dbd763

Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Andrei Zhaleznichenka <zhalea@amazon.de>

fix: wrap scrollToIndex in requestAnimationFrame (cloudscape-design#4134

3950362

) Co-authored-by: Andrei Zhaleznichenka <zhalea@amazon.de>

chore: update build-tools dependency to use main branch (cloudscape-d…

1bfe630

…esign#4162)

fix: Fixes UAP buttons forced padding (cloudscape-design#4171)

90a4fea

fix: Fixes treeview offset for better items alignment (cloudscape-des…

def84b9

…ign#4163)

feat: add post-copy event handlers to CopyToClipboard (cloudscape-des…

a1881da

…ign#4040) (cloudscape-design#4118)

fix: Fix sticky state listener logic to listen size change (cloudscap…

99cac32

…e-design#4174)

chore: modify snapshot update instructions (cloudscape-design#4176)

c44ab5e

fix: Restore focus to tutorial panel on dismiss (cloudscape-design#4167)

55b4ef0

chore: Add extra dev page to test popover trigger focus ring (cloudsc…

e04be93

…ape-design#4175)

feat: add pagination - jump to page, update i18n, snapshots

7fd9e6f

Merge branch 'main' into new-jump-to-page-branch

83c5e3d

Merge branch 'main' into new-jump-to-page-branch

88e81fb

Merge branch 'main' into new-jump-to-page-branch

96ecbbc

gethinwebster reviewed Jan 15, 2026

View reviewed changes

Michelle Nguyen added 2 commits January 15, 2026 15:42

Remove unrelated i18n changes

3c6aca2

Remove unrelated i18n changes

58e9033

gethinwebster deployed to dev-pages-react16 January 16, 2026 08:24 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react18 January 16, 2026 08:24 — with GitHub Actions View deployment

feat: implement jump to page #4113

Are you sure you want to change the base?

feat: implement jump to page #4113

Uh oh!

Conversation

ngynmt commented Dec 16, 2025

Description

How has this been tested?

Correctness

Security

Testing

Uh oh!

gethinwebster left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Jan 16, 2026

Codecov Report

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

gethinwebster left a comment •

edited

Loading