Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[usage] Improve pagination behavior #11800

Merged
merged 1 commit into from
Aug 3, 2022
Merged

[usage] Improve pagination behavior #11800

merged 1 commit into from
Aug 3, 2022

Conversation

laushinka
Copy link
Contributor

@laushinka laushinka commented Aug 2, 2022 •
edited
Loading

Description

Improves the pagination behavior.
Note: This has a /hold label because it has a test commit that needs to be removed later.

1 2 3
Screenshot 2022-08-03 at 16 26 44 Screenshot 2022-08-03 at 16 26 54 Screenshot 2022-08-03 at 16 27 01

Related Issue(s)

Fixes #11530

How to test

This PR includes a file dummy.ts so that the pagination behavior when there are too many pages can be tested.
The number of results per page is also made smaller.

  1. Join this team.
  2. Go to https://lau-pagina7108ace06a.preview.gitpod-dev.com/t/gitpod/usage.
  3. Play around with the pagination.

Release Notes

NONE

Documentation

Werft options:

  • /werft with-preview

@werft-gitpod-dev-com
Copy link

started the job as gitpod-build-lau-pagination-layout-fixes-11530.2 because the annotations in the pull request description changed
(with .werft/ from main)

@laushinka laushinka force-pushed the lau/pagination-layout-fixes-11530 branch from 4e38cae to 8f5e018 Compare August 2, 2022 14:38
@roboquat roboquat added size/XXL and removed size/XL labels Aug 2, 2022
@laushinka laushinka force-pushed the lau/pagination-layout-fixes-11530 branch 2 times, most recently from 8073e74 to 4204132 Compare August 2, 2022 14:41
@laushinka laushinka marked this pull request as ready for review August 2, 2022 14:45
@laushinka laushinka requested a review from a team August 2, 2022 14:45
@github-actions github-actions bot added the team: webapp Issue belongs to the WebApp team label Aug 2, 2022
@laushinka
Copy link
Contributor Author

Due to a test commit:

/hold

@andrew-farries andrew-farries self-assigned this Aug 3, 2022
@andrew-farries
Copy link
Contributor

andrew-farries commented Aug 3, 2022 •
edited
Loading

Are you still able to access the preview for this? It doesn't work for me:

lau-pagina7108ace06a.preview.gitpod-dev.com redirected you too many times.

@laushinka
Copy link
Contributor Author

laushinka commented Aug 3, 2022 •
edited by werft-gitpod-dev-com bot
Loading

Are you still able to access the preview for this? It doesn't work for me:

Let me re-run it - that usually fixes it.

/werft run

👍 started the job as gitpod-build-lau-pagination-layout-fixes-11530.11
(with .werft/ from main)

@laushinka
Copy link
Contributor Author

@andrew-farries All good now https://lau-pagina7108ace06a.preview.gitpod-dev.com/t/gitpod/usage

@laushinka laushinka force-pushed the lau/pagination-layout-fixes-11530 branch from 4204132 to 140848c Compare August 3, 2022 09:26
@roboquat roboquat added size/L and removed size/XXL labels Aug 3, 2022
laushinka
laushinka commented Aug 3, 2022
View reviewed changes
components/dashboard/src/teams/TeamUsage.tsx Outdated
@@ -32,7 +32,7 @@ function TeamUsage() {
const team = getCurrentTeam(location, teams);
const [billedUsage, setBilledUsage] = useState<BillableSession[]>([]);
const [currentPage, setCurrentPage] = useState(1);
const [resultsPerPage] = useState(10);
const [resultsPerPage] = useState(1);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed the dummy file and instead set this to 1 per page. Will change to 15 before merging.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Already put back and will unhold.

@andrew-farries
Copy link
Contributor

Can you make me an owner of the team? Otherwise:

image

andrew-farries
andrew-farries reviewed Aug 3, 2022
View reviewed changes
Copy link
Contributor

@andrew-farries andrew-farries left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, just wonder about the need for the custom hook.

components/dashboard/src/components/Pagination.tsx Outdated Show resolved Hide resolved
components/dashboard/src/components/Pagination.tsx Outdated Show resolved Hide resolved
components/dashboard/src/custom-hooks/usePagination.ts Outdated Show resolved Hide resolved
components/dashboard/src/components/Pagination.tsx Outdated Show resolved Hide resolved
components/dashboard/src/custom-hooks/usePagination.ts Outdated Show resolved Hide resolved
@laushinka laushinka force-pushed the lau/pagination-layout-fixes-11530 branch 2 times, most recently from cdfe3b1 to c3c1e96 Compare August 3, 2022 14:00
andrew-farries
andrew-farries approved these changes Aug 3, 2022
View reviewed changes
Copy link
Contributor

@andrew-farries andrew-farries left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice. I like this more with the unit test and without the hook 👍

/hold for the typing issue and this comment: https://github.com/gitpod-io/gitpod/pull/11800/files#r936443747

components/dashboard/src/Pagination/Pagination.tsx Show resolved Hide resolved
@laushinka laushinka force-pushed the lau/pagination-layout-fixes-11530 branch 2 times, most recently from eb47fde to 7567bdb Compare August 3, 2022 14:54
@laushinka laushinka force-pushed the lau/pagination-layout-fixes-11530 branch from 7567bdb to a6fbc1e Compare August 3, 2022 16:12
@laushinka
Copy link
Contributor Author

laushinka commented Aug 3, 2022 •
edited by werft-gitpod-dev-com bot
Loading

Thank you @andrew-farries for reviewing and making sure I don't over-engineer 🧡

@roboquat roboquat merged commit b1c03ca into main Aug 3, 2022
@roboquat roboquat deleted the lau/pagination-layout-fixes-11530 branch August 3, 2022 16:37
@roboquat roboquat added deployed: webapp Meta team change is running in production deployed Change is completely running in production labels Aug 4, 2022
@gtsiolis gtsiolis mentioned this pull request Aug 10, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@andrew-farries andrew-farries andrew-farries approved these changes

Assignees

@andrew-farries andrew-farries

Labels
deployed: webapp Meta team change is running in production deployed Change is completely running in production release-note-none size/L team: webapp Issue belongs to the WebApp team
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Improve pagination layout, design, and structure
3 participants
@laushinka @andrew-farries @roboquat