mirror of
https://github.com/supabase/supabase.git
synced 2026-07-01 04:47:16 -04:00
Joshen Lim
f2e20eac34
## Context Part of efforts to consolidate all the code editors that we have in the repository `CodeEditor` will serve as the base monaco editor file that all UIs should consume from It's aimed to be generic and just stores the common logic that will be generally used where-ever we need a code editor (editor options, base editor set up on mount, etc) The idea is that `CodeEditor` holds just 3 default actions (run queyr, format document and placeholder fill) If any editor needs specific behaviours (e.g SQL Editor), they can declare them in the `onMount` prop of `CodeEditor` which gives some flexibility ## Changes involved - Use `CodeEditor` component for SQL Editor's `MonacoEditor` - Shifted Cmd K behaviour into `CodeEditor` since that's probably needed everywhere that we render that UI - Deprecate `MonacoEditor` from the table editor's `grid` folder - All files that were using that component to use `CodeEditor` component instead <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **Refactor** * Migrated the studio’s code editing UI (including JSON, text, and payload viewers) to a unified CodeEditor experience. * **New Features** * Added plaintext language support for read-only/truncated views. * **Behavior Changes** * Improved editor startup by setting cursor position consistently and deferring autofocus. * Streamlined editor context-menu actions to the core set (run query, format, placeholder fill). * Updated SQL editor wiring for more consistent command/menu and selection handling. <!-- 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>
|
|
</>
|
|
)
|
|
}
|