gitfor/platform

import { createFileRoute } from "@tanstack/react-router";
import { deleteRepoVariable, getRepoActionsConfig, setRepoVariable } from "~/fns/action-config";
import { useAction } from "~/hooks/use-action";
import { ConfigValueList } from "~/components/ConfigValueList";

export const Route = createFileRoute("/$owner/$repo/settings/variables")({
  loader: ({ params }) => getRepoActionsConfig({ data: { owner: params.owner, repo: params.repo } }),
  component: VariablesPage,
});

function VariablesPage() {
  const data = Route.useLoaderData();
  const params = Route.useParams();
  const save = useAction(setRepoVariable);
  const remove = useAction(deleteRepoVariable);
  return (
    <>
      <p className="text-sm text-gray-400">
        Variables are plain-text configuration available as {"${{ vars.NAME }}"}. Environment variables override
        repository variables, which override owner variables. They are not passed to runs from forks.
      </p>
      <ConfigValueList
        title="Repository variables"
        kind="variable"
        items={data.variables}
        pending={save.pending}
        error={save.error ?? remove.error}
        onSave={async (name, value) => Boolean(await save.run({ data: { ...params, name, value } }))}
        onDelete={(name) => remove.run({ data: { ...params, name } })}
      />
    </>
  );
}