Pipeline tabs Vue migration - Migrate Pipeline and Needs 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	👈🏻 you are here	!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)

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 migrate the pipeline and needs tab content to 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. 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)
3. In app/assets/javascripts/pipelines/pipeline_tabs.js, pass your dataset to the Vue App.
4. TAB SPECIFIC INSTRUCTION The tests and licenses tabs used to get their data from the pipeline controller (app/controllers/projects/pipelines_controller.rb or ee/app/controllers/ee/projects/pipelines_controller.rb) but now we are deprecating the routes in favour of query params. Either move the
5. TAB SPECIFIC INSTRUCTION Add a badge to the tab if it applies (Failed jobs count, Tests count, etc)
6. If the tab renders as expected, now it the time for specs!
7. 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.
8. TAB SPECIFIC INSTRUCTION If you have a count badge, add specs for it as needed
9. TAB SPECIFIC INSTRUCTION If it's the failed jobs tab, make sure to test the tab renders only conditionally
10. Lookout in the table below for the tab you are working on. For all the ones that are listed, create a duplicated spec file if applicable (someone might already have done this!). Rename the old one with a prefix legacy_ and the new one should have the name of the original.

Spec Name	Line number	Tab content required
ee/spec/features/projects/pipelines/pipeline_spec.rb	18	Pipeline
spec/features/projects/pipelines/pipeline_spec.rb	18	Pipeline
spec/features/projects/pipelines/pipeline_spec.rb	1158	Needs
spec/features/projects/pipelines/pipelines_spec.rb	626	Pipelines

1. In the new file (which has the old name!) remove the stubs at the appropriate line
2. Repeat for all applicable spec file
3. Now, we should have one spec running the old tab content, and one with the new! 🎉
4. Once you have an MR, please add the link to the table here: #230749 (closed)