konnosDashboard
TopSection.tsx95 lines · main
1import { ReactFlowProvider } from '@xyflow/react'
2import Link from 'next/link'
3import { Badge, cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
4
5import { InstanceConfiguration } from '../Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration'
6import { ActivityStats } from '@/components/interfaces/ProjectHome/ActivityStats'
7import { ProjectConnectionPopover } from '@/components/interfaces/ProjectHome/ProjectConnectionPopover'
8import { ProjectPausedState } from '@/components/layouts/ProjectLayout/PausedState/ProjectPausedState'
9import { InlineLink } from '@/components/ui/InlineLink'
10import { ProjectUpgradeFailedBanner } from '@/components/ui/ProjectUpgradeFailedBanner'
11import { useBranchesQuery } from '@/data/branches/branches-query'
12import { useProjectDetailQuery } from '@/data/projects/project-detail-query'
13import { useIsOrioleDb, useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
14import { DOCS_URL, PROJECT_STATUS } from '@/lib/constants'
15
16export const TopSection = () => {
17 const isOrioleDb = useIsOrioleDb()
18 const { data: project } = useSelectedProjectQuery()
19 const { data: parentProject } = useProjectDetailQuery({ ref: project?.parent_project_ref })
20
21 const { data: branches } = useBranchesQuery({
22 projectRef: project?.parent_project_ref ?? project?.ref,
23 })
24
25 const mainBranch = branches?.find((branch) => branch.is_default)
26 const currentBranch = branches?.find((branch) => branch.project_ref === project?.ref)
27 const isMainBranch = currentBranch?.name === mainBranch?.name
28
29 const isPaused = project?.status === PROJECT_STATUS.INACTIVE
30 const projectName =
31 currentBranch && !isMainBranch
32 ? currentBranch.name
33 : project?.name
34 ? project.name
35 : 'Welcome to your project'
36
37 if (isPaused) {
38 return <ProjectPausedState />
39 }
40
41 return (
42 <div className="flex flex-col gap-y-4">
43 <div className="grid grid-cols-1 md:grid-cols-2 gap-8 py-0 w-full items-center">
44 <div className="flex flex-col">
45 <div className="flex flex-row flex-wrap items-center gap-4 w-full">
46 <div>
47 {!isMainBranch && (
48 <Link
49 href={`/project/${parentProject?.ref}`}
50 className="text-sm text-foreground-light"
51 >
52 {parentProject?.name}
53 </Link>
54 )}
55 <div className="flex items-center gap-x-2">
56 <h1 className="text-3xl">{projectName}</h1>
57 {isOrioleDb && (
58 <Tooltip>
59 <TooltipTrigger asChild>
60 <Badge variant="warning">OrioleDB</Badge>
61 </TooltipTrigger>
62 <TooltipContent side="bottom" align="start" className="max-w-80 text-center">
63 This project is using Postgres with OrioleDB which is currently in preview and
64 not suitable for production workloads. View our{' '}
65 <InlineLink href={`${DOCS_URL}/guides/database/orioledb`}>
66 documentation
67 </InlineLink>{' '}
68 for all limitations.
69 </TooltipContent>
70 </Tooltip>
71 )}
72 </div>
73 <ProjectConnectionPopover projectRef={project?.ref} />
74 </div>
75 </div>
76 <div className="mt-8">
77 <ActivityStats />
78 </div>
79 </div>
80 <div>
81 <div
82 className={cn(
83 'w-full h-[400px] md:h-[500px] border border-muted rounded-md overflow-hidden flex flex-col relative'
84 )}
85 >
86 <ReactFlowProvider>
87 <InstanceConfiguration diagramOnly />
88 </ReactFlowProvider>
89 </div>
90 </div>
91 </div>
92 <ProjectUpgradeFailedBanner />
93 </div>
94 )
95}