Add frontend support for Manage Users pagination #8371

mpbrown · 2024-12-24T18:32:48Z

FRONTEND PULL REQUEST

Related Issue

Resolves Add pagination to "Manage users" page for user list #8103

Changes Proposed

Adds pagination to the Manage Users side nav
Updates the routing for the default Settings page to use settings/users/:pageNumber so that the page number can be retrieved from the url params
Adds a "No results found" message with a button to clear the search filter

Testing

Deployed on dev5
Select Access organization account from the support admin dashboard
Select Big Organization, type in "test" for justification, and click Access data
Select either facility
Go to the Settings page and it should bring you to Manage Users
Test that pagination works as expected

Screenshots

Page 1 of results

Page 5 of results

Last page of results

Search results with multiple pages

Search results with single result page

No results found

mpbrown · 2025-01-29T19:01:06Z

backend/src/main/java/gov/cdc/usds/simplereport/service/ApiUserService.java

+    boolean requestedPageOutOfBounds = startIndex > totalSearchResults;
+
+    if (onlyOnePageOfResults || requestedPageOutOfBounds) {
+      startIndex = 0;


Had to handle this edge case because I encountered an error when I was on page 7 of all results and entered a search query. The app requested page 7 of the search results and the backend calculated the start index as a higher index than the end index. This caused an illegal argument error when attempting to create the sublist

mpbrown · 2025-02-05T16:40:46Z

@khayeni-SL @kenieh I updated dev5 with the styling changes and fixed the bug @emyl3 found. The search is now handled with the url query parameter name so when a search is input it will always bring them to the first page of those search results. PR should be all ready for review!

emyl3

Left a couple nits and one thing I noticed based on our search implementation (Sorry I didn't notice this earlier when you introduced the implementation. 😓)

Looks like this search behaves slightly differently than our other ones.

search.functionality.mov

Let me know what you decide to do. Everything else looks good and works as expected for me.

frontend/src/app/Settings/Users/UsersSideNav.tsx

emyl3 · 2025-02-07T22:01:33Z

frontend/src/app/Settings/Settings.tsx

@@ -29,7 +29,7 @@ const Settings = () => {
            path={"self-registration"}
            element={<ManageSelfRegistrationLinksContainer />}
          />
-          <Route path="/" element={<ManageUsersContainer />} />
+          <Route path="users/:pageNumber" element={<ManageUsersContainer />} />


I forgot we could also add something like the following:

<Route index element={<Navigate replace to="users/1"/>}/>

to default it to the users page like before if someone were to navigate to /settings

Good idea! I just added this redirect

Updated the urls we have configured for the Lighthouse checks since adding this new redirect confused it

mpbrown · 2025-02-10T15:59:06Z

Looks like this search behaves slightly differently than our other ones.

This is intended since we want the user search results to appear in that side nav panel @emyl3

emyl3 · 2025-02-10T16:14:13Z

Looks like this search behaves slightly differently than our other ones.

This is intended since we want the user search results to appear in that side nav panel @emyl3

Just to clarify, I was talking about searching for a user based on "Last Name, First Name" that works in our other searches but not this one.

mpbrown · 2025-02-10T17:09:52Z

Looks like this search behaves slightly differently than our other ones.

This is intended since we want the user search results to appear in that side nav panel @emyl3

Just to clarify, I was talking about searching for a user based on "Last Name, First Name" that works in our other searches but not this one.

Oh whoops I thought the clip was about the dropdown section for selecting the filter! Good callout I'll check with product to confirm for supporting the other search format as well

bobbywells52 · 2025-02-10T19:07:11Z

Non blocking nit: The styling and spacing for the page toggles is inconsistent between the 3 states of first page, any middle page, and last page. Screenshots below:

bobbywells52

Tested in dev5 and everything is working as expected! I've left a few non-blocking nits. Thanks for your great work on this Mike!

frontend/src/app/Settings/Users/ManageUsers.test.tsx

mpbrown · 2025-02-10T20:30:06Z

Non blocking nit: The styling and spacing for the page toggles is inconsistent between the 3 states of first page, any middle page, and last page. Screenshots below:

I believe this is intentional so there is not left padding of white space on the first page, but tagging @kenieh to confirm

mpbrown · 2025-02-10T20:31:27Z

@emyl3 I updated the search filtering so now it should handle more flexible search queries like the results page does, thanks for finding that!

sonarqubecloud · 2025-02-10T20:50:57Z

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
87.3% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

arinkulshi-skylight

I have tested the changes in dev5. LGTM!

mpbrown force-pushed the mike/8103-manage-users-pagination-frontend branch 3 times, most recently from 52233eb to 31b2d0a Compare December 26, 2024 19:05

mpbrown force-pushed the mike/8103-manage-users-pagination-backend branch from c3ecb82 to 3a6b61e Compare December 26, 2024 19:11

mpbrown force-pushed the mike/8103-manage-users-pagination-frontend branch from 31b2d0a to b2174fb Compare December 26, 2024 19:20

mpbrown mentioned this pull request Dec 26, 2024

Add backend support for Manage Users pagination #8370

Merged

mpbrown force-pushed the mike/8103-manage-users-pagination-backend branch from 3a6b61e to d3166f1 Compare January 2, 2025 16:57

Base automatically changed from mike/8103-manage-users-pagination-backend to main January 15, 2025 22:36

mpbrown force-pushed the mike/8103-manage-users-pagination-frontend branch from 21a5f9b to 86fc1ca Compare January 16, 2025 15:18

mpbrown temporarily deployed to dev4 January 17, 2025 20:30 — with GitHub Actions Inactive

mpbrown temporarily deployed to dev4 January 17, 2025 20:39 — with GitHub Actions Inactive

mpbrown temporarily deployed to dev4 January 17, 2025 20:42 — with GitHub Actions Inactive

mpbrown temporarily deployed to dev5 January 21, 2025 17:34 — with GitHub Actions Inactive

mpbrown temporarily deployed to dev5 January 21, 2025 17:42 — with GitHub Actions Inactive

mpbrown temporarily deployed to dev5 January 21, 2025 17:45 — with GitHub Actions Inactive

mpbrown mentioned this pull request Jan 24, 2025

Fix errors for manage users Okta pagination #8432

Merged

mpbrown force-pushed the mike/8103-manage-users-pagination-frontend branch from cc6a935 to c7c7652 Compare January 27, 2025 16:29

mpbrown added 6 commits January 28, 2025 17:20

Add frontend pagination on manage users

f7d6075

Add paginated search frontend

a792c4b

Update snapshots

7882003

Handle total users in org

3a698f0

Update styling for Manage Users

812ad30

Run graphql codegen

e6a3da8

mpbrown force-pushed the mike/8103-manage-users-pagination-frontend branch from c7c7652 to e6a3da8 Compare January 28, 2025 22:25

Update snapshot

9cb7122

mpbrown temporarily deployed to dev5 January 29, 2025 16:21 — with GitHub Actions Inactive

mpbrown temporarily deployed to dev5 January 29, 2025 16:29 — with GitHub Actions Inactive

mpbrown temporarily deployed to dev5 January 29, 2025 16:32 — with GitHub Actions Inactive

Handle out of bounds requested page index

0c83837

mpbrown commented Jan 29, 2025

View reviewed changes

mpbrown temporarily deployed to dev5 February 5, 2025 16:24 — with GitHub Actions Inactive

Update mock name in test

9ad3181

emyl3 previously approved these changes Feb 7, 2025

View reviewed changes

mpbrown added 2 commits February 10, 2025 10:52

Remove button id

31e1517

Add settings page index redirect

3c3ff4f

mpbrown dismissed emyl3’s stale review via 3c3ff4f February 10, 2025 15:54

mpbrown requested a review from emyl3 February 10, 2025 15:59

mpbrown temporarily deployed to dev5 February 10, 2025 16:00 — with GitHub Actions Inactive

mpbrown temporarily deployed to dev5 February 10, 2025 16:08 — with GitHub Actions Inactive

mpbrown temporarily deployed to dev5 February 10, 2025 16:10 — with GitHub Actions Inactive

bobbywells52 previously approved these changes Feb 10, 2025

View reviewed changes

frontend/src/app/Settings/Users/ManageUsers.test.tsx Outdated Show resolved Hide resolved

Add more flexible search filtering

e47766c

mpbrown dismissed bobbywells52’s stale review via e47766c February 10, 2025 19:59

Update test entries per page

3452eca

mpbrown temporarily deployed to dev5 February 10, 2025 20:06 — with GitHub Actions Inactive

mpbrown deployed to dev5 February 10, 2025 20:13 — with GitHub Actions View deployment

mpbrown deployed to dev5 February 10, 2025 20:17 — with GitHub Actions Active

mpbrown requested a review from arinkulshi-skylight February 10, 2025 20:23

mpbrown requested a review from bobbywells52 February 10, 2025 20:31

Update lighthouse url for settings page

b5ee413

arinkulshi-skylight approved these changes Feb 10, 2025

View reviewed changes

bobbywells52 approved these changes Feb 10, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add frontend support for Manage Users pagination #8371

Add frontend support for Manage Users pagination #8371

mpbrown commented Dec 24, 2024 •

edited

Loading

mpbrown Jan 29, 2025

mpbrown commented Feb 5, 2025

emyl3 left a comment

emyl3 Feb 7, 2025

mpbrown Feb 10, 2025

mpbrown Feb 10, 2025

mpbrown commented Feb 10, 2025 •

edited

Loading

emyl3 commented Feb 10, 2025

mpbrown commented Feb 10, 2025

bobbywells52 commented Feb 10, 2025

bobbywells52 left a comment

mpbrown commented Feb 10, 2025

mpbrown commented Feb 10, 2025

sonarqubecloud bot commented Feb 10, 2025

arinkulshi-skylight left a comment

Add frontend support for Manage Users pagination #8371

Are you sure you want to change the base?

Add frontend support for Manage Users pagination #8371

Conversation

mpbrown commented Dec 24, 2024 • edited Loading

FRONTEND PULL REQUEST

Related Issue

Changes Proposed

Testing

Screenshots

mpbrown Jan 29, 2025

Choose a reason for hiding this comment

mpbrown commented Feb 5, 2025

emyl3 left a comment

Choose a reason for hiding this comment

emyl3 Feb 7, 2025

Choose a reason for hiding this comment

mpbrown Feb 10, 2025

Choose a reason for hiding this comment

mpbrown Feb 10, 2025

Choose a reason for hiding this comment

mpbrown commented Feb 10, 2025 • edited Loading

emyl3 commented Feb 10, 2025

mpbrown commented Feb 10, 2025

bobbywells52 commented Feb 10, 2025

bobbywells52 left a comment

Choose a reason for hiding this comment

mpbrown commented Feb 10, 2025

mpbrown commented Feb 10, 2025

sonarqubecloud bot commented Feb 10, 2025

Quality Gate passed

arinkulshi-skylight left a comment

Choose a reason for hiding this comment

mpbrown commented Dec 24, 2024 •

edited

Loading

mpbrown commented Feb 10, 2025 •

edited

Loading