Use v-safe-html for commit.titleHtml in collapsible commit info

What does this MR do and why?

Fixes the collapsible commit info component improperly rendering commit.titleHtml by using text interpolation ({{ }}) instead of the v-safe-html directive. This caused HTML entities (e.g., &, <, >) and rendered references (e.g., #1) to display as raw escaped text instead of properly formatted HTML.

  • Replaced {{ commit.titleHtml }} with v-safe-html:[$options.safeHtmlConfig]="commit.titleHtml" in collapsible_commit_info.vue
  • This is consistent with how commit_info.vue and table/row.vue already render titleHtml
  • The existing safeHtmlConfig ({ ADD_TAGS: ['gl-emoji'] }) is sufficient since the backend's SingleLinePipeline only produces <a> (already in DOMPurify defaults) and <gl-emoji> tags

References

Closes #592157 (closed)

Screenshots or screen recordings

Before After
CleanShot 2026-03-05 at 10.37.00.png

How to set up and validate locally

  1. Resize the browser to a small viewport width (e.g., < 576px) to trigger the mobile layout
  2. Navigate to a repository's file tree and a commit whose title contains HTML entities (e.g., &) or issue/MR references (e.g., #1)
  3. Click into a file to navigate via the repository app
  4. Expand the collapsible commit info and verify the commit title renders as formatted HTML (links are clickable, entities are decoded) rather than raw escaped text
  5. Navigate directly to a file URL (e.g., http://localhost:3000/<project>/-/blob/main/README.md) or refresh the page while viewing a file
  6. Expand the collapsible commit info and verify the commit title renders correctly as formatted HTML

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 Chaoyue Zhao

Merge request reports

Loading