Skip to content

Update styling and accessibility for pipeline mini graph

Mireya Andres requested to merge pipeline-graph-ux-improvements into master

What does this MR do and why?

For #343434 (closed) and #342841 (closed)

This fixes the CSS and accessibility of the pipeline mini graph and linked pipelines. The following changes are added:

  • Upstream and downstream pipelines are vertically aligned with the mini pipeline graph. On hover, the icon is no longer misplaced.
  • Tooltips show up when navigating using the keyboard.
  • Linked pipelines do not overlap the side drawer for the pipeline editor.
  • Make sure pipeline icons are the same size for the main pipeline and downstream pipeline in the MR widget.

Screenshots or screen recordings

  1. Upstream and downstream pipelines are vertically aligned with the mini pipeline graph. On hover, the icon is no longer misplaced.

    Before After
    Before After
  2. Tooltips show up when navigating using the keyboard. (Notice how tooltips don't show up for the main pipeline stages before you enter the menu).

    Before After
    Before After
  3. Linked pipelines do not overlap the side drawer for the pipeline editor.

    Before After
    Before After
  4. Make sure pipeline icons are the same size for the main pipeline and downstream pipeline in the MR widget

    Before After
    Before After

How to set up and validate locally

Note: If you're testing on Firefox or Safari on macOS, make sure you enable full keyboard navigation for macOS first: Enable keyboard navigation on macOS. Otherwise, everything should be easy to verify on google chrome as-is.

There are existing pipelines with upstream pipelines in http://gdk.test:3000/flightjs/Flight/-/pipelines. The first two items can be verified in the pipelines table for the flightjs project on gdk.

To test the side drawer for the pipeline editor, we can create our own pipeline:

  1. Go to the pipeline editor (CI/CD > Editor)

  2. If your project doesn't have a .gitlab-ci.yml file, you can create one from here by clicking on the Create new CI/CD pipeline button. Otherwise, your .gitlab-ci.yml file should already show up in the pipeline editor.

  3. Copy paste the following content. Replace /path/to/project with the path of a local project you want to use (it can be any project since it's alright for the pipeline to fail here).

    stages:
      - prepare
      - deploy
    
    prepareJob:
      stage: prepare
      script:
        - echo "running prepare_job"
    
    childPipeline:
      stage: deploy
      trigger:
        include:
          - project: "/path/to/project" # replace with project path
            file: ".gitlab-ci.yml"
  4. Commit the changes using the commit form at the bottom of the page.

  5. Wait for the pipeline status to update.

  6. Uncollapse the side drawer and verify that the linked pipelines do not overlap the drawer.

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 Mireya Andres

Merge request reports