connections qol improvements

packages/backend/src/constants.ts

@@ -8,7 +8,7 @@ export const DEFAULT_SETTINGS: Settings = {
     autoDeleteStaleRepos: true,
     reindexIntervalMs: 1000 * 60,
     resyncConnectionPollingIntervalMs: 1000,
-    reindexRepoPollingInternvalMs: 1000,
+    reindexRepoPollingIntervalMs: 1000,
     indexConcurrencyMultiple: 3,
     configSyncConcurrencyMultiple: 3,
 }

packages/backend/src/repoCompileUtils.ts

@@ -30,6 +30,7 @@ export const compileGithubConfig = async (
             external_codeHostUrl: hostUrl,
             cloneUrl: cloneUrl.toString(),
             name: repoName,
+            imageUrl: repo.owner.avatar_url,
             isFork: repo.fork,
             isArchived: !!repo.archived,
             org: {
@@ -80,6 +81,7 @@ export const compileGitlabConfig = async (
             external_codeHostUrl: hostUrl,
             cloneUrl: cloneUrl.toString(),
             name: project.path_with_namespace,
+            imageUrl: project.avatar_url,
             isFork: isFork,
             isArchived: !!project.archived,
             org: {
@@ -118,7 +120,6 @@ export const compileGiteaConfig = async (
     const hostUrl = config.url ?? 'https://gitea.com';
 
     return giteaRepos.map((repo) => {
-        const repoUrl = `${hostUrl}/${repo.full_name}`;
         const cloneUrl = new URL(repo.clone_url!);
 
         const record: RepoData = {
@@ -127,6 +128,7 @@ export const compileGiteaConfig = async (
             external_codeHostUrl: hostUrl,
             cloneUrl: cloneUrl.toString(),
             name: repo.full_name!,
+            imageUrl: repo.owner?.avatar_url,
             isFork: repo.fork!,
             isArchived: !!repo.archived,
             org: {

packages/backend/src/repoManager.ts

@@ -49,7 +49,7 @@ export class RepoManager implements IRepoManager {
             this.fetchAndScheduleRepoIndexing();
             this.garbageCollectRepo();
 
-            await new Promise(resolve => setTimeout(resolve, this.settings.reindexRepoPollingInternvalMs));
+            await new Promise(resolve => setTimeout(resolve, this.settings.reindexRepoPollingIntervalMs));
         }
     }
 

packages/backend/src/types.ts

@@ -77,7 +77,7 @@ export type Settings = {
     /**
      * The polling rate (in milliseconds) at which the db should be checked for repos that should be re-indexed.
      */
-    reindexRepoPollingInternvalMs: number;
+    reindexRepoPollingIntervalMs: number;
     /**
      * The multiple of the number of CPUs to use for indexing.
      */

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

@@ -23,6 +23,7 @@ export const RepoListItem = ({
             case RepoIndexingStatus.NEW:
                 return 'Waiting...';
             case RepoIndexingStatus.IN_INDEX_QUEUE:
+                return 'In index queue...';
             case RepoIndexingStatus.INDEXING:
                 return 'Indexing...';
             case RepoIndexingStatus.INDEXED:

packages/web/src/app/[domain]/connections/components/connectionList/index.tsx

@@ -1,47 +1,84 @@
+"use client";
+import { useDomain } from "@/hooks/useDomain";
 import { ConnectionListItem } from "./connectionListItem";
 import { cn } from "@/lib/utils";
+import { useEffect } from "react";
 import { InfoCircledIcon } from "@radix-ui/react-icons";
+import { useState } from "react";
 import { ConnectionSyncStatus } from "@sourcebot/db";
-
+import { getConnections } from "@/actions";
+import { isServiceError } from "@/lib/utils";
 
 interface ConnectionListProps {
-    connections: {
-        id: number,
-        name: string,
-        connectionType: string,
-        syncStatus: ConnectionSyncStatus,
-        updatedAt: Date,
-        syncedAt?: Date
-    }[];
     className?: string;
 }
 
 export const ConnectionList = ({
-    connections,
     className,
 }: ConnectionListProps) => {
+    const domain = useDomain();
+    const [connections, setConnections] = useState<{
+        id: number;
+        name: string;
+        connectionType: string;
+        syncStatus: ConnectionSyncStatus;
+        updatedAt: Date;
+        syncedAt?: Date;
+    }[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {   
+        const fetchConnections = async () => {
+            try {
+                const result = await getConnections(domain);
+                if (isServiceError(result)) {
+                    setError(result.message);
+                } else {
+                    setConnections(result);
+                }
+                setLoading(false);
+            } catch (err) {
+                setError(err instanceof Error ? err.message : 'An error occured while fetching connections. If the problem persists, please contact us at team@sourcebot.dev');
+                setLoading(false);
+            }
+        };
+
+        fetchConnections();
+        const intervalId = setInterval(fetchConnections, 1000);
+        return () => clearInterval(intervalId);
+    }, [domain]);
 
     return (
         <div className={cn("flex flex-col gap-4", className)}>
-            {connections.length > 0 ? connections
-                .sort((a, b) => b.updatedAt.getTime() - a.updatedAt.getTime())
-                .map((connection) => (
-                    <ConnectionListItem
-                        key={connection.id}
-                        id={connection.id.toString()}
-                        name={connection.name}
-                        type={connection.connectionType}
-                        status={connection.syncStatus}
-                        editedAt={connection.updatedAt}
-                        syncedAt={connection.syncedAt ?? undefined}
-                    />
-                ))
-                : (
-                    <div className="flex flex-col items-center justify-center border rounded-md p-4 h-full">
-                        <InfoCircledIcon className="w-7 h-7" />
-                        <h2 className="mt-2 font-medium">No connections</h2>
-                    </div>
-                )}
+            {loading ? (
+                <div className="flex flex-col items-center justify-center border rounded-md p-4 h-full">
+                    <p>Loading connections...</p>
+                </div>
+            ) : error ? (
+                <div className="flex flex-col items-center justify-center border rounded-md p-4 h-full">
+                    <p>Error loading connections: {error}</p>
+                </div>
+            ) : connections.length > 0 ? (
+                connections
+                    .sort((a, b) => b.updatedAt.getTime() - a.updatedAt.getTime())
+                    .map((connection) => (
+                        <ConnectionListItem
+                            key={connection.id}
+                            id={connection.id.toString()}
+                            name={connection.name}
+                            type={connection.connectionType}
+                            status={connection.syncStatus}
+                            editedAt={connection.updatedAt}
+                            syncedAt={connection.syncedAt ?? undefined}
+                        />
+                    ))
+            ) : (
+                <div className="flex flex-col items-center justify-center border rounded-md p-4 h-full">
+                    <InfoCircledIcon className="w-7 h-7" />
+                    <h2 className="mt-2 font-medium">No connections</h2>
+                </div>
+            )}
         </div>
     )
 }

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

@@ -18,7 +18,6 @@ export default async function ConnectionsPage({ params: { domain } }: { params:
             </Header>
             <div className="flex flex-col md:flex-row gap-4">
                 <ConnectionList
-                    connections={connections}
                     className="md:w-3/4"
                 />
                 <NewConnectionCard