Add frontend pagination on manage users

CDCgov · Dec 26, 2024 · 1ef01c7 · 1ef01c7
1 parent 1598985
commit 1ef01c7
Show file tree

Hide file tree

Showing 12 changed files with 233 additions and 18 deletions.
diff --git a/frontend/src/app/Settings/Settings.tsx b/frontend/src/app/Settings/Settings.tsx
@@ -29,7 +29,7 @@ const Settings = () => {
             path={"self-registration"}
             element={<ManageSelfRegistrationLinksContainer />}
           />
-          <Route path="/" element={<ManageUsersContainer />} />
+          <Route path="/:pageNumber" element={<ManageUsersContainer />} />
         </Routes>
       </div>
     </div>

diff --git a/frontend/src/app/Settings/SettingsNav.tsx b/frontend/src/app/Settings/SettingsNav.tsx
@@ -21,7 +21,7 @@ const SettingsNav = () => {
     <nav className="prime-secondary-nav" aria-label="Secondary navigation">
       <ul className="usa-nav__secondary-links prime-nav">
         <li className="usa-nav__secondary-item">
-          <LinkWithQuery to={`/settings`} end className={classNameByActive}>
+          <LinkWithQuery to={`/settings/1`} end className={classNameByActive}>
             Manage users
           </LinkWithQuery>
         </li>

diff --git a/frontend/src/app/Settings/Users/ManageUsers.test.tsx b/frontend/src/app/Settings/Users/ManageUsers.test.tsx
@@ -362,6 +362,9 @@ describe("ManageUsers", () => {
             resendUserActivationEmail={resendUserActivationEmail}
             updateUserName={updateUserName}
             updateUserEmail={updateUserEmail}
+            currentPage={1}
+            entriesPerPage={10}
+            totalEntries={3}
           />
         </TestContainer>
       );
@@ -773,6 +776,9 @@ describe("ManageUsers", () => {
             resendUserActivationEmail={resendUserActivationEmail}
             updateUserName={() => Promise.resolve()}
             updateUserEmail={() => Promise.resolve()}
+            totalEntries={0}
+            entriesPerPage={10}
+            currentPage={1}
           />
         </TestContainer>
       );
@@ -835,6 +841,9 @@ describe("ManageUsers", () => {
             resendUserActivationEmail={resendUserActivationEmail}
             updateUserName={() => Promise.resolve()}
             updateUserEmail={() => Promise.resolve()}
+            totalEntries={2}
+            entriesPerPage={10}
+            currentPage={1}
           />
         </TestContainer>
       );
@@ -875,6 +884,9 @@ describe("ManageUsers", () => {
             resendUserActivationEmail={resendUserActivationEmail}
             updateUserName={() => Promise.resolve()}
             updateUserEmail={() => Promise.resolve()}
+            totalEntries={2}
+            entriesPerPage={10}
+            currentPage={1}
           />
         </TestContainer>
       );
@@ -916,6 +928,9 @@ describe("ManageUsers", () => {
             resendUserActivationEmail={resendUserActivationEmail}
             updateUserName={() => Promise.resolve()}
             updateUserEmail={() => Promise.resolve()}
+            totalEntries={2}
+            entriesPerPage={10}
+            currentPage={1}
           />
         </TestContainer>
       );
@@ -1013,6 +1028,9 @@ describe("ManageUsers", () => {
         resendUserActivationEmail={resendUserActivationEmail}
         updateUserName={() => Promise.resolve()}
         updateUserEmail={() => Promise.resolve()}
+        totalEntries={3}
+        entriesPerPage={10}
+        currentPage={1}
       />
     );
     render(

diff --git a/frontend/src/app/Settings/Users/ManageUsers.tsx b/frontend/src/app/Settings/Users/ManageUsers.tsx
@@ -11,6 +11,7 @@ import {
   UserPermission,
 } from "../../../generated/graphql";
 import UserHeading from "../../commonComponents/UserDetails/UserHeading";
+import Pagination from "../../commonComponents/Pagination";
 
 import CreateUserModal from "./CreateUserModal";
 import UsersSideNav from "./UsersSideNav";
@@ -39,6 +40,9 @@ interface Props {
   reactivateUser: (variables: any) => Promise<any>;
   resendUserActivationEmail: (variables: any) => Promise<any>;
   getUsers: () => Promise<ApolloQueryResult<GetUsersAndStatusQuery>>;
+  currentPage: number;
+  totalEntries: number;
+  entriesPerPage: number;
 }
 
 export type LimitedUsers = { [id: string]: LimitedUser };
@@ -92,6 +96,9 @@ const ManageUsers: React.FC<Props> = ({
   reactivateUser,
   resendUserActivationEmail,
   getUsers,
+  currentPage,
+  totalEntries,
+  entriesPerPage,
 }) => {
   const [userWithPermissions, updateUserWithPermissions] =
     useState<SettingsUser | null>();
@@ -501,6 +508,14 @@ const ManageUsers: React.FC<Props> = ({
               />
             )}
           </div>
+          <div className="grid-row">
+            <Pagination
+              baseRoute={"/settings"}
+              totalEntries={totalEntries}
+              entriesPerPage={entriesPerPage}
+              currentPage={currentPage}
+            ></Pagination>
+          </div>
         </div>
       )}
     </div>

diff --git a/frontend/src/app/Settings/Users/ManageUsersContainer.test.tsx b/frontend/src/app/Settings/Users/ManageUsersContainer.test.tsx
@@ -15,7 +15,7 @@ import { cloneDeep } from "lodash";
 
 import {
   GetUserDocument,
-  GetUsersAndStatusDocument,
+  GetUsersAndStatusPageDocument,
 } from "../../../generated/graphql";
 import {
   ORG_ADMIN_REACTIVATE_COPY,
@@ -101,13 +101,18 @@ describe("ManageUsersContainer", () => {
   const mocks: MockedResponse[] = [
     {
       request: {
-        operationName: "GetUsersAndStatus",
-        query: GetUsersAndStatusDocument,
-        variables: {},
+        operationName: "GetUsersAndStatusPage",
+        query: GetUsersAndStatusPageDocument,
+        variables: {
+          pageNumber: 0,
+        },
       },
       result: {
         data: {
-          usersWithStatus: mockedUsersWithStatus,
+          usersWithStatusPage: {
+            totalElements: 6,
+            content: mockedUsersWithStatus,
+          },
         },
       },
     },
@@ -149,13 +154,18 @@ describe("ManageUsersContainer", () => {
   const supendedUserMocks: MockedResponse[] = [
     {
       request: {
-        operationName: "GetUsersAndStatus",
-        query: GetUsersAndStatusDocument,
-        variables: {},
+        operationName: "GetUsersAndStatusPage",
+        query: GetUsersAndStatusPageDocument,
+        variables: {
+          pageNumber: 0,
+        },
       },
       result: {
         data: {
-          usersWithStatus: mockedUsersWithStatus,
+          usersWithStatusPage: {
+            totalElements: 6,
+            content: mockedUsersWithStatus,
+          },
         },
       },
     },

diff --git a/frontend/src/app/Settings/Users/ManageUsersContainer.tsx b/frontend/src/app/Settings/Users/ManageUsersContainer.tsx
@@ -1,11 +1,11 @@
 import { gql, useMutation } from "@apollo/client";
 import { useSelector } from "react-redux";
+import { useParams } from "react-router-dom";
 
 import { RootState } from "../../store";
 import { Role } from "../../permissions";
 import {
   Maybe,
-  useGetUsersAndStatusQuery,
   useResendActivationEmailMutation,
   useUpdateUserNameMutation,
   useEditUserEmailMutation,
@@ -17,6 +17,7 @@ import {
   useSetUserIsDeletedMutation,
   useAddUserToCurrentOrgMutation,
   useResetUserPasswordMutation,
+  useGetUsersAndStatusPageQuery,
 } from "../../../generated/graphql";
 import { useDocumentTitle } from "../../utils/hooks";
 
@@ -92,12 +93,21 @@ const ManageUsersContainer = () => {
   const [resetMfa] = useResetUserMfaMutation();
   const [resendUserActivationEmail] = useResendActivationEmailMutation();
 
+  const { pageNumber } = useParams();
+  const currentPage = pageNumber ? +pageNumber : 1;
+  const entriesPerPage = 10;
+
   const {
     data,
     loading,
     error,
     refetch: getUsers,
-  } = useGetUsersAndStatusQuery({ fetchPolicy: "no-cache" });
+  } = useGetUsersAndStatusPageQuery({
+    fetchPolicy: "no-cache",
+    variables: {
+      pageNumber: currentPage - 1,
+    },
+  });
 
   if (loading) {
     return <p> Loading... </p>;
@@ -113,7 +123,7 @@ const ManageUsersContainer = () => {
 
   return (
     <ManageUsers
-      users={data.usersWithStatus ?? []}
+      users={data.usersWithStatusPage.content ?? []}
       loggedInUser={loggedInUser}
       allFacilities={allFacilities}
       updateUserPrivileges={updateUserPrivileges}
@@ -126,6 +136,9 @@ const ManageUsersContainer = () => {
       reactivateUser={reactivateUser}
       resendUserActivationEmail={resendUserActivationEmail}
       getUsers={getUsers}
+      currentPage={currentPage}
+      totalEntries={data.usersWithStatusPage.totalElements}
+      entriesPerPage={entriesPerPage}
     />
   );
 };

diff --git a/frontend/src/app/Settings/Users/__snapshots__/ManageUsersContainer.test.tsx.snap b/frontend/src/app/Settings/Users/__snapshots__/ManageUsersContainer.test.tsx.snap
@@ -408,6 +408,29 @@ exports[`ManageUsersContainer loads the component and displays users successfull
           </div>
         </div>
       </div>
+      <div
+        class="grid-row"
+      >
+        <nav
+          aria-label="Pagination"
+          class="usa-pagination"
+          role="navigation"
+        >
+          <ol>
+            <li>
+              <a
+                aria-label="Page 1"
+                class="is-active"
+                href="/settings/1"
+              >
+                <span>
+                  1
+                </span>
+              </a>
+            </li>
+          </ol>
+        </nav>
+      </div>
     </div>
   </div>
 </div>

diff --git a/frontend/src/app/Settings/Users/operations.graphql b/frontend/src/app/Settings/Users/operations.graphql
@@ -29,6 +29,24 @@ query GetUsersAndStatus {
   }
 }
 
+query GetUsersAndStatusPage(
+  $pageNumber: Int
+) {
+  usersWithStatusPage(
+    pageNumber: $pageNumber
+  ) {
+    content {
+      id
+      firstName
+      middleName
+      lastName
+      email
+      status
+    }
+    totalElements
+  }
+}
+
 mutation ResendActivationEmail($id: ID!) {
   resendActivationEmail(id: $id) {
     id

diff --git a/frontend/src/app/Settings/__snapshots__/SettingsNav.test.tsx.snap b/frontend/src/app/Settings/__snapshots__/SettingsNav.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`SettingsNav displays the nav order correctly and defaults to 'Manage Us
       >
         <a
           class=""
-          href="/settings"
+          href="/settings/1"
         >
           Manage users
         </a>

diff --git a/frontend/src/app/commonComponents/Header.tsx b/frontend/src/app/commonComponents/Header.tsx
@@ -203,7 +203,7 @@ const Header: React.FC<{}> = () => {
       mobileDisplay: false,
     },
     {
-      url: "/settings",
+      url: "/settings/1",
       displayPermissions: true,
       onClick: () => setMenuVisible(false),
       className: getNavItemClassName,

diff --git a/frontend/src/app/commonComponents/__snapshots__/Header.test.tsx.snap b/frontend/src/app/commonComponents/__snapshots__/Header.test.tsx.snap
@@ -69,7 +69,7 @@ exports[`Header displays correctly 1`] = `
               <a
                 class="prime-nav-link"
                 data-testid="mobile-settings-button"
-                href="/settings"
+                href="/settings/1"
                 id="mobile-settings-button"
                 role="link"
               >
@@ -272,7 +272,7 @@ exports[`Header displays correctly 1`] = `
             <a
               class="prime-nav-link"
               data-testid="desktop-settings-button"
-              href="/settings"
+              href="/settings/1"
               id="desktop-settings-button"
               role="link"
             >