@@ -11,6 +11,7 @@ import { useQuery } from "@tanstack/react-query";
11
11
import { ConnectionSyncStatus , RepoIndexingStatus } from "@sourcebot/db" ;
12
12
import { getConnections } from "@/actions" ;
13
13
import { getRepos } from "@/actions" ;
14
+ import { Tooltip , TooltipContent , TooltipProvider , TooltipTrigger } from "@/components/ui/tooltip" ;
14
15
15
16
export const ErrorNavIndicator = ( ) => {
16
17
const domain = useDomain ( ) ;
@@ -62,18 +63,27 @@ export const ErrorNavIndicator = () => {
62
63
The following connections have failed to sync:
63
64
</ p >
64
65
< 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 >
77
87
{ connections . length > 10 && (
78
88
< div className = "text-sm text-red-600/90 dark:text-red-300/90 pl-3 pt-1" >
79
89
And { connections . length - 10 } more...
@@ -93,23 +103,29 @@ export const ErrorNavIndicator = () => {
93
103
The following repositories failed to index:
94
104
</ p >
95
105
< 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 >
113
129
{ repos . length > 10 && (
114
130
< div className = "text-sm text-red-600/90 dark:text-red-300/90 pl-3 pt-1" >
115
131
And { repos . length - 10 } more...
0 commit comments