coder · BrunoQuaresma · Oct 5, 2023 · Oct 4, 2023 · Oct 4, 2023 · Oct 5, 2023
diff --git a/codersdk/workspaces.go b/codersdk/workspaces.go
@@ -135,9 +135,9 @@ func (c *Client) getWorkspace(ctx context.Context, id uuid.UUID, opts ...Request
 }
 
 type WorkspaceBuildsRequest struct {
-	WorkspaceID uuid.UUID
+	WorkspaceID uuid.UUID `json:"workspace_id" format:"uuid" typescript:"-"`
 	Pagination
-	Since time.Time
+	Since time.Time `json:"since,omitempty" format:"date-time"`
 }
 
 func (c *Client) WorkspaceBuilds(ctx context.Context, req WorkspaceBuildsRequest) ([]WorkspaceBuild, error) {

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -775,10 +775,10 @@ export const regenerateUserSSHKey = async (
 
 export const getWorkspaceBuilds = async (
   workspaceId: string,
-  since: Date,
-): Promise<TypesGen.WorkspaceBuild[]> => {
+  req?: TypesGen.WorkspaceBuildsRequest,
+) => {
   const response = await axios.get<TypesGen.WorkspaceBuild[]>(
-    `/api/v2/workspaces/${workspaceId}/builds?since=${since.toISOString()}`,
+    getURLWithSearchParams(`/api/v2/workspaces/${workspaceId}/builds`, req),
   );
   return response.data;
 };

diff --git a/site/src/api/queries/workspaceBuilds.ts b/site/src/api/queries/workspaceBuilds.ts
@@ -1,13 +1,35 @@
+import { UseInfiniteQueryOptions } from "@tanstack/react-query";
 import * as API from "api/api";
+import { WorkspaceBuild, WorkspaceBuildsRequest } from "api/typesGenerated";
 
 export const workspaceBuildByNumber = (
   username: string,
   workspaceName: string,
   buildNumber: number,
 ) => {
   return {
-    queryKey: [username, workspaceName, "workspaceBuild", buildNumber],
+    queryKey: ["workspaceBuild", username, workspaceName, buildNumber],
     queryFn: () =>
       API.getWorkspaceBuildByNumber(username, workspaceName, buildNumber),
   };
 };
+
+export const infiniteWorkspaceBuilds = (
+  workspaceId: string,
+  req?: WorkspaceBuildsRequest,
+): UseInfiniteQueryOptions<WorkspaceBuild[]> => {
+  const limit = req?.limit ?? 25;
+
+  return {
+    queryKey: ["workspaceBuilds", workspaceId, req],
+    getNextPageParam: (lastPage, pages) => {
+      return pages.length + 1;
+    },
+    queryFn: ({ pageParam = 0 }) => {
+      return API.getWorkspaceBuilds(workspaceId, {
+        limit,
+        offset: pageParam <= 0 ? 0 : (pageParam - 1) * limit,
+      });
+    },
+  };
+};
diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
diff --git a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPage.tsx b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPage.tsx
@@ -23,13 +23,12 @@ export const WorkspaceBuildPage: FC = () => {
     keepPreviousData: true,
   });
   const build = wsBuildQuery.data;
-  const { data: builds } = useQuery({
+  const buildsQuery = useQuery({
     queryKey: ["builds", username, build?.workspace_id],
     queryFn: () => {
-      return getWorkspaceBuilds(
-        build?.workspace_id ?? "",
-        dayjs().add(-30, "day").toDate(),
-      );
+      return getWorkspaceBuilds(build?.workspace_id ?? "", {
+        since: dayjs().add(-30, "day").toISOString(),
+      });
     },
     enabled: Boolean(build),
   });
@@ -50,7 +49,7 @@ export const WorkspaceBuildPage: FC = () => {
       <WorkspaceBuildPageView
         logs={logs}
         build={build}
-        builds={builds}
+        builds={buildsQuery.data}
         activeBuildNumber={buildNumber}
       />
     </>

diff --git a/site/src/pages/WorkspacePage/BuildsTable.stories.tsx b/site/src/pages/WorkspacePage/BuildsTable.stories.tsx
@@ -13,6 +13,7 @@ type Story = StoryObj<typeof BuildsTable>;
 export const Example: Story = {
   args: {
     builds: MockBuilds,
+    hasMoreBuilds: true,
   },
 };
 
@@ -21,3 +22,10 @@ export const Empty: Story = {
     builds: [],
   },
 };
+
+export const NoMoreBuilds: Story = {
+  args: {
+    builds: MockBuilds,
+    hasMoreBuilds: false,
+  },
+};
diff --git a/site/src/pages/WorkspacePage/BuildsTable.tsx b/site/src/pages/WorkspacePage/BuildsTable.tsx
@@ -10,43 +10,71 @@ import * as TypesGen from "api/typesGenerated";
 import { EmptyState } from "components/EmptyState/EmptyState";
 import { TableLoader } from "components/TableLoader/TableLoader";
 import { BuildRow } from "./BuildRow";
+import { Stack } from "components/Stack/Stack";
+import LoadingButton from "@mui/lab/LoadingButton";
+import ArrowDownwardOutlined from "@mui/icons-material/ArrowDownwardOutlined";
 
 export const Language = {
   emptyMessage: "No builds found",
 };
 
 export interface BuildsTableProps {
-  builds?: TypesGen.WorkspaceBuild[];
+  builds: TypesGen.WorkspaceBuild[] | undefined;
+  onLoadMoreBuilds: () => void;
+  isLoadingMoreBuilds: boolean;
+  hasMoreBuilds: boolean;
 }
 
 export const BuildsTable: FC<React.PropsWithChildren<BuildsTableProps>> = ({
   builds,
+  onLoadMoreBuilds,
+  isLoadingMoreBuilds,
+  hasMoreBuilds,
 }) => {
   return (
-    <TableContainer>
-      <Table data-testid="builds-table" aria-describedby="builds table">
-        <TableBody>
-          {builds ? (
-            <Timeline
-              items={builds}
-              getDate={(build) => new Date(build.created_at)}
-              row={(build) => <BuildRow key={build.id} build={build} />}
-            />
-          ) : (
-            <TableLoader />
-          )}
+    <Stack>
+      <TableContainer>
+        <Table data-testid="builds-table" aria-describedby="builds table">
+          <TableBody>
+            {builds ? (
+              <Timeline
+                items={builds}
+                getDate={(build) => new Date(build.created_at)}
+                row={(build) => <BuildRow key={build.id} build={build} />}
+              />
+            ) : (
+              <TableLoader />
+            )}
 
-          {builds && builds.length === 0 && (
-            <TableRow>
-              <TableCell colSpan={999}>
-                <Box p={4}>
-                  <EmptyState message={Language.emptyMessage} />
-                </Box>
-              </TableCell>
-            </TableRow>
-          )}
-        </TableBody>
-      </Table>
-    </TableContainer>
+            {builds && builds.length === 0 && (
+              <TableRow>
+                <TableCell colSpan={999}>
+                  <Box p={4}>
+                    <EmptyState message={Language.emptyMessage} />
+                  </Box>
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      {hasMoreBuilds && (
+        <LoadingButton
+          onClick={onLoadMoreBuilds}
+          loading={isLoadingMoreBuilds}
+          loadingPosition="start"
+          variant="outlined"
+          color="neutral"
+          startIcon={<ArrowDownwardOutlined />}
+          css={{
+            display: "inline-flex",
+            margin: "auto",
+            borderRadius: "9999px",
+          }}
+        >
+          Load previous builds
+        </LoadingButton>
+      )}
+    </Stack>
   );
 };
diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
@@ -55,7 +55,6 @@ export interface WorkspaceProps {
   isRestarting: boolean;
   workspace: TypesGen.Workspace;
   resources?: TypesGen.WorkspaceResource[];
-  builds?: TypesGen.WorkspaceBuild[];
   templateWarnings?: TypesGen.TemplateVersionWarning[];
   canUpdateWorkspace: boolean;
   updateMessage?: string;
@@ -70,6 +69,10 @@ export interface WorkspaceProps {
   quotaBudget?: number;
   handleBuildRetry: () => void;
   buildLogs?: React.ReactNode;
+  builds: TypesGen.WorkspaceBuild[] | undefined;
+  onLoadMoreBuilds: () => void;
+  isLoadingMoreBuilds: boolean;
+  hasMoreBuilds: boolean;
 }
 
 /**
@@ -105,6 +108,9 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
   handleBuildRetry,
   templateWarnings,
   buildLogs,
+  onLoadMoreBuilds,
+  isLoadingMoreBuilds,
+  hasMoreBuilds,
 }) => {
   const styles = useStyles();
   const navigate = useNavigate();
@@ -345,7 +351,12 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
               error={workspaceErrors[WorkspaceErrors.GET_BUILDS_ERROR]}
             />
           ) : (
-            <BuildsTable builds={builds} />
+            <BuildsTable
+              builds={builds}
+              onLoadMoreBuilds={onLoadMoreBuilds}
+              isLoadingMoreBuilds={isLoadingMoreBuilds}
+              hasMoreBuilds={hasMoreBuilds}
+            />
           )}
         </Stack>
       </Margins>

diff --git a/site/src/pages/WorkspacePage/WorkspacePage.tsx b/site/src/pages/WorkspacePage/WorkspacePage.tsx
@@ -10,7 +10,8 @@ import { useOrganizationId } from "hooks";
 import { isAxiosError } from "axios";
 import { Margins } from "components/Margins/Margins";
 import { workspaceQuota } from "api/queries/workspaceQuota";
-import { useQuery } from "@tanstack/react-query";
+import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
+import { infiniteWorkspaceBuilds } from "api/queries/workspaceBuilds";
 
 export const WorkspacePage: FC = () => {
   const params = useParams() as {
@@ -26,10 +27,19 @@ export const WorkspacePage: FC = () => {
       workspaceName,
       username,
     },
+    actions: {
+      refreshBuilds: async () => {
+        await buildsQuery.refetch();
+      },
+    },
   });
   const { workspace, error } = workspaceState.context;
   const quotaQuery = useQuery(workspaceQuota(username));
   const pageError = error ?? quotaQuery.error;
+  const buildsQuery = useInfiniteQuery({
+    ...infiniteWorkspaceBuilds(workspace?.id ?? ""),
+    enabled: Boolean(workspace),
+  });
 
   if (pageError) {
     return (
@@ -53,6 +63,13 @@ export const WorkspacePage: FC = () => {
         workspaceState={workspaceState}
         quota={quotaQuery.data}
         workspaceSend={workspaceSend}
+        builds={buildsQuery.data?.pages.flat()}
+        buildsError={buildsQuery.error}
+        isLoadingMoreBuilds={buildsQuery.isFetchingNextPage}
+        onLoadMoreBuilds={async () => {
+          await buildsQuery.fetchNextPage();
+        }}
+        hasMoreBuilds={Boolean(buildsQuery.hasNextPage)}
       />
     </RequirePermission>
   );

diff --git a/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx b/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx
@@ -39,12 +39,22 @@ interface WorkspaceReadyPageProps {
   workspaceState: StateFrom<typeof workspaceMachine>;
   workspaceSend: (event: WorkspaceEvent) => void;
   quota?: TypesGen.WorkspaceQuota;
+  builds: TypesGen.WorkspaceBuild[] | undefined;
+  buildsError: unknown;
+  onLoadMoreBuilds: () => void;
+  isLoadingMoreBuilds: boolean;
+  hasMoreBuilds: boolean;
 }
 
 export const WorkspaceReadyPage = ({
   workspaceState,
   workspaceSend,
   quota,
+  builds,
+  buildsError,
+  onLoadMoreBuilds,
+  isLoadingMoreBuilds,
+  hasMoreBuilds,
 }: WorkspaceReadyPageProps): JSX.Element => {
   const [_, bannerSend] = useActor(
     workspaceState.children["scheduleBannerMachine"],
@@ -56,8 +66,6 @@ export const WorkspaceReadyPage = ({
     template,
     templateVersion: currentVersion,
     deploymentValues,
-    builds,
-    getBuildsError,
     buildError,
     cancellationError,
     sshPrefix,
@@ -168,14 +176,17 @@ export const WorkspaceReadyPage = ({
         handleDormantActivate={() => workspaceSend({ type: "ACTIVATE" })}
         resources={workspace.latest_build.resources}
         builds={builds}
+        onLoadMoreBuilds={onLoadMoreBuilds}
+        isLoadingMoreBuilds={isLoadingMoreBuilds}
+        hasMoreBuilds={hasMoreBuilds}
         canUpdateWorkspace={canUpdateWorkspace}
         updateMessage={latestVersion?.message}
         canRetryDebugMode={canRetryDebugMode}
         canChangeVersions={canUpdateTemplate}
         hideSSHButton={featureVisibility["browser_only"]}
         hideVSCodeDesktopButton={featureVisibility["browser_only"]}
         workspaceErrors={{
-          [WorkspaceErrors.GET_BUILDS_ERROR]: getBuildsError,
+          [WorkspaceErrors.GET_BUILDS_ERROR]: buildsError,
           [WorkspaceErrors.BUILD_ERROR]: buildError || restartBuildError,
           [WorkspaceErrors.CANCELLATION_ERROR]: cancellationError,
         }}