Add connection table

Author: brendan-kellam

packages/web/src/app/[domain]/chat/components/demoCards.tsx

@@ -7,7 +7,7 @@ import { Badge } from "@/components/ui/badge";
 import { Card } from "@/components/ui/card";
 import { CardContent } from "@/components/ui/card";
 import { DemoExamples, DemoSearchExample, DemoSearchScope } from "@/types";
-import { cn, getCodeHostIcon } from "@/lib/utils";
+import { cn, CodeHostType, getCodeHostIcon } from "@/lib/utils";
 import useCaptureEvent from "@/hooks/useCaptureEvent";
 import { SearchScopeInfoCard } from "@/features/chat/components/chatBox/searchScopeInfoCard";
 
@@ -41,25 +41,23 @@ export const DemoCards = ({
         }
 
         if (searchScope.codeHostType) {
-            const codeHostIcon = getCodeHostIcon(searchScope.codeHostType);
-            if (codeHostIcon) {
-                // When selected, icons need to match the inverted badge colors
-                // In light mode selected: light icon on dark bg (invert)
-                // In dark mode selected: dark icon on light bg (no invert, override dark:invert)
-                const selectedIconClass = isSelected
-                    ? "invert dark:invert-0"
-                    : codeHostIcon.className;
+            const codeHostIcon = getCodeHostIcon(searchScope.codeHostType as CodeHostType);
+            // When selected, icons need to match the inverted badge colors
+            // In light mode selected: light icon on dark bg (invert)
+            // In dark mode selected: dark icon on light bg (no invert, override dark:invert)
+            const selectedIconClass = isSelected
+                ? "invert dark:invert-0"
+                : codeHostIcon.className;
 
-                return (
-                    <Image
-                        src={codeHostIcon.src}
-                        alt={`${searchScope.codeHostType} icon`}
-                        width={size}
-                        height={size}
-                        className={cn(sizeClass, selectedIconClass)}
-                    />
-                );
-            }
+            return (
+                <Image
+                    src={codeHostIcon.src}
+                    alt={`${searchScope.codeHostType} icon`}
+                    width={size}
+                    height={size}
+                    className={cn(sizeClass, selectedIconClass)}
+                />
+            );
         }
 
         return <Code className={cn(sizeClass, colorClass)} />;

packages/web/src/app/[domain]/components/backButton.tsx

@@ -0,0 +1,20 @@
+import { cn } from "@/lib/utils";
+import { ArrowLeft } from "lucide-react"
+import Link from "next/link"
+
+interface BackButtonProps {
+    href: string;
+    name: string;
+    className?: string;
+}
+
+export function BackButton({ href, name, className }: BackButtonProps) {
+    return (
+        <Link href={href} className={cn("inline-flex items-center text-link transition-colors group", className)}>
+            <span className="inline-flex items-center gap-1.5 border-b border-transparent group-hover:border-link pb-0.5">
+                <ArrowLeft className="h-4 w-4" />
+                <span>{name}</span>
+            </span>
+        </Link>
+    )
+}

packages/web/src/app/[domain]/repos/[id]/page.tsx

@@ -4,21 +4,21 @@ import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Skeleton } from "@/components/ui/skeleton"
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import { env } from "@/env.mjs"
 import { SINGLE_TENANT_ORG_DOMAIN } from "@/lib/constants"
 import { ServiceErrorException } from "@/lib/serviceError"
 import { cn, getCodeHostInfoForRepo, isServiceError } from "@/lib/utils"
 import { withOptionalAuthV2 } from "@/withAuthV2"
-import { ChevronLeft, ExternalLink, Info } from "lucide-react"
+import { getConfigSettings, repoMetadataSchema } from "@sourcebot/shared"
+import { ExternalLink, Info } from "lucide-react"
 import Image from "next/image"
 import Link from "next/link"
 import { notFound } from "next/navigation"
 import { Suspense } from "react"
-import { RepoJobsTable } from "../components/repoJobsTable"
-import { getConfigSettings } from "@sourcebot/shared"
-import { env } from "@/env.mjs"
+import { BackButton } from "../../components/backButton"
 import { DisplayDate } from "../../components/DisplayDate"
 import { RepoBranchesTable } from "../components/repoBranchesTable"
