mirror of
https://github.com/supabase/supabase.git
synced 2026-09-06 09:59:03 +08:00
77c5a0b9d9
## Context Related to Explorer / Notebooks - adds a barebones query cell that minimally can run SQL queries + render results The intention is to migrate the components used in the SQL Editor into this new Query cell since all the functionality is very similar, but the SQL Editor component is tightly coupled to the SQL Editor valtio store. So we'll be duplicating a bit of UI for now - which will also make deprecating the SQL Editor eventually a bit easier by just deleting them Have deliberately omitted a lot of details for now just to keep the PRs small, so will be continuing to build out the QueryCell's functionality in subsequent PRs. This includes - Source selector - Data display (Table / Chart) - Autolimit logic Other changes also includes - Updating NotebookEditor to use the new Explorer UI components that Saxon introduced <img width="500" alt="image" src="https://github.com/user-attachments/assets/d709f6f1-f6cc-4e6a-babd-f5b68bba2a55" /> <img width="500" alt="image" src="https://github.com/user-attachments/assets/a286ceca-ac84-4fbd-afd5-b24f940e2e29" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added notebook database cells for writing, editing, and running SQL queries. * Added query result displays with loading, empty, error, row-limit, and result states. * Added editable notebook titles with save and cancel controls. * New notebooks can start with customizable Markdown and SQL cells. * Added helpful SQL error actions, including copying messages, database connection guidance, and AI Assistant support where available. * **Improvements** * Improved notebook spacing, section layout, toolbar tooltips, and empty-result presentation. * Markdown changes now save automatically through the notebook editor. * Improved drag-and-drop controls and query visibility management. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
88 lines
2.9 KiB
TypeScript
88 lines
2.9 KiB
TypeScript
import React from 'react'
|
|
import { cn } from 'ui'
|
|
|
|
const explorerQueryClassName = 'flex flex-col overflow-hidden bg-muted'
|
|
|
|
export type ExplorerQueryProps = React.ComponentProps<'div'>
|
|
|
|
/**
|
|
* Framed Explorer query shell for notebooks and other embedded surfaces.
|
|
* The consuming surface owns the height; results fill whatever the toolbar,
|
|
* editor, and footer leave behind. The minimum height keeps the frame usable
|
|
* when a surface leaves the height to content.
|
|
*/
|
|
const ExplorerQuery = ({ className, ...props }: ExplorerQueryProps) => (
|
|
<div
|
|
data-slot="explorer-query"
|
|
data-variant="embedded"
|
|
className={cn(explorerQueryClassName, 'min-h-64 rounded-md border shadow-xs', className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
ExplorerQuery.displayName = 'ExplorerQuery'
|
|
|
|
export type ExplorerQueryViewportProps = React.ComponentProps<'div'>
|
|
|
|
/**
|
|
* Full-height Explorer query shell for a dedicated tab or another viewport.
|
|
* Fills its container so the surrounding page decides the height.
|
|
*/
|
|
const ExplorerQueryViewport = ({ className, ...props }: ExplorerQueryViewportProps) => (
|
|
<div
|
|
data-slot="explorer-query"
|
|
data-variant="viewport"
|
|
className={cn(explorerQueryClassName, 'h-full min-h-0', className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
ExplorerQueryViewport.displayName = 'ExplorerQueryViewport'
|
|
|
|
export type ExplorerQueryEditorProps = React.ComponentProps<'div'>
|
|
|
|
/** Region containing the editable or read-only SQL editor supplied by the caller. */
|
|
const ExplorerQueryEditor = ({ className, ...props }: ExplorerQueryEditorProps) => (
|
|
<div
|
|
data-slot="explorer-query-editor"
|
|
className={cn('min-h-20 shrink-0 overflow-hidden border-b', className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
ExplorerQueryEditor.displayName = 'ExplorerQueryEditor'
|
|
|
|
export type ExplorerQueryResultsProps = React.ComponentProps<'div'>
|
|
|
|
/**
|
|
* Always-present result region for idle, loading, error, table, or chart content.
|
|
* Fills the height left by the toolbar, editor, and footer, and shrinks rather
|
|
* than pushing them out of the frame. Content that can overflow supplies its own
|
|
* scroll container.
|
|
*/
|
|
const ExplorerQueryResults = ({ className, ...props }: ExplorerQueryResultsProps) => (
|
|
<div
|
|
data-slot="explorer-query-results"
|
|
className={cn('flex min-h-0 w-full flex-1 flex-col overflow-hidden', className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
ExplorerQueryResults.displayName = 'ExplorerQueryResults'
|
|
|
|
export type ExplorerQueryFooterProps = React.ComponentProps<'div'>
|
|
|
|
/** Optional metadata or surface-specific content below the results region. */
|
|
const ExplorerQueryFooter = ({ className, ...props }: ExplorerQueryFooterProps) => (
|
|
<div
|
|
data-slot="explorer-query-footer"
|
|
className={cn('shrink-0 border-t px-3 py-1 text-xs text-foreground-lighter', className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
ExplorerQueryFooter.displayName = 'ExplorerQueryFooter'
|
|
|
|
export {
|
|
ExplorerQuery,
|
|
ExplorerQueryEditor,
|
|
ExplorerQueryFooter,
|
|
ExplorerQueryResults,
|
|
ExplorerQueryViewport,
|
|
}
|