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-truncate directive plus gl-truncate on 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.
before-row inline-row
Short ref name. Same.
before-short-row inline-short-row

How to set up and validate locally

  1. In a project with pipelines, create a branch with a very long name and run a pipeline on it.
  2. Open the project's pipelines list.
  3. Confirm the ref name in the commit row wraps under the type icon, the same as on master.
  4. 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.js

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.

References

Edited by Miguel Rincon

Merge request reports

Loading
Loading