@@ -7,104 +7,61 @@ import {
77 BreadcrumbPage ,
88 BreadcrumbSeparator ,
99} from "@/components/ui/breadcrumb"
10- import { TabSwitcher } from "@/components/ui/tab-switcher"
11- import { Tabs , TabsContent } from "@/components/ui/tabs"
1210import { ConnectionIcon } from "../components/connectionIcon"
1311import { Header } from "../../components/header"
14- import { ConfigSetting } from "./components/configSetting"
15- import { DeleteConnectionSetting } from "./components/deleteConnectionSetting"
16- import { DisplayNameSetting } from "./components/displayNameSetting"
1712import { RepoList } from "./components/repoList"
1813import { getConnectionByDomain } from "@/data/connection"
1914import { Overview } from "./components/overview"
20- import { getOrgMembership } from "@/actions"
21- import { isServiceError } from "@/lib/utils"
22- import { notFound } from "next/navigation"
23- import { OrgRole } from "@sourcebot/db"
24- import { CodeHostType } from "@/lib/utils"
25- import { env } from "@/env.mjs"
2615
2716interface ConnectionManagementPageProps {
2817 params : Promise < {
2918 domain : string
3019 id : string
3120 } > ,
32- searchParams : Promise < {
33- tab : string
34- } >
3521}
3622
3723export default async function ConnectionManagementPage ( props : ConnectionManagementPageProps ) {
38- const searchParams = await props . searchParams ;
3924 const params = await props . params ;
4025 const connection = await getConnectionByDomain ( Number ( params . id ) , params . domain ) ;
4126 if ( ! connection ) {
4227 return < NotFound className = "flex w-full h-full items-center justify-center" message = "Connection not found" />
4328 }
4429
45- const membership = await getOrgMembership ( params . domain ) ;
46- if ( isServiceError ( membership ) ) {
47- return notFound ( ) ;
48- }
49-
50- const isOwner = membership . role === OrgRole . OWNER ;
51- const isDisabled = ! isOwner || env . CONFIG_PATH !== undefined ;
52- const currentTab = searchParams . tab || "overview" ;
53-
5430 return (
55- < Tabs value = { currentTab } className = "w-full" >
56- < Header className = "mb-6" withTopMargin = { false } >
57- < Breadcrumb >
58- < BreadcrumbList >
59- < BreadcrumbItem >
60- < BreadcrumbLink href = { `/${ params . domain } /connections` } > Connections</ BreadcrumbLink >
61- </ BreadcrumbItem >
62- < BreadcrumbSeparator />
63- < BreadcrumbItem >
64- < BreadcrumbPage > { connection . name } </ BreadcrumbPage >
65- </ BreadcrumbItem >
66- </ BreadcrumbList >
67- </ Breadcrumb >
68- < div className = "mt-6 flex flex-row items-center gap-4 w-full" >
69- < ConnectionIcon type = { connection . connectionType } />
70- < h1 className = "text-lg font-semibold" > { connection . name } </ h1 >
71- </ div >
72- < TabSwitcher
73- className = "h-auto p-0 bg-transparent border-b border-border mt-6"
74- tabs = { [
75- { label : "Overview" , value : "overview" } ,
76- { label : "Settings" , value : "settings" } ,
77- ] }
78- currentTab = { currentTab }
79- />
80- </ Header >
81- < TabsContent
82- value = "overview"
83- className = "space-y-8"
84- >
85- < div >
86- < h1 className = "font-semibold text-lg mb-4" > Overview</ h1 >
87- < Overview connectionId = { connection . id } />
31+ < div className = "min-h-screen bg-background" >
32+ < div className = "max-w-7xl mx-auto px-6 py-8" >
33+ < div className = "mb-8" >
34+ < Breadcrumb className = "mb-6" >
35+ < BreadcrumbList >
36+ < BreadcrumbItem >
37+ < BreadcrumbLink href = { `/${ params . domain } /connections` } > Connections</ BreadcrumbLink >
38+ </ BreadcrumbItem >
39+ < BreadcrumbSeparator />
40+ < BreadcrumbItem >
41+ < BreadcrumbPage > { connection . name } </ BreadcrumbPage >
42+ </ BreadcrumbItem >
43+ </ BreadcrumbList >
44+ </ Breadcrumb >
45+ < div className = "flex items-center gap-3" >
46+ < ConnectionIcon type = { connection . connectionType } />
47+ < h1 className = "text-2xl font-semibold text-foreground" > { connection . name } </ h1 >
48+ </ div >
8849 </ div >
50+
51+ < div className = "border-t border-border/40 pt-8" >
52+ < div className = "space-y-12" >
53+ < div >
54+ < h2 className = "text-lg font-medium text-foreground mb-6" > Overview</ h2 >
55+ < Overview connectionId = { connection . id } />
56+ </ div >
8957
90- < div >
91- < h1 className = "font-semibold text-lg mb-4" > Linked Repositories</ h1 >
92- < RepoList connectionId = { connection . id } />
58+ < div >
59+ < h2 className = "text-lg font-medium text-foreground mb-6" > Linked Repositories</ h2 >
60+ < RepoList connectionId = { connection . id } />
61+ </ div >
62+ </ div >
9363 </ div >
94- </ TabsContent >
95- < TabsContent
96- value = "settings"
97- className = "flex flex-col gap-6"
98- >
99- < DisplayNameSetting connectionId = { connection . id } name = { connection . name } disabled = { isDisabled } />
100- < ConfigSetting
101- connectionId = { connection . id }
102- type = { connection . connectionType as CodeHostType }
103- config = { JSON . stringify ( connection . config , null , 2 ) }
104- disabled = { isDisabled }
105- />
106- < DeleteConnectionSetting connectionId = { connection . id } disabled = { isDisabled } />
107- </ TabsContent >
108- </ Tabs >
64+ </ div >
65+ </ div >
10966 )
11067}
0 commit comments