[UBP] Pagination and UI fixes

[laushinka]

Description

Among other UI fixes, this PR:

• adds pagination
• moves the Usage tab outside of settings
• uses actual data from the API (except for the usage period)

Related Issue(s)

Fixes #11483
Fixes #11285

How to test

Release Notes

NONE

Documentation

Werft options:

• /werft with-preview

[werft-gitpod-dev-com]

started the job as gitpod-build-lau-ubp-iterate-11285.3 because the annotations in the pull request description changed
(with .werft/ from main)

[laushinka]

This PR does not yet:

• show the user avatar for workspaces (will tackle in a separate PR)
• show the real usage period (currently the usage API call only has attributionId as argument)

[easyCZ]

/werft run with-preview

👍 started the job as gitpod-build-lau-ubp-iterate-11285.15
(with .werft/ from main)

[easyCZ]

Code-wise LGTM. Adding hold for @jldec as he's a reviewer too.

/hold

[jldec]

Thanks Laurie - this is a great step forward - let's merge this - it will be good to see real usage data. (leaving hold in case you are still working on TS errors)

[laushinka]

Thanks Laurie - this is a great step forward - let's merge this - it will be good to see real usage data. (leaving hold in case you are still working on TS errors)

Thanks! It's green now so I will unhold. Also thank you @gtsiolis for the quick UI sync-fixes 🔥

/unhold

[jldec]

@gtsiolis - since you're working on followup design polish I had some suggestions:

• remove extra heading above the list (takes up valuable real estate)
• move existing description up
• small polish on sidebar - heading bold, values not-bold,
• "Total usage" instead of "Monthly usage" as discussed (and don't repeat the word "total" before credits)

[gtsiolis]

Woohoo! UBP is getting real. ✨

De rien, @laushinka!

Agree with all your points, @jldec, except for probably removing the section heading before updating the sidebar, which could confuse users of what exactly they are looking at. However, I'd be up for trying that and seeing in action if the heading is really helpful.

To help demonstrate the issue here, let me add below some screenshot of how this page would look like a) with both a better sidebar and section heading, b) just the better sidebar, and c) no better sidebar and no heading.

I've also opened a few follow-up issues to keep track of some UX issues in this page, see #11495, #11526, #11527, #11528, #11530, and #11532.

A	B	C

[jldec]

@gtsiolis I don't see value in the extra heading - It steals vertical space from the list (we have a lot of chrome already).

I find the bold black summary element in the sidebar a bit distracting so prefer option C for that reason.

Could we please label the total usage element "Total Usage" (not "Monthly Usage") and use "Credits" as the units next to the value (instead of "Total Credits".)

cc: @laushinka

[gtsiolis]

I don't see value in the extra heading - It steals vertical space from the list

@jldec Fair point. Up for removing it and see how it feels. 🤝

I find the bold black summary element in the sidebar a bit distracting so prefer option C for that reason.

@jldec Thanks for the feedback! Let's go with C and change back if needed. I may also attempt to create a version that's not so bold using black background, but a more grayish background. 🤝

Could we please label the total usage element "Total Usage" (not "Monthly Usage") and use "Credits" as the units next to the value (instead of "Total Credits".)

@jldec This is already changed in #11526.

[gtsiolis]

I find the bold black summary element in the sidebar a bit distracting ...

One more note regarding dropping the heavier dark-colored active elements in the left sidebar is that we would need to pay closer attention to the UX changes so that the visual balance remains good as originally seen in the design specs. Otherwise, everything will collapse together in dense-information pages like the usage page.

The heavier dark-colored elements were also added to provide the necessary visual balance, but also information hierarchy required when using fewer borders in the user interface, see also #7932 (comment). This will make more sense once we introduce more drill-down pages for the usage page and use the left sidebar for switching between sub-pages, see relevant discussion (internal).

To demonstrate this better:

BEFORE	AFTER	What's on production

From #11481 (comment):

I may also attempt to create a version that's not so bold using black background, but a more grayish background. 🤝

BEFORE	AFTER	What's on production

[jldec]

Clarifying a little more - I think the black box draws attention (because of its size) in a way that makes it look like a heading (for the page) instead of a section element.