UX Bug: Instance Level Security Dashboard project selector
Summary
There are a couple UX problems with the project selector as implemented in the Instance Level Security Dashboard (ILSD):
- The "Showing N of M items" text always displays "Showing N of 0 items"
- At most 20 projects will only ever be displayed, rather than having an auto-loading infinite scroll (as in Operations or Environments Dashboard project selectors)
Steps to reproduce
- Access the Instance Level Security Dashboard (should be available on next deploys to staging/production)
- Click "Edit dashboard"
- Start searching for any projects
Example Project
Searching for git will probably yield a lot of results!
What is the current bug behavior?
The text "Showing N of 0 items" (for some N, depending on your search term) appears. It will only ever be at most 20.
What is the expected correct behavior?
The text "Showing N of M items" should appear, where N is initially at most 20, and M is the total number of matching projects. Scrolling to the bottom of the list should load the next 20 (if any), such that the text would then say "Showing 40 of M items".
The Operations and Environments Dashboards implement this behaviour as expected (apologies for poorly framed video):
Output of checks
This will be on GitLab.com on one of the next production deploys.
Possible fixes
The ILSD re-used the existing project selector shared component for this functionality. Between the time the ILSD was written and when it was merged into master, the above component was extended with infinite-scrolling behaviour. The Operations and Environments Dashboards were updated, but the ILSD wasn't (as it was behind a feature flag).
The fixes would be to:
- While fixing this let's also change over the pajamas drop down.
- Extend the ILSD's project selector Vuex module to include pagination tracking/info and a
fetchNextPage-style action - provide the total from the pagination information as the
totalResultsprop to the project selector in the ILSD's project manager