Skip to content

Add pagination to Vue version of Your work -> Projects

Peter Hegman requested to merge 450679-setup-filtered-search-sort-and-pagination-2 into master

What does this MR do and why?

Related to #450679 (closed)

We are currently working on moving the Your work -> Projects page from HAML/vanilla JS to Vue. This will allow us to have UX parity across the product, implement filters more easily, and reduce technical debit. This MR adds pagination.

Reviewer notes

  • To reduce duplication in GraphQL files we are planning on moving the GraphQL query to a JavaScript file in #490020 (closed)
  • This is behind a feature flag so instead of getting UX review on each individual MR we will get one at the end before enabling the feature flag. I have confirmed with our teams product designer (@mnichols1) that this is okay.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screen_Recording_2024-09-25_at_7.44.05_AM

How to set up and validate locally

  1. Enable your_work_projects_vue in http://gdk.test:3000/rails/features
  2. Open Rails console (bin/rails console)
  3. Generate some projects
user = User.find_by_username('root')
personal_projects = (1..25).to_a.map { |n| ::Projects::CreateService.new(user, { path: "foo-#{n}", name: "Foo #{n}", namespace_id: user.namespace.id }).execute }
  1. Go to http://gdk.test:3000/dashboard/projects/personal
  2. Use the pagination
  3. Remove the mock projects (optional)
personal_projects.each { |project| project.destroy! }
Edited by Lukas Wanko

Merge request reports