Skip to content

Commit b71a28b

Browse files
msukkarimsukkari
committed
fix repo failure UI extending past bounds
1 parent 290e28e commit b71a28b

File tree

2 files changed

+65
-39
lines changed

2 files changed

+65
-39
lines changed

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

Lines changed: 45 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { useQuery } from "@tanstack/react-query";
1111
import { ConnectionSyncStatus, RepoIndexingStatus } from "@sourcebot/db";
1212
import { getConnections } from "@/actions";
1313
import { getRepos } from "@/actions";
14+
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
1415

1516
export const ErrorNavIndicator = () => {
1617
const domain = useDomain();
@@ -62,18 +63,27 @@ export const ErrorNavIndicator = () => {
6263
The following connections have failed to sync:
6364
</p>
6465
<div className="flex flex-col gap-2">
65-
{connections
66-
.slice(0, 10)
67-
.map(connection => (
68-
<Link key={connection.name} href={`/${domain}/connections/${connection.id}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
69-
<div className="flex items-center gap-2 px-3 py-2 bg-red-50 dark:bg-red-900/20
70-
rounded-md text-sm text-red-700 dark:text-red-300
71-
border border-red-200/50 dark:border-red-800/50
72-
hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors">
73-
<span className="font-medium">{connection.name}</span>
74-
</div>
75-
</Link>
76-
))}
66+
<TooltipProvider>
67+
{connections
68+
.slice(0, 10)
69+
.map(connection => (
70+
<Link key={connection.name} href={`/${domain}/connections/${connection.id}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
71+
<div className="flex items-center gap-2 px-3 py-2 bg-red-50 dark:bg-red-900/20
72+
rounded-md text-sm text-red-700 dark:text-red-300
73+
border border-red-200/50 dark:border-red-800/50
74+
hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors">
75+
<Tooltip>
76+
<TooltipTrigger asChild>
77+
<span className="font-medium truncate max-w-[200px]">{connection.name}</span>
78+
</TooltipTrigger>
79+
<TooltipContent>
80+
{connection.name}
81+
</TooltipContent>
82+
</Tooltip>
83+
</div>
84+
</Link>
85+
))}
86+
</TooltipProvider>
7787
{connections.length > 10 && (
7888
<div className="text-sm text-red-600/90 dark:text-red-300/90 pl-3 pt-1">
7989
And {connections.length - 10} more...
@@ -93,23 +103,29 @@ export const ErrorNavIndicator = () => {
93103
The following repositories failed to index:
94104
</p>
95105
<div className="flex flex-col gap-2">
96-
{repos
97-
.slice(0, 10)
98-
.filter(item => item.linkedConnections.length > 0) // edge case: don't show repos that are orphaned and awaiting gc.
99-
.map(repo => (
100-
// Link to the first connection for the repo
101-
<Link key={repo.repoId} href={`/${domain}/connections/${repo.linkedConnections[0].id}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
102-
<div className="flex items-center justify-between px-3 py-2
103-
bg-red-50 dark:bg-red-900/20 rounded-md
104-
border border-red-200/50 dark:border-red-800/50
105-
hover:bg-red-100 dark:hover:bg-red-900/30
106-
transition-colors">
107-
<span className="text-sm font-medium text-red-700 dark:text-red-300">
108-
{repo.repoName}
109-
</span>
110-
</div>
111-
</Link>
112-
))}
106+
<TooltipProvider>
107+
{repos
108+
.slice(0, 10)
109+
.filter(item => item.linkedConnections.length > 0) // edge case: don't show repos that are orphaned and awaiting gc.
110+
.map(repo => (
111+
// Link to the first connection for the repo
112+
<Link key={repo.repoId} href={`/${domain}/connections/${repo.linkedConnections[0].id}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
113+
<div className="flex items-center gap-2 px-3 py-2 bg-red-50 dark:bg-red-900/20
114+
rounded-md text-sm text-red-700 dark:text-red-300
115+
border border-red-200/50 dark:border-red-800/50
116+
hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors">
117+
<Tooltip>
118+
<TooltipTrigger asChild>
119+
<span className="text-sm font-medium truncate max-w-[200px]">{repo.repoName}</span>
120+
</TooltipTrigger>
121+
<TooltipContent>
122+
{repo.repoName}
123+
</TooltipContent>
124+
</Tooltip>
125+
</div>
126+
</Link>
127+
))}
128+
</TooltipProvider>
113129
{repos.length > 10 && (
114130
<div className="text-sm text-red-600/90 dark:text-red-300/90 pl-3 pt-1">
115131
And {repos.length - 10} more...

‎packages/web/src/app/[domain]/components/warningNavIndicator.tsx‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import useCaptureEvent from "@/hooks/useCaptureEvent";
1010
import { env } from "@/env.mjs";
1111
import { useQuery } from "@tanstack/react-query";
1212
import { ConnectionSyncStatus } from "@prisma/client";
13+
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
1314

1415
export const WarningNavIndicator = () => {
1516
const domain = useDomain();
@@ -45,16 +46,25 @@ export const WarningNavIndicator = () => {
4546
The following connections have references that could not be found:
4647
</p>
4748
<div className="flex flex-col gap-2 pl-4">
48-
{connections.slice(0, 10).map(connection => (
49-
<Link key={connection.name} href={`/${domain}/connections/${connection.id}`} onClick={() => captureEvent('wa_warning_nav_connection_pressed', {})}>
50-
<div className="flex items-center gap-2 px-3 py-2 bg-yellow-50 dark:bg-yellow-900/20
51-
rounded-md text-sm text-yellow-700 dark:text-yellow-300
52-
border border-yellow-200/50 dark:border-yellow-800/50
53-
hover:bg-yellow-100 dark:hover:bg-yellow-900/30 transition-colors">
54-
<span className="font-medium">{connection.name}</span>
55-
</div>
56-
</Link>
57-
))}
49+
<TooltipProvider>
50+
{connections.slice(0, 10).map(connection => (
51+
<Link key={connection.name} href={`/${domain}/connections/${connection.id}`} onClick={() => captureEvent('wa_warning_nav_connection_pressed', {})}>
52+
<div className="flex items-center gap-2 px-3 py-2 bg-yellow-50 dark:bg-yellow-900/20
53+
rounded-md text-sm text-yellow-700 dark:text-yellow-300
54+
border border-yellow-200/50 dark:border-yellow-800/50
55+
hover:bg-yellow-100 dark:hover:bg-yellow-900/30 transition-colors">
56+
<Tooltip>
57+
<TooltipTrigger asChild>
58+
<span className="font-medium truncate max-w-[200px]">{connection.name}</span>
59+
</TooltipTrigger>
60+
<TooltipContent>
61+
{connection.name}
62+
</TooltipContent>
63+
</Tooltip>
64+
</div>
65+
</Link>
66+
))}
67+
</TooltipProvider>
5868
{connections.length > 10 && (
5969
<div className="text-sm text-yellow-600/90 dark:text-yellow-300/90 pl-3 pt-1">
6070
And {connections.length - 10} more...

0 commit comments

Comments
 (0)