[Lens] Enable Table Pagination

[drewdaemon]

Summary

This PR allows users to enable pagination in their data tables.

Resolves #96778

Screen.Recording.2021-11-15.at.10.54.13.AM.mov

Checklist

Delete any items that are not applicable to this PR.

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Unit or functional tests were updated or added to match the most common scenarios
• Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
• Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
• This was checked for cross-browser compatibility

[drewdaemon]

@elasticmachine merge upstream

[kibanamachine]

merge conflict between base and head

[drewdaemon]

@elasticmachine merge upstream

[drewdaemon]

@flash1293 @mbondyra this is ready for another look whenever you have time.

[flash1293]

Not sure whether we can influence this, but if there are only a few rows in the table, toggling pagination doesn't change anything which is a bit weird - the user might wonder what that switch is actually doing:

Can we enforce showing the pagination footer? If not I think it's fine the way it is

[drewdaemon]

Can we enforce showing the pagination footer?

The logic that is hiding it is here. It checks if the number of rows is less than the lowest page-size option. So, if we were to allow the user to select pages of size 1, we would cover every non-zero case and the pagination control would display if there was at least one row.

A good middle ground might be to add a page size option of 5 (we could still keep the default at 10). I think that would cover most cases since I don't think users would be looking for pagination options if their table has less than five rows.

A final option might be to disable the pagination toggle in the toolbar if the row count is less than the minimum possible page size.

What do you think?

[flash1293]

I think we can just leave it as is and add an info tooltip to the setting (pagination is hidden if there are less than 10 items)

[drewdaemon]

@flash1293 done.

[flash1293]

Works great, thanks!

[dej611]

This is a weird bug, I suspect related to EuiDataGrid component rather than this PR, that gets triggered by a combination of the Pagination feature with the Column-pivot feature in Lens:

• Create a table with Rows + Metrics
• Enable pagination
• Add a Columns dimension to "pivot"
• Now the table is no longer scrollable 🤔

It is still possible to access the last rows via keyboard, but not via scrolling:

Tested on Chrome and Safari, and can reproduce with both.

[flash1293]

@dej611 Could you open an EUI issue for this? Seems pretty weird

[dej611]

I think this big warning here may be related: https://elastic.github.io/eui/#/tabular-content/data-grid-virtualization

In the demo it explains that sometimes the table needs some strong hints about rerendering.
I've tried locally to add a key={columns.map(({ id }) => id).join('-') + '-' + pagination?.pageSize} which seems to fix it.

I'm trying to isolate the issue for reproduction on the EUI.

[drewdaemon]

@elasticmachine merge upstream

[mbondyra]

@elasticmachine merge upstream

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 8bffe28
• Storybooks Preview

Metrics [docs]

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
lens	242	243	+1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
lens	962.6KB	964.0KB	+1.4KB

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
lens	23	24	+1

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
lens	44.1KB	44.2KB	+36.0B

Unknown metric groups

API count

id	before	after	diff
lens	259	260	+1

History

• 💚 Build #8089 succeeded d97c17e
• 💔 Build #8071 failed 0a71b0c
• 💚 Build #7781 succeeded 09a9e18
• 💚 Build #7727 succeeded 86ef429
• 💚 Build #7545 succeeded 5a86c55
• 💚 Build #7481 succeeded e20cc21

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[dej611]

Tested locally with Safari 👍