Skip to content

Pipeline Graph: Update stage name to truncate when text is too long

Briley Sandlin requested to merge 350438-truncate-stage-name into master

What does this MR do and why?

For #350438 (closed)

The ActionComponent was overlapping the stage name in the pipeline graph when that name was too long.

The reason for this is that ActionComponent has a position of absolute. This is the underlying issue and doesn't seem necessary to me. Since this is my first MR, I am erring on the side of caution and proposing a simple fix using width and truncation as opposed to updating the styling on the action component.

If I am missing any context around the absolute positioning there, I'd love to learn about it!

How to set up and validate locally

  1. Visit a pipeline graph (CI/CD > Pipelines >> Choose a pipeline ID)
  2. On a stage that has an ActionComponent (play button etc) in the title, edit the html to create a longer name
  3. The name should truncate instead of aligning behind the button.

Screenshots or screen recordings

Before After
stage_name_broken stage_name_fixed

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Briley Sandlin

Merge request reports