Fix TOC button disappearing in snippets when switching Code -> Preview

skkzshrequested to merge
gitlab-community/gitlab-org/gitlab:skkzsh/toc-snippet-sw into master

What does this MR do and why?

Fixes TOC button disappears in snippets when switchin... (#603796). Visually confirmed in GDK-in-a-box.

Cause

table_contents.vue (the TOC component) uses MutationObserver to watch .blob-viewer[data-type="rich"] for attribute changes, then calls generateHeaders() to build the TOC items.

However, in the snippet_blob_view.vue template, blob_header (which contains TOC) renders before blob_content. When switching back to Preview, TOC's mounted() runs while blob_content has not been patched yet; .blob-viewer still has data-type="simple" left over from the Code view.

querySelector('.blob-viewer[data-type="rich"]') returns null, so the MutationObserver is never installed. The subsequent data-type change from "simple" -> "rich" goes undetected, and generateHeaders() is never called.

blob_viewer_null

Changes

🔴 Red → 🟢 Green cycle:

  1. 8f67ba59: Add a spec covering the viewer switching scenario where data-type transitions from "simple" to "rich". – 🔴 RED at this point due to the existing bug (job log)
  2. 0ecaa376: Replace the querySelector argument .blob-viewer[data-type="rich"] with .blob-viewer. – 🟢 GREEN

Notes

  • I don't work on the frontend regularly — a careful look at this approach would be very helpful.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by skkzsh

Merge request reports