app/routes/admin.mentions.tsx

Functions

Imports

It imports app/components/admin/confirm-dialog.tsx, app/components/admin/tab-link.tsx, app/db/index.ts, app/db/schema.ts, app/lib/admin-actor.server.ts, app/lib/context.ts, app/lib/destructive.mjs, app/lib/editor/publish-policy.mjs, app/lib/timing.ts, app/lib/webmention/decide.server.ts, app/lib/webmention/retention.mjs. No module of this repo imports it.

Source

1import { Form, Link, data } from "react-router";
2
3import { Alert, Banner } from "capsomer/react/banner";
4import { Button } from "capsomer/react/button";
5import { Empty } from "capsomer/react/empty";
6import { Panel } from "capsomer/react/panel";
7import { Row, RowList } from "capsomer/react/row-list";
8import { Pill, Status } from "capsomer/react/status";
9import { TabsNav } from "capsomer/react/tabs";
10
11import { ConfirmDialog } from "~/components/admin/confirm-dialog";
12import { PageHead } from "capsomer/react/page-head";
13import { TabLink } from "~/components/admin/tab-link";
14import { adminActorContext } from "~/lib/admin-actor.server";
15import { getEnv } from "~/lib/context";
16import { PolicyError } from "~/lib/editor/publish-policy.mjs";
17import { timed, timedLoader } from "~/lib/timing";
18import { CONFIRM_FIELD, confirmationSatisfied } from "~/lib/destructive.mjs";
19import { decideMention } from "~/lib/webmention/decide.server";
20import {
21  countExpiringWebmentions,
22  listWebmentionsForAdmin,
23  sweepWebmentions,
24} from "~/db";
25import {
26  FAILED_RETENTION_DAYS,
27  REJECTED_RETENTION_DAYS,
28} from "~/lib/webmention/retention.mjs";
29import type { Webmention } from "~/db/schema";
30
31import type { Route } from "./+types/admin.mentions";
32
33/**
34 * Every value here came from a stranger: rendered as escaped React children, and the source
35 * URL as text, never a link. Smoke-actor writes are refused by admin.tsx's middleware, not here.
36 */
37
38export function meta() {
39  return [{ title: "Mentions · Admin" }, { name: "robots", content: "noindex" }];
40}
41
42const INTENTS = ["approve", "reject", "delete", "sweep"] as const;
43type Intent = (typeof INTENTS)[number];
44
45function isIntent(value: string): value is Intent {
46  return (INTENTS as readonly string[]).includes(value);
47}
48
49/** Pending first because it wants an action, failed second because it may mean something broke. */
50const FILTERS = [
51  { id: "pending", label: "Pending" },
52  { id: "failed", label: "Failed" },
53  { id: "approved", label: "Approved" },
54  { id: "rejected", label: "Rejected" },
55  { id: "all", label: "All" },
56] as const;
57
58type FilterId = (typeof FILTERS)[number]["id"];
59
60const EMPTY_LINE: Record<FilterId, string> = {
61  pending: "No pending mentions.",
62  failed: "No failed mentions.",
63  approved: "No approved mentions.",
64  rejected: "No rejected mentions.",
65  all: "No mentions yet.",
66};
67
68function isFilterId(value: string | null): value is FilterId {
69  return FILTERS.some((f) => f.id === value);
70}
71
72function resolveFilter(requested: string | null, rows: Webmention[]): FilterId {
73  if (isFilterId(requested)) return requested;
74  return rows.some((m) => m.status === "pending") ? "pending" : "all";
75}
76
77export async function loader({ request, context }: Route.LoaderArgs) {
78  return timedLoader(context, async (timings) => {
79    const env = getEnv(context);
80    const [mentions, expiring] = await Promise.all([
81      timed(timings, "d1_list_webmentions", () => listWebmentionsForAdmin(env)),
82      timed(timings, "d1_count_expiring_webmentions", () => countExpiringWebmentions(env)),
83    ]);
84    const status = resolveFilter(new URL(request.url).searchParams.get("status"), mentions);
85    return data({ mentions, expiring, status });
86  });
87}
88
89type ActionResult = {
90  ok?: boolean;
91  message?: string;
92  confirmDelete?: number;
93  confirmSweep?: { failed: number; rejected: number };
94};
95
96export async function action({ request, context }: Route.ActionArgs) {
97  const env = getEnv(context);
98  const form = await request.formData();
99  const intent = String(form.get("intent") ?? "");
100
101  if (!isIntent(intent)) {
102    return data<ActionResult>({ ok: false, message: "Unknown action." }, { status: 400 });
103  }
104
105  /*
106   * A guard in a handler does not run with scripting off, so both destructive intents refuse in
107   * the action and render a second step.
108   */
109  const typed = String(form.get(CONFIRM_FIELD) ?? "").trim();
110
111  if (intent === "sweep") {
112    /* The count is 1: the operator authorizes the sweep, not a row count that can change underneath. */
113    if (!confirmationSatisfied(typed, 1)) {
114      return data<ActionResult>({ confirmSweep: await countExpiringWebmentions(env) });
115    }
116    const removed = await sweepWebmentions(env);
117    return data<ActionResult>({
118      ok: true,
119      message:
120        `Removed ${removed.failed} failed and ${removed.rejected} rejected ` +
121        `mention(s) past their retention window.`,
122    });
123  }
124
125  /* Checked, not passed through: `Number("")` is 0, a plausible-looking rowid. */
126  const id = Number(form.get("id"));
127  if (!Number.isInteger(id) || id <= 0) {
128    return data<ActionResult>(
129      { ok: false, message: "That mention id is not valid." },
130      { status: 400 },
131    );
132  }
133
134  /*
135   * Shared with the operator API: `decideMention` keeps the write and the purge together, and the
136   * actor runs the same policy checks it does. `changed` false means no row moved, which is not success.
137   */
138  const decide = async (decision: "delete" | "approve" | "reject", done: string, unchanged: string) => {
139    try {
140      const { changed, purged } = await decideMention(env, id, decision, context.get(adminActorContext));
141      if (!changed) return data<ActionResult>({ ok: false, message: unchanged }, { status: 409 });
142      // The row moved, so the outcome is ok; a failed purge is said, since the public page keeps the old mentions.
143      return data<ActionResult>({
144        ok: true,
145        message:
146          purged === false
147            ? `${done} The cache purge failed, so the post's page may show the old mentions until its cache expires.`
148            : done,
149      });
150    } catch (error) {
151      if (error instanceof PolicyError) {
152        return data<ActionResult>({ ok: false, message: error.message }, { status: 403 });
153      }
154      throw error;
155    }
156  };
157
158  if (intent === "delete") {
159    if (!confirmationSatisfied(typed, 1)) {
160      return data<ActionResult>({ confirmDelete: id });
161    }
162    return decide("delete", "Mention deleted.", `Nothing changed: mention ${id} no longer exists.`);
163  }
164
165  if (intent === "approve") {
166    return decide(
167      "approve",
168      "Mention approved.",
169      `Nothing changed: mention ${id} is gone or not verified, so it cannot be approved. Reload to see its state.`,
170    );
171  }
172
173  if (intent === "reject") {
174    // Rejecting removes a rendered mention, so it purges the same tag.
175    return decide(
176      "reject",
177      "Mention rejected.",
178      `Nothing changed: mention ${id} is gone or not verified, so it cannot be rejected. Reload to see its state.`,
179    );
180  }
181
182  /*
183   * Four separate comparisons, not a ternary: `check:destructive` matches strict equality on the
184   * raw source, so an intent in a ternary's else arm is invisible to it.
185   */
186  return data<ActionResult>({ ok: false, message: "Unknown action." }, { status: 400 });
187}
188
189function iso(value: Date): string {
190  return value.toISOString().replace(".000Z", "Z");
191}
192
193const DECIDABLE: ReadonlyArray<Webmention["status"]> = ["pending", "approved", "rejected"];
194
195const STATUS_TONE: Record<Webmention["status"], "ok" | "warn" | "crit" | "nodata"> = {
196  pending: "warn",
197  approved: "ok",
198  rejected: "nodata",
199  failed: "crit",
200  unverified: "nodata",
201};
202
203function MentionRow({
204  mention,
205  confirmDelete,
206  cancelHref,
207}: {
208  mention: Webmention;
209  confirmDelete?: number;
210  cancelHref: string;
211}) {
212  const decidable = DECIDABLE.includes(mention.status);
213  const from = mention.authorName ?? "an unnamed sender";
214  return (
215    <>
216      <Row
217        title={
218          <>
219            {mention.authorName ?? "An unnamed sender"}
220            {mention.authorUrl ? ` (${mention.authorUrl})` : ""} mentioned {mention.targetSlug}
221          </>
222        }
223        href={`/admin/posts/${mention.targetSlug}/edit`}
224        renderLink={({ href, children, ...rest }) => (
225          <Link to={href} {...rest}>
226            {children}
227          </Link>
228        )}
229        status={<Status tone={STATUS_TONE[mention.status]}>{mention.status}</Status>}
230        detail={
231          <>
232            {mention.excerpt ? <>{mention.excerpt}. </> : null}
233            {/* Text, not a link: an unauthenticated POST chose this string. */}
234            <span data-mention-source="">{mention.sourceUrl}</span>
235          </>
236        }
237        meta={
238          <span>
239            {`received ${iso(mention.receivedAt)}` +
240              (mention.decidedAt ? `, decided ${iso(mention.decidedAt)}` : "") +
241              (mention.failureReason ? `, reason ${mention.failureReason}` : "")}
242          </span>
243        }
244        actions={
245          <>
246            {decidable && mention.status !== "approved" ? (
247              <Form method="post">
248                <input type="hidden" name="intent" value="approve" />
249                <input type="hidden" name="id" value={mention.id} />
250                {/* Context in the name: every row has an Approve, and a list of them is otherwise identical. */}
251                <Button type="submit" variant="primary" size="sm">
252                  Approve<span className="cap-sr-only"> the mention from {from}</span>
253                </Button>
254              </Form>
255            ) : null}
256            {decidable && mention.status !== "rejected" ? (
257              <Form method="post">
258                <input type="hidden" name="intent" value="reject" />
259                <input type="hidden" name="id" value={mention.id} />
260                <Button type="submit" size="sm">
261                  Reject<span className="cap-sr-only"> the mention from {from}</span>
262                </Button>
263              </Form>
264            ) : null}
265            <Form method="post">
266              <input type="hidden" name="intent" value="delete" />
267              <input type="hidden" name="id" value={mention.id} />
268              <Button type="submit" variant="danger" size="sm">
269                Delete<span className="cap-sr-only"> the mention from {from}</span>
270              </Button>
271            </Form>
272          </>
273        }
274      />
275      {confirmDelete === mention.id ? (
276        <li>
277          <ConfirmDialog
278            title="Delete this mention"
279            body={<p>This removes the only copy of it. Nothing else has one.</p>}
280            requireTyped="1"
281            confirmLabel="Delete permanently"
282            cancelHref={cancelHref}
283          >
284            <input type="hidden" name="intent" value="delete" />
285            <input type="hidden" name="id" value={mention.id} />
286          </ConfirmDialog>
287        </li>
288      ) : null}
289    </>
290  );
291}
292
293export default function AdminMentions({ loaderData, actionData }: Route.ComponentProps) {
294  const { mentions, expiring, status } = loaderData;
295  const message = actionData?.message;
296  const confirmDelete = actionData?.confirmDelete;
297  const confirmSweep = actionData?.confirmSweep;
298
299  const countOf = (id: FilterId) =>
300    id === "all" ? mentions.length : mentions.filter((m) => m.status === id).length;
301  const rows = status === "all" ? mentions : mentions.filter((m) => m.status === status);
302
303  const unverified = mentions.filter((m) => m.status === "unverified").length;
304  const expired = expiring.failed + expiring.rejected;
305  // Cancel keeps the filter it was opened from, rather than dropping back to the default one.
306  const cancelHref = `/admin/mentions?status=${status}`;
307
308  return (
309    <div className="app-page">
310      <PageHead
311        title="Mentions"
312        lead={status === "pending" && rows.length > 0 ? "Approving appears on the post within seconds." : undefined}
313      />
314
315      {/* The status region is always in the DOM, so a result is announced; a refusal is an alert. */}
316      <div role="status">
317        {message && actionData?.ok ? <Banner tone="ok">{message}</Banner> : null}
318      </div>
319      {message && !actionData?.ok ? <Alert tone="crit">{message}</Alert> : null}
320
321      <TabsNav aria-label="Filter mentions by status" variant="line">
322        {FILTERS.map((filter) => (
323          <TabLink
324            key={filter.id}
325            to={`?status=${filter.id}`}
326            current={filter.id === status}
327            count={countOf(filter.id)}
328          >
329            {filter.label}
330          </TabLink>
331        ))}
332        {unverified > 0 ? <Pill variant="outline">{unverified} unverified</Pill> : null}
333      </TabsNav>
334
335      {rows.length === 0 ? (
336        <Empty kind={status === "all" ? "nothing-yet" : "all-clear"}>{EMPTY_LINE[status]}</Empty>
337      ) : (
338        <Panel title={FILTERS.find((f) => f.id === status)?.label ?? "Mentions"} count={rows.length} flush>
339          <RowList label="Mentions">
340            {rows.map((mention) => (
341              <MentionRow
342                key={mention.id}
343                mention={mention}
344                confirmDelete={confirmDelete}
345                cancelHref={cancelHref}
346              />
347            ))}
348          </RowList>
349        </Panel>
350      )}
351
352      <Panel
353        title="Retention"
354        description={
355          `Failed mentions are removed after ${FAILED_RETENTION_DAYS} days, rejected after ` +
356          `${REJECTED_RETENTION_DAYS} days.`
357        }
358      >
359        {confirmSweep ? (
360          <ConfirmDialog
361            title="Remove the expired mentions"
362            body={
363              <p>
364                {`This permanently removes ${confirmSweep.failed} failed and ` +
365                  `${confirmSweep.rejected} rejected mention(s). Nothing that is ` +
366                  `still waiting on a decision is touched.`}
367              </p>
368            }
369            requireTyped="1"
370            confirmLabel="Remove them"
371            cancelHref={cancelHref}
372          >
373            <input type="hidden" name="intent" value="sweep" />
374          </ConfirmDialog>
375        ) : (
376          <Form method="post">
377            <input type="hidden" name="intent" value="sweep" />
378            <Button
379              type="submit"
380              disabledReason={expired === 0 ? "Nothing has passed its retention window yet." : undefined}
381            >
382              {`Remove ${expired} expired`}
383            </Button>
384          </Form>
385        )}
386      </Panel>
387    </div>
388  );
389}