import { createFileRoute } from "@tanstack/react-router";
import { createRunnerRegistration, deleteRunner, listRunners, setRunnerForkPolicy } from "~/fns/settings";
import { useAction } from "~/hooks/use-action";
import { useRepo } from "~/hooks/use-repo";
import { Panel } from "~/ui/Panel";
import { CheckboxField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { RegisterRunnerPanel, RunnerList } from "~/components/runners/RunnerPanels";
import { TextLink } from "~/ui/TextLink";
export const Route = createFileRoute("/$owner/$repo/settings/runners")({
loader: ({ params }) => listRunners({ data: { owner: params.owner, repo: params.repo } }),
component: RunnersPage,
});
function RunnersPage() {
const { runners, allowForkPullRequests, public: isPublic } = Route.useLoaderData();
const params = Route.useParams();
const header = useRepo();
const register = useAction(createRunnerRegistration, { invalidate: false });
const remove = useAction(deleteRunner);
const policy = useAction(setRunnerForkPolicy);
return (
<>
<Panel title="Cloudflare runners">
<p className="p-4 text-sm text-gray-400">
Jobs with <code className="font-mono text-accent-300">runs-on: cloudflare</code> (the default) run in a fresh
Cloudflare Container per job. No setup required.
</p>
</Panel>
<RegisterRunnerPanel
serverUrl={new URL(header.cloneUrl).origin}
scopes={[
{ value: "repository", label: "This repository" },
{ value: "owner", label: `All repositories owned by ${params.owner} (owner admins only)` },
]}
pending={register.pending}
error={register.error}
onMint={({ labels, isolation, scope }) =>