feat: add pagination to change dataset modal

[pkdotson]

SUMMARY

this pr adds pagination to change dataset modal so that user can go though all their datasets.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Screen.Recording.2021-05-26.at.11.52.37.AM.mov

TESTING INSTRUCTIONS

will be updating tests.

ADDITIONAL INFORMATION

• Has associated issue:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[junlincc]

/testenv up

[github-actions]

@junlincc Container image not yet published for this PR. Please try again when build is complete.

[github-actions]

@junlincc Ephemeral environment creation failed. Please check the Actions logs for details.

[junlincc]

/testenv up

[github-actions]

@junlincc Ephemeral environment spinning up at http://35.166.116.182:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[junlincc]

please see video before and after your change
Fixed warning, search and header are no longer working properly

Screen.Recording.2021-05-26.at.11.17.04.AM.mov

[codecov]

Codecov Report

Merging #14844 (5034d96) into master (dfe030b) will decrease coverage by 0.01%.
The diff coverage is 70.00%.

@@            Coverage Diff             @@
##           master   #14844      +/-   ##
==========================================
- Coverage   77.62%   77.60%   -0.02%     
==========================================
  Files         962      963       +1     
  Lines       49172    49285     +113     
  Branches     6184     6209      +25     
==========================================
+ Hits        38169    38247      +78     
- Misses      10801    10837      +36     
+ Partials      202      201       -1     

Flag	Coverage Δ
javascript	72.42% <70.00%> (-0.02%)	⬇️

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

Impacted Files	Coverage Δ
...-frontend/src/datasource/ChangeDatasourceModal.tsx	86.04% <50.00%> (-4.87%)	⬇️
...et-frontend/src/components/TableView/TableView.tsx	95.31% <90.00%> (-2.91%)	⬇️
...nd/src/explore/components/DataTablesPane/index.tsx	83.90% <0.00%> (-4.99%)	⬇️
...onfigModal/FiltersConfigForm/FiltersConfigForm.tsx	68.37% <0.00%> (-2.91%)	⬇️
...mponents/nativeFilters/FiltersConfigModal/utils.ts	67.94% <0.00%> (-0.81%)	⬇️
...perset-frontend/src/views/CRUD/chart/ChartList.tsx	73.75% <0.00%> (-0.35%)	⬇️
...src/dashboard/components/FiltersBadge/selectors.ts	76.69% <0.00%> (-0.23%)	⬇️
...-frontend/src/visualizations/presets/MainPreset.js	0.00% <0.00%> (ø)
...ntend/src/explore/components/ExploreChartPanel.jsx	16.66% <0.00%> (ø)
... and 13 more

---

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 dfe030b...5034d96. Read the comment docs.

[junlincc]

/testenv up

[github-actions]

@junlincc Ephemeral environment spinning up at http://34.219.191.205:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[junlincc]

@pkdotson could you update the the video in description that reflects the latest?
thanks

[rusackas]

Left some comments of varied importance, but there's one thing I noticed while testing.

The good news is, we can now see each page of the datasets!

The bad news is, the table header sorting only sorts the particular page of results you're looking at, not the whole set

For an example approach, the CRUD views work nicely, in that if you are sorting alphabetically, the first items on page one are all the As, and the last item on the last page are all the Zs.

I think it's worth solving this in a followup PR, where clicking the sort header changes the orderBy parameter on the query itself.

Side note: (cc @junlincc here) the sort on name doesn't seem to work at all, really. That's not the fault of this PR, as far as I see. Can you confirm, and if that's the case, file an Issue? Thanks!

[pkdotson]

Left some comments of varied importance, but there's one thing I noticed while testing.

The good news is, we can now see each page of the datasets!

The bad news is, the table header sorting only sorts the particular page of results you're looking at, not the whole set

For an example approach, the CRUD views work nicely, in that if you are sorting alphabetically, the first items on page one are all the As, and the last item on the last page are all the Zs.

I think it's worth solving this in a followup PR, where clicking the sort header changes the orderBy parameter on the query itself.

Side note: (cc @junlincc here) the sort on name doesn't seem to work at all, really. That's not the fault of this PR, as far as I see. Can you confirm, and if that's the case, file an Issue? Thanks!

Yes i'll create a ticket to do a follow up for server sorting to keep the scope of pagination with this pr.

[pkdotson]

/testenv up

[github-actions]

@pkdotson Ephemeral environment spinning up at http://54.213.161.246:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[junlincc]

@pkdotson could you update the the video in description that reflects the latest?

bumped. please update video in description, thanks. @rusackas

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.

[rusackas]

See #15014 for an alternate solution.