feat(Pagination): automate pagination and overflow logic by evwilkin · Pull Request #3182 · patternfly/patternfly-react · GitHub

What:
fixes #3136

This feature allows the component to automatically paginate the users's data for them, and provides a "defaultToFullPage" flag that will automatically move the user back to the last full page of results when they change the number of rows to view per page.

Additional issues:

Hi. Can you update the title of the PR to be more descriptive please. Thanks!

PatternFly-React preview: https://patternfly-react-pr-3182.surge.sh

Codecov Report

Merging #3182 into master will decrease coverage by <.01%.
The diff coverage is 79.31%.

@@            Coverage Diff             @@
##           master    #3182      +/-   ##
==========================================
- Coverage   67.52%   67.52%   -0.01%     
==========================================
  Files         896      896              
  Lines       25112    25133      +21     
  Branches     2173     2178       +5     
==========================================
+ Hits        16958    16971      +13     
- Misses       7141     7147       +6     
- Partials     1013     1015       +2

Flag	Coverage Δ
#misc	95.45% <ø> (ø)	⬆️
#patternfly3	69.28% <ø> (ø)	⬆️
#patternfly4	65.01% <79.31%> (-0.01%)	⬇️

Impacted Files	Coverage Δ
...eact-core/src/components/Pagination/Navigation.tsx	86.81% <100%> (+0.93%)	⬆️
...eact-core/src/components/Pagination/Pagination.tsx	81.25% <50%> (-1.29%)	⬇️
...rc/components/Pagination/PaginationOptionsMenu.tsx	87.03% <64.28%> (-8.21%)	⬇️
...nfly-react/src/components/Pagination/Pagination.js	27.27% <0%> (-0.57%)	⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b110a3f...9e2a445. Read the comment docs.

How are these utils used with the pagination component?

I'm also curious how does this solve #1567 (e.g., using an offset). There is no example showing usage?

Ideally, the pagination component would be able to figure out what page you're on based on the total available rows and number of items per page.

I left a few questions/comments, looking good. On first pass, it seems to improve the intro-table tutorial quite a bit - excited to get this in!

This is looking really great! Left a couple of questions, beyond that the only thing I think we wanted to mention is that I'm seeing the following error in the console:

Even with that error, the demo works fine so probably something simple. Nice work!

I wonder if there's a better way of handling that page here could be a string or a number. Could we instead cast it to a number in the place where it returns a string so we can avoid having to use as number type assertion in so many places? No worries if not, just curious in case it's an easy improvement.

… load

…and onPerPageSelect

…d handle pagination overflow. Fix for patternfly#3136

… handle pagination overflow. Fix for patternfly#3136

…o Navigation and PaginationOptionsMenu. onSetPage and onPerPageSelect now return 5 values each for use in automating pagination

…uilt out new Demo to show functionality

…variable

LGTM. Nice job

Curious if defaultToFullPage is a PatternFly pattern in core? If not, lets double check this behavior with a designer.

Thanks for calling this out @dlabrecq , doing this now

LGTM, nice work!

…tch new last page of results when page number is automatically updated

😁👍

Looks great @evwilkin Thanks for adding the documentation.

Love it! Nice work @evwilkin!

Your changes have been released in:

@patternfly/react-catalog-view-extension@1.1.44
@patternfly/react-core@3.126.0
@patternfly/react-docs@4.16.51
@patternfly/react-inline-edit-extension@2.14.2
demo-app-ts@3.14.0
@patternfly/react-integration@3.14.0
@patternfly/react-table@2.24.46
@patternfly/react-topology@2.11.32
@patternfly/react-virtualized-extension@1.3.45

Thanks for your contribution! 🎉

tlabaj reviewed Oct 22, 2019

View reviewed changes

tlabaj requested review from dlabrecq and seanforyou23 October 22, 2019 20:51

tlabaj assigned dlabrecq Oct 22, 2019

evwilkin changed the title Feat 3136 Feat(Pagination): automate pagination and overflow logic Oct 22, 2019

evwilkin changed the title Feat(Pagination): automate pagination and overflow logic feat(Pagination): automate pagination and overflow logic Oct 22, 2019

dlabrecq reviewed Oct 23, 2019

View reviewed changes

This was referenced Oct 31, 2019

Wording: Table step 9 patternfly/training-scenarios#140

Closed

React Table: Update time to 60 mins patternfly/training-scenarios#133

Closed

seanforyou23 suggested changes Nov 5, 2019

View reviewed changes

seanforyou23 mentioned this pull request Nov 6, 2019

feat(table): a second table tutorial patternfly/training-scenarios#122

Closed

evwilkin force-pushed the feat_3136 branch from 340a4fb to ad24d29 Compare November 11, 2019 18:45

evwilkin requested review from dlabrecq and seanforyou23 November 11, 2019 18:47

seanforyou23 suggested changes Nov 27, 2019

View reviewed changes

seanforyou23 added enhancement 🚀 labels Nov 27, 2019

evwilkin added 11 commits November 27, 2019 11:17

feat(pagination): pagination functionality recreated

849fca1

feat(pagination): automated pagination, automate partial results page…

a54af0c

… load

