Remove tooltip-on-truncate from the pipeline ref name
What does this MR do and why?
The commit row in the pipelines list shows a type icon and the ref name in one pill. It wrapped both in <tooltip-on-truncate truncate-target="child">, so a long ref name would get a tooltip with the full text.
That tooltip never showed, on Vue 2 or Vue 3:
- With
truncate-target="child", the component measures only the first element child of its root. Here that is the icon. The icon never overflows, so the tooltip stayed disabled. - The link has no truncation style. A long ref name is never cut off. It wraps onto several lines inside the pill.
A wrapped ref name is fully visible, so a tooltip with the same text adds nothing. This MR removes the wrapper and the computed title it used. The pill becomes inline-block, like the commit SHA pill next to it, so the icon and the link keep the same inline flow the wrapper span gave them. The rendered geometry is identical before and after.
This is the last consumer that passed more than one element to truncate-target="child". Duo flagged it while reviewing MR 256325, which fixes the text and comment node case in the shared component.
Alternatives considered:
- Moving to the
v-tooltip-on-truncatedirective plusgl-truncateon the link. That works, but it cuts the ref name off with an ellipsis where it wraps today. Wrapping keeps the whole name readable, so the directive is not needed here. - Keeping the wrapper. It has no effect, so it only adds a component instance and a resize observer per row.
Screenshots or screen recordings
Recorded on GDK (Vue 2) with a pipeline on a branch named a-very-long-branch-name-to-check-that-the-tooltip-on-truncate-shows-up-in-the-pipelines-list. Hovering the ref name shows no tooltip in either state. A pixel diff of the before and after row screenshots shows 0 differing pixels for both rows.
| Before | After |
|---|---|
| Long ref name wraps. No tooltip on hover. | Same. |
![]() |
![]() |
| Short ref name. | Same. |
![]() |
![]() |
How to set up and validate locally
- In a project with pipelines, create a branch with a very long name and run a pipeline on it.
- Open the project's pipelines list.
- Confirm the ref name in the commit row wraps under the type icon, the same as on
master. - Hover the ref name. Confirm no tooltip appears, the same as on
master.
Unit spec:
yarn jest spec/frontend/ci/pipelines_page/components/pipeline_url_spec.jsMR 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.
References
- Found while reviewing !256325 (comment 3875038937) (Duo review comment:
firstElementChildstill measures the icon in this consumer) - Follow-up question in !256325 (comment 3880215144) (should the pre-existing issue be fixed)
- Related fix to the shared component: !256325 (merged)



