konnosDashboard
GitHubStatus.tsx116 lines · main
1import { useParams } from 'common'
2import { AlertCircle, ArrowUpRight, CheckCircle2 } from 'lucide-react'
3import Image from 'next/image'
4import Link from 'next/link'
5import { HoverCard, HoverCardContent, HoverCardTrigger } from 'ui'
6
7import { useBranchesQuery } from '@/data/branches/branches-query'
8import { useGitHubConnectionsQuery } from '@/data/integrations/github-connections-query'
9import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
10import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
11import { BASE_PATH } from '@/lib/constants'
12
13export const GitHubStatus = () => {
14 const { ref: projectRef } = useParams()
15 const { data: selectedProject } = useSelectedProjectQuery()
16 const { data: selectedOrganization } = useSelectedOrganizationQuery()
17 const parentProjectRef = selectedProject?.parent_project_ref || projectRef
18
19 const { data: connections } = useGitHubConnectionsQuery(
20 { organizationId: selectedOrganization?.id },
21 { enabled: !!selectedOrganization?.id }
22 )
23
24 const { data: branches } = useBranchesQuery(
25 { projectRef: parentProjectRef },
26 { enabled: !!parentProjectRef }
27 )
28
29 const githubConnection = connections?.find(
30 (connection) => connection.project.ref === parentProjectRef
31 )
32 const mainBranch = branches?.find((branch) => branch.is_default)
33
34 const isConnected = Boolean(githubConnection)
35
36 const hasGitBranchSync = Boolean(mainBranch?.git_branch?.trim())
37 const hasAutomaticBranching = Boolean(githubConnection?.new_branch_per_pr)
38
39 return (
40 <HoverCard openDelay={300} closeDelay={100}>
41 <HoverCardTrigger asChild>
42 <Link
43 href={`/project/${parentProjectRef}/settings/integrations`}
44 className="block w-full transition truncate text-sm text-foreground-light hover:text-foreground"
45 >
46 <div className="w-full flex items-center justify-between">
47 <h3 className="text-sm">GitHub Integration</h3>
48 <ArrowUpRight strokeWidth={1} className="h-4 w-4" />
49 </div>
50 <p className="mt-0.5 text-xs text-foreground-lighter flex items-center gap-2">
51 {isConnected ? (
52 <>
53 <Image
54 className="dark:invert"
55 src={`${BASE_PATH}/img/icons/github-icon.svg`}
56 width={16}
57 height={16}
58 alt="GitHub"
59 />
60 {githubConnection?.repository.name}
61 </>
62 ) : (
63 'Not connected'
64 )}
65 </p>
66 </Link>
67 </HoverCardTrigger>
68
69 <HoverCardContent side="right" align="start" className="w-80 p-4 space-y-2">
70 <div className="flex items-center gap-2 text-sm">
71 <Image
72 className="dark:invert"
73 src={`${BASE_PATH}/img/icons/github-icon.svg`}
74 width={20}
75 height={20}
76 alt="GitHub"
77 />
78 <span className="truncate">
79 {isConnected ? githubConnection?.repository.name : 'Not connected'}
80 </span>
81 </div>
82
83 {isConnected ? (
84 <div className="flex flex-col gap-2 text-xs text-foreground-light">
85 <div className="flex items-center gap-2">
86 {hasGitBranchSync ? (
87 <CheckCircle2 size={12} className="text-brand-600" />
88 ) : (
89 <AlertCircle size={12} className="text-warning" />
90 )}
91 <span>
92 {hasGitBranchSync
93 ? `Syncing production (${mainBranch?.git_branch})`
94 : 'Production sync disabled'}
95 </span>
96 </div>
97 <div className="flex items-center gap-2">
98 {hasAutomaticBranching ? (
99 <CheckCircle2 size={12} className="text-brand-600" />
100 ) : (
101 <AlertCircle size={12} className="text-warning" />
102 )}
103 <span>
104 {hasAutomaticBranching
105 ? 'Automatically creating branches'
106 : 'Automatic branching disabled'}
107 </span>
108 </div>
109 </div>
110 ) : (
111 <p className="text-xs text-foreground-light">Not connected to any repository</p>
112 )}
113 </HoverCardContent>
114 </HoverCard>
115 )
116}