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 in ee/app/assets/javascripts/security_dashboard/components/shared/filters/project_filter.vue to something low like 3 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 the ProjectFilter 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.