Skip to content

Update the child pipeline expand highlight states

What does this MR do and why?

The expand downstream button was not showing the inner shadow when hovered or the blue highlight from the browser when focused. This is because the class gl-shadow-none! was being applied at all time. We now conditionally apply this class if the element is not focused or hovered.

Screenshots or screen recordings

Before After
Screen_Recording_2022-05-30_at_2.24.13_PM Screen_Recording_2022-05-30_at_2.04.58_PM

How to set up and validate locally

  • Setup gitlab runners locally https://docs.gitlab.com/runner/install/osx.html#install-gitlab-runner-on-macos
  • Create at least 2 projects which have their own CI configuration (examples of config will be seen below)
  • Add a new runner for both of these projects
  • In the main project, setup the main .gitlab-ci.yml file by navigating to CI/CD => Editor
  • Paste the following config (and adjust the project names to match)
stages:
  - build
  - test
  - deploy

hi:
  stage: "build"
  script: "echo simple job"

trigger_simple_yaml:
  stage: deploy
  trigger:
    include:
      - project: "root/simple-yaml" # replace with your 2nd project
        file: ".gitlab-ci.yml"
  • Then go inside your second project CI configuration by navigating to CI/CD => Editor
  • Paste any configuration you like:
job_from_project_2:
  script: echo hello from project 2
  • Go back to Project 1
  • Run a pipeline
  • The downstream card will appear in the graph
  • Hover on the expand button (which is on the right with the arrow!)
  • Notice the inner shadow in the button
  • Now focus by tabbing
  • Notice the blue highlight of the browser

MR acceptance checklist

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

Related to #323434 (closed)

Edited by Frédéric Caplette

Merge request reports