Skip to content
Sign in

flagon-io/g1t

public
0

g1t/apps/web/app/routes/repo/milestone.tsx

211 lines9,243 bytesCodeBlame

Pick any line to see why it is the way it is: the commit, the pull request and issue it came from, and what the agent was thinking.

Teams and CODEOWNERS, labels and milestones, dependency updates, the security suite, and a clearer top bar1import { ArrowLeft, MessageSquare, Pencil } from "lucide-react";
2import { useState } from "react";
3import { Link, redirect } from "react-router";
4
5import type { Issue, Pull } from "@g1t/contracts";
6
7import type { Route } from "./+types/milestone";
8import { LabelChip, MilestoneBar } from "../../components/labels";
9import { Markdown } from "../../components/markdown";
10import {
11 DeleteMilestone,
12 DueLine,
13 MilestoneForm,
14 MilestoneStateButton,
15 ProgressLine,
16} from "../../components/milestones";
17import { Button, EmptyState, ErrorText, TimeAgo } from "../../components/ui";
18import { IssueIcon, PullIcon } from "../../components/work";
19import { requireRepo } from "../../lib/access.server";
20import { colorsOf } from "../../lib/labels";
21import { page } from "../../lib/meta";
22import { milestoneAction } from "../../lib/milestones.server";
23import { openedBy } from "../../lib/opened-by";
24import { work } from "../../lib/services.server";
25
26export function meta({ loaderData, params, ...args }: Route.MetaArgs) {
27 const title = loaderData?.detail.milestone.title;
28 return page(args, { title: `${title ? `${title} · Milestone · ` : ""}${params.owner}/${params.repo} · g1t` });
29}
30
31export async function loader({ params, context, request }: Route.LoaderArgs) {
32 const { viewer, access } = await requireRepo(context, params, "read");
33 const path = { namespace: params.owner, name: params.repo };
34 const state = new URL(request.url).searchParams.get("state") === "closed" ? "closed" : "open";
35 const [found, labels] = await Promise.all([
36 work.getMilestone(path, Number(params.number), viewer),
37 work.listLabels(path, viewer),
38 ]);
39 if (!found.ok) throw new Response("Milestone not found.", { status: 404 });
40 return {
41 detail: found.value,
42 labels: labels.ok ? labels.value : [],
43 state,
Merge membership: owners, org roles, GitHub's repo roles, privileges, 2FA44 canEdit: access.can.manage_labels,
Teams and CODEOWNERS, labels and milestones, dependency updates, the security suite, and a clearer top bar45 today: new Date().toISOString(),
46 } as const;
47}
48
49export async function action({ request, params, context }: Route.ActionArgs) {
50 const result = await milestoneAction(request, params, context);
51 // Deleted: back to the list.
52 if (result.intent === "delete" && !result.error) throw redirect(`/${params.owner}/${params.repo}/milestones`);
53 return result;
54}
55
56type Item = { kind: "issue"; issue: Issue } | { kind: "pull"; pull: Pull };
57
58function isOpen(item: Item): boolean {
59 return item.kind === "issue" ? item.issue.state === "open" : item.pull.status === "open" || item.pull.status === "draft";
60}
61
62export default function MilestonePage({ loaderData, actionData, params }: Route.ComponentProps) {
63 const { detail, labels, state, canEdit } = loaderData;
64 const { milestone } = detail;
65 const base = `/${params.owner}/${params.repo}`;
66 const today = new Date(loaderData.today);
67 const colors = colorsOf(labels);
68 const [editing, setEditing] = useState(false);
69 // Issues and pull requests together, newest first.
70 const items: Item[] = [
71 ...detail.issues.map((issue) => ({ kind: "issue" as const, issue })),
72 ...detail.pulls.map((pull) => ({ kind: "pull" as const, pull })),
73 ].sort((a, b) => (b.kind === "issue" ? b.issue.number : b.pull.number) - (a.kind === "issue" ? a.issue.number : a.pull.number));
74 const openItems = items.filter(isOpen);
75 const closedItems = items.filter((item) => !isOpen(item));
76 const shown = state === "open" ? openItems : closedItems;
77 const here = `${base}/milestones/${milestone.number}`;
78 const tab = (value: "open" | "closed", label: string, count: number) => (
79 <Link
80 to={value === "open" ? here : `${here}?state=closed`}
81 className={
82 "rounded-md px-3 py-1.5 text-sm transition-colors " +
83 (state === value ? "bg-raised font-medium text-fg" : "text-muted hover:text-fg")
84 }
85 >
86 {label} <span className="tabular-nums text-faint">{count}</span>
87 </Link>
88 );
89 return (
90 <div className="space-y-5">
91 <Link to={`${base}/milestones`} className="inline-flex items-center gap-1.5 text-sm text-muted hover:text-fg">
92 <ArrowLeft size={14} />
93 Milestones
94 </Link>
95 {editing ? (
96 <MilestoneForm milestone={milestone} onDone={() => setEditing(false)} />
97 ) : (
98 <header className="grid gap-4 sm:grid-cols-[1fr_18rem]">
99 <div className="min-w-0">
100 <h2 className="text-2xl font-semibold tracking-tight text-balance">
101 {milestone.title}
102 {milestone.state === "closed" && (
103 <span className="ml-2 rounded-full border border-line px-2 py-0.5 align-middle text-xs font-normal text-muted">
104 Closed
105 </span>
106 )}
107 </h2>
108 <p className="mt-1 text-sm">
109 <DueLine milestone={milestone} today={today} />
110 </p>
111 {milestone.description && (
112 <div className="mt-3 text-sm">
113 <Markdown source={milestone.description} repo={{ namespace: params.owner, name: params.repo }} />
114 </div>
115 )}
116 </div>
117 <div className="min-w-0">
118 <MilestoneBar milestone={milestone} />
119 <p className="mt-1.5">
120 <ProgressLine milestone={milestone} />
121 </p>
122 {canEdit && (
123 <div className="mt-3 flex flex-wrap gap-2">
124 <Button type="button" variant="quiet" onClick={() => setEditing(true)}>
125 <Pencil size={14} />
126 Edit
127 </Button>
128 <MilestoneStateButton milestone={milestone} />
129 <DeleteMilestone milestone={milestone} />
130 </div>
131 )}
132 </div>
133 </header>
134 )}
135 {actionData?.error && actionData.intent !== "edit" && <ErrorText>{actionData.error}</ErrorText>}
136 <div className="flex gap-1 self-start rounded-lg border border-line p-1 sm:w-fit">
137 {tab("open", "Open", openItems.length)}
138 {tab("closed", "Closed", closedItems.length)}
139 </div>
140 {shown.length === 0 ? (
141 <EmptyState title={state === "open" ? "Nothing open in this milestone" : "Nothing closed in this milestone yet"}>
142 {canEdit
143 ? "Put an issue or a pull request in it from the Milestone menu in its sidebar."
144 : "Issues and pull requests in this milestone show here."}
145 </EmptyState>
146 ) : (
147 <ul className="divide-y divide-line overflow-hidden rounded-xl border border-line">
148 {shown.map((item) =>
149 item.kind === "issue" ? (
150 <li key={`i${item.issue.number}`}>
151 <Link
152 to={`${base}/issues/${item.issue.number}`}
153 className="flex items-start gap-3 px-4 py-3 transition-colors hover:bg-surface"
154 >
155 <span className="mt-0.5">
156 <IssueIcon issue={item.issue} />
157 </span>
158 <span className="min-w-0 grow">
159 <span className="flex flex-wrap items-center gap-x-2 gap-y-1">
160 <span className="font-medium">{item.issue.title}</span>
161 {item.issue.labels.map((name) => (
162 <LabelChip key={name} name={name} color={colors[name]} />
163 ))}
164 </span>
165 <span className="mt-0.5 block text-xs text-faint">
166 #{item.issue.number} opened <TimeAgo at={item.issue.createdAt} /> by {item.issue.author.username}
167 </span>
168 </span>
169 {item.issue.commentCount > 0 && (
170 <span className="mt-0.5 flex shrink-0 items-center gap-1 text-xs text-muted">
171 <MessageSquare size={13} />
172 {item.issue.commentCount}
173 </span>
174 )}
175 </Link>
176 </li>
177 ) : (
178 <li key={`p${item.pull.number}`}>
179 <Link
180 to={`${base}/pull/${item.pull.number}`}
181 className="flex items-start gap-3 px-4 py-3 transition-colors hover:bg-surface"
182 >
183 <span className="mt-0.5">
184 <PullIcon status={item.pull.status} />
185 </span>
186 <span className="min-w-0 grow">
187 <span className="flex flex-wrap items-center gap-x-2 gap-y-1">
188 <span className="font-medium">{item.pull.title}</span>
189 {(item.pull.labels ?? []).map((name) => (
190 <LabelChip key={name} name={name} color={colors[name]} />
191 ))}
192 </span>
193 <span className="mt-0.5 block text-xs text-faint">
194 #{item.pull.number} opened <TimeAgo at={item.pull.createdAt} /> by {openedBy(item.pull).name}
195 {item.pull.base && (
196 <>
197 {" "}
198 into <span className="font-mono">{item.pull.base}</span>
199 </>
200 )}
201 </span>
202 </span>
203 </Link>
204 </li>
205 ),
206 )}
207 </ul>
208 )}
209 </div>
210 );
211}

This file's history is long; its oldest lines are credited to the oldest commit read.