mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
Saxon Fletcher
4ee43f3585
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? UI refinements for Explorer query surfaces. ## What is the current behavior? - The assistant chat textarea uses a tighter radius than the Run SQL / Create a notebook cards on Explorer home. - Chart results sit unevenly in the results pane because axis gutters stack on card padding, and long Y labels can clip. - Selecting SQL in the editor changes the primary Run button to Run selected, which is easy to trigger by accident. - The Prettify SQL icon in notebook query cells uses Lucide's default size, so it doesn't match other toolbar actions. ## What is the new behavior? - Assistant chat form uses `rounded-lg` so it matches the home action cards everywhere the form is used. - Query result charts collapse unused axis space, add a little padding when labels are on, and size the Y axis from formatted ticks so longer labels fit. - Run is a default split button that always executes the full query. Run selected is a secondary menu item, disabled until SQL is selected. - Notebook cell Prettify SQL icons use `size={16}` and `strokeWidth={2}` like the rest of the Explorer toolbar. ## Additional context Cmd+Enter in the editor still runs the current selection when there is one. ## Test plan - [ ] Open Explorer home and confirm the assistant chat radius matches the Run SQL and Create a notebook cards. - [ ] Run a query, switch to chart view, and check spacing with labels off and on, including large Y values. - [ ] With no selection, click Run and confirm the full query runs. Open the split menu and confirm Run selected is disabled. - [ ] Select SQL, click Run, and confirm the full query still runs. Use Run selected from the menu to run only the selection. - [ ] In a notebook query cell, confirm Prettify SQL matches the size and stroke of nearby toolbar icons. Made with [Cursor](https://cursor.com) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added a split Run control in the query editor, with separate actions for running all content or only selected text. - Added support for customizing chart X-axis display settings. - Improved chart Y-axis sizing, scaling, and tick formatting for clearer results. - **Bug Fixes** - The “Run selected” action is unavailable when no text is selected. - **Style** - Updated toolbar icon sizing and added rounded corners to the assistant chat input. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
85 lines
2.2 KiB
TypeScript
85 lines
2.2 KiB
TypeScript
import { ChevronDown, Play } from 'lucide-react'
|
|
import {
|
|
Button,
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuTrigger,
|
|
KeyboardShortcut,
|
|
} from 'ui'
|
|
|
|
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
|
|
import { DropdownMenuItemTooltip } from '@/components/ui/DropdownMenuItemTooltip'
|
|
|
|
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">
|
|
<DropdownMenuItemTooltip
|
|
disabled={!hasSelection}
|
|
onClick={onRunSelected}
|
|
tooltip={{
|
|
content: {
|
|
side: 'left',
|
|
text: !hasSelection
|
|
? 'Select SQL in the editor to run part of the query'
|
|
: undefined,
|
|
},
|
|
}}
|
|
>
|
|
Run selected
|
|
</DropdownMenuItemTooltip>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
)
|
|
}
|