Start - still needs api call changes

site/src/pages/WorkspacesPage/WorkspacesPage.tsx

@@ -10,13 +10,25 @@ import { WorkspacesPageView } from "./WorkspacesPageView"
 const WorkspacesPage: FC = () => {
   const [searchParams, setSearchParams] = useSearchParams()
   const filter = searchParams.get("filter") ?? workspaceFilterQuery.me
+  const currentPage = searchParams.get("page")
+    ? Number(searchParams.get("page"))
+    : 1
   const [workspacesState, send] = useMachine(workspacesMachine, {
     context: {
+      page: currentPage,
+      limit: 25,
       filter,
     },
+    actions: {
+      onPageChange: ({ page }) => {
+        navigate({
+          search: `?page=${page}`,
+        })
+      },
+    },
   })
 
-  const { workspaceRefs } = workspacesState.context
+  const { workspaceRefs, count, page, limit } = workspacesState.context
 
   return (
     <>
@@ -28,6 +40,18 @@ const WorkspacesPage: FC = () => {
         filter={workspacesState.context.filter}
         isLoading={!workspaceRefs}
         workspaceRefs={workspaceRefs}
+        count={count}
+        page={page}
+        limit={limit}
+        onNext={() => {
+          send("NEXT")
+        }}
+        onPrevious={() => {
+          send("PREVIOUS")
+        }}
+        onGoToPage={(page) => {
+          send("GO_TO_PAGE", { page })
+        }}
         onFilter={(query) => {
           setSearchParams({ filter: query })
           send({

site/src/pages/WorkspacesPage/WorkspacesPageView.tsx

@@ -1,4 +1,6 @@
 import Link from "@material-ui/core/Link"
+import { Maybe } from "components/Conditionals/Maybe"
+import { PaginationWidget } from "components/PaginationWidget/PaginationWidget"
 import { FC } from "react"
 import { Link as RouterLink } from "react-router-dom"
 import { Margins } from "../../components/Margins/Margins"
@@ -26,13 +28,30 @@ export const Language = {
 export interface WorkspacesPageViewProps {
   isLoading?: boolean
   workspaceRefs?: WorkspaceItemMachineRef[]
+  count?: number
+  page: number
+  limit: number
   filter?: string
   onFilter: (query: string) => void
+  onNext: () => void
+  onPrevious: () => void
+  onGoToPage: (page: number) => void
 }
 
 export const WorkspacesPageView: FC<
   React.PropsWithChildren<WorkspacesPageViewProps>
-> = ({ isLoading, workspaceRefs, filter, onFilter }) => {
+> = ({
+  isLoading,
+  workspaceRefs,
+  count,
+  page,
+  limit,
+  filter,
+  onFilter,
+  onNext,
+  onPrevious,
+  onGoToPage,
+}) => {
   const presetFilters = [
     { query: workspaceFilterQuery.me, name: Language.yourWorkspacesButton },
     { query: workspaceFilterQuery.all, name: Language.allWorkspacesButton },
@@ -72,6 +91,19 @@ export const WorkspacesPageView: FC<
         workspaceRefs={workspaceRefs}
         filter={filter}
       />
+
+      <Maybe condition={count !== undefined && count > limit}>
+        <PaginationWidget
+          prevLabel=""
+          nextLabel=""
+          onPrevClick={onPrevious}
+          onNextClick={onNext}
+          onPageClick={onGoToPage}
+          numRecords={count}
+          activePage={page}
+          numRecordsPerPage={limit}
+        />
+      </Maybe>
     </Margins>
   )
 }

site/src/xServices/workspaces/workspacesXService.ts

@@ -206,11 +206,17 @@ interface WorkspacesContext {
   workspaceRefs?: WorkspaceItemMachineRef[]
   filter: string
   getWorkspacesError?: Error | unknown
+  page: number
+  count?: number
+  limit: number
 }
 
 type WorkspacesEvent =
   | { type: "GET_WORKSPACES"; query?: string }
   | { type: "UPDATE_VERSION"; workspaceId: string }
+  | { type: "NEXT" }
+  | { type: "PREVIOUS" }
+  | { type: "GO_TO_PAGE"; page: number }
 
 export const workspacesMachine = createMachine(
   {
@@ -235,12 +241,24 @@ export const workspacesMachine = createMachine(
     on: {
       GET_WORKSPACES: {
         actions: "assignFilter",
-        target: ".gettingWorkspaces",
+        target: "gettingWorkspaces",
         internal: false,
       },
       UPDATE_VERSION: {
         actions: "triggerUpdateVersion",
       },
+      NEXT: {
+        actions: ["assignNextPage", "onPageChange"],
+        target: "gettingWorkspaces",
+      },
+      PREVIOUS: {
+        actions: ["assignPreviousPage", "onPageChange"],
+        target: "gettingWorkspaces",
+      },
+      GO_TO_PAGE: {
+        actions: ["assignPage", "onPageChange"],
+        target: "gettingWorkspaces",
+      },
     },
     initial: "gettingWorkspaces",
     states: {
@@ -320,6 +338,7 @@ export const workspacesMachine = createMachine(
       },
       assignUpdatedWorkspaceRefs: assign({
         workspaceRefs: (_, event) => {
+
           const newWorkspaceRefs = event.data.newWorkspaces.map((workspace) =>
             spawn(
               workspaceItemMachine.withContext({ data: workspace }),
@@ -329,6 +348,18 @@ export const workspacesMachine = createMachine(
           return event.data.refsToKeep.concat(newWorkspaceRefs)
         },
       }),
+      assignNextPage: assign({
+        page: ({ page }) => page + 1,
+      }),
+      assignPreviousPage: assign({
+        page: ({ page }) => page - 1,
+      }),
+      assignPage: assign({
+        page: (_, { page }) => page,
+      }),
+      assignCount: assign({
+        count: (_, { count }) => count
+      })
     },
     services: {
       getWorkspaces: (context) =>