konnosDashboard
BranchDropdown.tsx113 lines · main
1import { useParams } from 'common'
2import { useState } from 'react'
3import { ShimmeringLoader } from 'ui-patterns'
4
5import { AppLayoutDropdownError, AppLayoutDropdownWithPopover } from './AppLayoutDropdown'
6import { BranchBadge } from './BranchBadge'
7import { BranchDropdownCommandContent } from './BranchDropdownCommandContent'
8import { useEmbeddedCloseHandler } from './useEmbeddedCloseHandler'
9import { useBranchesQuery } from '@/data/branches/branches-query'
10import type { Branch } from '@/data/branches/branches-query'
11import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
12import { useTrack } from '@/lib/telemetry/track'
13import { useAppStateSnapshot } from '@/state/app-state'
14
15interface BranchDropdownProps {
16 embedded?: boolean
17 className?: string
18 onClose?: () => void
19}
20
21export const BranchDropdown = ({
22 embedded = false,
23 className,
24 onClose,
25}: BranchDropdownProps = {}) => {
26 const { ref } = useParams()
27 const snap = useAppStateSnapshot()
28 const { data: projectDetails } = useSelectedProjectQuery()
29
30 const [open, setOpen] = useState(false)
31 const close = useEmbeddedCloseHandler(embedded, onClose, setOpen)
32 const track = useTrack()
33
34 const handleOpenChange = (next: boolean) => {
35 if (next) track('header_branch_dropdown_opened')
36 setOpen(next)
37 }
38
39 const projectRef = projectDetails?.parent_project_ref || ref
40
41 const {
42 data: branches,
43 isPending: isLoading,
44 isError,
45 isSuccess,
46 } = useBranchesQuery({ projectRef }, { enabled: Boolean(projectDetails) })
47
48 const isBranchingEnabled = projectDetails?.is_branch_enabled === true
49 const selectedBranch = branches?.find((branch) => branch.project_ref === ref)
50
51 const defaultMainBranch = {
52 id: 'main',
53 name: 'main',
54 project_ref: projectRef ?? ref ?? '',
55 is_default: true,
56 } as unknown as Branch
57
58 const mainBranch = branches?.find((branch) => branch.is_default)
59 const restOfBranches = branches
60 ?.filter((branch) => !branch.is_default)
61 ?.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
62
63 const sortedBranches =
64 branches && branches.length > 0
65 ? mainBranch
66 ? [mainBranch].concat(restOfBranches ?? [])
67 : (restOfBranches ?? [])
68 : [defaultMainBranch]
69 const branchList = isBranchingEnabled ? (sortedBranches ?? []) : [defaultMainBranch]
70
71 const commandContent = (
72 <BranchDropdownCommandContent
73 embedded={embedded}
74 className={className}
75 branchList={branchList}
76 selectedBranch={selectedBranch}
77 branchesCount={branches?.length ?? 0}
78 isBranchingEnabled={isBranchingEnabled}
79 projectRef={ref}
80 onClose={close}
81 onCreateBranch={() => snap.setShowCreateBranchModal(true)}
82 />
83 )
84
85 if (isLoading) return <ShimmeringLoader className="p-2 md:w-[90px]" />
86
87 if (isError) return <AppLayoutDropdownError message="Failed to load branches" />
88
89 if (!isSuccess) return null
90
91 if (embedded) return commandContent
92
93 return (
94 <AppLayoutDropdownWithPopover
95 linkHref={`/project/${ref}`}
96 linkContent={
97 <>
98 <span
99 title={isBranchingEnabled ? selectedBranch?.name : 'main'}
100 className="text-sm text-foreground max-w-32 lg:max-w-64 truncate"
101 >
102 {isBranchingEnabled ? selectedBranch?.name : 'main'}
103 </span>
104 <BranchBadge branch={selectedBranch} isBranchingEnabled={isBranchingEnabled} />
105 </>
106 }
107 linkClassName="flex items-center gap-2 shrink-0"
108 commandContent={commandContent}
109 open={open}
110 onOpenChange={handleOpenChange}
111 />
112 )
113}