Add "Load more" pagination to pipeline list

[savv]

Addresses #2976

Demo of what it looks like:

[qwerty287]

Thanks!

We are using infinite scroll for pagination though:

woodpecker/web/src/compositions/usePaginate.ts

Line 25 in 739114b

export function usePagination<T, S = unknown>(

Would be nice to use this instead of a load more button.

[savv]

@qwerty287 I gave this a try, but understand this logic a bit less well (which is why I had opted for something simpler). What do you think?

[qwerty287]

Thanks, yes. The issue is that we load the pipelines centrally in web/src/views/repo/RepoWrapper.vue and just pass it using provide/require to the pipelines list. I don't have a good solution how we can easily implement that with pagination. If you have an idea - just tell, otherwise I'll try to check this out more detailed again later

[savv]

Thanks, yes. The issue is that we load the pipelines centrally in web/src/views/repo/RepoWrapper.vue and just pass it using provide/require to the pipelines list. I don't have a good solution how we can easily implement that with pagination. If you have an idea - just tell, otherwise I'll try to check this out more detailed again later

@qwerty287 Sorry, I can't find a cleaner way either and I'm not even 100% sure I understand everything. If you have a proposal how data should flow I could give it a crack.

I should also say that Woodpecker has been amazing for us so far (so amazing, that I was initially shocked that this feature is missing). With the aggressive caching that we were able to do on our own CI instance, we got builds down from 5+ min to ~20 seconds. Thanks for maintaining!

[qwerty287]

Ok I looked at the code again, and I actually don't think it's easy to make this working right now in a clean way.

What should be done better is esp. how the filtering works. Because if you right now view pipelines for a single branch/PR, it will take the ones the frontend has loaded already and filters it in the frontend. This is really bad style. It should use server-side filtering. For branches, this would be available. For PRs not, and it isn't possibly to implement that cleanly because right now we compare the PRs based on the ref, but every forge uses a different ref for PRs. After #4626 it should be easier to implement the server-side filtering for pull requests.

When we have server-side filtering, we can move the pipeline loading from the repo wrapper to the individual list views, and implement the pagination there.

This would be the clean solution I'd prefer, but it likely won't be doable in the next time.

@woodpecker-ci/maintainers What do you think about this?

[xoxys]

I also tried to implement the infinite scroll without success. Having at leadt one working solution for pagination is better than nothing. Would vote to add it if someone as a better approach this can be replaced later.

[6543]

agree, refactoring and imprufing can be done later on too :)

[qwerty287]

Then please add a TODO comment so we don't forget about it

[savv]

Then please add a TODO comment so we don't forget about it

I added a TODO in RepoPipelines

[6543]

could you please the linter?

/woodpecker/src/github.com/woodpecker-ci/woodpecker/web/src/components/repo/pipeline/PipelineList.vue
  19:67  error  Custom event name 'load-more' must be camelCase  vue/custom-event-name-casing

[savv]

Done. I tested this again and it works on our local CI.