Skip to content

Add search box to artifacts dropdown

Miranda Fluharty requested to merge 362632-add-search-to-artifacts-menu into master

What does this MR do and why?

For #362632 (closed) (design)

This MR adds a search box to the Download Artifacts dropdown next to each pipeline on the pipelines list page to make it easier to find the artifacts you're looking for, along with a few other adjustments to match the design (change the icon from vertical ellipsis to download, add the caret back in to indicate that it is a dropdown, use header text instead of section header to center the header and put a line between it and the body of the dropdown).

Screenshots or screen recordings

before after
button appearance Screen_Shot_2022-08-08_at_18.35.30 Screen_Shot_2022-08-08_at_18.28.47
with dropdown open Screen_Shot_2022-08-08_at_18.35.36 Screen_Shot_2022-08-08_at_18.28.34
with search query 🚫 Screen_Shot_2022-08-08_at_18.28.41

How to set up and validate locally

  1. git checkout 362632-add-search-to-artifacts-menu
  2. run a pipeline that generates downloadable artifacts
use this CI yaml to generate the artifacts from the screenshot:
potato:
  stage: build
  script:
    - echo 'potato' >> potato.txt
  artifacts:
    expose_as: 'potato'
    paths: ['potato.txt']

tomato:
  stage: build
  script:
    - echo 'tomato' >> tomato.txt
  artifacts:
    expose_as: 'tomato'
    paths: ['tomato.txt']

pineapple:
  stage: build
  script:
    - echo 'pineapple' >> pineapple.txt
  artifacts:
    expose_as: 'pineapple'
    paths: ['pineapple.txt']

apple:
  stage: build
  script:
    - echo 'apple' >> apple.txt
  artifacts:
    expose_as: 'apple'
    paths: ['apple.txt']

toblerone:
  stage: build
  script:
    - echo 'toblerone' >> toblerone.txt
  artifacts:
    expose_as: 'toblerone'
    paths: ['toblerone.txt']
  1. navigate to the pipeline list page
  2. click the download icon dropdown next to the pipeline
  3. there should be a search box at the top of the dropdown
  4. type something in the search box
  5. only artifacts with names that match what you typed should be displayed

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 Miranda Fluharty

Merge request reports