gitfor/platform

import { createFileRoute } from "@tanstack/react-router";
import { dismissCodeAlert, getCodeAlert } from "~/fns/security";
import { useAction } from "~/hooks/use-action";
import { SeverityBadge } from "~/components/security/SeverityBadge";
import { Button } from "~/ui/Button";
import { ErrorBanner } from "~/ui/Callout";
import { Badge } from "~/ui/Badge";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";
import { TextLink } from "~/ui/TextLink";
import { Heading } from "~/ui/Heading";

export const Route = createFileRoute("/$owner/$repo/security/code-scanning/$number")({
  loader: ({ params }) =>
    getCodeAlert({ data: { owner: params.owner, repo: params.repo, number: Number(params.number) } }),
  component: CodeAlertPage,
});

const DISMISS = [
  { value: "false_positive", label: "False positive" },
  { value: "used_in_tests", label: "Used in tests" },
  { value: "wont_fix", label: "Won't fix" },
] as const;

function CodeAlertPage() {
  const alert = Route.useLoaderData();
  const params = Route.useParams();
  const dismiss = useAction(dismissCodeAlert);
  const number = Number(params.number);
  return (
    <>
      <div className="space-y-2">
        <div className="flex flex-wrap items-center gap-2">
          <Heading>{alert.ruleName ?? alert.ruleId}</Heading>
          <SeverityBadge severity={alert.securitySeverity ?? alert.severity} />
          <Badge tone={alert.state === "open" ? "warning" : "neutral"}>{alert.state}</Badge>
        </div>
        <p className="text-xs text-gray-500">
          #{alert.number} · {alert.tool} · <span className="font-mono">{alert.ruleId}</span> · {alert.ref} · first seen{" "}
          <RelativeTime timestamp={alert.createdAt} />