From 5cfacc1c69ec6ed0bc3b9f770fb1f7e8bd058a49 Mon Sep 17 00:00:00 2001
From: Mike Brown <mike@skylight.digital>
Date: Tue, 24 Dec 2024 13:07:30 -0500
Subject: [PATCH] Add paginated search frontend

---
 frontend/src/app/Settings/Settings.tsx        |   2 +-
 frontend/src/app/Settings/SettingsNav.tsx     |   6 +-
 .../app/Settings/Users/ManageUsers.test.tsx   |  80 +++--------
 .../src/app/Settings/Users/ManageUsers.tsx    |  85 +++++++-----
 .../Users/ManageUsersContainer.test.tsx       | 124 ++++++++++++++++++
 .../Settings/Users/ManageUsersContainer.tsx   |  11 ++
 .../src/app/Settings/Users/UsersSideNav.tsx   |  33 ++---
 .../src/app/Settings/Users/operations.graphql |   6 +-
 .../__snapshots__/SettingsNav.test.tsx.snap   |   2 +-
 frontend/src/generated/graphql.tsx            |   7 +-
 10 files changed, 234 insertions(+), 122 deletions(-)

diff --git a/frontend/src/app/Settings/Settings.tsx b/frontend/src/app/Settings/Settings.tsx
index d9093028f6c..dd9a4addf4d 100644
--- 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="/:pageNumber" element={<ManageUsersContainer />} />
+          <Route path="users/:pageNumber" element={<ManageUsersContainer />} />
         </Routes>
       </div>
     </div>
diff --git a/frontend/src/app/Settings/SettingsNav.tsx b/frontend/src/app/Settings/SettingsNav.tsx
index b7eacce90f2..b3ee478af41 100644
--- a/frontend/src/app/Settings/SettingsNav.tsx
+++ b/frontend/src/app/Settings/SettingsNav.tsx
@@ -21,7 +21,11 @@ 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/1`} end className={classNameByActive}>
+          <LinkWithQuery
+            to={`/settings/users/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
index 58f6b1344bc..2d031b4417c 100644
--- a/frontend/src/app/Settings/Users/ManageUsers.test.tsx
+++ b/frontend/src/app/Settings/Users/ManageUsers.test.tsx
@@ -271,6 +271,7 @@ let reactivateUserAndResetPassword: (obj: any) => Promise<any>;
 let resetUserPassword: (obj: any) => Promise<any>;
 let resetUserMfa: (obj: any) => Promise<any>;
 let resendUserActivationEmail: (obj: any) => Promise<any>;
