ti.sil/sourcebot
1
0
Fork 0
mirror of https://github.com/sourcebot-dev/sourcebot.git synced 2025-12-11 20:05:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

fix repo failure UI extending past bounds

Browse source
This commit is contained in:
msukkari 2025-05-22 13:36:20 -07:00
parent 290e28ee75
commit b71a28b392
2 changed files with 65 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -11,6 +11,7 @@ import { useQuery } from "@tanstack/react-query";
import { ConnectionSyncStatus, RepoIndexingStatus } from "@sourcebot/db";
import { getConnections } from "@/actions";
import { getRepos } from "@/actions";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
export const ErrorNavIndicator = () => {
const domain = useDomain();
@ -62,18 +63,27 @@ export const ErrorNavIndicator = () => {
The following connections have failed to sync:
</p>
<div className="flex flex-col gap-2">
{connections
.slice(0, 10)
.map(connection => (
<Link key={connection.name} href={`/${domain}/connections/${connection.id}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
<div className="flex items-center gap-2 px-3 py-2 bg-red-50 dark:bg-red-900/20
rounded-md text-sm text-red-700 dark:text-red-300
border border-red-200/50 dark:border-red-800/50
hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors">
<span className="font-medium">{connection.name}</span>
</div>
</Link>
))}
<TooltipProvider>
{connections
.slice(0, 10)
.map(connection => (
<Link key={connection.name} href={`/${domain}/connections/${connection.id}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
<div className="flex items-center gap-2 px-3 py-2 bg-red-50 dark:bg-red-900/20
rounded-md text-sm text-red-700 dark:text-red-300
border border-red-200/50 dark:border-red-800/50
hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors">
<Tooltip>
<TooltipTrigger asChild>
<span className="font-medium truncate max-w-[200px]">{connection.name}</span>
</TooltipTrigger>
<TooltipContent>
{connection.name}
</TooltipContent>
</Tooltip>
</div>
</Link>
))}
</TooltipProvider>
{connections.length > 10 && (
<div className="text-sm text-red-600/90 dark:text-red-300/90 pl-3 pt-1">
And {connections.length - 10} more...
@ -93,23 +103,29 @@ export const ErrorNavIndicator = () => {
The following repositories failed to index:
</p>
<div className="flex flex-col gap-2">
{repos
.slice(0, 10)
.filter(item => item.linkedConnections.length > 0) // edge case: don't show repos that are orphaned and awaiting gc.
.map(repo => (
// Link to the first connection for the repo
<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
hover:bg-red-100 dark:hover:bg-red-900/30
transition-colors">
<span className="text-sm font-medium text-red-700 dark:text-red-300">
{repo.repoName}
</span>
</div>
</Link>
))}
<TooltipProvider>
{repos
.slice(0, 10)
.filter(item => item.linkedConnections.length > 0) // edge case: don't show repos that are orphaned and awaiting gc.
.map(repo => (
// Link to the first connection for the repo
<Link key={repo.repoId} href={`/${domain}/connections/${repo.linkedConnections[0].id}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
<div className="flex items-center gap-2 px-3 py-2 bg-red-50 dark:bg-red-900/20
rounded-md text-sm text-red-700 dark:text-red-300
border border-red-200/50 dark:border-red-800/50
hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors">
<Tooltip>
<TooltipTrigger asChild>
<span className="text-sm font-medium truncate max-w-[200px]">{repo.repoName}</span>
</TooltipTrigger>
<TooltipContent>
{repo.repoName}
</TooltipContent>
</Tooltip>
</div>
</Link>
))}
</TooltipProvider>
{repos.length > 10 && (
<div className="text-sm text-red-600/90 dark:text-red-300/90 pl-3 pt-1">
And {repos.length - 10} more...

30
packages/web/src/app/[domain]/components/warningNavIndicator.tsx
View file

@ -10,6 +10,7 @@ import useCaptureEvent from "@/hooks/useCaptureEvent";
import { env } from "@/env.mjs";
import { useQuery } from "@tanstack/react-query";
import { ConnectionSyncStatus } from "@prisma/client";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
export const WarningNavIndicator = () => {
const domain = useDomain();
@ -45,16 +46,25 @@ export const WarningNavIndicator = () => {
The following connections have references that could not be found:
</p>
<div className="flex flex-col gap-2 pl-4">
{connections.slice(0, 10).map(connection => (
<Link key={connection.name} href={`/${domain}/connections/${connection.id}`} onClick={() => captureEvent('wa_warning_nav_connection_pressed', {})}>
<div className="flex items-center gap-2 px-3 py-2 bg-yellow-50 dark:bg-yellow-900/20
rounded-md text-sm text-yellow-700 dark:text-yellow-300
border border-yellow-200/50 dark:border-yellow-800/50
hover:bg-yellow-100 dark:hover:bg-yellow-900/30 transition-colors">
<span className="font-medium">{connection.name}</span>
</div>
</Link>
))}
<TooltipProvider>
{connections.slice(0, 10).map(connection => (
<Link key={connection.name} href={`/${domain}/connections/${connection.id}`} onClick={() => captureEvent('wa_warning_nav_connection_pressed', {})}>
<div className="flex items-center gap-2 px-3 py-2 bg-yellow-50 dark:bg-yellow-900/20
rounded-md text-sm text-yellow-700 dark:text-yellow-300
border border-yellow-200/50 dark:border-yellow-800/50
hover:bg-yellow-100 dark:hover:bg-yellow-900/30 transition-colors">
<Tooltip>
<TooltipTrigger asChild>
<span className="font-medium truncate max-w-[200px]">{connection.name}</span>
</TooltipTrigger>
<TooltipContent>
{connection.name}
</TooltipContent>
</Tooltip>
</div>
</Link>
))}
</TooltipProvider>
{connections.length > 10 && (
<div className="text-sm text-yellow-600/90 dark:text-yellow-300/90 pl-3 pt-1">
And {connections.length - 10} more...