Fix rendering emoji shortcodes in issue list titles when side panel is disabled

What does this MR do?

Renders emoji shortcodes in issue list titles when the "Open items in side panel" user preference is disabled. Previously, emoji shortcodes (e.g. :thinking:) appeared as raw text in this mode because the v-else rendering path in issuable_item.vue used plain text interpolation instead of the server-rendered titleHtml field.

Why was this MR needed?

The issuable_item component has two rendering paths for titles, controlled by the preventRedirect prop (which maps to the user preference shouldOpenItemsInSidePanel). The v-if branch correctly uses v-safe-html="issuable.titleHtml", rendering <gl-emoji> elements. The v-else branch used {{ issuable.title }}, which passes shortcodes through as raw strings.

Additionally, the slim work items GraphQL query and the dashboard issue fragment did not fetch titleHtml, so the data was unavailable in some list views even if the template were fixed.

What are the relevant issue numbers?

Closes #14572 (closed)

Screenshots (before & after)

Before (side panel disabled) After (side panel disabled)

image.png

Screenshot 2026-04-15 at 7.25.34 PM.png

Changes

  • issuable_item.vue: Use titleHtml with v-safe-html in the v-else branch, with a fallback to plain title for consumers that don't yet fetch titleHtml
  • get_work_items_slim.query.graphql (CE + EE): Added titleHtml field so the data is available when the slim query loads first
  • issue.fragment.graphql: Added titleHtml to the dashboard issue query fragment

Does this MR meet the acceptance criteria?

  • All tests passing (83/83 in issuable_item_spec.js)
  • Follows project style guide
  • No breaking changes introduced

How to set up and validate locally

  1. Create an issue with an emoji shortcode in the title (e.g. :thinking: Test emoji rendering)
  2. Navigate to the project's issues list
  3. Open the display settings dropdown (gear icon near the top of the list)
  4. Under "Your Preferences", disable the "Open items in side panel" toggle
  5. Verify the emoji renders as an icon, not as raw :thinking: text
  6. Re-enable the toggle and verify emojis still render correctly
  7. Navigate to /dashboard/work_items and verify titles with emoji shortcodes also render correctly

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.

Merge request reports

Loading