+let setDebouncedQueryString = jest.fn();
 
 type TestContainerProps = {
   children: React.ReactNode;
@@ -365,6 +366,9 @@ describe("ManageUsers", () => {
             currentPage={1}
             entriesPerPage={10}
             totalEntries={3}
+            debouncedQueryString={""}
+            setDebouncedQueryString={setDebouncedQueryString}
+            queryLoadingStatus={false}
           />
         </TestContainer>
       );
@@ -372,64 +376,6 @@ describe("ManageUsers", () => {
       return { user: userEvent.setup(), ...renderControls };
     };
 
-    it("is searchable", async () => {
-      //given
-      const { user } = await renderAndWaitForLoad();
-
-      //when
-      const searchBox = screen.getByRole("searchbox", {
-        name: /search by name/i,
-      });
-
-      await user.type(searchBox, "john");
-
-      //then
-      await waitFor(() => {
-        expect(
-          screen.getByRole("tab", {
-            name: displayFullName("John", "", "Arthur"),
-          })
-        ).toBeInTheDocument();
-      });
-      await waitFor(() => {
-        expect(
-          screen.queryByText(displayFullName("Bob", "", "Bobberoo"), {
-            exact: false,
-          })
-        ).not.toBeInTheDocument();
-      });
-    });
-
-    it("displays no results message for empty filtered list", async () => {
-      //given
-      const { user } = await renderAndWaitForLoad();
-
-      //when
-      const searchBox = screen.getByRole("searchbox", {
-        name: /search by name/i,
-      });
-      await user.type(searchBox, "john wick");
-
-      //then
-      await waitFor(() => {
-        expect(
-          screen.queryByText(displayFullName("Jane", "", "Doe"), {
-            exact: false,
-          })
-        ).not.toBeInTheDocument();
-      });
-
-      await waitFor(() => {
-        expect(
-          screen.queryByText(displayFullName("Bob", "", "Bobberoo"), {
-            exact: false,
-          })
-        ).not.toBeInTheDocument();
-      });
-
-      expect(screen.getByText("No results found.")).toBeInTheDocument();
-    });
-
     it("enables logged-in user's settings except deletion and roles", async () => {
       const { user } = await renderAndWaitForLoad();
       const nameButton = screen.getByRole("tab", {
@@ -779,6 +725,9 @@ describe("ManageUsers", () => {
             totalEntries={0}
             entriesPerPage={10}
             currentPage={1}
+            debouncedQueryString={""}
+            setDebouncedQueryString={setDebouncedQueryString}
+            queryLoadingStatus={false}
           />
         </TestContainer>
       );
@@ -789,8 +738,7 @@ describe("ManageUsers", () => {
 
     it("fails gracefully when there are no users", async () => {
       await renderWithNoUsers();
-      const noUsers = await screen.findByText("no users", { exact: false });
-      expect(noUsers).toBeInTheDocument();
+      expect(screen.getAllByText("No results found.")).toHaveLength(2);
     });
 
     it("adds a user when zero users exist", async () => {
@@ -844,6 +792,9 @@ describe("ManageUsers", () => {
             totalEntries={2}
             entriesPerPage={10}
             currentPage={1}
+            debouncedQueryString={""}
+            setDebouncedQueryString={setDebouncedQueryString}
+            queryLoadingStatus={false}
           />
         </TestContainer>
       );
@@ -887,6 +838,9 @@ describe("ManageUsers", () => {
             totalEntries={2}
             entriesPerPage={10}
             currentPage={1}
+            debouncedQueryString={""}
+            setDebouncedQueryString={setDebouncedQueryString}
+            queryLoadingStatus={false}
           />
         </TestContainer>
       );
@@ -931,6 +885,9 @@ describe("ManageUsers", () => {
             totalEntries={2}
             entriesPerPage={10}
             currentPage={1}
+            debouncedQueryString={""}
+            setDebouncedQueryString={setDebouncedQueryString}
+            queryLoadingStatus={false}
           />
         </TestContainer>
       );
@@ -1031,6 +988,9 @@ describe("ManageUsers", () => {
         totalEntries={3}
         entriesPerPage={10}
         currentPage={1}
+        debouncedQueryString={""}
+        setDebouncedQueryString={setDebouncedQueryString}
+        queryLoadingStatus={false}
       />
     );
     render(
diff --git a/frontend/src/app/Settings/Users/ManageUsers.tsx b/frontend/src/app/Settings/Users/ManageUsers.tsx
index 237f39e12ad..9765b117657 100644
--- a/frontend/src/app/Settings/Users/ManageUsers.tsx
+++ b/frontend/src/app/Settings/Users/ManageUsers.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { Dispatch, useState } from "react";
 import { ApolloQueryResult } from "@apollo/client";
 
 import Button from "../../commonComponents/Button/Button";
@@ -43,6 +43,9 @@ interface Props {
   currentPage: number;
   totalEntries: number;
   entriesPerPage: number;
+  debouncedQueryString: string;
+  setDebouncedQueryString: Dispatch<string>;
+  queryLoadingStatus: boolean;
 }
 
 export type LimitedUsers = { [id: string]: LimitedUser };
@@ -99,6 +102,9 @@ const ManageUsers: React.FC<Props> = ({
   currentPage,
   totalEntries,
   entriesPerPage,
+  debouncedQueryString,
+  setDebouncedQueryString,
+  queryLoadingStatus,
 }) => {
   const [userWithPermissions, updateUserWithPermissions] =
     useState<SettingsUser | null>();
@@ -405,22 +411,39 @@ const ManageUsers: React.FC<Props> = ({
           isUpdating={isUpdating}
         />
       ) : null}
-      {!activeUser || !localUsers.length ? (
+      {queryLoadingStatus ? (
         <div className="usa-card__body">
-          {!localUsers.length ? (
-            <p>There are no users in this organization</p>
-          ) : (
-            <p>Loading user data</p>
-          )}
+          <p>Loading user data</p>
         </div>
-      ) : (
-        <div className="usa-card__body">
-          <div className="grid-row">
-            <UsersSideNav
-              activeUserId={activeUser.id || ""}
-              users={sortedUsers}
-              onChangeActiveUser={onChangeActiveUser}
-            />
+      ) : null}
+      <div className="usa-card__body">
+        <div className="grid-row">
+          <UsersSideNav
+            activeUserId={activeUser?.id || ""}
+            users={sortedUsers}
+            onChangeActiveUser={onChangeActiveUser}
+            debouncedQueryString={debouncedQueryString}
+            setDebouncedQueryString={setDebouncedQueryString}
+          />
+          {localUsers.length <= 0 ? (
+            <div
+              className={
+                "display-flex flex-column flex-align-center margin-left-10 margin-top-2"
+              }
+            >
+              <div className="margin-bottom-105">No results found.</div>
+              <div>
+                Check for spelling errors or
+                <Button
+                  className={"margin-left-1"}
+                  id={`no-results-clear-filter-button`}
+                  onClick={() => setDebouncedQueryString("")}
+                  label={"Clear search filter"}
+                ></Button>
+              </div>
+            </div>
+          ) : null}
+          {activeUser ? (
             <div
               role="tabpanel"
               aria-labelledby={"user-tab-" + user?.id}
@@ -501,23 +524,23 @@ const ManageUsers: React.FC<Props> = ({
                 />
               )}
             </div>
-            {showInProgressModal && (
-              <InProgressModal
-                onClose={() => updateShowInProgressModal(false)}
-                onContinue={() => handleContinueChangeActiveUser()}
-              />
-            )}
-          </div>
-          <div className="grid-row">
-            <Pagination
-              baseRoute={"/settings"}
-              totalEntries={totalEntries}
-              entriesPerPage={entriesPerPage}
-              currentPage={currentPage}
-            ></Pagination>
-          </div>
+          ) : null}
+          {showInProgressModal && (
+            <InProgressModal
+              onClose={() => updateShowInProgressModal(false)}
+              onContinue={() => handleContinueChangeActiveUser()}
+            />
+          )}
+        </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
index 73173932736..b9e491d2a33 100644
--- a/frontend/src/app/Settings/Users/ManageUsersContainer.test.tsx
+++ b/frontend/src/app/Settings/Users/ManageUsersContainer.test.tsx
@@ -21,6 +21,7 @@ import {
   ORG_ADMIN_REACTIVATE_COPY,
   SITE_ADMIN_REACTIVATE_COPY,
 } from "../../commonComponents/UserDetails/ReactivateUserModal";
+import { displayFullName } from "../../utils";
 
 import ManageUsersContainer from "./ManageUsersContainer";
 
@@ -105,6 +106,7 @@ describe("ManageUsersContainer", () => {
         query: GetUsersAndStatusPageDocument,
         variables: {
           pageNumber: 0,
+          searchQuery: "",
         },
       },
       result: {
@@ -149,6 +151,52 @@ describe("ManageUsersContainer", () => {
         },
       },
     },
+    {
+      request: {
+        operationName: "GetUsersAndStatusPage",
+        query: GetUsersAndStatusPageDocument,
+        variables: {
+          pageNumber: 0,
+          searchQuery: "bob",
+        },
+      },
+      result: {
+        data: {
+          usersWithStatusPage: {
+            totalElements: 1,
+            content: [
+              {
+                id: "1029653e-24d9-428e-83b0-468319948902",
+                firstName: "Bob",
+                middleName: null,
+                lastName: "Bobberoo",
+                email: "bob@example.com",
+                status: "ACTIVE",
+                __typename: "ApiUserWithStatus",
+              },
+            ],
+          },
+        },
+      },
+    },
+    {
+      request: {
+        operationName: "GetUsersAndStatusPage",
+        query: GetUsersAndStatusPageDocument,
+        variables: {
+          pageNumber: 0,
+          searchQuery: "john wick",
+        },
+      },
+      result: {
+        data: {
+          usersWithStatusPage: {
+            totalElements: 0,
+            content: [],
+          },
+        },
+      },
+    },
   ];
 
   const supendedUserMocks: MockedResponse[] = [
@@ -158,6 +206,7 @@ describe("ManageUsersContainer", () => {
         query: GetUsersAndStatusPageDocument,
         variables: {
           pageNumber: 0,
+          searchQuery: "",
         },
       },
       result: {
@@ -273,6 +322,81 @@ describe("ManageUsersContainer", () => {
     await screen.findByText(/Error: Users not found/i);
   });
 
+  it("is searchable", async () => {
+    //given
+    const { user } = renderComponentWithMocks(mocks, store);
+    await waitForElementToBeRemoved(screen.queryByText("Loading..."));
+    await waitFor(() =>
+      expect(
+        screen.queryByRole("heading", {
+          level: 2,
+          description: /barnes, ben billy/i,
+        })
+      )
+    );
+
+    //when
+    const searchBox = screen.getByRole("searchbox", {
+      name: /search by name/i,
+    });
+    await user.type(searchBox, "bob");
+
+    //then
+    await waitFor(() => {
+      expect(
+        screen.getByRole("tab", {
+          name: displayFullName("Bob", "", "Bobberoo"),
+        })
+      ).toBeInTheDocument();
+    });
+    await waitFor(() => {
+      expect(
+        screen.queryByText(displayFullName("Ben", "", "Barnes"), {
+          exact: false,
+        })
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  it("displays no results message for empty filtered list", async () => {
+    //given
+    const { user } = renderComponentWithMocks(mocks, store);
+    await waitForElementToBeRemoved(screen.queryByText("Loading..."));
+    await waitFor(() =>
+      expect(
+        screen.queryByRole("heading", {
+          level: 2,
+          description: /barnes, ben billy/i,
+        })
+      )
+    );
+
+    //when
+    const searchBox = screen.getByRole("searchbox", {
+      name: /search by name/i,
+    });
+    await user.type(searchBox, "john wick");
+
+    //then
+    await waitFor(() => {
+      expect(
+        screen.queryByText(displayFullName("Jane", "", "Doe"), {
+          exact: false,
+        })
+      ).not.toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.queryByText(displayFullName("Bob", "", "Bobberoo"), {
+          exact: false,
+        })
+      ).not.toBeInTheDocument();
+    });
+
+    expect(screen.getAllByText("No results found.")).toHaveLength(2);
+  });
+
   it("when user is an org admin , modal copy reflects the reactivate only flow", async () => {
     const { user } = renderComponentWithMocks(supendedUserMocks, store);
 
diff --git a/frontend/src/app/Settings/Users/ManageUsersContainer.tsx b/frontend/src/app/Settings/Users/ManageUsersContainer.tsx
index 21389929313..f16e691d3fd 100644
--- a/frontend/src/app/Settings/Users/ManageUsersContainer.tsx
+++ b/frontend/src/app/Settings/Users/ManageUsersContainer.tsx
@@ -20,6 +20,8 @@ import {
   useGetUsersAndStatusPageQuery,
 } from "../../../generated/graphql";
 import { useDocumentTitle } from "../../utils/hooks";
+import { useDebounce } from "../../testQueue/addToQueue/useDebounce";
+import { SEARCH_DEBOUNCE_TIME } from "../../testQueue/constants";
 
 import ManageUsers from "./ManageUsers";
 
@@ -93,6 +95,11 @@ const ManageUsersContainer = () => {
   const [resetMfa] = useResetUserMfaMutation();
   const [resendUserActivationEmail] = useResendActivationEmailMutation();
 
+  const [queryString, debouncedQueryString, setDebouncedQueryString] =
+    useDebounce("", {
+      debounceTime: SEARCH_DEBOUNCE_TIME,
+    });
+
   const { pageNumber } = useParams();
   const currentPage = pageNumber ? +pageNumber : 1;
   const entriesPerPage = 10;
@@ -106,6 +113,7 @@ const ManageUsersContainer = () => {
     fetchPolicy: "no-cache",
     variables: {
       pageNumber: currentPage - 1,
+      searchQuery: queryString,
     },
   });
 
@@ -139,6 +147,9 @@ const ManageUsersContainer = () => {
       currentPage={currentPage}
       totalEntries={data.usersWithStatusPage.totalElements}
       entriesPerPage={entriesPerPage}
+      debouncedQueryString={debouncedQueryString}
+      setDebouncedQueryString={setDebouncedQueryString}
+      queryLoadingStatus={loading}
     />
   );
 };
diff --git a/frontend/src/app/Settings/Users/UsersSideNav.tsx b/frontend/src/app/Settings/Users/UsersSideNav.tsx
index 4af6e8500f9..67b4fdeff04 100644
--- a/frontend/src/app/Settings/Users/UsersSideNav.tsx
+++ b/frontend/src/app/Settings/Users/UsersSideNav.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Dispatch } from "react";
 import classnames from "classnames";
 
 import { ReactComponent as DeactivatedIcon } from "../../../img/account-deactivated.svg";
@@ -7,8 +7,6 @@ import { displayFullName } from "../../utils";
 import { formatUserStatus } from "../../utils/text";
 import { OktaUserStatus } from "../../utils/user";
 import "./ManageUsers.scss";
-import { useDebounce } from "../../testQueue/addToQueue/useDebounce";
-import { SEARCH_DEBOUNCE_TIME } from "../../testQueue/constants";
 import SearchInput from "../../testQueue/addToQueue/SearchInput";
 
 import { LimitedUser } from "./ManageUsersContainer";
@@ -17,41 +15,28 @@ interface Props {
   activeUserId: string;
   users: LimitedUser[];
   onChangeActiveUser: (userId: string) => void;
+  debouncedQueryString: string;
+  setDebouncedQueryString: Dispatch<string>;
 }
 
 const UsersSideNav: React.FC<Props> = ({
   activeUserId,
   users,
   onChangeActiveUser,
+  debouncedQueryString,
+  setDebouncedQueryString,
 }) => {
   const getIdsAsString = (users: LimitedUser[]) => {
     return users.map((user) => "user-tab-" + user.id.toString()).join(" ");
   };
 
-  const [queryString, debounced, setDebounced] = useDebounce("", {
-    debounceTime: SEARCH_DEBOUNCE_TIME,
-  });
-
-  const filter = (filterText: string, users: LimitedUser[]) => {
-    if (!filterText) {
-      return users;
-    }
-    return users.filter((u) => {
-      return displayFullName(u.firstName, u.middleName, u.lastName)
-        .toLowerCase()
-        .includes(filterText.toLowerCase());
-    });
-  };
-
-  const filteredUsers = filter(queryString, users);
-
   return (
     <div className="display-block users-sidenav">
       <h2 className="users-sidenav-header">Users</h2>
       <SearchInput
-        onInputChange={(e) => setDebounced(e.target.value)}
+        onInputChange={(e) => setDebouncedQueryString(e.target.value)}
         disabled={true}
-        queryString={debounced}
+        queryString={debouncedQueryString}
         placeholder={`Search by name`}
         showSubmitButton={false}
       />
@@ -64,14 +49,14 @@ const UsersSideNav: React.FC<Props> = ({
           aria-owns={getIdsAsString(users)}
           className="usa-sidenav"
         >
-          {filteredUsers.length === 0 && (
+          {users.length === 0 && (
             <div className={"usa-sidenav__item users-sidenav-item"}>
               <div className={"padding-105 padding-right-2 padding-left-3"}>
                 No results found.
               </div>
             </div>
           )}
-          {filteredUsers.map((user: LimitedUser) => {
+          {users.map((user: LimitedUser) => {
             let statusText;
             switch (user.status) {
               case OktaUserStatus.ACTIVE:
diff --git a/frontend/src/app/Settings/Users/operations.graphql b/frontend/src/app/Settings/Users/operations.graphql
index 7b84b7072e8..131808618e7 100644
--- a/frontend/src/app/Settings/Users/operations.graphql
+++ b/frontend/src/app/Settings/Users/operations.graphql
@@ -30,10 +30,12 @@ query GetUsersAndStatus {
 }
 
 query GetUsersAndStatusPage(
-  $pageNumber: Int
+  $pageNumber: Int,
+  $searchQuery: String
 ) {
   usersWithStatusPage(
-    pageNumber: $pageNumber
+    pageNumber: $pageNumber,
+    searchQuery: $searchQuery
   ) {
     content {
       id
diff --git a/frontend/src/app/Settings/__snapshots__/SettingsNav.test.tsx.snap b/frontend/src/app/Settings/__snapshots__/SettingsNav.test.tsx.snap
index 93ba3fb5edb..7515d2184ea 100644
--- 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/1"
+          href="/settings/users/1"
         >
           Manage users
         </a>
diff --git a/frontend/src/generated/graphql.tsx b/frontend/src/generated/graphql.tsx
index a556c2e0aba..c31c63a57d4 100644
--- a/frontend/src/generated/graphql.tsx
+++ b/frontend/src/generated/graphql.tsx
@@ -928,6 +928,7 @@ export type QueryUserArgs = {
 
 export type QueryUsersWithStatusPageArgs = {
   pageNumber?: InputMaybe<Scalars["Int"]["input"]>;
+  searchQuery?: InputMaybe<Scalars["String"]["input"]>;
 };
 
 export type Result = {
@@ -1421,6 +1422,7 @@ export type GetUsersAndStatusQuery = {
 
 export type GetUsersAndStatusPageQueryVariables = Exact<{
   pageNumber?: InputMaybe<Scalars["Int"]["input"]>;
+  searchQuery?: InputMaybe<Scalars["String"]["input"]>;
 }>;
 
 export type GetUsersAndStatusPageQuery = {
@@ -3757,8 +3759,8 @@ export type GetUsersAndStatusQueryResult = Apollo.QueryResult<
   GetUsersAndStatusQueryVariables
 >;
 export const GetUsersAndStatusPageDocument = gql`
-  query GetUsersAndStatusPage($pageNumber: Int) {
-    usersWithStatusPage(pageNumber: $pageNumber) {
+  query GetUsersAndStatusPage($pageNumber: Int, $searchQuery: String) {
+    usersWithStatusPage(pageNumber: $pageNumber, searchQuery: $searchQuery) {
       content {
         id
         firstName
@@ -3785,6 +3787,7 @@ export const GetUsersAndStatusPageDocument = gql`
  * const { data, loading, error } = useGetUsersAndStatusPageQuery({
  *   variables: {
  *      pageNumber: // value for 'pageNumber'
+ *      searchQuery: // value for 'searchQuery'
  *   },
  * });
  */