Function HistorySidebar

site/src/pages/WorkspacePage/HistorySidebar.tsx:24–70

({ workspace })

}

export const HistorySidebar: FC<HistorySidebarProps> = ({ workspace }) => {
	const buildsQuery = useInfiniteQuery({
		...infiniteWorkspaceBuilds(workspace?.id ?? ""),
		enabled: workspace !== undefined,
	});
	const builds = buildsQuery.data?.pages.flat();

	return (
		<Sidebar>
			<SidebarCaption>History</SidebarCaption>
			<ScrollArea>
				<div className="flex flex-col gap-px">
					{builds
						? builds.map((build) => (
								<SidebarLink
									target="_blank"
									key={build.id}
									to={`/@${build.workspace_owner_name}/${build.workspace_name}/builds/${build.build_number}`}
								>
									<WorkspaceBuildData build={build} />
								</SidebarLink>
							))
						: Array.from({ length: 15 }, (_, i) => (
								<SidebarItem key={i}>
									<WorkspaceBuildDataSkeleton />
								</SidebarItem>
							))}
					{buildsQuery.hasNextPage && (
						<div className="p-4">
							<Button
								onClick={() => buildsQuery.fetchNextPage()}
								disabled={buildsQuery.isFetchingNextPage}
								variant="outline"
								className="w-full"
							>
								<Spinner loading={buildsQuery.isFetchingNextPage}>
									<ArrowDownIcon />
								</Spinner>
								Show more builds
							</Button>
						</div>
					)}
				</div>
			</ScrollArea>
		</Sidebar>
	);
};