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) |
|---|---|
Changes
issuable_item.vue: UsetitleHtmlwithv-safe-htmlin thev-elsebranch, with a fallback to plaintitlefor consumers that don't yet fetchtitleHtmlget_work_items_slim.query.graphql(CE + EE): AddedtitleHtmlfield so the data is available when the slim query loads firstissue.fragment.graphql: AddedtitleHtmlto 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
- Create an issue with an emoji shortcode in the title (e.g.
:thinking: Test emoji rendering) - Navigate to the project's issues list
- Open the display settings dropdown (gear icon near the top of the list)
- Under "Your Preferences", disable the "Open items in side panel" toggle
- Verify the emoji renders as an icon, not as raw
:thinking:text - Re-enable the toggle and verify emojis still render correctly
- Navigate to
/dashboard/work_itemsand 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.

