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
totalResults
prop to the project selector in the ILSD's project manager