konnosDashboard
GithubSection.tsx72 lines · main
1// @ts-nocheck
2import { PermissionAction } from '@supabase/shared-types/out/constants'
3import { useParams } from 'common'
4import { useMemo } from 'react'
5import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
6
7import { IntegrationImageHandler } from '../IntegrationsSettings'
8import { GitHubIntegrationConnectionForm } from './GitHubIntegrationConnectionForm'
9import {
10 ScaffoldContainer,
11 ScaffoldSection,
12 ScaffoldSectionContent,
13 ScaffoldSectionDetail,
14} from '@/components/layouts/Scaffold'
15import NoPermission from '@/components/ui/NoPermission'
16import { useGitHubConnectionsQuery } from '@/data/integrations/github-connections-query'
17import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
18import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
19
20export const GitHubSection = () => {
21 const { ref: projectRef } = useParams()
22 const { data: organization } = useSelectedOrganizationQuery()
23
24 const { can: canReadGitHubConnection, isLoading: isLoadingPermissions } =
25 useAsyncCheckPermissions(PermissionAction.READ, 'integrations.github_connections')
26
27 const { data: connections } = useGitHubConnectionsQuery(
28 { organizationId: organization?.id },
29 { enabled: !!projectRef && !!organization?.id }
30 )
31
32 const existingConnection = useMemo(
33 () => connections?.find((c) => c.project.ref === projectRef),
34 [connections, projectRef]
35 )
36
37 const GitHubTitle = `GitHub Integration`
38
39 return (
40 <ScaffoldContainer>
41 <ScaffoldSection className="py-12">
42 <ScaffoldSectionDetail title={GitHubTitle}>
43 <p>Connect any of your GitHub repositories to a project.</p>
44 <IntegrationImageHandler title="github" />
45 </ScaffoldSectionDetail>
46 <ScaffoldSectionContent>
47 {isLoadingPermissions ? (
48 <GenericSkeletonLoader />
49 ) : !canReadGitHubConnection ? (
50 <NoPermission resourceText="view this organization's GitHub connections" />
51 ) : (
52 <div className="space-y-6">
53 <div className="space-y-1">
54 <h3 className="text-sm font-medium text-foreground">
55 How does the GitHub integration work?
56 </h3>
57 <p className="text-sm text-foreground-light">
58 Connecting to GitHub allows you to sync preview branches with a chosen GitHub
59 branch, keep your production branch in sync, and automatically create preview
60 branches for every pull request.
61 </p>
62 </div>
63 <div>
64 <GitHubIntegrationConnectionForm connection={existingConnection} />
65 </div>
66 </div>
67 )}
68 </ScaffoldSectionContent>
69 </ScaffoldSection>
70 </ScaffoldContainer>
71 )
72}