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) |
|
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
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.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #230749 (closed)