Fix repos table image for repositories that don't have a image

This commit is contained in:
bkellam 2025-10-29 13:35:28 -07:00
parent bc592addad
commit ecadb9629e

View file

@ -14,7 +14,7 @@ import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { SINGLE_TENANT_ORG_DOMAIN } from "@/lib/constants" import { SINGLE_TENANT_ORG_DOMAIN } from "@/lib/constants"
import { CodeHostType, getCodeHostCommitUrl, getCodeHostInfoForRepo, getRepoImageSrc } from "@/lib/utils" import { cn, CodeHostType, getCodeHostCommitUrl, getCodeHostIcon, getCodeHostInfoForRepo, getRepoImageSrc } from "@/lib/utils"
import { import {
type ColumnDef, type ColumnDef,
type ColumnFiltersState, type ColumnFiltersState,
@ -96,22 +96,29 @@ export const columns: ColumnDef<Repo>[] = [
) )
}, },
cell: ({ row }) => { cell: ({ row }) => {
const repo = row.original const repo = row.original;
const codeHostIcon = getCodeHostIcon(repo.codeHostType as CodeHostType);
const repoImageSrc = repo.imageUrl ? getRepoImageSrc(repo.imageUrl, repo.id) : undefined;
return ( return (
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
{repo.imageUrl ? ( {
repoImageSrc ? (
<Image <Image
src={getRepoImageSrc(repo.imageUrl, repo.id) || "/placeholder.svg"} src={repoImageSrc}
alt={`${repo.displayName} logo`} alt={`${repo.displayName} logo`}
width={32} width={32}
height={32} height={32}
className="object-cover" className="object-cover"
/> />
) : ( ) : <Image
<div className="flex h-full w-full items-center justify-center bg-muted text-xs font-medium uppercase text-muted-foreground"> src={codeHostIcon.src}
{repo.displayName?.charAt(0) ?? repo.name.charAt(0)} alt={`${repo.displayName} logo`}
</div> width={32}
)} height={32}
className={cn(codeHostIcon.className)}
/>
}
{/* Link to the details page (instead of browse) when the repo is indexing {/* Link to the details page (instead of browse) when the repo is indexing
as the code will not be available yet */} as the code will not be available yet */}
@ -124,7 +131,7 @@ export const columns: ColumnDef<Repo>[] = [
})} })}
className="font-medium hover:underline" className="font-medium hover:underline"
> >
{repo.displayName || repo.name} <span>{repo.displayName || repo.name}</span>
</Link> </Link>
{repo.isFirstTimeIndex && ( {repo.isFirstTimeIndex && (
<Tooltip> <Tooltip>