Update styling and accessibility for pipeline mini graph
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
-
Upstream and downstream pipelines are vertically aligned with the mini pipeline graph. On hover, the icon is no longer misplaced.
Before After -
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 -
Linked pipelines do not overlap the side drawer for the pipeline editor.
Before After Before After -
Make sure pipeline icons are the same size for the main pipeline and downstream pipeline in the MR widget
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:
-
Go to the pipeline editor (CI/CD > Editor)
-
If your project doesn't have a
.gitlab-ci.yml
file, you can create one from here by clicking on theCreate new CI/CD pipeline
button. Otherwise, your.gitlab-ci.yml
file should already show up in the pipeline editor. -
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"
-
Commit the changes using the commit form at the bottom of the page.
-
Wait for the pipeline status to update.
-
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.
-
I have evaluated the MR acceptance checklist for this MR.