Add search box to artifacts dropdown
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 | ![]() |
![]() |
with dropdown open | ![]() |
![]() |
with search query | ![]() |
How to set up and validate locally
git checkout 362632-add-search-to-artifacts-menu
- 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']
- navigate to the pipeline list page
- click the download icon dropdown next to the pipeline
- there should be a search box at the top of the dropdown
- type something in the search box
- 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.
-
I have evaluated the MR acceptance checklist for this MR.
Edited by Miranda Fluharty