-import { repoMetadataSchema } from "@sourcebot/shared"
+import { RepoJobsTable } from "../components/repoJobsTable"
 
 export default async function RepoDetailPage({ params }: { params: Promise<{ id: string }> }) {
     const { id } = await params
@@ -52,14 +52,13 @@ export default async function RepoDetailPage({ params }: { params: Promise<{ id:
     const repoMetadata = repoMetadataSchema.parse(repo.metadata);
 
     return (
-        <div className="container mx-auto">
+        <>
             <div className="mb-6">
-                <Button variant="ghost" asChild className="mb-4">
-                    <Link href={`/${SINGLE_TENANT_ORG_DOMAIN}/repos`}>
-                        <ChevronLeft className="mr-2 h-4 w-4" />
-                        Back to repositories
-                    </Link>
-                </Button>
+                <BackButton
+                    href={`/${SINGLE_TENANT_ORG_DOMAIN}/repos`}
+                    name="Back to repositories"
+                    className="mb-2"
+                />
 
                 <div className="flex items-start justify-between">
                     <div>
@@ -168,7 +167,7 @@ export default async function RepoDetailPage({ params }: { params: Promise<{ id:
 
             <Card>
                 <CardHeader>
-                    <CardTitle>Indexing Jobs</CardTitle>
+                    <CardTitle>Indexing History</CardTitle>
                     <CardDescription>History of all indexing and cleanup jobs for this repository.</CardDescription>
                 </CardHeader>
                 <CardContent>
@@ -177,16 +176,17 @@ export default async function RepoDetailPage({ params }: { params: Promise<{ id:
                     </Suspense>
                 </CardContent>
             </Card>
-        </div>
+        </>
     )
 }
 
 const getRepoWithJobs = async (repoId: number) => sew(() =>
-    withOptionalAuthV2(async ({ prisma }) => {
+    withOptionalAuthV2(async ({ prisma, org }) => {
 
         const repo = await prisma.repo.findUnique({
             where: {
                 id: repoId,
+                orgId: org.id,
             },
             include: {
                 jobs: {

packages/web/src/app/[domain]/repos/components/reposTable.tsx

@@ -331,7 +331,7 @@ export const ReposTable = ({ data }: { data: Repo[] }) => {
                 </Button>
             </div>
             <div className="rounded-md border">
-                <Table style={{ tableLayout: 'fixed', width: '100%' }}>
+                <Table style={{ width: '100%' }}>
                     <TableHeader>
                         {table.getHeaderGroups().map((headerGroup) => (
                             <TableRow key={headerGroup.id}>

packages/web/src/app/[domain]/repos/layout.tsx

@@ -16,7 +16,11 @@ export default async function Layout(
         <div className="min-h-screen flex flex-col">
             <NavigationMenu domain={domain} />
             <main className="flex-grow flex justify-center p-4 bg-backgroundSecondary relative">
-                <div className="w-full max-w-6xl rounded-lg p-6">{children}</div>
+                <div className="w-full max-w-6xl rounded-lg p-6">
+                    <div className="container mx-auto">
+                        {children}
+                    </div>
+                </div>
             </main>
         </div>
     )

packages/web/src/app/[domain]/repos/page.tsx

@@ -12,7 +12,7 @@ export default async function ReposPage() {
     }
 
     return (
-        <div className="container mx-auto">
+        <>
             <div className="mb-6">
                 <h1 className="text-3xl font-semibold">Repositories</h1>
                 <p className="text-muted-foreground mt-2">View and manage your code repositories and their indexing status.</p>
@@ -31,12 +31,12 @@ export default async function ReposPage() {
                 codeHostType: repo.external_codeHostType,
                 indexedCommitHash: repo.indexedCommitHash,
             }))} />
-        </div>
+        </>
     )
 }
 
 const getReposWithLatestJob = async () => sew(() =>
-    withOptionalAuthV2(async ({ prisma }) => {
+    withOptionalAuthV2(async ({ prisma, org }) => {
         const repos = await prisma.repo.findMany({
             include: {
                 jobs: {
@@ -48,6 +48,9 @@ const getReposWithLatestJob = async () => sew(() =>
             },
             orderBy: {
                 name: 'asc'
+            },
+            where: {
+                orgId: org.id,
             }
         });
         return repos;

packages/web/src/app/[domain]/settings/components/header.tsx

@@ -6,39 +6,46 @@ import { usePathname } from "next/navigation"
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
 
-interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
-  items: {
+export type SidebarNavItem = {
     href: string
+    hrefRegex?: string
     title: React.ReactNode
-  }[]
+}
+
+interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
+    items: SidebarNavItem[]
 }
 
 export function SidebarNav({ className, items, ...props }: SidebarNavProps) {
-  const pathname = usePathname()
+    const pathname = usePathname()
 
-  return (
-    <nav
-      className={cn(
-        "flex flex-col space-x-2 lg:space-x-0 lg:space-y-1",
-        className
-      )}
-      {...props}
-    >
-      {items.map((item) => (
-        <Link
-          key={item.href}
-          href={item.href}
-          className={cn(
-            buttonVariants({ variant: "ghost" }),
-            pathname === item.href
-              ? "bg-muted hover:bg-muted"
-              : "hover:bg-transparent hover:underline",
-            "justify-start"
-          )}
+    return (
+        <nav
+            className={cn(
+                "flex flex-col space-x-2 lg:space-x-0 lg:space-y-1",
+                className
+            )}
+            {...props}
         >
-          {item.title}
-        </Link>
-      ))}
-    </nav>
-  )
+            {items.map((item) => {
+                const isActive = item.hrefRegex ? new RegExp(item.hrefRegex).test(pathname) : pathname === item.href;
+
+                return (
+                    <Link
+                        key={item.href}
+                        href={item.href}
+                        className={cn(
+                            buttonVariants({ variant: "ghost" }),
+                            isActive
+                                ? "bg-muted hover:bg-muted"
+                                : "hover:bg-transparent hover:underline",
+                            "justify-start"
+                        )}
+                    >
+                        {item.title}
+                    </Link>
+                )
+            })}
+        </nav>
+    )
 }