search

woodpecker-ci / woodpecker

Woodpecker is a simple, yet powerful CI/CD engine with great extensibility.
https://woodpecker-ci.org
Apache License 2.0
4.3k stars 370 forks source link

Redesign repo list and include last pipeline #4386

Closed xoxys closed 1 day ago

xoxys commented 5 days ago

Supersedes: https://github.com/woodpecker-ci/woodpecker/pull/2552

I tried out many variants of what information should be displayed in the repo list with different layouts and decided on the absolute minimum. Everything else seemed kind of overloaded and cluttered (especially as it has to work consistently on mobile). However, if you have any ideas, please let me know, but I would like to keep this PR small and focus on the repo list for now.

Repo list (desktop):

image

Repo list (mobile):

OrgRepo list (mobile):

anbraten commented 4 days ago

I would suggest to place the status icon in front of the last pipeline message to group all info that belongs to the pipeline. The time feels a bit far away on the desktop screen, however I've no nice idea were to place it instead. To avoid two icons we could remove the pipeline type icon (push, pr, ...).

Some similar UIs I've found:

image

image

https://v0.dev/chat/fWkCn1IFMjk?b=b_jUv2KjQbRRj

image

xoxys commented 4 days ago

I would suggest to place the status icon in front of the last pipeline message to group all info that belongs to the pipeline. The time feels a bit far away on the desktop screen, however I've no nice idea were to place it instead. To avoid two icons we could remove the pipeline type icon (push, pr, ...).

Did some rework. What do you think about this approach:

image

pat-s commented 3 days ago

I like the new layout. Thanks for putting the time and effort in!

There's still room for UX improvement, but we can go from there and iterate on it. E.g. I think we have too much free space in the middle now where the repo list starts.

Additionally, I don't like the coloring of the "public" badge so much. I know it is already in use like this in the "add repository" list. Personally, I'd prefer no background but only a rounded border with a solid colored text. The gray color doesn't really fit into the light theme well, IMO. But this can also be done in a follow-up PR as this one is mainly about the layout.

Another idea would be to add possible repo avatars, now that we have so much space. And deciding for a visually pleasing default image.

xoxys commented 3 days ago

I like the new layout. Thanks for putting the time and effort in!

No problem :) also credits to @anbraten for starting the work on it

E.g. I think we have too much free space in the middle now where the repo list starts.

Spacing is always a bit difficult. Too less and it looks weird, too much is wasting space.

Additionally, I don't like the coloring of the "public" badge so much.

I would like to rework the badges globally, I also don't like them.

Another idea would be to add possible repo avatars

We can try again, but for me, it was too much and looked overloaded.

xoxys commented 3 days ago

Ok, I have no idea how to fix the loading problems. I also noticed that a lot of gliches occur when I keep the repo page open and start a pipeline. Would need some help here.

xoxys commented 2 days ago

image

You have removed the spacing at the top block completely now (its now equal to all other card spaces). But IMO this is confusing, the top 4 items a re sorted differently and not reflected in search filter etc. That are two different repo lists and they should be separated visibly.

xoxys commented 2 days ago

The RepoCard renaming is IMO a unicorn, while we use ...Item for almost all other list item templates.

anbraten commented 2 days ago

The RepoCard renaming is IMO a unicorn, while we use ...Item for almost all other list item templates.

Good point. Was Items before which confused me.

xoxys commented 2 days ago

👍 that was my fault then

anbraten commented 2 days ago

Finally got the updating of the last_pipeline to work, so new pipelines will replace the existing last pipelines and it will always show the current pipeline state.

I've adjusted the lists now to show 4 highlighted repos and the list (without the highlighted repos) by default. When starting to search it only shows the search results. What do you think of that?

xoxys commented 2 days ago

For me it doesnt work:

image

xoxys commented 2 days ago

And there are now a lot of conflicts.

xoxys commented 2 days ago

Finally got the updating of the last_pipeline to work, so new pipelines will replace the existing last pipelines and it will always show the current pipeline state.

Nice!

I've adjusted the lists now to show 4 highlighted repos and the list (without the highlighted repos) by default. When starting to search it only shows the search results.

For me, its too dynamic and too much UI layout changes on interaction, which is IMO a bad UX. At least from your description, I could not test it yet due to the error.

xoxys commented 2 days ago

Ok tested it but for me its now a no-go :see_no_evil: The content is jumping pretty heavily. The layout at all should really stay static. Always show the last 4 accessed repos on top, show all in the list and apply search to list.

For me, it also doesn't really matter when I have clicked on a repo last time, I would still like to have a list of all repos sorted by the last pipeline so excluding them from the full list makes it less useful for me.

anbraten commented 2 days ago

While searching with the highlights staying at the top it was quite tough to notice the results being shown especially when using a mobile device though.

xoxys commented 2 days ago

Ok, and if we move the search field down to the "All Repos" list?

xoxys commented 2 days ago

That's how it looks right now for me on Firefox:

https://github.com/user-attachments/assets/4d6b6d9f-3ce3-4f11-bd39-6c01a17a2bfe

6543 commented 2 days ago

just based on the video, an idea poped up: could the transition from hiding and showing be sothed out (e.g. transition animation) - of course you are free to adopt the idea or not

