lwatson opened https://gitlab.wikimedia.org/repos/releng/scap/-/merge_requests/575

Draft: web: improve main page UI

lwatson opened https://gitlab.wikimedia.org/repos/releng/scap/-/merge_requests/583

web: add a JobCard

The new JobCard component uses a CSS grid layout to display the job information. It may be worth exploring using CdxCard and overriding its flex styles. We'd benefit from getting Codex styles like card links.

In T379412#10337015, @lwatson wrote:

The new JobCard component uses a CSS grid layout to display the job information. It may be worth exploring using CdxCard and overriding its flex styles. We'd benefit from getting Codex styles like card links.

@lwatson I would recommend relying on the existing Codex components wherever possible, because that code has already been extensively reviewed/tested/etc. You may want to consider making JobCard basically a wrapper around <CdxCard> that places the content into the #description slot. That area could be further sub-divided using CSS Grid or Flexbox as needed, but you'd get some styles "out of the box" this way.

@lwatson I would recommend relying on the existing Codex components wherever possible, because that code has already been extensively reviewed/tested/etc. You may want to consider making JobCard basically a wrapper around <CdxCard> that places the content into the #description slot. That area could be further sub-divided using CSS Grid or Flexbox as needed, but you'd get some styles "out of the box" this way.

Thanks! The JobCard now uses CdxCard and those changes were pushed to GitLab.

lwatson closed https://gitlab.wikimedia.org/repos/releng/scap/-/merge_requests/583

web: add a JobCard

The JobCard should display the job status on the OverviewPage. This feature is not represented in wireframes so this will need some design feedback @DTorsani-WMF

The job status is an arbitrary string that describes what's happening with the backport. When you run a backport, the job status text should be displayed on the overview page. The text changes while the backport is in progress (sometimes containing URL addresses). The job status should be prominent on the OverviewPage and is a top priority when running the backport.

Example 1 is a JobCard using the supporting-text slot to display the job status.

Example 2 is a JobCard using a CdxAccoridion to display the job status within supporting-text slot. This CdxAccoridion is defaulted to open/expanded therefore no action is needed to view the job status.

@lwatson Thanks for providing these two examples and explaining the context. If the job status is quite important, I hesitate to have it be in an Accordion, even if it is defaulted to be open. Maybe a stronger argument for option 1 (using the supporting-text to show the job status is that it looks like it nearly takes up the same about of space, maybe a little more, than the closed Accordion, so not very different space wise, which was what the Accordion would normally be trying to help with. So again, I personally like option 1 using the supporting-text for job status better.

Thanks, I agree that option 1 would be better. If the job status is the only other data to display, another option is to use CdxMessage to display it.

@DTorsani-WMF One thing I've been musing together with @lwatson about is the redundancy (and prominence) of the labels per Card.
In my opinion the Card has here a tougher stand vs a tabular presentation.
I'd in any case consider to remove the labels from all but the first and last card per view to focus more on content and reduce redundancy/noise. What's your take?

@Volker_E I played around with this idea of cards mimicking a tabular layout:

And some inspiration from dribble:

• https://dribbble.com/shots/25217142-Deployment-details

• https://dribbble.com/shots/23988659-GPU-Clusters-DePIN-Web-App

I'm also open to exploring using a CdxTable when we can support clickable and highlighted table rows.

@lwatson Very nice IMHO and a real interface improvment, thanks! :)
Curious what others think…

I agree that this is a big improvement to reduce the space used, and the cognitive load with the redundancy of the extra headers. Thanks for putting this together @lwatson!

dancy merged https://gitlab.wikimedia.org/repos/releng/scap/-/merge_requests/575

web: improve main page UI