Pagination design fixes #13590

Hardik500 · 2022-10-04T17:11:16Z

Description

Changed the design of pagination component to match more with the current theme

Dark Mode:

Light Mode:

Disabled Dark Mode:

Disabled Light Mode:

Hover Dark Mode:

Hover Light Mode:

Related Issue(s)

Fixes #12537, #12027

How to test

Go to any page which has some pagination involved and check the pagination buttons

Release Notes

Improve pagination usability

Documentation

Werft options:

/werft with-preview

werft-gitpod-dev-com · 2022-10-04T17:11:19Z

annotations in the pull request changed, but user is not allowed to start a job

gtsiolis · 2022-10-05T08:02:36Z

/werft run

👍 started the job as gitpod-build-hardik-pagination-design-fixes-fork.0
(with .werft/ from main)

gtsiolis · 2022-10-05T14:48:48Z

/werft run

👍 started the job as gitpod-build-hardik-pagination-design-fixes-fork.1
(with .werft/ from main)

gtsiolis · 2022-10-05T15:16:38Z

/werft run with-preview with-payment

👍 started the job as gitpod-build-hardik-pagination-design-fixes-fork.2
(with .werft/ from main)

gtsiolis · 2022-10-05T15:49:55Z

/werft run with-preview with-payment

👍 started the job as gitpod-build-hardik-pagination-design-fixes-fork.3
(with .werft/ from main)

laushinka · 2022-10-12T08:21:45Z

/werft run

👍 started the job as gitpod-build-hardik-pagination-design-fixes-fork.4
(with .werft/ from main)

laushinka · 2022-10-13T10:31:01Z

@gtsiolis The preview env had to be run manually[internal]. Now the preview is available in case you'd like to test it.

meysholdt · 2022-10-13T14:31:36Z

hi @Hardik500, For us to be able to merge this PR, can you please sign our CLA via this DocuSign form? If there are any questions, you can reach me via [email protected].

Hardik500 · 2022-10-13T16:46:25Z

@meysholdt I've signed the DocuSign

meysholdt · 2022-10-14T08:25:35Z

Thank you for signing the CLA @Hardik500!

gtsiolis · 2022-10-14T08:33:26Z

/werft run

👍 started the job as gitpod-build-hardik-pagination-design-fixes-fork.5
(with .werft/ from main)

werft-gitpod-dev-com · 2022-10-14T10:36:25Z

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

vulkoingim · 2022-10-14T11:04:01Z

/werft run

👍 started the job as gitpod-build-hardik-pagination-design-fixes-fork.7
(with .werft/ from main)

laushinka · 2022-10-28T11:28:50Z

/werft run

👍 started the job as gitpod-build-hardik-pagination-design-fixes-fork.8
(with .werft/ from main)

werft-gitpod-dev-com · 2022-10-28T12:40:24Z

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

werft-gitpod-dev-com · 2022-10-28T12:56:26Z

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

laushinka · 2022-10-28T13:48:10Z

Hi @Hardik500, sorry for the long delay in reviewing! I hope you don't mind that I rebased your branch so that we don't have to go back and forth too much again.
From testing I found this issue where the pagination disappeared on number 4.

I recorded a short loom. Let me know if you can't view it.

Hardik500 · 2022-10-30T06:45:26Z

Hi @Hardik500, sorry for the long delay in reviewing! I hope you don't mind that I rebased your branch so that we don't have to go back and forth too much again. From testing I found this issue where the pagination disappeared on number 4.

I recorded a short loom. Let me know if you can't view it.

Hey @laushinka , I am unable to reproduce it. Attaching the video ref below

Pagination.For.Workspace.mov

laushinka · 2022-10-31T08:03:58Z

@Hardik500 Thanks for the recording! That does help. It could be my test cases in my preview environment that's causing it. Could you squash and rebase?

laushinka · 2022-10-31T09:30:37Z

components/dashboard/src/Pagination/Pagination.tsx

+                    isDisabled={currentPage === 1}
+                    onClick={prevPage}
+                    label={"Previous"}
+                    arrowReversed={false}


Instead of calling this arrowReversed and accepting a boolean, could you keep it as arrowDirection and accepts a string? This prop is used not only for left and right, but also up and down.

One question, @laushinka so for "up" and "down" arrowDirection, do I need to handle code for those too in PaginationNavigationButtons component. Cause right now the code flow would be like this?

You don't have to handle "up" and "down" here because we won't see those in Pagination. The intention is to be consistent with what the <Arrow /> component expects :)

Understood, I have made the respective changes

Thanks! Could you squash and rebase please? :)

gtsiolis · 2022-11-02T16:12:58Z

/werft run with-preview

👍 started the job as gitpod-build-hardik-pagination-design-fixes-fork.10
(with .werft/ from main)

