coder · presleyp · Oct 28, 2022 · Oct 21, 2022 · Oct 21, 2022 · Oct 21, 2022
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -132,10 +132,10 @@ export const getApiKey = async (): Promise<TypesGen.GenerateAPIKeyResponse> => {
 }
 
 export const getUsers = async (
-  filter?: TypesGen.UsersRequest,
+  options: TypesGen.UsersRequest,
 ): Promise<TypesGen.User[]> => {
-  const url = getURLWithSearchParams("/api/v2/users", filter)
-  const response = await axios.get<TypesGen.User[]>(url)
+  const url = getURLWithSearchParams("/api/v2/users", options)
+  const response = await axios.get<TypesGen.User[]>(url.toString())
   return response.data
 }
 
@@ -264,51 +264,43 @@ export const watchWorkspace = (workspaceId: string): EventSource => {
   )
 }
 
+interface SearchParamOptions extends TypesGen.Pagination {
+  q?: string
+}
+
 export const getURLWithSearchParams = (
   basePath: string,
-  filter?: TypesGen.WorkspaceFilter | TypesGen.UsersRequest,
+  options?: SearchParamOptions,
 ): string => {
-  const searchParams = new URLSearchParams()
-
-  if (filter?.q && filter.q !== "") {
-    searchParams.append("q", filter.q)
+  if (options) {
+    const searchParams = new URLSearchParams()
+    const keys = Object.keys(options) as (keyof SearchParamOptions)[]
+    keys.forEach((key) => {
+      const value = options[key]
+      if (value !== undefined && value !== "") {
+        searchParams.append(key, value.toString())
+      }
+    })
+    const searchString = searchParams.toString()
+    return searchString ? `${basePath}?${searchString}` : basePath
+  } else {
+    return basePath
   }
-
-  const searchString = searchParams.toString()
-
-  return searchString ? `${basePath}?${searchString}` : basePath
 }
 
 export const getWorkspaces = async (
   options: TypesGen.WorkspacesRequest,
 ): Promise<TypesGen.Workspace[]> => {
-  const searchParams = new URLSearchParams()
-  if (options.limit) {
-    searchParams.set("limit", options.limit.toString())
-  }
-  if (options.offset) {
-    searchParams.set("offset", options.offset.toString())
-  }
-  if (options.q) {
-    searchParams.set("q", options.q)
-  }
-
-  const response = await axios.get<TypesGen.Workspace[]>(
-    `/api/v2/workspaces?${searchParams.toString()}`,
-  )
+  const url = getURLWithSearchParams("/api/v2/workspaces", options)
+  const response = await axios.get<TypesGen.Workspace[]>(url)
   return response.data
 }
 
 export const getWorkspacesCount = async (
   options: TypesGen.WorkspaceCountRequest,
 ): Promise<TypesGen.WorkspaceCountResponse> => {
-  const searchParams = new URLSearchParams()
-  if (options.q) {
-    searchParams.set("q", options.q)
-  }
-  const response = await axios.get(
-    `/api/v2/workspaces/count?${searchParams.toString()}`,
-  )
+  const url = getURLWithSearchParams("/api/v2/workspaces/count", options)
+  const response = await axios.get(url)
   return response.data
 }
 
@@ -555,31 +547,16 @@ export const getEntitlements = async (): Promise<TypesGen.Entitlements> => {
 export const getAuditLogs = async (
   options: TypesGen.AuditLogsRequest,
 ): Promise<TypesGen.AuditLogResponse> => {
-  const searchParams = new URLSearchParams()
-  if (options.limit) {
-    searchParams.set("limit", options.limit.toString())
-  }
-  if (options.offset) {
-    searchParams.set("offset", options.offset.toString())
-  }
-  if (options.q) {
-    searchParams.set("q", options.q)
-  }
-
-  const response = await axios.get(`/api/v2/audit?${searchParams.toString()}`)
+  const url = getURLWithSearchParams("/api/v2/audit", options)
+  const response = await axios.get(url)
   return response.data
 }
 
 export const getAuditLogsCount = async (
   options: TypesGen.AuditLogCountRequest = {},
 ): Promise<TypesGen.AuditLogCountResponse> => {
-  const searchParams = new URLSearchParams()
-  if (options.q) {
-    searchParams.set("q", options.q)
-  }
-  const response = await axios.get(
-    `/api/v2/audit/count?${searchParams.toString()}`,
-  )
+  const url = getURLWithSearchParams("/api/v2/audit/count", options)
+  const response = await axios.get(url)
   return response.data
 }
 

diff --git a/site/src/components/PaginationWidget/PaginationWidget.tsx b/site/src/components/PaginationWidget/PaginationWidget.tsx
@@ -34,15 +34,12 @@ export const PaginationWidget = ({
   const currentPage = paginationState.context.page
   const numRecordsPerPage = paginationState.context.limit
 
-  const numPages = numRecords ? Math.ceil(numRecords / numRecordsPerPage) : 0
+  const numPages = numRecords
+    ? Math.ceil(numRecords / numRecordsPerPage)
+    : undefined
   const firstPageActive = currentPage === 1 && numPages !== 0
   const lastPageActive = currentPage === numPages && numPages !== 0
 
-  // No need to display any pagination if we know the number of pages is 1 or 0
-  if (numPages <= 1 || numRecords === 0) {
-    return null
-  }
-
   return (
     <div style={containerStyle} className={styles.defaultContainerStyles}>
       <Button
@@ -54,7 +51,7 @@ export const PaginationWidget = ({
         <KeyboardArrowLeft />
         <div>{prevLabel}</div>
       </Button>
-      <Maybe condition={numPages > 0}>
+      <Maybe condition={numPages !== undefined}>
         <ChooseOne>
           <Cond condition={isMobile}>
             <PageButton
@@ -64,24 +61,25 @@ export const PaginationWidget = ({
             />
           </Cond>
           <Cond>
-            {buildPagedList(numPages, currentPage).map((page) =>
-              typeof page !== "number" ? (
-                <PageButton
-                  key={`Page${page}`}
-                  activePage={currentPage}
-                  placeholder="..."
-                  disabled
-                />
-              ) : (
-                <PageButton
-                  key={`Page${page}`}
-                  activePage={currentPage}
-                  page={page}
-                  numPages={numPages}
-                  onPageClick={() => send({ type: "GO_TO_PAGE", page })}
-                />
-              ),
-            )}
+            {numPages &&
+              buildPagedList(numPages, currentPage).map((page) =>
+                typeof page !== "number" ? (
+                  <PageButton
+                    key={`Page${page}`}
+                    activePage={currentPage}
+                    placeholder="..."
+                    disabled
+                  />
+                ) : (
+                  <PageButton
+                    key={`Page${page}`}
+                    activePage={currentPage}
+                    page={page}
+                    numPages={numPages}
+                    onPageClick={() => send({ type: "GO_TO_PAGE", page })}
+                  />
+                ),
+              )}
           </Cond>
         </ChooseOne>
       </Maybe>

diff --git a/site/src/pages/UsersPage/UsersPage.test.tsx b/site/src/pages/UsersPage/UsersPage.test.tsx
@@ -238,6 +238,32 @@ describe("UsersPage", () => {
     })
   })
 
+  describe("pagination", () => {
+    it("goes to next and previous page", async () => {
+      renderPage()
+      const user = userEvent.setup()
+
+      const mock = jest
+        .spyOn(API, "getUsers")
+        .mockResolvedValueOnce([MockUser, MockUser2])
+
+      const nextButton = await screen.findByLabelText("Next page")
+      await user.click(nextButton)
+
+      await waitFor(() =>
+        expect(API.getUsers).toBeCalledWith({ offset: 25, limit: 25, q: "" }),
+      )
+
+      mock.mockClear()
+      const previousButton = await screen.findByLabelText("Previous page")
+      await user.click(previousButton)
+
+      await waitFor(() =>
+        expect(API.getUsers).toBeCalledWith({ offset: 0, limit: 25, q: "" }),
+      )
+    })
+  })
+
   describe("delete user", () => {
     describe("when it is success", () => {
       it("shows a success message and refresh the page", async () => {

diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx
@@ -1,5 +1,6 @@
 import { useActor, useMachine } from "@xstate/react"
 import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog"
+import { getPaginationContext } from "components/PaginationWidget/utils"
 import { usePermissions } from "hooks/usePermissions"
 import { FC, ReactNode, useContext, useEffect } from "react"
 import { Helmet } from "react-helmet-async"
@@ -25,10 +26,15 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
   const xServices = useContext(XServiceContext)
   const navigate = useNavigate()
   const [searchParams, setSearchParams] = useSearchParams()
-  const filter = searchParams.get("filter") ?? undefined
+  const filter = searchParams.get("filter") ?? ""
   const [usersState, usersSend] = useMachine(usersMachine, {
     context: {
       filter,
+      paginationContext: getPaginationContext(searchParams),
+    },
+    actions: {
+      updateURL: (context, event) =>
+        setSearchParams({ page: event.page, filter: context.filter }),
     },
   })
   const {
@@ -39,6 +45,7 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
     userIdToActivate,
     userIdToResetPassword,
     newUserPassword,
+    paginationRef,
   } = usersState.context
 
   const userToBeSuspended = users?.find((u) => u.id === userIdToSuspend)
@@ -56,14 +63,6 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
     usersState.matches("gettingUsers") ||
     (canEditUsers && rolesState.matches("gettingRoles"))
 
-  // Fetch users on component mount
-  useEffect(() => {
-    usersSend({
-      type: "GET_USERS",
-      query: filter,
-    })
-  }, [filter, usersSend])
-
   // Fetch roles on component mount
   useEffect(() => {
     // Only fetch the roles if the user has permission for it
@@ -113,9 +112,9 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
         canEditUsers={canEditUsers}
         filter={usersState.context.filter}
         onFilter={(query) => {
-          searchParams.set("filter", query)
-          setSearchParams(searchParams)
+          usersSend({ type: "UPDATE_FILTER", query })
         }}
+        paginationRef={paginationRef}
       />
 
       {userToBeDeleted && (

diff --git a/site/src/pages/UsersPage/UsersPageView.stories.tsx b/site/src/pages/UsersPage/UsersPageView.stories.tsx
@@ -1,6 +1,7 @@
 import { ComponentMeta, Story } from "@storybook/react"
+import { createPaginationRef } from "components/PaginationWidget/utils"
 import {
-  MockSiteRoles,
+  MockAssignableSiteRoles,
   MockUser,
   MockUser2,
 } from "../../testHelpers/renderHelpers"
@@ -9,6 +10,11 @@ import { UsersPageView, UsersPageViewProps } from "./UsersPageView"
 export default {
   title: "pages/UsersPageView",
   component: UsersPageView,
+  argTypes: {
+    paginationRef: {
+      defaultValue: createPaginationRef({ page: 1, limit: 25 }),
+    },
+  },
 } as ComponentMeta<typeof UsersPageView>
 
 const Template: Story<UsersPageViewProps> = (args) => (
@@ -18,8 +24,7 @@ const Template: Story<UsersPageViewProps> = (args) => (
 export const Admin = Template.bind({})
 Admin.args = {
   users: [MockUser, MockUser2],
-  roles: MockSiteRoles,
-  canCreateUser: true,
+  roles: MockAssignableSiteRoles,
   canEditUsers: true,
 }
 
@@ -32,7 +37,7 @@ SmallViewport.parameters = {
 }
 
 export const Member = Template.bind({})
-Member.args = { ...Admin.args, canCreateUser: false, canEditUsers: false }
+Member.args = { ...Admin.args, canEditUsers: false }
 
 export const Empty = Template.bind({})
 Empty.args = { ...Admin.args, users: [] }

diff --git a/site/src/pages/UsersPage/UsersPageView.tsx b/site/src/pages/UsersPage/UsersPageView.tsx
@@ -1,4 +1,6 @@
+import { PaginationWidget } from "components/PaginationWidget/PaginationWidget"
 import { FC } from "react"
+import { PaginationMachineRef } from "xServices/pagination/paginationXService"
 import * as TypesGen from "../../api/typesGenerated"
 import { SearchBarWithFilter } from "../../components/SearchBarWithFilter/SearchBarWithFilter"
 import { UsersTable } from "../../components/UsersTable/UsersTable"
@@ -26,6 +28,7 @@ export interface UsersPageViewProps {
     roles: TypesGen.Role["name"][],
   ) => void
   onFilter: (query: string) => void
+  paginationRef: PaginationMachineRef
 }
 
 export const UsersPageView: FC<React.PropsWithChildren<UsersPageViewProps>> = ({
@@ -43,6 +46,7 @@ export const UsersPageView: FC<React.PropsWithChildren<UsersPageViewProps>> = ({
   isLoading,
   filter,
   onFilter,
+  paginationRef,
 }) => {
   const presetFilters = [
     { query: userFilterQuery.active, name: Language.activeUsersFilterName },
@@ -71,6 +75,8 @@ export const UsersPageView: FC<React.PropsWithChildren<UsersPageViewProps>> = ({
         canEditUsers={canEditUsers}
         isLoading={isLoading}
       />
+
+      <PaginationWidget paginationRef={paginationRef} />
     </>
   )
 }
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -48,8 +48,6 @@ export const MockAuditorRole: TypesGen.Role = {
   display_name: "Auditor",
 }
 
-export const MockSiteRoles = [MockUserAdminRole, MockAuditorRole]
-
 // assignableRole takes a role and a boolean. The boolean implies if the
 // actor can assign (add/remove) the role from other users.
 export function assignableRole(
@@ -62,6 +60,12 @@ export function assignableRole(
   }
 }
 
+export const MockSiteRoles = [MockUserAdminRole, MockAuditorRole]
+export const MockAssignableSiteRoles = [
+  assignableRole(MockUserAdminRole, true),
+  assignableRole(MockAuditorRole, true),
+]
+
 export const MockMemberPermissions = {
   viewAuditLog: false,
 }