FunctionDiff() — supabase Function Reference

Source Code

apps/studio/components/interfaces/BranchManagement/EdgeFunctionsDiffPanel.tsx lines 68–165

const FunctionDiff = ({
  functionSlug,
  currentBody,
  mainBody,
  currentBranchRef,
  fileInfos,
}: FunctionDiffProps) => {
  // Get all file keys from fileInfos
  const allFileKeys = useMemo(() => fileInfos.map((info) => info.key), [fileInfos])

  const [activeFileKey, setActiveFileKey] = useState<string | undefined>(() => allFileKeys[0])

  // Keep active tab in sync when allFileKeys changes (e.g. data fetch completes)
  useEffect(() => {
    if (!activeFileKey || !allFileKeys.includes(activeFileKey)) {
      setActiveFileKey(allFileKeys[0])
    }
  }, [allFileKeys, activeFileKey])

  const currentFile = currentBody.files.find(
    (f: EdgeFunctionBodyData['files'][number]) => fileKey(f.name) === activeFileKey
  )
  const mainFile = mainBody.files.find(
    (f: EdgeFunctionBodyData['files'][number]) => fileKey(f.name) === activeFileKey
  )

  const language = useMemo(() => {
    if (!activeFileKey) return 'plaintext'
    if (activeFileKey.endsWith('.ts') || activeFileKey.endsWith('.tsx')) {
      return 'typescript'
    }
    if (activeFileKey.endsWith('.js') || activeFileKey.endsWith('.jsx')) {
      return 'javascript'
    }
    if (activeFileKey.endsWith('.json')) return 'json'
    if (activeFileKey.endsWith('.sql')) return 'sql'
    return 'plaintext'
  }, [activeFileKey])

  if (allFileKeys.length === 0) return null

  return (
    <Card>
      <CardHeader>
        <CardTitle>
          <Link
            href={`/project/${currentBranchRef}/functions/${functionSlug}`}
            className="flex items-center gap-2"
          >
            <Code strokeWidth={1.5} size={16} className="text-foreground-muted" />
            {functionSlug}
          </Link>
        </CardTitle>
      </CardHeader>
      <CardContent className="p-0 h-96">
        <div className="flex h-full min-h-0">
          <div className="w-48 border-r bg-surface-200 flex flex-col overflow-y-auto">
            <ul className="divide-y divide-border">
              {fileInfos.map((fileInfo) => {
                const Icon = getStatusIcon(fileInfo.status)

                return (
                  <li key={fileInfo.key} className="flex">
                    <button
                      type="button"
                      onClick={() => setActiveFileKey(fileInfo.key)}
                      className={cn(
                        'flex-1 text-left text-xs px-4 py-2 flex items-center gap-2',
                        activeFileKey === fileInfo.key
                          ? 'bg-surface-300 text-foreground'
                          : 'text-foreground-light hover:bg-surface-300'
                      )}
                    >
                      <Icon
                        className={cn('flex-shrink-0', getStatusColor(fileInfo.status))}
                        size={12}
                        strokeWidth={1}
                      />
                      <span className="truncate">{fileInfo.key}</span>
                    </button>
                  </li>
                )
              })}
            </ul>
          </div>
          <div className="flex-1 min-h-0">
            <DiffEditor
              language={language}
              original={mainFile?.content || ''}
              modified={currentFile?.content || ''}
              options={{ readOnly: true }}
            />
          </div>
        </div>
      </CardContent>
    </Card>
  )
}