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

evwilkin · 2019-10-22T20:39:32Z

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:

tlabaj

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

patternfly-build · 2019-10-22T20:49:28Z

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

codecov-io · 2019-10-22T20:49:59Z

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.

dlabrecq

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.

seanforyou23

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!

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

packages/patternfly-4/react-core/src/components/Pagination/PaginationOptionsMenu.tsx

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

packages/patternfly-4/react-core/src/components/Pagination/Navigation.tsx

packages/patternfly-4/react-core/src/components/Pagination/Pagination.tsx

seanforyou23

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!

packages/patternfly-4/react-core/src/components/Pagination/Pagination.tsx

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

seanforyou23 · 2019-11-27T15:31:52Z

packages/patternfly-4/react-core/src/components/Pagination/Navigation.tsx

  ): void {
    if (event.keyCode === KEY_CODES.ENTER) {
      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);


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

dlabrecq

LGTM. Nice job

dlabrecq · 2019-11-29T17:17:35Z

packages/patternfly-4/react-core/src/components/Pagination/Pagination.tsx

@@ -69,6 +85,8 @@ export interface PaginationProps extends React.HTMLProps<HTMLDivElement> {
  perPage?: number;
  /** 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;


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

seanforyou23

LGTM, nice work!

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

mcoker

😁👍

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

mcarrano

Looks great @evwilkin Thanks for adding the documentation.

seanforyou23

Love it! Nice work @evwilkin!

patternfly-build · 2019-12-05T14:19:13Z

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 requested 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 seanforyou23 and dlabrecq November 11, 2019 18:47

seanforyou23 requested changes Nov 27, 2019

View reviewed changes

seanforyou23 added enhancement 🚀 PF4 React issues for the PF4 core effort 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 ux review labels Dec 2, 2019

evwilkin requested review from mcoker and mcarrano 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

packages/patternfly-4/react-core/src/demos/PaginationTable.md Show resolved Hide resolved

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

evwilkin commented Oct 22, 2019 •

edited

tlabaj left a comment

patternfly-build commented Oct 22, 2019

codecov-io commented Oct 22, 2019 •

edited

dlabrecq left a comment

seanforyou23 left a comment

seanforyou23 left a comment

seanforyou23 Nov 27, 2019

dlabrecq left a comment

dlabrecq Nov 29, 2019 •

edited

evwilkin Dec 2, 2019

seanforyou23 left a comment

mcoker left a comment

mcarrano left a comment

seanforyou23 left a comment

patternfly-build commented Dec 5, 2019

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

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

Conversation

evwilkin commented Oct 22, 2019 • edited

tlabaj left a comment

Choose a reason for hiding this comment

patternfly-build commented Oct 22, 2019

codecov-io commented Oct 22, 2019 • edited

Codecov Report

dlabrecq left a comment

Choose a reason for hiding this comment

seanforyou23 left a comment

Choose a reason for hiding this comment

seanforyou23 left a comment

Choose a reason for hiding this comment

seanforyou23 Nov 27, 2019

Choose a reason for hiding this comment

dlabrecq left a comment

Choose a reason for hiding this comment

dlabrecq Nov 29, 2019 • edited

Choose a reason for hiding this comment

evwilkin Dec 2, 2019

Choose a reason for hiding this comment

seanforyou23 left a comment

Choose a reason for hiding this comment

mcoker left a comment

Choose a reason for hiding this comment

mcarrano left a comment

Choose a reason for hiding this comment

seanforyou23 left a comment

Choose a reason for hiding this comment

patternfly-build commented Dec 5, 2019

evwilkin commented Oct 22, 2019 •

edited

codecov-io commented Oct 22, 2019 •

edited

dlabrecq Nov 29, 2019 •

edited