Project filter on group-level vulnerability report only shows the first 100 projects, but not all

Summary

The project picker of the Group Vulnerability Report (previously Security Dashboard) does not allow to select some of the projects in the group.

Steps to reproduce

1. Go to https://gitlab.com/groups/gitlab-org/-/security/vulnerabilities/?state=DETECTED&state=CONFIRMED

2. Use the project picker to search for gitlab.
   

1. Note that the search results do not contain the GitLab project, i.e. https://gitlab.com/gitlab-org/gitlab/

Other projects are also not found, for example Gitaly, gitlab-shell, and gitlab-workhorse.

Example Project

https://gitlab.com/groups/gitlab-org/

What is the current bug behavior?

The project picker doesn't show some of the projects in a group.

What is the expected correct behavior?

The project picker shows all projects in a group. Searching for a project by a search term should list all projects containing the term.

Implementation plan

Context

The query that returns the projects associated with a group is limited to a result size of 100.

Implementation:

Related GraphQL queries in this comment: #284471 (comment 471045390)

• Infinite scroll
  • Use gl-intersection-observer in the dropdown to load more items when the user hits the end of the dropdown list. The dropdown can start empty until the user opens it for the first time (no need to do the initial load). Example on how this is done in another part of the code-base already: https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/analytics/instance_statistics/components/projects_and_groups_chart.vue#L68
• Search support
  • Add the "search" parameter to the group projects GraphQL query and default it to null.
  • Show the search box if the number of entries is above the default (20).
  • When the user searches, return the first page of results for the search. Additional results can be loaded by scrolling to the bottom, which will trigger the gl-intersection-observer.
• Querystring restoration
  • If there are project IDs in the querystring, i.e. security/vulnerabilities/?projectId=20&projectId=42, show those entries at the top of the dropdown. Check the item by default and show a spinner while doing a query to get the project name.
  • If a project is already checked and the list query returns the same project, remove it to prevent a duplicate entry.
  • Projects should only display at the top if restored from the querystring; otherwise, they keep their position from the list query. In other words, if the user checks an item in the dropdown, keep its position and do not move it to the top of the dropdown.