feat(site): load previous builds

coder · BrunoQuaresma · Oct 5, 2023 · Oct 4, 2023 · Oct 4, 2023 · Oct 5, 2023
commit cc4806dc739d3f898317a59020e285e773722efb
@@ -1,5 +1,6 @@
+import { UseInfiniteQueryOptions } from "@tanstack/react-query";
 import * as API from "api/api";
-import { WorkspaceBuildsRequest } from "api/typesGenerated";
+import { WorkspaceBuild, WorkspaceBuildsRequest } from "api/typesGenerated";
 
 export const workspaceBuildByNumber = (
   username: string,
@@ -13,14 +14,22 @@ export const workspaceBuildByNumber = (
   };
 };
 
-export const workspaceBuilds = (
+export const infiniteWorkspaceBuilds = (
   workspaceId: string,
   req?: WorkspaceBuildsRequest,
-) => {
+): UseInfiniteQueryOptions<WorkspaceBuild[]> => {
+  const limit = req?.limit ?? 25;
+
   return {
     queryKey: ["workspaceBuilds", workspaceId, req],
-    queryFn: () => {
-      return API.getWorkspaceBuilds(workspaceId, req);
+    getNextPageParam: (lastPage, pages) => {
+      return pages.length + 1;
+    },
+    queryFn: ({ pageParam = 0 }) => {
+      return API.getWorkspaceBuilds(workspaceId, {
+        limit,
+        offset: pageParam <= 0 ? 0 : (pageParam - 1) * limit,
+      });
     },
   };
 };
@@ -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,
+  },
+};
@@ -10,43 +10,70 @@ 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>
+      <LoadingButton
+        disabled={!hasMoreBuilds}
+        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>
   );
 };
@@ -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>

@@ -10,8 +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 { workspaceBuilds } from "api/queries/workspaceBuilds";
+import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
+import { infiniteWorkspaceBuilds } from "api/queries/workspaceBuilds";
 
 export const WorkspacePage: FC = () => {
   const params = useParams() as {
@@ -36,8 +36,8 @@ export const WorkspacePage: FC = () => {
   const { workspace, error } = workspaceState.context;
   const quotaQuery = useQuery(workspaceQuota(username));
   const pageError = error ?? quotaQuery.error;
-  const buildsQuery = useQuery({
-    ...workspaceBuilds(workspace?.id ?? ""),
+  const buildsQuery = useInfiniteQuery({
+    ...infiniteWorkspaceBuilds(workspace?.id ?? ""),
     enabled: Boolean(workspace),
   });
 
@@ -63,8 +63,13 @@ export const WorkspacePage: FC = () => {
         workspaceState={workspaceState}
         quota={quotaQuery.data}
         workspaceSend={workspaceSend}
-        builds={buildsQuery.data}
+        builds={buildsQuery.data?.pages.flat()}
         buildsError={buildsQuery.error}
+        isLoadingMoreBuilds={buildsQuery.isFetchingNextPage}
+        onLoadMoreBuilds={async () => {
+          await buildsQuery.fetchNextPage();
+        }}
+        hasMoreBuilds={Boolean(buildsQuery.hasNextPage)}
       />
     </RequirePermission>
   );

@@ -41,6 +41,9 @@ interface WorkspaceReadyPageProps {
   quota?: TypesGen.WorkspaceQuota;
   builds: TypesGen.WorkspaceBuild[] | undefined;
   buildsError: unknown;
+  onLoadMoreBuilds: () => void;
+  isLoadingMoreBuilds: boolean;
+  hasMoreBuilds: boolean;
 }
 
 export const WorkspaceReadyPage = ({
@@ -49,6 +52,9 @@ export const WorkspaceReadyPage = ({
   quota,
   builds,
   buildsError,
+  onLoadMoreBuilds,
+  isLoadingMoreBuilds,
+  hasMoreBuilds,
 }: WorkspaceReadyPageProps): JSX.Element => {
   const [_, bannerSend] = useActor(
     workspaceState.children["scheduleBannerMachine"],
@@ -170,6 +176,9 @@ 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}

@@ -641,10 +641,21 @@ export const workspaceMachine = createMachine(
         }
 
         context.eventSource.addEventListener("data", (event) => {
+          const newWorkspaceData = JSON.parse(event.data) as TypesGen.Workspace;
           // refresh our workspace with each SSE
-          send({ type: "REFRESH_WORKSPACE", data: JSON.parse(event.data) });
-          // refresh our timeline
-          send({ type: "REFRESH_TIMELINE" });
+          send({ type: "REFRESH_WORKSPACE", data: newWorkspaceData });
+
+          const currentWorkspace = context.workspace!;
+          const hasNewBuild =
+            newWorkspaceData.latest_build.id !==
+            currentWorkspace.latest_build.id;
+          const lastBuildHasChanged =
+            newWorkspaceData.latest_build.status !==
+            currentWorkspace.latest_build.status;
+
+          if (hasNewBuild || lastBuildHasChanged) {
+            send({ type: "REFRESH_TIMELINE" });
+          }
         });
 
         // handle any error events returned by our sse