xoxys commented 2 days ago

My opinion remains, changing the layout (hiding/moving/transforming parts of the overall page layout) on keyboard inputs is a bad UX and should be avoided in any case.

xoxys commented 2 days ago

Ok, after playing around with it, I can't find any better solution. The issue on mobile described by @anbraten is valid, and I agree on that. So to get forward, I would say we live with the tradeoff for now. I just added some changes:

I added all changes to a single commit so they can be easily reverted. Let me know if this compromise is acceptable for you.

https://github.com/user-attachments/assets/292d75e0-9232-4d45-8872-6d42bf8fc79a

pat-s commented 1 day ago

Most users don't use mobile anyway I guess? If so, there will be future efforts to improve it.

Thanks to both of you for finding a consensus and getting this improvement shipped 💙

woodpecker-bot commented 1 day ago

Tearing down https://woodpecker-ci-woodpecker-pr-4386.surge.sh

zc-devs commented 14 hours ago

Show the last four visited Repos

Is this per user info then, right?

Under User 1 I've added some repos. I did not visited that repos under User 2, but they are on top:

Screenshot 2024-11-21 131238

Can I adjust the number of recently visited repos to be displayed? Can I hide it or disable completely?

List all pipelines sorted by last pipeline creation

But the issue is about repositories list. What is this about?

What is the order?

Screenshot 2024-11-21 131025

Or something else?

What visibility is it supposed to be?

Screenshot 2024-11-21 131920

Currently I have 7 repos.

Screenshot 2024-11-21 133824

Is there the N+1 problem? It is event worse: 2*N+1.

xoxys commented 13 hours ago

Pretty confusing post for me. I try to sort it:

Is this per user info then, right?

If the "last access" list is not user based, we should look into that.

Can I adjust the number of recently visited repos to be displayed? Can I hide it or disable completely?

No, atm it can't be disabled you can of course hide it by custom CSS.

But the issue is about repositories list. What is this about?

I don't understand this point. What is your problem/question?

What is the order?

Its 1)

What visibility is it supposed to be?

It's supposed to be not "Public" so "Private" or "Internal" but we can improve this part if that's what you are asking for. Maybe turning it around and show if a repo is "Private" or "Internal" makes more sense. But I planned to rework the badges anyway, so I'll keep it in mind.

Is there the N+1 problem? It is event worse: 2*N+1.

Also, something we should investigate.

zc-devs commented 13 hours ago

we should look into that we should investigate

Thanks in advance.

No, atm it can't be disabled you can of course hide it by custom CSS Its 1

Thanks for answers.

It's supposed to be not "Public" so "Private" or "Internal".

So, it is Wodpecker's visibility, not the Forge.

show if a repo is "Private" or "Internal" makes more sense. I planned to rework the badges anyway, so I'll keep it in mind.

👍

I don't understand this point. What is your problem/question?

Just tried to understand what is the "pipeline list" you are talking about? Where it is and how I can test it?

xoxys commented 12 hours ago

Just tried to understand what is the "pipeline list" you are talking about? Where it is and how I can test it?

Oh, now I got it. That's just a typo in the PR description, sorry for the confusion. It was meant to be:

Ill fix it in the PR description

xoxys commented 12 hours ago

So, it is Wodpecker's visibility, not the Forge.

Yes it shows the woodpecker state of the repo, whatever you have configured for it in the WP repos settings will apply here.

anbraten commented 12 hours ago

Is this per user info then, right?

Under User 1 I've added some repos. I did not visited that repos under User 2, but they are on top:

It's the last 4 visited repos. If you never visited a repo it shows the first 4 repos from the "general" list (probably sorted by last pipeline time).

Just noticed the repo list for an org doesn't seem to be sorted by pipeline time.

zc-devs commented 11 hours ago

List all repos sorted by last pipeline creation

Then I have another feedback.

Repos list used to be sorted by name, right? So, it was kinda static. One could remember at a subconscious level where some repo is. Like: it is somewhere "one scroll from the top" and then "on the middle of the page". So, after "Repositories" clicked, I do one scroll and move pointer to the center of the screen. Then, I find the repo visually, adjust position of the pointer and click.

Now, this list is dynamic, it always changes. I even can do nothing, just hit F5 and there will be completely reordered list, just because my teammates push changes, PRs got merged or some cron jobs. Reminds me of https://www.youtube.com/watch?v=uRGljemfwUE&t=507s 🤣

It would be great to have sorting setting like in GitHub and default is by name.

xoxys commented 11 hours ago

Sure, there will always be different use cases and preferences. But IMO, the repo list was quite useless. For me getting this PR done was a huge achievement and makes the repo list a lot more valuable. But I agree, sorting options would be useful. Besides that, I would recommend creating separate issues for all the missing features you discovered.

BTW even the GitHub repo list is sorted by last activity by default same for Issues PR's, etc. and in my opinion that should be the default for WP as well even if we add other sort options.

zc-devs commented 10 hours ago

GitHub repo list is sorted by last activity by default in my opinion that should be the default for WP as well even if we add other sort options.

Maybe. At least it is in Gitea. It would be great if this setting will be saved somewhere.

same for Issues PR's, etc.

Not for me

Issues Default Issues Recently updated

PRs Default PRs Recently updated