Skip to content

Add option to open catalog resource details in separate tab

Frédéric Caplette requested to merge 431408-frontend-cmd-click-does-not-open-catalog-resource-page-in-separate-tab into master

What does this MR do and why?

Since we are using VueRouter on a GlButton element in the Catalog list, the option to open in a new tab is not present, but simply using a link will break the SPA pattern. This MR introduces a workaround where we use a link with the href attribute to get all the link default features, like opening the link in a new tab, but will not do so if the user is not holding down one of the accepted modifier key. This should offer a pretty nice experience with little downside and support both usecases, although I am opened to simpler/more elegant alternatives!

This is still behind a FF, so there are no changelogs.

Screenshots or screen recordings

Before After
Screen_Recording_2023-11-15_at_3.26.59_PM Screen_Recording_2023-11-15_at_2.44.37_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. 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. Navigate to Explore -> CI/CD Catalog
  2. Notice that you see Catalog resources
  3. Click on a resource
  4. Notice that you stay in context (AKA, no reload)
  5. Right click on the title to open the contextual web browser menu
  6. Click on "Open in a new window"
  7. Notice that it open a new window
  8. Use CMD + click on macos
  9. Notice that it opens a new window
  10. Use CTRL + click on Windows (if applicable)
  11. Notice that it opens a new window

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 #431408 (closed)

Edited by Frédéric Caplette

Merge request reports