revamp repo page (#220)

* wip repo table

* new repo page

* add indicator for when feedback is applied in repo page

* add repo button

* fetch connection data in one query

* fix styling

Author: msukkari

packages/web/src/actions.ts

@@ -147,7 +147,7 @@ export const completeOnboarding = async (domain: string): Promise<{ success: boo
             }
         })
     );
-        
+
 export const getSecrets = (domain: string): Promise<{ createdAt: Date; key: string; }[] | ServiceError> =>
     withAuth((session) =>
         withOrgMembership(session, domain, async ({ orgId }) => {
@@ -321,7 +321,11 @@ export const getRepos = async (domain: string, filter: { status?: RepoIndexingSt
                     } : {}),
                 },
                 include: {
-                    connections: true,
+                    connections: {
+                        include: {
+                            connection: true,
+                        }
+                    }
                 }
             });
 
@@ -330,7 +334,10 @@ export const getRepos = async (domain: string, filter: { status?: RepoIndexingSt
                 repoId: repo.id,
                 repoName: repo.name,
                 repoCloneUrl: repo.cloneUrl,
-                linkedConnections: repo.connections.map((connection) => connection.connectionId),
+                linkedConnections: repo.connections.map(({ connection }) => ({
+                    id: connection.id,
+                    name: connection.name,
+                })),
                 imageUrl: repo.imageUrl ?? undefined,
                 indexedAt: repo.indexedAt ?? undefined,
                 repoIndexingStatus: repo.repoIndexingStatus,
@@ -883,7 +890,7 @@ export const createOnboardingSubscription = async (domain: string) =>
                         save_default_payment_method: 'on_subscription',
                     },
                 });
-                
+
                 if (!subscription) {
                     return {
                         statusCode: StatusCodes.INTERNAL_SERVER_ERROR,

packages/web/src/app/[domain]/components/connectionCreationForms/sharedConnectionCreationForm.tsx

@@ -67,7 +67,7 @@ export default function SharedConnectionCreationForm<T>({
                 return checkIfSecretExists(secretKey, domain);
             }, { message: "Secret not found" }),
         });
-    }, [schema, domain]);
+    }, [schema, domain, additionalConfigValidation]);
 
     const form = useForm<z.infer<typeof formSchema>>({
         resolver: zodResolver(formSchema),

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

@@ -97,7 +97,7 @@ export const ErrorNavIndicator = () => {
                                     .slice(0, 10)
                                     .map(repo => (
                                         // Link to the first connection for the repo
-                                        <Link key={repo.repoId} href={`/${domain}/connections/${repo.linkedConnections[0]}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
+                                        <Link key={repo.repoId} href={`/${domain}/connections/${repo.linkedConnections[0].id}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
                                             <div className="flex items-center justify-between px-3 py-2 
                                                             bg-red-50 dark:bg-red-900/20 rounded-md
                                                             border border-red-200/50 dark:border-red-800/50

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

@@ -50,7 +50,7 @@ export const ProgressNavIndicator = () => {
                         <div className="flex flex-col gap-2 pl-4">
                             {inProgressRepos.slice(0, 10).map(item => (
                                 // Link to the first connection for the repo
-                                <Link key={item.repoId} href={`/${domain}/connections/${item.linkedConnections[0]}`} onClick={() => captureEvent('wa_progress_nav_job_pressed', {})}>
+                                <Link key={item.repoId} href={`/${domain}/connections/${item.linkedConnections[0].id}`} onClick={() => captureEvent('wa_progress_nav_job_pressed', {})}>
                                     <div className="flex items-center gap-2 px-3 py-2 bg-green-50 dark:bg-green-900/20 
                                                 rounded-md text-sm text-green-700 dark:text-green-300 
                                                 border border-green-200/50 dark:border-green-800/50

packages/web/src/app/[domain]/connections/[id]/components/repoListItem.tsx

@@ -49,13 +49,19 @@ export const RepoListItem = ({
             className="flex flex-row items-center p-4 border rounded-lg bg-background justify-between"
         >
             <div className="flex flex-row items-center gap-2">
-                <Image
-                    src={imageUrl ?? ""}
-                    alt={name}
-                    width={40}
-                    height={40}
-                    className="rounded-full"
-                />
+                {imageUrl ? (
+                    <Image
+                        src={imageUrl}
+                        alt={name}
+                        width={32}
+                        height={32}
+                        className="object-cover"
+                    />
+                ) : (
+                    <div className="h-8 w-8 flex items-center justify-center bg-muted text-xs font-medium uppercase text-muted-foreground rounded-md">
+                        {name.charAt(0)}
+                    </div>
+                )}
                 <p className="font-medium">{name}</p>
             </div>
             <div className="flex flex-row items-center gap-4">

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

@@ -0,0 +1,57 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { PlusCircle } from "lucide-react"
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogDescription,
+    DialogClose,
+    DialogFooter,
+} from "@/components/ui/dialog"
+import { useState } from "react"
+import { ConnectionList } from "../connections/components/connectionList"
+import { useDomain } from "@/hooks/useDomain"
+import Link from "next/link";
+
+export function AddRepoButton() {
+    const [isOpen, setIsOpen] = useState(false)
+    const domain = useDomain()
+
+    return (
+        <>
+          <Button
+            onClick={() => setIsOpen(true)}
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8 ml-2 text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <PlusCircle className="h-4 w-4" />
+          </Button>
+    
+          <Dialog open={isOpen} onOpenChange={setIsOpen}>
+            <DialogContent className="sm:max-w-[800px] max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden">
+              <DialogHeader className="px-6 py-4 border-b">
+                <DialogTitle className="text-xl font-semibold">Add a New Repository</DialogTitle>
+                <DialogDescription className="text-sm text-muted-foreground mt-1">
+                  Repositories are added to Sourcebot using <span className="text-primary">connections</span>. To add a new repo, add it to an existing connection or create a new one.
+                </DialogDescription>
+              </DialogHeader>
+              <div className="flex-1 overflow-y-auto p-6">
+                <ConnectionList className="w-full" />
+              </div>
+              <DialogFooter className="flex justify-between items-center border-t p-4 px-6">
+                <Button asChild variant="default" className="bg-primary hover:bg-primary/90">
+                  <Link href={`/${domain}/connections`}>Add new connection</Link>
+                </Button>
+                <DialogClose asChild>
+                  <Button variant="outline">Close</Button>
+                </DialogClose>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </>
+      )
+}