mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 09:55:06 +03:00
Saxon FletcherandCursor
c365549ab8
## What's changed Stack 1/2 (next: https://github.com/supabase/supabase/pull/49985). - `QueryEditor` (`viewport` variant, e.g. Explorer query tabs and assistant query cells) now renders the SQL editor and results in a vertical `ResizablePanelGroup` instead of a fixed `h-[45%]` editor. The split is persisted under `LOCAL_STORAGE_KEYS.EXPLORER_QUERY_SPLIT_SIZE`. The `embedded` variant (notebooks) is unchanged. - Editor and results JSX are extracted into `querySql` / `queryResults` so the two layouts share one definition. - `isRunDisabled` now hides the toolbar run button instead of rendering it disabled (editor shortcuts are still disabled). `AssistantQueryCell` only sets it while an approval is pending, so the run button comes back once the tool call has resolved. - `QueryRunButton`: "Run selected" → "Run selected SQL", plain `DropdownMenuItem` instead of `DropdownMenuItemTooltip`. - `QueryResultError` no longer paints its own table-header background. ## How to test 1. Explorer → open a query tab. Drag the handle between the editor and results; reload — the split size is restored. 2. Toggle "Hide query" / "Show query" — results fill the tab when the editor is hidden. 3. Open a notebook — cells still render with the fixed-height editor (no resizable handle). 4. In the AI Assistant, ask for a query that needs approval. While the approval footer is shown there is no run button in the cell toolbar; after "Run query" / "Skip", the run button appears and works. 5. `pnpm --filter studio exec vitest --run components/interfaces/Explorer` passes. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **User Interface** - Query results now appear in a resizable vertical split view, allowing users to adjust the space allocated to the editor and results. - Updated query result styling provides a cleaner background presentation. - Query result panels are better centered when appropriate. - **Query Execution** - The menu option is now labeled **“Run selected SQL.”** - The run button is hidden when query execution is unavailable. - **AI Assistant** - Query execution is disabled only during the relevant confirmation states. - Assistant query panels now use a wider, full-width layout. - Debugging a query now updates the assistant’s initial input. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Cursor <cursoragent@cursor.com>
74 lines
1.9 KiB
TypeScript
74 lines
1.9 KiB
TypeScript
import { ChevronDown, Play } from 'lucide-react'
|
|
import {
|
|
Button,
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
KeyboardShortcut,
|
|
} from 'ui'
|
|
|
|
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
|
|
|
|
interface QueryRunButtonProps {
|
|
isExecuting: boolean
|
|
disabled: boolean
|
|
hasSelection: boolean
|
|
onRun: () => void
|
|
onRunSelected: () => void
|
|
}
|
|
|
|
export const QueryRunButton = ({
|
|
isExecuting,
|
|
disabled,
|
|
hasSelection,
|
|
onRun,
|
|
onRunSelected,
|
|
}: QueryRunButtonProps) => {
|
|
return (
|
|
<div className="flex w-fit">
|
|
<ButtonTooltip
|
|
type="button"
|
|
variant="default"
|
|
size="tiny"
|
|
loading={isExecuting}
|
|
disabled={disabled}
|
|
icon={<Play size={16} strokeWidth={2} />}
|
|
className="rounded-r-none hover:z-10 focus-visible:z-10 focus-visible:rounded-r-sm"
|
|
onClick={onRun}
|
|
tooltip={{
|
|
content: {
|
|
side: 'bottom',
|
|
text: (
|
|
<div className="flex items-center gap-2.5">
|
|
<span>Run query</span>
|
|
<KeyboardShortcut keys={['Meta', 'Enter']} />
|
|
</div>
|
|
),
|
|
},
|
|
}}
|
|
>
|
|
Run
|
|
</ButtonTooltip>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
type="button"
|
|
variant="default"
|
|
size="tiny"
|
|
disabled={disabled}
|
|
aria-label="More actions"
|
|
className="shrink-0 rounded-l-none px-[4px] py-[5px] -ml-px focus-visible:z-10 focus-visible:rounded-l-sm"
|
|
icon={<ChevronDown />}
|
|
/>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-48">
|
|
<DropdownMenuItem disabled={!hasSelection} onClick={onRunSelected}>
|
|
Run selected SQL
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
)
|
|
}
|