Add banner to repos table calling out connections

Author: brendan-kellam

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

@@ -102,7 +102,7 @@ export default async function RepoDetailPage({ params }: { params: Promise<{ id:
                         </CardTitle>
                     </CardHeader>
                     <CardContent>
-                        <DisplayDate date={repo.createdAt} className="text-2xl font-semibold" />
+                        <span className="text-2xl font-semibold"><DisplayDate date={repo.createdAt} /></span>
                     </CardContent>
                 </Card>
 
@@ -121,7 +121,7 @@ export default async function RepoDetailPage({ params }: { params: Promise<{ id:
                         </CardTitle>
                     </CardHeader>
                     <CardContent>
-                        {repo.indexedAt ? <DisplayDate date={repo.indexedAt} className="text-2xl font-semibold" /> : "Never"}
+                        <span className="text-2xl font-semibold">{repo.indexedAt ? <DisplayDate date={repo.indexedAt} /> : "Never"}</span>
                     </CardContent>
                 </Card>
 
@@ -140,7 +140,7 @@ export default async function RepoDetailPage({ params }: { params: Promise<{ id:
                         </CardTitle>
                     </CardHeader>
                     <CardContent>
-                        {nextIndexAttempt ? <DisplayDate date={nextIndexAttempt} className="text-2xl font-semibold" /> : "-"}
+                        <span className="text-2xl font-semibold">{nextIndexAttempt ? <DisplayDate date={nextIndexAttempt} /> : "-"}</span>
                     </CardContent>
                 </Card>
             </div>

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

@@ -1,4 +1,11 @@
+import { InfoIcon } from "lucide-react";
 import { NavigationMenu } from "../components/navigationMenu";
+import { SINGLE_TENANT_ORG_DOMAIN } from "@/lib/constants";
+import Link from "next/link";
+import { getCurrentUserRole, getReposStats } from "@/actions";
+import { isServiceError } from "@/lib/utils";
+import { ServiceErrorException } from "@/lib/serviceError";
+import { OrgRole } from "@sourcebot/db";
 
 interface LayoutProps {
     children: React.ReactNode;
@@ -12,9 +19,22 @@ export default async function Layout(
     const { domain } = params;
     const { children } = props;
 
+    const repoStats = await getReposStats();
+    if (isServiceError(repoStats)) {
+        throw new ServiceErrorException(repoStats);
+    }
+
+    const userRoleInOrg = await getCurrentUserRole(domain);
+
     return (
         <div className="min-h-screen flex flex-col">
             <NavigationMenu domain={domain} />
+            {(repoStats.numberOfRepos === 0 && userRoleInOrg === OrgRole.OWNER) && (
+                <div className="w-full flex flex-row justify-center items-center bg-accent py-0.5">
+                    <InfoIcon className="w-4 h-4 mr-1" />
+                    <span><span className="font-medium">No repositories configured.</span> Create a <Link href={`/${SINGLE_TENANT_ORG_DOMAIN}/settings/connections`} className="text-link hover:underline">connection</Link> to get started.</span>
+                </div>
+            )}
             <main className="flex-grow flex justify-center p-4 bg-backgroundSecondary relative">
                 <div className="w-full max-w-6xl rounded-lg p-6">
                     <div className="container mx-auto">

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

@@ -121,7 +121,7 @@ export default async function ConnectionDetailPage(props: ConnectionDetailPagePr
                         </CardTitle>
                     </CardHeader>
                     <CardContent>
-                        <DisplayDate date={connection.createdAt} className="text-2xl font-semibold" />
+                        <span className="text-2xl font-semibold"><DisplayDate date={connection.createdAt} /></span>
                     </CardContent>
                 </Card>
 
@@ -159,7 +159,7 @@ export default async function ConnectionDetailPage(props: ConnectionDetailPagePr
                         </CardTitle>
                     </CardHeader>
                     <CardContent>
-                        {nextSyncAttempt ? <DisplayDate date={nextSyncAttempt} className="text-2xl font-semibold" /> : "-"}
+                        <span className="text-2xl font-semibold">{nextSyncAttempt ? <DisplayDate date={nextSyncAttempt} /> : "-"}</span>
                     </CardContent>
                 </Card>
             </div>

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

@@ -88,6 +88,7 @@ export const columns: ColumnDef<Connection>[] = [
                     <Image
                         src={codeHostIcon.src}
                         alt={`${connection.codeHostType} logo`}
+                        className={codeHostIcon.className}
                         width={20}
                         height={20}
                     />