Skip to content

Migrate pipeline tabs to Vue - Introduce base layout

What does this MR do and why?

Migrate app/views/projects/pipelines/_with_tabs.html.haml to GlTabs. Currently, we are instantiating one Vue app per tab which adds a lot of complexity and also slows down the initial page load significantly. It also prevent us from migrating to use GlTabs component because we still userails to handle the tabs creation.

To fix all of these problems, migrating all pipeline tabs to a single Vue app will be a huge benefit. There are a lot of pieces in the pipeline page, so I have broken down the steps here:

Step Issue Link MR link
Introduce the base tab layout in Vue behind a disabled feature flag #230749 (closed) 👈🏻 you are here
Add the Pipeline and Dag tabs content #356198 (closed) !83418 (merged)
Add the Jobs and Failed Jobs tab content cell
Add the Tests tab content cell
Add the the Security tab content cell
Add the the License tab content cell
Add the the Code Quality tab content cell
Feature flag rollout #353118 (closed)

The first step here is to add a feature flag, conditionally renders this Vue app and have all the apps in the right place. None of the tab content will render in this step but this is behind a disabled feature flag for exactly this reason.

Why is this structured this way?

Making a single MR would be gargantuan 😄 So to avoid this, we needed to break this down in smaller steps. The alternative was to make a feature branch and merge it there, but I decided against it mostly because this is a very central part of the app and I didn't want to deal with all the conflicts. The other thing is that because this will be worked on potentially by multiple teams, this way anyone can pull down master and contribute without being on a ref 2k commits behind 😅

Why is there multiple stubbing per rspec?

I have identified each block where a specific tab is required to work. Once we start the work to make each individual tab render, we then can:

  • duplicate the rspec file
  • remove the stub only of the affected blocks.

That way each MR will easily be able to test both behaviours (with and without the flag) without having to figure out where to put the stub or wait for all the MR to be merged. Here is a table of all the stubs:

Spec Name Line number Tab content required
ee/spec/controllers/projects/pipelines_controller_spec.rb 18 Security
ee/spec/controllers/projects/pipelines_controller_spec.rb 81 License
ee/spec/features/projects/pipelines/pipeline_spec.rb 18 Pipeline
ee/spec/features/projects/pipelines/pipeline_spec.rb 140 Security
ee/spec/features/projects/pipelines/pipeline_spec.rb 178 License
ee/spec/features/projects/pipelines/pipeline_spec.rb 215 Code Quality
spec/features/projects/pipelines/pipeline_spec.rb 18 Pipeline
spec/features/projects/pipelines/pipeline_spec.rb 364 Jobs
spec/features/projects/pipelines/pipeline_spec.rb 393 Tests
spec/features/projects/pipelines/pipeline_spec.rb 755 Jobs
spec/features/projects/pipelines/pipeline_spec.rb 930 Jobs
spec/features/projects/pipelines/pipeline_spec.rb 961 Jobs
spec/features/projects/pipelines/pipeline_spec.rb 1035 Failed Jobs
spec/features/projects/pipelines/pipeline_spec.rb 1158 Needs
spec/features/projects/pipelines/pipeline_spec.rb 1176 Jobs
spec/features/projects/pipelines/pipelines_spec.rb 626 Pipelines
spec/features/commits_spec.rb 13 Jobs
spec/features/commits_spec.rb 97 Jobs
spec/features/commits_spec.rb 127 Jobs

Screenshots or screen recordings

These are strongly recommended to assist reviewers and reduce the time to merge your change.

How to set up and validate locally

  • Go to the pipeline page
  • Notice which tabs you are currently seeing
  • Ensure that everything still works in the pipeline page
  • Enable pipeline_tabs_vue feature flag
  • Notice that you can see the same tabs.
  • Notice that all the tabs content are not rendering
  • Note: The badges will be added in separate MRs at the same as the apps (for jobs, failed Jobs and tests)

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

Edited by Frédéric Caplette

Merge request reports