Migrate Pipeline tabs from GlTabs to GlNav

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Close this issue

We should look into migrating GlTabs in the pipeline view to GlNav. The main advantage would be that we could remove all of the custom logic around navigation an leverage our existing components even more given that we use routes.

The difficulty will lie in making sure that we are keeping the existing styles coherent, that it doesn't break the current implementation and also very importantly, that we can lazy load content as usual. The 2 main components affected are app/assets/javascripts/pipelines/components/pipeline_tabs.vue and ee/app/assets/javascripts/pipelines/components/pipeline_tabs.vue

Tasks:

• Use GlNav components
• Remove the Vue component methods relating to navigation
• Leverage to function call for the route
• Use GlNav activeClasses instead of using the custom function getPipelineTab in app/assets/javascripts/pipelines/utils.js

This spawns from !101390 (merged)

I think that the main issue here is that GlTabs might not be the most appropriate component when dealing with routes. We might want to switch to GlNav instead 🤔

A similar use case that leverages GlNav can be found in the Pajamas project: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/76e237168b65b6716caaa0d2538fc95780da3d3d/pages/\_section/\_slug.vue#L131. Note that this uses the <nuxt-child> component where you'd use <router-view>.