Migrate vulnerability project_filter to listbox
What does this MR do and why?
Relates to #414879 (closed)
Part of migration epic &9371
This migrates the vulnerability report project filter from GlDropdown to GlCollapsibleListbox. It also adds quite some tests for functionality which was not tested before.
Screenshots or screen recordings
Before | After |
---|---|
note: the case where the maximum amount of projects are selected showed a search box before, but this was not usable. Now it's been removed. Also, to see the maximum projects message, you had to scroll all the way down (past the 100 items). Now, with GlCollapsibleListbox, it's a sticky footer which is always showing.
How to set up and validate locally
You'll need an EE license
To properly test the infinite scroll: generate >100 projects via the API:
for i in {0..105}; do
curl -s -k 'POST' -H "PRIVATE-TOKEN: <add-a-private-token-from-gdk>" --header "Content-Type: application/json" --data "{ \"name\": \"repo_$i\", \"path\": \"$i_repo\", \"namespace_id\": \"24\" }" --url 'gdk.test:3000/api/v4/projects/'
done
In general, the filter should work as before.
Go to gitlab-org group vulnerability report.
Things to test:
- infinite scroll -> scrolling to bottom of the listbox should show loading icon and load more projects. If all projects are loaded, do not show loading icon when scrolled to the bottom
- querystring and selected projects should sync
- if you select a project from a next page, meaning you selected a project after the infinite scroll has loaded more results, this will also be properly selected in the filter when you reload the full page -> in the component, an extra API resolves ids of projects that aren't available in the first page of the projects request
- selected projects should appear first in the list, followed by "All projects" option, followed by the remaining projects
- Clicking "All projects" should de-select all other options
- Deselecting all selected options should automatically select "All projects"
- When searching, if less than 3 characters are entered, a message is shown that the query is too short
- Otherwise when searching, the results are displayed without selected options on top and without an "All projects" option
- Also when searching, the searchTerm is highlights in the results
- The text of the listbox button shows either "All projects" when nothing is selected, the name of the project (when 1 is selected), or the name of the first project followed by +x more.
- To test the max projects functionality. You can either set the
SELECTED_PROJECTS_MAX_COUNT
inee/app/assets/javascripts/security_dashboard/components/shared/filters/project_filter.vue
to something low like3
and select 3 projects. Or you can note down the id of the first project created with the script above and select 100 projects starting from that id in the component. In vue devtools, select theProjectFilter
component. Then, in your console:$vm0.selected = [...Array(100).keys()].map(id => (id + <ID_FIRST_PROJECT>).toString())
where you replace<ID_FIRST_PROJECT>
with the id of the first project created in the script above. - When you've selected 100 projects, the selected options are still shown, but no other options are shown. Also a message indicating the max amount of projects are selected is shown. Also, the search is not shown. This is different than before where the search box was shown, but it was not functional.
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.