Discussion: deep linking tabs

Problem to solve

Currently if you want to make it possible to deep link into a specific tab we need to handle this in the GitLab codebase. This involves a fairly manual process of using getParameterValues, mergeUrlParams, and updateHistory helpers. Here is an example: app/assets/javascripts/projects/pipelines/charts/components/app.vue#L42

Proposals

1️⃣ Update GlTabs to support deep linking

Add the following props:

Prop	Type	Default	Description
deep-link	Boolean	false	If true the query string will be updated with the active tab. On page load the query string will be parsed and activate the corresponding tab.
deep-link-param	String	tab	The query param used to keep track of what tab is active

Considerations

• Do we want GitLab UI to control query strings?
• We will need to add some query string helpers to GitLab UI
• There is no public method on GlTabs to get all of the tabs in the correct order. This could prove difficult as it would be hard to get the index of the correct tab from the query string.

2️⃣ Style GlNav with the tabs prop to look like GlTabs

For this use case Vue Bootstrap recommends using b-nav with the tabs prop set to true. The problem is currently GlNav with the tabs prop does not look the same as GlTabs so it would have to be styled to look the same.

Considerations

• This technique would require us to use Vue router which may not be needed for simple navigation
• It would require maintaining consistent styles GlTabs and GlNav with the tabs prop. They could potentially get out of sync.

3️⃣ Add some deep linking helpers to gitlab-org/gitlab

Add some helpers for deep linking tabs to gitlab-org/gitlab. Essentially abstract the logic in app/assets/javascripts/projects/pipelines/charts/components/app.vue#L42 to some helpers.

Considerations

• It would still be a little more of a manual process than setting props on GlTabs