konnosDashboard
EdgeFunctionsDiffPanel.tsx242 lines · main
1import { basename } from 'path'
2import { IS_PLATFORM } from 'common'
3import { Circle, Code, Minus, Plus, Wind } from 'lucide-react'
4import Link from 'next/link'
5import { useEffect, useMemo, useState } from 'react'
6import { Card, CardContent, CardHeader, CardTitle, cn, Skeleton } from 'ui'
7
8import { DiffEditor } from '@/components/ui/DiffEditor'
9import type { EdgeFunctionBodyData } from '@/data/edge-functions/edge-function-body-query'
10import type {
11 EdgeFunctionsDiffResult,
12 FileInfo,
13 FileStatus,
14} from '@/hooks/branches/useEdgeFunctionsDiff'
15import { EMPTY_ARR } from '@/lib/void'
16
17const EMPTY_FUNCTION_BODY: EdgeFunctionBodyData = {
18 files: EMPTY_ARR,
19}
20
21interface EdgeFunctionsDiffPanelProps {
22 diffResults: EdgeFunctionsDiffResult
23 currentBranchRef?: string
24}
25
26interface FunctionDiffProps {
27 functionSlug: string
28 currentBody: EdgeFunctionBodyData
29 mainBody: EdgeFunctionBodyData
30 currentBranchRef?: string
31 fileInfos: FileInfo[]
32}
33
34// Helper to canonicalize file identifiers to prevent mismatch due to differing root paths
35const fileKey = (fullPath: string) => basename(fullPath)
36
37// Helper to get the status color for file indicators
38const getStatusColor = (status: FileStatus): string => {
39 switch (status) {
40 case 'added':
41 return 'text-brand'
42 case 'removed':
43 return 'text-destructive'
44 case 'modified':
45 return 'text-warning'
46 case 'unchanged':
47 return 'text-muted'
48 default:
49 return 'text-muted'
50 }
51}
52
53// Helper to get the status icon for file indicators
54const getStatusIcon = (status: FileStatus) => {
55 switch (status) {
56 case 'added':
57 return Plus
58 case 'removed':
59 return Minus
60 case 'modified':
61 return Circle
62 case 'unchanged':
63 return Circle
64 default:
65 return Circle
66 }
67}
68
69const FunctionDiff = ({
70 functionSlug,
71 currentBody,
72 mainBody,
73 currentBranchRef,
74 fileInfos,
75}: FunctionDiffProps) => {
76 // Get all file keys from fileInfos
77 const allFileKeys = useMemo(() => fileInfos.map((info) => info.key), [fileInfos])
78
79 const [activeFileKey, setActiveFileKey] = useState<string | undefined>(() => allFileKeys[0])
80
81 // Keep active tab in sync when allFileKeys changes (e.g. data fetch completes)
82 useEffect(() => {
83 if (!activeFileKey || !allFileKeys.includes(activeFileKey)) {
84 setActiveFileKey(allFileKeys[0])
85 }
86 }, [allFileKeys, activeFileKey])
87
88 const currentFile = currentBody.files.find(
89 (f: EdgeFunctionBodyData['files'][number]) => fileKey(f.name) === activeFileKey
90 )
91 const mainFile = mainBody.files.find(
92 (f: EdgeFunctionBodyData['files'][number]) => fileKey(f.name) === activeFileKey
93 )
94
95 const language = useMemo(() => {
96 if (!activeFileKey) return 'plaintext'
97 if (activeFileKey.endsWith('.ts') || activeFileKey.endsWith('.tsx')) {
98 return 'typescript'
99 }
100 if (activeFileKey.endsWith('.js') || activeFileKey.endsWith('.jsx')) {
101 return 'javascript'
102 }
103 if (activeFileKey.endsWith('.json')) return 'json'
104 if (activeFileKey.endsWith('.sql')) return 'sql'
105 return 'plaintext'
106 }, [activeFileKey])
107
108 if (allFileKeys.length === 0) return null
109
110 return (
111 <Card>
112 <CardHeader>
113 <CardTitle>
114 <Link
115 href={`/project/${currentBranchRef}/functions/${functionSlug}${IS_PLATFORM ? '' : '/details'}`}
116 className="flex items-center gap-2"
117 >
118 <Code strokeWidth={1.5} size={16} className="text-foreground-muted" />
119 {functionSlug}
120 </Link>
121 </CardTitle>
122 </CardHeader>
123 <CardContent className="p-0 h-96">
124 <div className="flex h-full min-h-0">
125 <div className="w-48 border-r bg-surface-200 flex flex-col overflow-y-auto">
126 <ul className="divide-y divide-border">
127 {fileInfos.map((fileInfo) => {
128 const Icon = getStatusIcon(fileInfo.status)
129
130 return (
131 <li key={fileInfo.key} className="flex">
132 <button
133 type="button"
134 onClick={() => setActiveFileKey(fileInfo.key)}
135 className={cn(
136 'flex-1 text-left text-xs px-4 py-2 flex items-center gap-2',
137 activeFileKey === fileInfo.key
138 ? 'bg-surface-300 text-foreground'
139 : 'text-foreground-light hover:bg-surface-300'
140 )}
141 >
142 <Icon
143 className={cn('shrink-0', getStatusColor(fileInfo.status))}
144 size={12}
145 strokeWidth={1}
146 />
147 <span className="truncate">{fileInfo.key}</span>
148 </button>
149 </li>
150 )
151 })}
152 </ul>
153 </div>
154 <div className="flex-1 min-h-0">
155 <DiffEditor
156 language={language}
157 original={mainFile?.content || ''}
158 modified={currentFile?.content || ''}
159 options={{ readOnly: true }}
160 />
161 </div>
162 </div>
163 </CardContent>
164 </Card>
165 )
166}
167
168export const EdgeFunctionsDiffPanel = ({
169 diffResults,
170 currentBranchRef,
171}: EdgeFunctionsDiffPanelProps) => {
172 if (diffResults.isLoading) {
173 return <Skeleton className="h-64" />
174 }
175
176 const noChanges = diffResults.addedSlugs.length === 0 && diffResults.modifiedSlugs.length === 0
177
178 if (noChanges) {
179 return (
180 <div className="p-6 text-center">
181 <Wind size={32} strokeWidth={1.5} className="text-foreground-muted mx-auto mb-8" />
182 <h3 className="mb-1">No changes detected between branches</h3>
183 <p className="text-sm text-foreground-light">
184 Any changes to your edge functions will be shown here for review
185 </p>
186 </div>
187 )
188 }
189
190 return (
191 <div className="space-y-6">
192 {diffResults.addedSlugs.length > 0 && (
193 <div>
194 <div className="space-y-4">
195 {diffResults.addedSlugs.map((slug) => (
196 <FunctionDiff
197 key={slug}
198 functionSlug={slug}
199 currentBody={diffResults.addedBodiesMap[slug]!}
200 mainBody={EMPTY_FUNCTION_BODY}
201 currentBranchRef={currentBranchRef}
202 fileInfos={diffResults.functionFileInfo[slug] || EMPTY_ARR}
203 />
204 ))}
205 </div>
206 </div>
207 )}
208 {/* TODO: Removing functions is not supported yet */}
209 {/* {diffResults.removedSlugs.length > 0 && (
210 <div>
211 <div className="space-y-4">
212 {diffResults.removedSlugs.map((slug) => (
213 <FunctionDiff
214 key={slug}
215 functionSlug={slug}
216 currentBody={EMPTY_ARR}
217 mainBody={diffResults.removedBodiesMap[slug]!}
218 currentBranchRef={mainBranchRef}
219 fileInfos={diffResults.functionFileInfo[slug] || EMPTY_ARR}
220 />
221 ))}
222 </div>
223 </div>
224 )} */}
225
226 {diffResults.modifiedSlugs.length > 0 && (
227 <div className="space-y-4">
228 {diffResults.modifiedSlugs.map((slug) => (
229 <FunctionDiff
230 key={slug}
231 functionSlug={slug}
232 currentBody={diffResults.currentBodiesMap[slug]!}
233 mainBody={diffResults.mainBodiesMap[slug]!}
234 currentBranchRef={currentBranchRef}
235 fileInfos={diffResults.functionFileInfo[slug] || EMPTY_ARR}
236 />
237 ))}
238 </div>
239 )}
240 </div>
241 )
242}