supabase/apps/studio/components/interfaces/Explorer/QueryEditor/QueryResultRenderer.tsx

import { Play } from 'lucide-react'

import { type SqlSnippetSource } from '../../SQLEditor/querySource'
import { type QueryResult } from '../types'
import { QueryResultChart } from './QueryResultChart'
import { QueryResultError } from './QueryResultError'
import { QueryResultTable } from './QueryResultTable'
import { DataGridResults } from '@/components/ui/DataGridResults'
import { type ChartConfig } from '@/data/content/notebooks/notebook-schema'

interface QueryResultRendererProps {
  result?: QueryResult
  view?: 'table' | 'chart'
  chart?: ChartConfig
  /** The query that produced `result`, used to build the "Debug with Assistant" prompt on error. */
  sql?: string
  source?: SqlSnippetSource
  onDebug?: (prompt: string) => void
  canEditRows?: boolean
  onResultChange?: (result: QueryResult) => void
}

export const QueryResultRenderer = ({
  result,
  view,
  chart,
  sql,
  source,
  onDebug,
  canEditRows = false,
  onResultChange,
}: QueryResultRendererProps) => {
  const { rows, error, autoLimit } = result ?? {}

  if (!result) {
    return (
      <div className="flex items-center gap-x-2 p-3 w-full">
        <Play size={12} className="text-foreground-lighter" />
        <p className="text-xs text-foreground-lighter">Run the query to see results</p>
      </div>
    )
  }

  if (error) {
    return (
      <QueryResultError
        error={error}
        autoLimit={autoLimit}
        sql={sql}
        source={source}
        onDebug={onDebug}
      />
    )
  }

  if ((rows ?? []).length === 0) {
    return <p className="text-xs text-foreground-lighter p-3">Success. No rows returned</p>
  }

  if (rows && rows.length > 0) {
    if (view === 'table')
      return onResultChange ? (
        <QueryResultTable
          result={result}
          canEditRows={canEditRows}
          onResultChange={onResultChange}
        />
      ) : (
        <DataGridResults rows={rows} />
      )
    if (view === 'chart') return <QueryResultChart chart={chart} result={result} />
  }

  return null
}