Fix: Update button position when number of rows per page is large

[curq]

Description

After the fix the table component no longer renders unused space for extra rows. Before the fix when the option max rows per page was larger than actual number of results, the table component was rendered with height that could fit max number of rows per page and not the actual number. Screenshot from the issue #3756:

The number of results in this screen is 50, while the max number of rows per page is 100. As the result, half of the table component is empty and the update button is pushed far below. I have checked the component from the docs in the sandbox and this is expected behavior.
Therefore, to prevent this bug I assumed that we need to ensure that max number of rows is never larger than number of rows in resulting table. This fix does exactly that. The same case (50 resulting rows, 100 max number of rows),

The fix is achieved by updating usePagination hook.

Issues Resolved

Fixes #3756

Check List

• All tests pass
  • yarn test:jest
  • yarn test:jest_integration
  • yarn test:ftr
• New functionality includes testing.
• New functionality has been documented.
• Update CHANGELOG.md
• Commits are signed per the DCO using --signoff

[ananzh]

@curq Added comment here
#3737 (comment)

Let me know if you want to combine the bug fixes into one PR. I am okay with one or two PRs. If you prefer two PRs, I could approve this one. You just need to update CHANGELOG. Once this PR #3397 is merged, I might open an issue and assign you to update unit test.

[curq]

@ananzh I decided to make two PR instead of combining both. I made separate PR #3816. and added more explanation here
I'm also open to updating unit tests when the PR you mentioned will be merged.

[ananzh]

@ananzh I decided to make two PR instead of combining both. I made separate PR #3816. and added more explanation here I'm also open to updating unit tests when the PR you mentioned will be merged.

Got it. I approved.

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 66.42%. Comparing base (0a83c47) to head (fbc5a52).
⚠️ Report is 2229 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3797      +/-   ##
==========================================
- Coverage   66.42%   66.42%   -0.01%     
==========================================
  Files        3209     3209              
  Lines       61732    61732              
  Branches     9533     9533              
==========================================
- Hits        41006    41004       -2     
- Misses      18439    18441       +2     
  Partials     2287     2287              

Flag	Coverage Δ
Linux	66.36% <ø> (-0.01%)	⬇️
Windows	66.37% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ 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.

[joshuarrrr]

@curq Thanks for the fix!

I have checked the component from the docs in the sandbox and this is expected behavior.

This strikes me as not ideal. Do you mind opening an issue in OUI where we can discuss whether this behavior is actually desired or useful?

[curq]

This strikes me as not ideal. Do you mind opening an issue in OUI where we can discuss whether this behavior is actually desired or useful?

@joshuarrrr as you requested, I opened a new issue in OUI repo where I have provided a more detailed description of the behavior, along with examples.

[joshuarrrr]

all checks passed, but I need to resolve a changelog conflict

[joshuarrrr]

data source manager cypress test failures are safe to ignore.

[opensearch-trigger-bot]

The backport to 2.x failed:

The process '/usr/bin/git' failed with exit code 128

To backport manually, run these commands in your terminal:

# Fetch latest updates from GitHub
git fetch
# Create a new working tree
git worktree add ../.worktrees/backport-2.x 2.x
# Navigate to the new working tree
pushd ../.worktrees/backport-2.x
# Create a new branch
git switch --create backport/backport-3797-to-2.x
# Cherry-pick the merged commit of this pull request and resolve the conflicts
git cherry-pick -x --mainline 1 01c5a92858f531c87aa5508ed991c63f4e3af5f7
# Push it to GitHub
git push --set-upstream origin backport/backport-3797-to-2.x
# Go back to the original working tree
popd
# Delete the working tree
git worktree remove ../.worktrees/backport-2.x

Then, create a pull request where the base branch is 2.x and the compare/head branch is backport/backport-3797-to-2.x.

[joshuarrrr]

No need to backport - incorporated into #3397