Pipeline tabs migration - Tests tab

Steps

Step	Issue Link	MR link
Introduce the base tab layout in Vue behind a disabled feature flag	#230749 (closed)	!80401 (merged)
Support tab redirection	None	!85183 (merged)
Add the Pipeline and Dag tabs content	#356198 (closed)	!83418 (merged)
Add the Jobs tab content	!85946 (merged)	!85946 (merged)
Create new Vue component for Failed Jobs tab content	#360656 (closed)	cell
Add the Failed Jobs tab content	#360798 (closed)
Add the Tests tab content	👈🏻 you are here	cell
Add the the Security tab content	#360795 (closed)	cell
Add the the License tab content	#360796 (closed)	cell
Add the the Code Quality tab content	#360797 (closed)	cell
Feature flag rollout		#353118 (closed)

Description of the Vue app logic

Behind the disabled feature flag pipeline_tabs_vue, we now have Vue tabs in the pipeline page instead of Haml. However given how big the work is, we have divided each tab content into its own issue and MR. This specific issue is to make the tests tab content render inside the nre tab structure in Vue. To do so, here are some steps to consider:

1. When the feature is turned on, in app/views/projects/pipelines/show.html.haml we now have the js-pipeline-tabs element which uses a helper to pass down all the dataset we might need to our single Vue app.
2. We now have 2 helpers: one for CE (app/helpers/projects/pipeline_helper.rb) and one for EE (ee/app/helpers/ee/projects/pipeline_helper.rb). Each of them is passing data down to the Vue app through the dataset. If your tab is both in CE and EE, then your data should live in the CE helper. If your tab is unique to EE, then you can pass it down trough the EE helper.
3. We then have the pipeline init bundle (app/assets/javascripts/pipelines/pipeline_details_bundle.js) which will check if the flag is on. If it is, then we only create one app instead of one per tab
4. Then the data is passed down through the app init function in app/assets/javascripts/pipelines/pipeline_tabs.js. Make sure to pass your new dataset here to the app. We conditionally render with ee_else_ce the right Vue tabs component. The CE component has a slot in which the EE component can pass all the additional tabs. This mean that the EE component always has the CE tab and logic for free 🙌🏻
5. Then in the CE tabs component (app/assets/javascripts/pipelines/components/pipeline_tabs.vue) all tabs are rendered except the failed jobs component which will need to change the in failed jobs MR (we only show it if there are failed jobs!)
6. In the EE tab component (ee/app/assets/javascripts/pipelines/components/pipeline_tabs.vue) we have conditional on each tab which comes from the API permissions. Permissions should already work as is for all tabs

Work required

1. Check the previous haml that we were using for the tab (app/views/projects/pipelines/_with_tabs.html.haml or ee/app/views/projects/pipelines/_tabs_content.html.haml. What data are we passing down to the app? Add the same data to the right pipeline_helper.rb (CE or EE)
2. After adding the right data, we also need to update the helper specs (CE: spec/helpers/projects/pipeline_helper_spec.rb, EE: ee/spec/helpers/ee/projects/pipeline_helper_spec.rb). Note that if you are passing data through the EE helper, we need to expect it in the CE helper as well.
3. In app/assets/javascripts/pipelines/pipeline_tabs.js, pass your dataset to the Vue App. For this migration, we aim to pass all the data as it used to be without any changes. We can come back later to see if there are too many properties how we can better optimize this.
4. For the test tab, it seems we are still using VueX. We can create the store in app/assets/javascripts/pipelines/pipeline_tabs.js and pass it down the app. At some later point in the future, we can think of migrating this to graphQL to avoid having 2 different global store (Apollo and VueX)
5. TAB SPECIFIC INSTRUCTION Add a badge to the tab if it applies, so either: Failed jobs count, Tests count, Licenses count. You can refer to the job MR as to how this can easily be done: !85946 (merged)
6. Add the lazy property on the tab and make sure it still works as expected. This will ensure we only send the queries once the user click on a tab instead of loading them all at once.
7. If the tab renders as expected and the badge is there, now it the time for specs!
8. In spec/frontend/pipelines/components/pipeline_tabs_spec.js or/and ee/spec/frontend/pipelines/components/pipeline_tabs_spec.js, remove the stub for the tab content as it should no longer be necessary.
9. TAB SPECIFIC INSTRUCTION If you have a count badge, add specs for it as needed. We should aim to use it.each in both the CE and EE version of the tabs spec (again, see the jobs tab MR for reference: !85946 (eacc76ee))
10. FAILED TAB SPECIFIC If it's the failed jobs tab, make sure to test the tab renders only conditionally if there are failed jobs.
11. Lookout in the table below for the tab you are working on. For all the ones that are listed, make sure to enable the right tests by removing the pipeline_tabs_vue stub in the specs.

Spec Name	Line number	Tab content required
spec/features/projects/pipelines/pipeline_spec.rb	393	Tests

1. Once you have an MR, please add the link to the table here: #230749 (closed)

MR for reference: !85946 (eacc76ee)

For any question, feel free to ping @f_caplette