mirror of
https://github.com/supabase/supabase.git
synced 2026-05-07 06:27:16 +08:00
0433eeb5f5
Mark provenance of SQL via the branded types SafeSqlFragment and UntrustedSqlFragment. Only SafeSqlFragment should be executed; UntrustedSqlFragments require some kind of implicit user approval (show on screen + user has to click something) before they are promoted to SafeSqlFragment. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Editor and RLS tester show loading states for inferred/generated SQL and include a dedicated user SQL editor for safer edits. * **Refactor** * Platform-wide SQL handling tightened: snippets and AI-generated SQL are treated as untrusted/display-only until promoted, improving safety and consistency. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
import { UntrustedSqlFragment } from '@supabase/pg-meta'
|
|
import { Loader2 } from 'lucide-react'
|
|
import { Badge, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
|
|
|
|
import CodeEditor from '@/components/ui/CodeEditor/CodeEditor'
|
|
|
|
export const InferredSQLViewer = ({
|
|
sql,
|
|
isLoading = false,
|
|
}: {
|
|
sql: UntrustedSqlFragment | undefined
|
|
isLoading?: boolean
|
|
}) => {
|
|
return (
|
|
<>
|
|
<div className="flex items-center justify-between px-4 py-2">
|
|
<div className="flex items-center gap-x-2">
|
|
<p className="text-sm">Inferred SQL:</p>
|
|
{isLoading && <Loader2 size={14} className="animate-spin text-foreground-lighter" />}
|
|
</div>
|
|
<div className="flex items-center gap-x-2">
|
|
<Tooltip>
|
|
<TooltipTrigger>
|
|
<Badge variant="warning">Generated</Badge>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom" align="end" className="w-64 text-center">
|
|
This query is inferred from client library code with the help of the Assistant and may
|
|
not guarantee correctness.
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
<div className="h-44 relative">
|
|
{isLoading && !sql ? (
|
|
<div className="flex h-full items-center justify-center bg-surface-100 text-foreground-lighter">
|
|
<Loader2 size={20} className="animate-spin" />
|
|
</div>
|
|
) : (
|
|
<CodeEditor isReadOnly id="inferred-sql" language="pgsql" value={sql ?? ''} />
|
|
)}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|