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 theindex
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
andGlNav
with thetabs
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
Edited by Peter Hegman