1import { RefreshIcon } from "~/components/ui/refresh-icon";
2import { ExternalLinkIcon } from "lucide-react";
3
4import { Button } from "../ui/button";
5import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty";
6import { PullRequestGlyph } from "./pullRequestIcons";
7
8export function PullRequestsUnavailableState({
9 title = "Could not load pull requests",
10 error,
11 onRetry,
12 refreshing = false,
13 gitHubUrl,
14}: {
15 title?: string;
16 error: string;
17 onRetry?: () => void;
18 refreshing?: boolean;
19 gitHubUrl?: string;
20}) {
21 return (
22 <Empty className="scrollbar-gutter-both min-h-0 justify-center-safe overflow-y-auto [&>*]:shrink-0">
23 <EmptyMedia variant="icon">
24 <PullRequestGlyph.pullRequest />
25 </EmptyMedia>
26 <EmptyHeader>
27 <EmptyTitle>{title}</EmptyTitle>
28 {/* The caller names the fix — update the environment, install gh, sign in — so this
29 shows its message rather than trying to infer one from the failure text. */}
30 <EmptyDescription>{error}</EmptyDescription>
31 </EmptyHeader>
32 {onRetry || gitHubUrl ? (
33 <div className="flex flex-wrap justify-center gap-2">
34 {onRetry ? (
35 <Button
36 size="sm"
37 variant="outline"
38 onClick={onRetry}
39 disabled={refreshing}
40 aria-busy={refreshing}
41 >
42 <RefreshIcon size="sm" refreshing={refreshing} />
43 Retry
44 </Button>
45 ) : null}
46 {gitHubUrl ? (
47 <Button
48 size="sm"
49 variant="outline"
50 render={<a href={gitHubUrl} target="_blank" rel="noopener noreferrer" />}
51 >
52 <ExternalLinkIcon aria-hidden className="size-3.5" />
53 Open on GitHub
54 </Button>
55 ) : null}
56 </div>
57 ) : null}
58 </Empty>
59 );
60}