werft-gitpod-dev-com · 2022-11-02T16:13:05Z

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

gtsiolis · 2022-11-02T16:19:36Z

Rebased and pushed, but job keeps failing. Looping this internally, see relevant discussion (internal). Cc @laushinka

werft-gitpod-dev-com · 2022-11-02T16:31:09Z

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

gtsiolis · 2022-11-02T16:35:43Z

/werft run with-clean-slate-deployment with-preview

👍 started the job as gitpod-build-hardik-pagination-design-fixes-fork.11
(with .werft/ from main)

laushinka · 2022-11-04T08:53:01Z

I'm going to approve this to unblock, but holding due to:

Checks not taking into account the already green build
@gtsiolis' review

/hold

werft-gitpod-dev-com · 2022-11-04T08:54:56Z

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

gtsiolis · 2022-11-04T11:36:53Z

Looking at this now! 👀

gtsiolis · 2022-11-04T11:40:13Z

/werft run with-clean-slate-deployment with-preview

👍 started the job as gitpod-build-hardik-pagination-design-fixes-fork.12
(with .werft/ from main)

gtsiolis · 2022-11-04T12:20:00Z

/werft run with-clean-slate-deployment with-preview

👍 started the job as gitpod-build-hardik-pagination-design-fixes-fork.13
(with .werft/ from main)

laushinka · 2022-11-04T12:39:59Z

/werft run

👍 started the job as gitpod-build-hardik-pagination-design-fixes-fork.14
(with .werft/ from main)

gtsiolis · 2022-11-04T14:11:15Z

/werft run

👍 started the job as gitpod-build-hardik-pagination-design-fixes-fork.15
(with .werft/ from main)

gtsiolis

Thanks @Hardik500 @laushinka! 🔮

I couldn't test this sufficiently as the preview environment is getting removed always under ~15 minutes, see relevant discussion (internal). Cc @vulkoingim @mads-hartmann

From what I see from the screenshots, this looks good. We can always make minor adjustments later in the styles. ✔️

I hope this is not adding a pagination in the workspaces list as seen in #13590 (comment). From the code changes it seems not but let me know if this is not the case. ⚠️

Approving and merging.

gtsiolis · 2022-11-04T15:56:12Z

/unhold

Hardik500 · 2022-11-04T16:18:13Z

Thanks @Hardik500 @laushinka! 🔮

I couldn't test this sufficiently as the preview environment is getting removed always under ~15 minutes, see relevant discussion (internal). Cc @vulkoingim @mads-hartmann

From what I see from the screenshots, this looks good. We can always make minor adjustments later in the styles. ✔️

I hope this is not adding a pagination in the workspaces list as seen in #13590 (comment). From the code changes it seems not but let me know if this is not the case. ⚠️

Approving and merging.

Thanks @gtsiolis
Don't worry this won't be adding any pagination to workspaces. I just added some dummy code to test my changes easily

laushinka · 2022-11-04T16:23:32Z

Thank you @Hardik500 for the patience and @gtsiolis for the co-reviewing 🙏🏽

Hardik500 requested a review from a team October 4, 2022 17:11

roboquat added do-not-merge/release-note-label-needed size/M labels Oct 4, 2022

gtsiolis added community-contribution do-not-merge/cla-pending CLA has not been signed labels Oct 5, 2022

meysholdt added cla: accepted ✔️ and removed do-not-merge/cla-pending CLA has not been signed labels Oct 14, 2022

laushinka force-pushed the hardik/pagination-design-fixes branch from 6e50bc7 to 7717c70 Compare October 28, 2022 12:37

laushinka force-pushed the hardik/pagination-design-fixes branch from 1864607 to 490e4ed Compare October 28, 2022 13:45

laushinka reviewed Oct 31, 2022

View reviewed changes

Hardik500 requested a review from laushinka November 1, 2022 17:59

laushinka requested a review from gtsiolis November 2, 2022 14:30

gtsiolis force-pushed the hardik/pagination-design-fixes branch 2 times, most recently from c6d715a to 05244d8 Compare November 2, 2022 16:12

roboquat added do-not-merge/hold release-note-none and removed do-not-merge/release-note-label-needed labels Nov 4, 2022

laushinka approved these changes Nov 4, 2022

View reviewed changes

Improve pagination usability

12d59f4

gtsiolis force-pushed the hardik/pagination-design-fixes branch from 05244d8 to 12d59f4 Compare November 4, 2022 12:19

gtsiolis approved these changes Nov 4, 2022

View reviewed changes

roboquat added release-note and removed release-note-none labels Nov 4, 2022

roboquat removed the do-not-merge/hold label Nov 4, 2022

roboquat merged commit 63deadd into gitpod-io:main Nov 4, 2022

gtsiolis mentioned this pull request Nov 9, 2022

Improve pagination usability #12027

Closed

