CI Statuses: current UI doesn't work with 16 statuses

[danielbeardsley]

The current UI works when we have a small number of CI statuses (maybe < 8), but is really annoying with anything more than that.

We need to find a better way to expose the CI statuses.

• Problem: Targets are far too small and therefore the contextual info we need (which ones are failing, link to the log) is really hard to access.
  • Note: I only ever click on the not-green CI statuses
• Note: CI status links, branch name copying, and click-to-open-pulls are the only clickable things

[danielbeardsley]

Potential Solution

Swap the position of the Age and CI status indicators because there's more horizontal room

[mlahargou]

This seems like the easiest option. Although we will run into the same issue if we have 100 statuses.

[danielbeardsley]

Potential Solution

Group all the successful CI statuses into one green bubble that has a popup with more info

[davidrans]

I think this is the same thing as I suggested below. I'll move my mockup here:

[danielbeardsley]

Are you saying we show all the non-green bubbles but just have one that's green to represent all of green ones?

[davidrans]

Yeah, I thought that'd be an easy way to stick with something close the current UI

[danielbeardsley]

Potential Solution

Group statuses by state so there are never more than 4, each with their own popup which shows more info (context and link to logs)

[mlahargou]

I think this is the most generic and most likely to work for any number of statuses.

[danielbeardsley]

I've got a rough working version, feel it out at https://pulldasher-dev.cominor.com/

[davidrans]

Nice! Looks good to me

[danielbeardsley]

I polished the styling and will open a pull:

[danielbeardsley]

Pull open #318

[mlahargou]

If we do any sort of grouping, we might want to add a visible count as well. I treat PRs that have 6 failures differently than PRs that have 1 failure.

[danielbeardsley]

We could roughly scale the visual size (with some minimum) based on how many there are:

i.e. that's 6 greens, a red, 1 gray, and 2 oranges. The groups are slightly scaled based on how many they represent.

[mlahargou]

Yeah that works!

[davidrans]

I like this idea too, I just voted for #316 (comment) cause I think it's less work

[mlahargou]

In any solution, can we sort the statuses by context? It's frustrating when they show up in a random order.

[davidrans]

[mlahargou]

That's Danny's second suggestion I think.

[davidrans]

Yeah, closing this one in favor of that one

[jarstelfox]

Potential Solution

Use https://chakra-ui.com/docs/components/disclosure/accordion and just display the overall status, expand to see all statuses

[danielbeardsley]

Expanding on click sounds like a good idea. Can you be a little more concrete with perhaps a rough drawing?

[jarstelfox]

Sure. I can't get any online tool working nicely let me grab a pen and paper.

[jarstelfox]

Expand on click:

The log links could be labeled since there is enough space

[jordycosta]

This is cool!

[andyg0808]

I think this might be solved in #318 and #322

[danielbeardsley]

Huh... I guess discussions don't have a "closed" state.

community/community#3097