feat(pagination): page number automatically rewinding to last full page

f4914f3

feat(pagination): fixed error of page 1 loading last set of results

48489a7

feat(pagination): update getPageRows to be reusable across onSetPage …

5a38965

…and onPerPageSelect

feat(pagination): added utils to Pagination that paginate the data an…

e9bfc98

…d handle pagination overflow. Fix for patternfly#3136

eat(pagination): added utils to Pagination that paginate the data and…

d6aaddd

… handle pagination overflow. Fix for patternfly#3136

fixed typo

45be562

feat(pagination): moved automated pagination and overflow control int…

2af1caa

…o Navigation and PaginationOptionsMenu. onSetPage and onPerPageSelect now return 5 values each for use in automating pagination

feat(pagination): added automated pagination and overflow handling, b…

8c068d7

…uilt out new Demo to show functionality

feat(Pagination): updated snapshots and fixed onSetPage optional prop

ccd67a0

evwilkin added 3 commits November 27, 2019 11:30

feat(Pagination): updated integration tests

6d51b32

feat(Pagination): variable renaming and code cleanup

df6d7ac

feat(Pagination): inlined onSetPage and onPerPageSelect event listeners

c64bc2d

evwilkin force-pushed the feat_3136 branch from ad24d29 to c64bc2d Compare November 27, 2019 18:54

evwilkin added 2 commits November 27, 2019 16:01

feat(Pagination): fixed perPage of 0 throwing NaN error for lastPage …

81c1e23

…variable

fixed Table's rows prop to resolve console error

ca1b10c

dlabrecq previously approved these changes Nov 29, 2019

View reviewed changes

seanforyou23 previously approved these changes Dec 2, 2019

View reviewed changes

evwilkin added css review labels Dec 2, 2019

evwilkin requested review from mcarrano and mcoker December 2, 2019 15:58

feat(Pagination): fixed PaginationOptionsMenu not updating rows to ma…

f312fe8

…tch new last page of results when page number is automatically updated

evwilkin dismissed stale reviews from seanforyou23 and dlabrecq via f312fe8 December 2, 2019 16:23

mcoker previously approved these changes Dec 3, 2019

View reviewed changes

feat(Pagination): added documentation to demo

70acae0

evwilkin dismissed mcoker’s stale review via 70acae0 December 3, 2019 22:20

seanforyou23 reviewed Dec 4, 2019

View reviewed changes

Comment thread packages/patternfly-4/react-core/src/demos/PaginationTable.md

feat(Pagination): updated demo documentation

9e2a445

mcarrano approved these changes Dec 4, 2019

View reviewed changes

seanforyou23 approved these changes Dec 5, 2019

View reviewed changes

evwilkin merged commit af19ff8 into patternfly:master Dec 5, 2019

evwilkin deleted the feat_3136 branch December 5, 2019 14:09

                     const inputPage = Navigation.parseInteger(this.state.userInputPage, lastPage) as number;
                     onPageInput(event, Number.isNaN(inputPage) ? (page as number) : inputPage);
-                    onSetPage(event, Number.isNaN(inputPage) ? (page as number) : inputPage);
+                    this.handleNewPage(event, Number.isNaN(inputPage) ? (page as number) : inputPage);

                 /** Select from options to number of items per page. */
                 perPageOptions?: PerPageOptions[];
+                /** Indicate whether to show last full page of results when user selects perPage value greater than remaining rows */
+                defaultToFullPage?: boolean;

feat(Pagination): automate pagination and overflow logic by evwilkin · Pull Request #3182 · patternfly/patternfly-react · GitHub

Uh oh!

feat(Pagination): automate pagination and overflow logic - #3182

feat(Pagination): automate pagination and overflow logic#3182evwilkin merged 19 commits intopatternfly:masterpatternfly/patternfly-react:masterfrom evwilkin:feat_3136evwilkin/patternfly-react:feat_3136Copy head branch name to clipboard

Conversation

evwilkin commented Oct 22, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tlabaj left a comment

Choose a reason for hiding this comment

Uh oh!

patternfly-build commented Oct 22, 2019

Uh oh!

codecov-io commented Oct 22, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

dlabrecq left a comment

Choose a reason for hiding this comment

Uh oh!

seanforyou23 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

seanforyou23 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

seanforyou23 Nov 27, 2019

Choose a reason for hiding this comment

Uh oh!

dlabrecq left a comment

Choose a reason for hiding this comment

Uh oh!

dlabrecq Nov 29, 2019 • 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!

evwilkin Dec 2, 2019

Choose a reason for hiding this comment

Uh oh!

seanforyou23 left a comment

Choose a reason for hiding this comment

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mcarrano left a comment

Choose a reason for hiding this comment

Uh oh!

seanforyou23 left a comment

Choose a reason for hiding this comment

Uh oh!

patternfly-build commented Dec 5, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

feat(Pagination): automate pagination and overflow logic#3182
evwilkin merged 19 commits into
patternfly:masterfrom
evwilkin:feat_3136

evwilkin commented Oct 22, 2019 •
edited
Loading

codecov-io commented Oct 22, 2019 •
edited
Loading

dlabrecq Nov 29, 2019 •
edited
Loading