Add pipeline tabs redirection support

What does this MR do and why?

When the feature flag pipeline_tabs_vue is on, we now use GlTabs instead of haml ones in the pipeline page. Here is a table of the epic implementation for context:

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	👈🏻 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)

We want to support two usecase: the legacy one had each tab on its own route, so now we redirect the user to the right tab if that's the case. The other use case is by using query params which also opens up the right tab.

At the controller level, we want to preserve the JSON functionality when present, meaning that with or without the flag, it should be possible to fetch data. When the flag is off, the behaviour is the same as it used to be and then it's on, we redirect the user to the main pipeline route, meaning without the last part of the url (e.g. /dag, /builds, etc) and we instead pass a query param with the right value. In our vue initiator (the root JS file), we grab the query param for the tab value and pass it down as the default tab value of the app through provide/inject. We only pass down the value if it's a valid query value.

Then we use the active prop on the GlTab component without the .sync modifier See this link for more info. This is so that the component gets its initial value of the injected query param, but subsequent click do not need to be stateful to the component: GlTabs will handle which tab is active on its own. That way we we don't have additional, unnecessary reactivity.

Screenshots or screen recordings

Screen_Recording_2022-04-20_at_2.10.03_PM

How to set up and validate locally

1. Enable the pipeline tabs refactor

Feature.enable(:pipeline_tabs_vue)

1. Go to the pipelines page and select any pipeline to see the graph
2. Click on all the tabs
3. Notice that you can switch tab correctly (The content will not render and this is okay!)
4. Now add a query param to the url like so: ?tab=builds
5. Once the page has loaded, notice that you are in the builds tab
6. Now add /test_report to the end url
7. Once the page loads, notice that you are in the tests tab

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.