'use client' import React from 'react' import { zodResolver } from '@hookform/resolvers/zod' import { useForm } from 'react-hook-form' import { toast } from 'sonner' import useSWR from 'swr' import { useQuery } from 'urql' import * as z from 'zod' import { DEFAULT_PAGE_SIZE } from '@/lib/constants' import { graphql } from '@/lib/gql/generates' import { useMutation } from '@/lib/tabby/gql' import { listRepositories, userGroupsQuery } from '@/lib/tabby/query' import { Button } from '@/components/ui/button' import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog' import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form' import { IconPencil, IconTrash } from '@/components/ui/icons' import { Input } from '@/components/ui/input' import { Pagination, PaginationContent, PaginationItem, PaginationNext, PaginationPrevious } from '@/components/ui/pagination' import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area' import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table' import { TagInput } from '@/components/ui/tag-input' import LoadingWrapper from '@/components/loading-wrapper' import { AccessPolicyView } from '../../components/access-policy-view' import { JobInfoView } from '../../components/job-trigger' import { triggerJobRunMutation } from '../../query' const deleteRepositoryMutation = graphql(/* GraphQL */ ` mutation deleteGitRepository($id: ID!) { deleteGitRepository(id: $id) } `) const updateRepositoryMutation = graphql(/* GraphQL */ ` mutation updateGitRepository($id: ID!, $refs: [String!]) { updateGitRepository(id: $id, refs: $refs) } `) const formSchema = z.object({ name: z.string(), gitUrl: z.string(), refs: z.array(z.string()).optional() }) type FormValues = z.infer const PAGE_SIZE = DEFAULT_PAGE_SIZE export default function RepositoryTable() { const [before, setBefore] = React.useState() const [{ data, fetching }, reexecuteQuery] = useQuery({ query: listRepositories, variables: { last: PAGE_SIZE, before } }) useSWR( ['refresh_repos', before], () => { reexecuteQuery() }, { revalidateOnFocus: true, revalidateOnReconnect: true, revalidateOnMount: false, refreshInterval: 10 * 1000 } ) const [{ data: userGroupData, fetching: fetchingUserGroups }] = useQuery({ query: userGroupsQuery }) const [currentPage, setCurrentPage] = React.useState(1) const edges = React.useMemo(() => { return data?.gitRepositories?.edges?.slice().reverse() }, [data?.gitRepositories?.edges]) const pageInfo = data?.gitRepositories?.pageInfo const pageNum = Math.ceil((edges?.length || 0) / PAGE_SIZE) const getBeforeCursor = (page: number) => { return edges?.slice(0, (page - 1) * PAGE_SIZE)?.pop()?.cursor } const fetchPage = (page: number) => { setBefore(getBeforeCursor(page)) } const currentPageRepos = React.useMemo(() => { return edges?.slice?.( (currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE ) }, [currentPage, edges]) const hasNextPage = pageInfo?.hasPreviousPage || currentPage < pageNum const hasPrevPage = currentPage > 1 const showPagination = !!currentPageRepos?.length && (hasNextPage || hasPrevPage) const deleteRepository = useMutation(deleteRepositoryMutation) const updateRepository = useMutation(updateRepositoryMutation) const triggerJobRun = useMutation(triggerJobRunMutation) const [editingRepo, setEditingRepo] = React.useState<{ id: string name: string gitUrl: string refs: string[] } | null>(null) const handleNavToPrevPage = () => { if (currentPage <= 1) return if (fetching) return const prevPage = currentPage - 1 fetchPage(prevPage) setCurrentPage(prevPage) } const handleNavToNextPage = () => { if (!hasNextPage) return if (fetching) return const nextPage = currentPage + 1 fetchPage(nextPage) setCurrentPage(nextPage) } const handleDeleteRepository = (id: string, isLast: boolean) => { deleteRepository({ id }).then(res => { if (res?.data?.deleteGitRepository) { fetchPage(isLast ? currentPage - 1 : currentPage) } else { toast.error(res?.error?.message || 'Failed to delete repository') } }) } const handleTriggerJobRun = (command: string) => { return triggerJobRun({ command }).then(res => { if (res?.data?.triggerJobRun) { toast.success( 'The job has been triggered successfully, it may take a few minutes to process.' ) reexecuteQuery() } else { toast.error(res?.error?.message || 'Failed to trigger job') } }) } const handleEditRepository = (repo: { id: string name: string gitUrl: string refs: Array<{ name: string }> }) => { setEditingRepo({ id: repo.id, name: repo.name, gitUrl: repo.gitUrl, refs: repo.refs.map(r => { // Extract branch name from refs/heads/xxx or refs/tags/xxx if (r.name.startsWith('refs/heads/')) { return r.name.substring('refs/heads/'.length) } else if (r.name.startsWith('refs/tags/')) { return r.name.substring('refs/tags/'.length) } return r.name }) }) } const handleUpdateRepository = (values: FormValues) => { if (!editingRepo) return updateRepository({ id: editingRepo.id, refs: values.refs && values.refs.length > 0 ? values.refs : undefined }).then(res => { if (res?.data?.updateGitRepository) { toast.success('Repository updated successfully') setEditingRepo(null) reexecuteQuery() } else { toast.error(res?.error?.message || 'Failed to update repository') } }) } React.useEffect(() => { if (fetching) return if (pageNum < currentPage && currentPage > 1) { setCurrentPage(pageNum) } }, [pageNum, currentPage]) return ( <> Name Git URL Access Job {!currentPageRepos?.length && currentPage === 1 ? ( No Data ) : ( <> {currentPageRepos?.map(x => { return ( {x.node.name} {x.node.gitUrl} handleTriggerJobRun(x.node.jobInfo.command) } />

{' '} ) })} )}

{showPagination && ( )} { if (!open) setEditingRepo(null) }} onSubmit={handleUpdateRepository} /> ) } function EditRepositoryDialog({ repo, open, onOpenChange, onSubmit }: { repo: { id: string; name: string; gitUrl: string; refs: string[] } | null open: boolean onOpenChange: (open: boolean) => void onSubmit: (values: FormValues) => void }) { const form = useForm({ resolver: zodResolver(formSchema) }) React.useEffect(() => { if (repo) { form.reset({ name: repo.name, gitUrl: repo.gitUrl, refs: repo.refs }) } }, [repo, form]) const { isSubmitting } = form.formState return ( ) }