gitfor/platform

import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
import { z } from "zod";
import { getDependencies } from "~/fns/security";
import { buttonClass } from "~/ui/Button";
import { inputClass } from "~/ui/Field";
import { Badge } from "~/ui/Badge";
import { EmptyState } from "~/ui/EmptyState";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";
import { cn } from "~/utils/cn";

const ECOSYSTEMS = ["npm", "pip", "go", "cargo", "rubygems", "composer"] as const;

export const Route = createFileRoute("/$owner/$repo/security/dependencies")({
  validateSearch: z.object({
    q: z.string().max(100).optional(),
    ecosystem: z.enum(ECOSYSTEMS).optional(),
    page: z.number().int().min(1).optional(),
  }),
  loaderDeps: ({ search }) => ({ query: search.q ?? "", ecosystem: search.ecosystem ?? null, page: search.page ?? 1 }),
  loader: ({ params, deps }) => getDependencies({ data: { owner: params.owner, repo: params.repo, ...deps } }),
  component: DependenciesPage,
});

function DependenciesPage() {
  const data = Route.useLoaderData();
  const params = Route.useParams();
  const search = Route.useSearch();
  const navigate = useNavigate({ from: Route.fullPath });
  const page = search.page ?? 1;

  if (!data.enabled) {
    return (
      <Panel>
        <EmptyState title="Dependency graph is disabled" icon="box">
          An admin can enable it from the security overview.
        </EmptyState>
      </Panel>
    );
  }