Skip to content

Preserve CI Catalog page when navigating to details page

What does this MR do and why?

If you click into a CI Resource and use the back button, the pagination resets to 1 of X. If you are on the last page and select < Prev from there, it decrements into the negatives. Overall the page count was being lost when entering the details page because the Vue app for the list unmounts.

When navigating to a details page of a catalog resource, the page count was lost because the Vue app would unmount and the pageCount was kept in the data attribute. Now, we put the pageCount inside the Apollo cache so it can stay in sync with the rest of the application.

Important I did not add a test here because this is a multi-app behaviour. I would need to mount/unmount the Vue app and make sure that the value is the same, but really all we would be testing is that apollo cache works. If all existing tests still pass, it means that we can still have the right page count as expected (meaning that the new client side query works) AND since it's in the cache, it is preserved.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before After
Screen_Recording_2023-11-29_at_4.13.51_PM Screen_Recording_2023-11-30_at_2.12.06_PM

How to set up and validate locally

  1. Enable the FF global_ci_catalog
  2. Create a few projects that you will be able to convert to Ci resources, we need at least 21 here. Create them under the admin namespace for ease of testing.
  3. Once you have done so, get the ID of the first new project you wanted to convert. Then in Rails console, run:
projects = Project.where("id > ?", your_first_project_id -1)
projects.each do |project|
  project.update!(description: 'description')  
  ::Ci::Catalog::Resource.new(project_id: project.id).save   
end  
  1. Then in the rails console, do Ci::Catalog::Resource.all.each do |r| r.update("state", "published") end
  2. Navigate to Explore -> CI/CD Catalog
  3. Notice that you see Catalog resources
  4. Scroll at the bottom
  5. Go to page 2
  6. Notice it says Page 2 of 2
  7. Click on any resource
  8. Go back
  9. Notice it says Page 2 of 2

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #433178 (closed)

Edited by Frédéric Caplette

Merge request reports