Pagination design fixes #13590

Pagination design fixes #13590

Conversation

Hardik500 commented Oct 4, 2022 • edited by gtsiolis Loading

Description

Related Issue(s)

How to test

Release Notes

Documentation

Werft options:

werft-gitpod-dev-com bot commented Oct 4, 2022

gtsiolis commented Oct 5, 2022 • edited by werft-gitpod-dev-com bot Loading

gtsiolis commented Oct 5, 2022 • edited by werft-gitpod-dev-com bot Loading

gtsiolis commented Oct 5, 2022 • edited by werft-gitpod-dev-com bot Loading

gtsiolis commented Oct 5, 2022 • edited by werft-gitpod-dev-com bot Loading

laushinka commented Oct 12, 2022 • edited by werft-gitpod-dev-com bot Loading

laushinka commented Oct 13, 2022 • edited Loading

meysholdt commented Oct 13, 2022

Hardik500 commented Oct 13, 2022

meysholdt commented Oct 14, 2022

gtsiolis commented Oct 14, 2022 • edited by werft-gitpod-dev-com bot Loading

werft-gitpod-dev-com bot commented Oct 14, 2022

vulkoingim commented Oct 14, 2022 • edited by werft-gitpod-dev-com bot Loading

laushinka commented Oct 28, 2022 • edited by werft-gitpod-dev-com bot Loading

werft-gitpod-dev-com bot commented Oct 28, 2022

werft-gitpod-dev-com bot commented Oct 28, 2022

laushinka commented Oct 28, 2022

Hardik500 commented Oct 30, 2022

laushinka commented Oct 31, 2022

laushinka Oct 31, 2022 • edited Loading

Choose a reason for hiding this comment

Hardik500 Nov 1, 2022

Choose a reason for hiding this comment

Hardik500 Nov 1, 2022

Choose a reason for hiding this comment

laushinka Nov 1, 2022

Choose a reason for hiding this comment

Hardik500 Nov 1, 2022

Choose a reason for hiding this comment

laushinka Nov 2, 2022

Choose a reason for hiding this comment

gtsiolis commented Nov 2, 2022 • edited by werft-gitpod-dev-com bot Loading

werft-gitpod-dev-com bot commented Nov 2, 2022

gtsiolis commented Nov 2, 2022

werft-gitpod-dev-com bot commented Nov 2, 2022

gtsiolis commented Nov 2, 2022 • edited by werft-gitpod-dev-com bot Loading

laushinka commented Nov 4, 2022 • edited Loading

werft-gitpod-dev-com bot commented Nov 4, 2022

gtsiolis commented Nov 4, 2022 • edited by werft-gitpod-dev-com bot Loading

gtsiolis commented Nov 4, 2022 • edited by werft-gitpod-dev-com bot Loading

gtsiolis commented Nov 4, 2022 • edited by werft-gitpod-dev-com bot Loading

laushinka commented Nov 4, 2022 • edited by werft-gitpod-dev-com bot Loading

gtsiolis commented Nov 4, 2022 • edited by werft-gitpod-dev-com bot Loading

gtsiolis left a comment

Choose a reason for hiding this comment

gtsiolis commented Nov 4, 2022

Hardik500 commented Nov 4, 2022 • edited by werft-gitpod-dev-com bot Loading

laushinka commented Nov 4, 2022 • edited by werft-gitpod-dev-com bot Loading

Hardik500 commented Oct 4, 2022 •

edited by gtsiolis

Loading

gtsiolis commented Oct 5, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Oct 5, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Oct 5, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Oct 5, 2022 •

edited by werft-gitpod-dev-com bot

Loading

laushinka commented Oct 12, 2022 •

edited by werft-gitpod-dev-com bot

Loading

laushinka commented Oct 13, 2022 •

edited

Loading

gtsiolis commented Oct 14, 2022 •

edited by werft-gitpod-dev-com bot

Loading

vulkoingim commented Oct 14, 2022 •

edited by werft-gitpod-dev-com bot

Loading

laushinka commented Oct 28, 2022 •

edited by werft-gitpod-dev-com bot

Loading

laushinka Oct 31, 2022 •

edited

Loading

gtsiolis commented Nov 2, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Nov 2, 2022 •

edited by werft-gitpod-dev-com bot

Loading

laushinka commented Nov 4, 2022 •

edited

Loading

gtsiolis commented Nov 4, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Nov 4, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Nov 4, 2022 •

edited by werft-gitpod-dev-com bot

Loading

laushinka commented Nov 4, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Nov 4, 2022 •

edited by werft-gitpod-dev-com bot

Loading

Hardik500 commented Nov 4, 2022 •

edited by werft-gitpod-dev-com bot

Loading

laushinka commented Nov 4, 2022 •

edited by werft-gitpod-dev-com bot

Loading