Migrate `security_dashboard/components/shared/filters/project_filter.vue` to GlCollapsibleListbox
Verification steps
-
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.
Edited by Savas Vedova