Status labels in docs headings break section links

[jmuzina]

Describe the bug

Our new system for adding status labels in docs pages causes links to docs sections to break. It seems like the status label's text is included in the search for a matching page section, causing navigation to those sections to break.

Consider this heading:

### Dense help text {{ status('updated') }}

This should allow you to navigate to that heading with #dense-help-text. However, you can only navigate to the requested heading by removing the status label.

To Reproduce

Steps to reproduce the behavior:

1. Checkout the repo
2. Find any docs heading that has a {{ status() }} label.
3. Attempt to navigate to it directly by appending the url encoding of the heading to your URL. I.E colour-coding for a "Colour coding" section.
4. See that the requested heading is not scrolled to on page load. You should also see an error in console:

Uncaught TypeError: title is null
    fixScroll http://0.0.0.0:8101/static/js/example.js?v=0134365:485
    resizeInterval http://0.0.0.0:8101/static/js/example.js?v=0134365:369
    setInterval handler*renderIframe http://0.0.0.0:8101/static/js/example.js?v=0134365:365
    renderExample http://0.0.0.0:8101/static/js/example.js?v=0134365:291
    async* http://0.0.0.0:8101/static/js/example.js?v=0134365:81
    <anonymous> http://0.0.0.0:8101/static/js/example.js?v=0134365:80
    EventListener.handleEvent* http://0.0.0.0:8101/static/js/example.js?v=0134365:77
    <anonymous> http://0.0.0.0:8101/static/js/example.js?v=0134365:512
example.js:485:7

5. Remove the status label from the markdown title. Retry navigating to the section.
6. See that the page scrolls to the requested section on load.

Expected behavior

Navigating to a documentation section by using a section name in a hash causes the browser to scroll to that section on load, regardless of status label.

[syncronize-issues-to-jira[bot]]

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-16070.

This message was autogenerated

[bartaz]

Hmm… it has been addressed in the original PR that introduced these labels. I wonder if this doesn't work at all, or are there some specific use cases.

That's the part that was updated: https://github.com/canonical/vanilla-framework/blob/c7d7d8d0f662778b429416c2192d6b88c272f031/templates/static/js/scripts.js#L179-L187

[bartaz]

It seems that the JS doesn't even trigger, because anchor ids are generated from Markdown (and label text is taken into account).

For the time being we could use <h2>Heading {{ status_label("New") }}</h2> notation instead, as a workaround.

Another option would be to simply accept the -new (and other) suffixes in URLs and update them when labels are removed from headings.

[JuanFernandoCastaneda]

Hello. I've been checking this issue and have come up with two possible solutions, but I'm not sure which one to pull request. One is more "radical" than the other.

The radical one is to change the id of the headers that include spans to not reflect the text of the span. It always solves the issue (even if the user has no js, or is offline), but is done extending one method of Canonical's Template Finder on app.py

The non-radical one is to only fix the redirection of the first load of the page. This doesn't touch any ids, but doesn't work if the user doesn't have js, or after the page has been loaded.

Which should I pull request? Or should I pull both?