konnosDashboard
BranchDropdownCommandContent.tsx198 lines · main
1import { ListTree, MessageCircle, Plus } from 'lucide-react'
2import Link from 'next/link'
3import {
4 Button,
5 cn,
6 Command,
7 CommandEmpty,
8 CommandGroup,
9 CommandInput,
10 CommandItem,
11 CommandList,
12 CommandSeparator,
13 ScrollArea,
14} from 'ui'
15
16import { BranchLink } from './BranchLink'
17import type { Branch } from '@/data/branches/branches-query'
18import { useTrack } from '@/lib/telemetry/track'
19
20const BRANCHING_GITHUB_DISCUSSION_LINK = 'https://github.com/orgs/briven/discussions/18937'
21
22export interface BranchDropdownCommandContentProps {
23 embedded: boolean
24 className?: string
25 branchList: Branch[]
26 selectedBranch: Branch | undefined
27 branchesCount: number
28 isBranchingEnabled: boolean
29 projectRef: string | undefined
30 onClose: () => void
31 onCreateBranch: () => void
32}
33
34export function BranchDropdownCommandContent({
35 embedded,
36 className,
37 branchList,
38 selectedBranch,
39 branchesCount,
40 isBranchingEnabled,
41 projectRef,
42 onClose,
43 onCreateBranch,
44}: BranchDropdownCommandContentProps) {
45 const track = useTrack()
46
47 if (embedded) {
48 return (
49 <Command className={cn(className, 'flex flex-col flex-1 min-h-0 overflow-hidden')}>
50 <div className="grid grid-cols-2 gap-2 shrink-0 p-2 border-b">
51 <Button
52 type="text"
53 size="small"
54 asChild
55 block
56 icon={<ListTree size={14} strokeWidth={1.5} />}
57 >
58 <Link
59 href={`/project/${projectRef}/branches`}
60 className="text-xs text-foreground-light hover:text-foreground"
61 onClick={onClose}
62 >
63 Manage branches
64 </Link>
65 </Button>
66 <Button
67 type="text"
68 size="small"
69 asChild
70 block
71 icon={<MessageCircle size={14} strokeWidth={1.5} />}
72 >
73 <a
74 target="_blank"
75 rel="noreferrer noopener"
76 href={BRANCHING_GITHUB_DISCUSSION_LINK}
77 onClick={onClose}
78 className="text-xs text-foreground-light hover:text-foreground"
79 >
80 Branching feedback
81 </a>
82 </Button>
83 <Button
84 type="default"
85 size="small"
86 block
87 className="col-span-full text-xs text-foreground-light hover:text-foreground"
88 onClick={() => {
89 track('branch_selector_create_clicked')
90 onClose()
91 onCreateBranch()
92 }}
93 icon={<Plus size={14} strokeWidth={1.5} />}
94 >
95 Create branch
96 </Button>
97 </div>
98 {isBranchingEnabled && (
99 <CommandInput placeholder="Find branch..." wrapperClassName="shrink-0 border-b" />
100 )}
101 <CommandList className="flex flex-col flex-1 p-1 min-h-0 overflow-y-auto max-h-none!">
102 {isBranchingEnabled && <CommandEmpty>No branches found</CommandEmpty>}
103 <CommandGroup className="min-h-0">
104 {branchList.map((branch) => (
105 <BranchLink
106 key={branch.id}
107 branch={branch}
108 isSelected={branch.id === selectedBranch?.id || branchesCount === 0}
109 onClose={onClose}
110 />
111 ))}
112 </CommandGroup>
113 </CommandList>
114 </Command>
115 )
116 }
117
118 return (
119 <Command className={className}>
120 {isBranchingEnabled && <CommandInput placeholder="Find branch..." />}
121 <CommandList>
122 {isBranchingEnabled && <CommandEmpty>No branches found</CommandEmpty>}
123 <CommandGroup>
124 <ScrollArea className="max-h-[210px] overflow-y-auto">
125 {branchList.map((branch) => (
126 <BranchLink
127 key={branch.id}
128 branch={branch}
129 isSelected={branch.id === selectedBranch?.id || branchesCount === 0}
130 onClose={onClose}
131 />
132 ))}
133 </ScrollArea>
134 </CommandGroup>
135
136 <CommandSeparator />
137
138 <CommandGroup>
139 <CommandItem
140 className="cursor-pointer w-full"
141 onSelect={() => {
142 track('branch_selector_create_clicked')
143 onClose()
144 onCreateBranch()
145 }}
146 >
147 <div className="w-full flex items-center gap-2">
148 <Plus size={14} strokeWidth={1.5} />
149 <p>Create branch</p>
150 </div>
151 </CommandItem>
152 <CommandItem
153 className="cursor-pointer w-full"
154 onSelect={() => {
155 track('branch_selector_manage_clicked')
156 onClose()
157 }}
158 >
159 <Link
160 href={`/project/${projectRef}/branches`}
161 className="w-full flex items-center gap-2"
162 >
163 <ListTree size={14} strokeWidth={1.5} />
164 <p>Manage branches</p>
165 </Link>
166 </CommandItem>
167 </CommandGroup>
168
169 <CommandSeparator />
170
171 <CommandGroup>
172 <CommandItem
173 className="cursor-pointer w-full"
174 onSelect={() => {
175 onClose()
176 window?.open(BRANCHING_GITHUB_DISCUSSION_LINK, '_blank')?.focus()
177 }}
178 onClick={onClose}
179 >
180 <a
181 target="_blank"
182 rel="noreferrer noopener"
183 href={BRANCHING_GITHUB_DISCUSSION_LINK}
184 onClick={onClose}
185 className="w-full flex gap-2"
186 >
187 <MessageCircle size={14} strokeWidth={1} className="mt-0.5" />
188 <div>
189 <p>Branching feedback</p>
190 <p className="text-lighter">Join GitHub Discussion</p>
191 </div>
192 </a>
193 </CommandItem>
194 </CommandGroup>
195 </CommandList>
196 </Command>
197 )
198}