mirror of
https://github.com/supabase/supabase.git
synced 2026-09-22 13:37:53 +08:00
master
25 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
 Saxon Fletcher
|
252f69e451 |
chore(studio): refine Explorer sidebar, onboarding, and notebooks (#50555)
## Summary A round of small Explorer refinements. **Sidebar** - Adds a **Run SQL** row (with a `+` icon) above Notebooks in the Explorer sidebar; opens a new query tab. **Assistant** - Assistant query cells now have the same **Save** dropdown as query tabs (add to an existing notebook or create a new one). It shows only when Explorer is enabled, and not while the query is still streaming. - `SaveQueryDropdown` takes an optional `source`, so logs queries are saved as log cells (keeping their time range) instead of database cells. This also fixes saving logs queries from query tabs. - The "Drafting notebook..." notice (and the notebook loading/status rows) now span the full message width; `delete_notebook` parts use the wide layout like create/update. **Onboarding** - Replaces the single page with a four-step walkthrough: Welcome to Explorer (with a **Preview** badge), Run SQL, Notebooks, and Chat with your project. Each step has an icon, heading, and short description, with step dots and **Skip** / **Back** / **Next** buttons; the last step ends with **Continue to Explorer**. - Removes the "Choose how Explorer opens" choice (still available in Account preferences) and the collapsible "Learn more" section. Skipping or finishing still respects the saved startup preference. - Deletes `ExplorerOnboardingLearnMore`, `ExplorerHomePreference`, and `ExplorerHomePreview`, which were only used by onboarding. **Notebooks** - Query cells use the same max width as markdown cells (`48rem`, was `72rem`). - "Add query cell" / "Add markdown cell" are now **Add query** / **Add markdown** everywhere; the buttons at the bottom of a notebook are larger (34px, 18px icons). ## Test plan - [ ] Explorer sidebar: **Run SQL** opens a new query tab - [ ] Assistant: generate SQL, use **Save** to add it to a new and an existing notebook; repeat with a logs query and confirm a log cell is created - [ ] Assistant: ask for a notebook and confirm the drafting notice is full width - [ ] Clear `hasCompletedOnboarding` in Explorer preferences and step through onboarding (Next / Back / Skip); finishing or skipping respects the startup preference set in Account preferences - [ ] Notebook: query cells line up with markdown cell width; bottom add buttons are larger <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added a **Run SQL** shortcut to Explorer navigation. - Assistant query results can now be saved to notebooks, including log queries. - **Improvements** - Updated Explorer onboarding with guided steps, progress navigation, and visual previews. - Shortened Explorer action labels and refined control sizing. - Reduced notebook query layout width and adjusted assistant notebook displays. - **Changes** - Removed the Explorer startup preference selector and onboarding “Learn more” section. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 5 <noreply@anthropic.com> |
||
|
Saxon Fletcher
|
7880c2f079 |
fix(studio): explorer chat and notebook layout refinements (#50453)
Five layout fixes across Explorer chat, notebooks, and the sidebar. ### Chat - **Conversation fade overlapped the scrollbar.** The top and bottom gradients are positioned against the conversation's padding box, which includes the scroll container's scrollbar gutter, so `inset-x-0` painted them over the scrollbar. They now stop at the conversation's content gutter, which `Conversation` owns for both the content and the fades. - **Composer background bled past the input's radius.** The form paints the surface behind the textarea but had no radius of its own, so its square corners showed outside the `rounded-lg` input. It now shares the radius. - **Message parts used two different widths.** Wide parts come down to `max-w-3xl` so every part shares a column, matching `AssistantQueryCell` and `AssistantNotebookPreview`. `isWide` / `isWideMessagePart` stay in place with both widths equal, so a part can diverge again later without rebuilding the mechanism. ### Notebooks - **Cell controls sat at the container edge.** Each cell centred itself at its own max width while the grip and add-cell button stayed at the far left of the full-width row, leaving a large gap. `SortableSection` takes a `sectionWidth` and carries its control gutter twice — once as the controls, once as padding on the other side — so the section stays centred with its controls immediately beside it. Cell widths are unchanged (prose `48rem`, query `72rem`); set them equal and the two cell types' controls line up on their own. The controls stay in flow rather than floating in an outside gutter, so on a viewport narrower than the cap the row just fills the space instead of clipping the controls into the padding. ### Sidebar - **Search icon didn't line up with the menu row icons.** The row box already sits flush with the search input's box, so rows moved from `pl-3` to `pl-2` to put their icons on the same 8px offset the search icon uses. Spacing between the input and the list now matches the 12px side padding. ### Testing `pnpm --filter studio run typecheck`, Prettier, and 378 tests across `Explorer`, `ProjectHome`, `AIAssistantPanel`, and `ExplorerLayout` pass. ESLint warning counts are unchanged from master. These were reasoned from layout rather than checked in a browser, so they're worth a look on a preview before merge. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **UI Improvements** * Updated Explorer layouts with flexible, configurable widths for notebook and query sections. * Refined navigation spacing and padding across Explorer views. * Centered and standardized AI Assistant preview, query, and message content widths. * Improved chat form styling with rounded corners. * Adjusted conversation spacing and fade overlays to avoid overlapping the scrollbar. * Preserved full-width behavior where appropriate while keeping controls aligned. * **Tests** * Updated layout tests to reflect revised width and alignment behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 5 <noreply@anthropic.com> |
||
|
Joshen Lim
|
8ac64a4349 |
Add copy notebook as markdown action (#50200)
## Context Adds a "Copy as Markdown" CTA for notebooks <img width="265" height="198" alt="image" src="https://github.com/user-attachments/assets/5eccf36e-24ea-4d2f-b1cf-72d5353b70a2" /> Query cell titles will be rendered as h3 tags and labelled either Postgres or Logs - Clickhouse (with time range) The query content will then be rendered as triple backticks with `sql` e.g ` ```sql...``` ` Query results will be copied to markdown if the query has been run, will otherwise be omitted Also, if the query was updated (e.g content, source, etc) after it was run (as the result is hence stale), result will also be omitted e.g: | Notebook | Markdown | | --- | --- | | <img width="1291" height="630" alt="image" src="https://github.com/user-attachments/assets/c49f23e5-c70b-46dd-a298-6e1a90cd30d7" /> | <img width="731" height="536" alt="image" src="https://github.com/user-attachments/assets/4bbe3041-bd8e-42d3-86d2-1691e7a6bc7b" /> | | <img width="1220" height="832" alt="image" src="https://github.com/user-attachments/assets/67de523a-18f7-4f1b-b764-7f0f3152f9e7" /> | <img width="757" height="803" alt="image" src="https://github.com/user-attachments/assets/d217504b-bee6-4088-9049-87ff647b9bc7" /> | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added Markdown export for notebook queries, results, errors, and time ranges. * Added error notifications when copying notebook content fails. * **Bug Fixes** * Prevented stale query results after relevant source or time-range changes. * Improved Markdown export for queries containing backticks. * Escaped backslashes, pipes, and line breaks in Markdown tables. * **Style** * Adjusted spacing for empty query-result messages. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Saxon Fletcher
|
d9742d707f |
chore(studio): refine Explorer sidebar breadcrumbs (#50188)
Moves Explorer’s back navigation and create actions into a reusable sidebar breadcrumb header. Reduces product-menu headings globally to `text-sm` and keeps breadcrumb links free of padding, borders, and backgrounds. ### How to test 1. Open `/project/<ref>/explorer` and confirm the header shows Explorer and the SQL Editor switch action. 2. Open Notebooks and Chats. Confirm the header shows `Explorer > Notebooks/Chats` and the corresponding create action works. 3. Return using the Explorer breadcrumb with a click or Tab + Enter. Check that the label stays aligned and has no hover background. 4. Open another product, such as Database, and confirm its sidebar heading uses the smaller font size. 5. At a mobile viewport, open the menu and repeat the notebook/chat actions and back navigation without closing the sheet. Confirm the header stays current and disappears when returning to the main menu or opening another product. Validation: 18 focused tests, typecheck, formatting, and lint ratchet passed. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added a shared Explorer sidebar header with breadcrumbs and contextual actions for creating notebooks and chats. - Added keyboard-accessible navigation between the Explorer overview and notebook or chat sections. - Added support for customized product menu headers across project layouts. - **Improvements** - Centralized Explorer navigation and actions in the shared sidebar layout. - Improved mobile menu updates when navigating between Explorer resources. - Refined Explorer home layout and drag-handle behavior across screen sizes. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
Joshen Lim
|
246bd9acbf |
Adjust vertical space for explorer notebook query cells (#50169)
## Context As per PR title - just adjusts the vertical height for a couple of empty states in QueryCells for Notebooks ### Query not run yet | Before | After | | -------- | -------- | | <img width="1072" height="350" alt="image" src="https://github.com/user-attachments/assets/cbf14619-ac01-4082-9732-41737a028c40" /> | <img width="1083" height="313" alt="image" src="https://github.com/user-attachments/assets/1144eebf-7293-4be4-adaf-af2dc21bc40f" /> | | <img width="1083" height="292" alt="image" src="https://github.com/user-attachments/assets/511754f8-5128-41b7-a4c8-542fb93b77e5" /> | <img width="1100" height="163" alt="image" src="https://github.com/user-attachments/assets/53de5b4a-8284-406a-a8ae-4602f61f3ca3" /> | ### Chart empty state | Before | After | | -------- | -------- | | <img width="1079" height="291" alt="image" src="https://github.com/user-attachments/assets/068fe573-1f65-4efc-831c-db2ddda2be1a" /> | <img width="1078" height="225" alt="image" src="https://github.com/user-attachments/assets/b9d58d8f-162d-463d-90e2-fbf3470c6db8" /> | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Style** - Improved query editor layout by reducing unnecessary spacing and ensuring result areas fit more consistently within available space. - Refined chart empty states with cleaner borders, compact spacing, and improved vertical sizing. - Updated query error presentation with more compact padding. - Simplified result panel sizing for a more consistent viewing experience. - **User Experience** - Added a play icon alongside the “Run the query to see results” prompt when no results are available. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Saxon Fletcher
|
4ee43f3585 |
chore(studio): refine Explorer query UI (#49895)
## 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 --> |
||
|
Joshen Lim
|
c0409b38b4 |
joshenlim/fe 4285 explorer missing prettify in query toolbar actions (#49675)
## Context Adds the prettify SQL CTA to Explorer Notebook and Query Tab Query tab: Prettify CTA is within the dropdown menu here <img width="1092" height="272" alt="image" src="https://github.com/user-attachments/assets/3b4f3514-69cc-4c24-a127-da1555ee905e" /> Query cell: Prettify CTA sits between the buttons in the toolbar <img width="1085" height="306" alt="image" src="https://github.com/user-attachments/assets/e503ad6c-5dda-4c2b-a824-8c1049d5e9fb" /> Also added shortcut tooltip for the run button <img width="183" height="103" alt="image" src="https://github.com/user-attachments/assets/729055b8-8e2c-4cf7-8f2e-c5726e828644" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added SQL prettification to Explorer query editors through the overflow menu, query toolbar, editor action, and keyboard shortcut. * Displays the configured formatting shortcut alongside the prettify action. * Prevents formatting while an AI proposal is pending. * Added a keyboard shortcut hint to the query run action. * Enhanced toolbar tooltips to support richer formatted content. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen Lim
|
f1526d2d1b |
Fix running queyr cell marks notebook tab with unsaved change indicator (#49464)
## Context Fixes a small bug whereby running any query cell within a notebook will mark the notebook tab with the unsaved changes status indicator `handleSqlCommit` gets called when we run the query, and it flips the notebook's status to "unsaved" hence why its happening. Hence opting to skip committing the changes in `handleSqlCommit` if there's no change to the SQL content <img width="224" height="69" alt="image" src="https://github.com/user-attachments/assets/7015b527-b249-4f2e-bcf1-948b5fe3f5a9" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Bug Fixes** - Prevented unnecessary notebook updates when committed SQL is unchanged. - Continued saving SQL changes as expected. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen Lim
|
5c6ef8ae3d |
Joshenlim/fe 4221 explorer tab behaviours to mimic sql editor (#49386)
## Context Improves the tab behaviour for explorer to follow the SQL Editor - Tabs now start as preview tabs and become permanent once you start interacting with them - Query Tabs become permanent as soon as you start typing in the editor - Chat tabs become permanent as soon as you start typing in the chat input - Notebook tabs become permanenet as soon as you make any changes to the notebook - Notebooks with unsaved changes will show the orange dot indicator <img width="197" height="67" alt="image" src="https://github.com/user-attachments/assets/3005c379-a49a-4cd8-8d90-65406b186141" /> - Closing a notebook tab with unsaved changes will show a confirmation dialog - Except if the new notebook has no content (no changes) <img width="375" height="218" alt="image" src="https://github.com/user-attachments/assets/6ad10779-6415-4c55-bb4f-61d938e744c9" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Explorer chat, query, and notebook tabs now begin as previews and become permanent when edited or saved. * Added unsaved-change indicators and close confirmation for edited notebook tabs. * Confirmed closure of edited notebooks now discards unsaved changes. * **Bug Fixes** * Improved restoration and persistence of Explorer drafts. * Notebook saves now reflect the latest edits and tab state. * Prevented stale save responses from incorrectly marking newer edits as saved. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Saxon Fletcher
|
d93defe1e0 |
feat(studio): refine notebook query cell layout (#49350)
<img width="2326" height="1257" alt="image" src="https://github.com/user-attachments/assets/d0f63793-ff58-4f48-971f-0622d375b3c7" /> ## 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? Studio UI improvement. ## What is the current behavior? Explorer notebook query cells can extend beyond the intended reading width, and saved notebooks open with SQL code expanded. ## What is the new behavior? - Caps Explorer notebook query cells at `max-w-6xl`. - Hides SQL code by default in saved notebooks. - Keeps SQL visible by default for new notebooks. ## To test 1. Open a saved Explorer notebook with query cells. Confirm each cell is capped at the wider notebook width and its SQL editor is initially collapsed. 2. Expand a saved query cell and confirm the existing SQL and result remain available. 3. Create a new notebook, add a query cell, and confirm its SQL editor is initially visible. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added controls to show or hide SQL for individual query cells. * Query visibility is preserved when switching notebook tabs or reopening them. * New notebooks display SQL by default, while saved notebooks can hide SQL editors. * Expanded the query editor width for improved readability. * **Bug Fixes** * Prevented visibility settings from affecting notebook save status or unrelated cells. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Charis
|
8bdfe03fe7 |
refactor(studio): drop notebook type widening now that the API supports it (#49272)
## Summary - Regenerates `packages/api-types` for the content endpoints now that the Platform API's `notebook` content type has landed (list/get/upsert `type` enums, plus `UpsertContentBody`'s notebook cell shape with `_id`/`y_series`). Unrelated schema drift from the same regen (Warehouse, SSO, notification exceptions, etc.) is excluded — only the content-endpoint hunks are applied. - Removes every local widening cast added while the API support was pending (`content-query.ts`, `content-infinite-query.ts`, `notebook-query.ts`, `notebook-upsert-mutation.ts`, `sql-folders-query.ts`). - What remains is scoped and renamed to match: draft ids (`generateDraftId`/`isDraftId`), used only for cells created client-side in the editor before their first save, dropped before they'd ever reach the backend as a fake `_id`. ## Test plan - [x] `pnpm typecheck` — clean - [x] `pnpm --filter studio test` — full suite passes (518 files / 5471 tests) - [x] `pnpm --filter studio run lint:ratchet` — no new warnings - [x] `pnpm format` / prettier — clean <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Improved notebook cell tracking during editing, reordering, insertion, and deletion. * Preserved existing cell identifiers while removing temporary draft identifiers before saving. * Improved chart configuration for selecting and displaying multiple Y-axis series. * Strengthened notebook validation and content persistence behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
Joshen Lim
|
7adc83ee39 |
Implement run notebook functionality (#49178)
## Context Implements the "Run notebook" functionality which will run all database or logs cells within the notebook. <img width="206" height="110" alt="image" src="https://github.com/user-attachments/assets/703f4f78-1e3c-43b8-8c7e-771720ac3464" /> Am opting to do some via `useImperativeHandle` in `QueryEditor` to expose the `run` method, then having `ExplorerNotebookTab` calling `run` on each database / logs cells for the run notebook action. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added a “Run notebook” action to execute all database and log query cells together. - The action displays a loading state and is disabled while running or when no executable cells are available. - Query results continue to update after execution, including when individual queries encounter errors. - **Tests** - Added coverage for running executable cells and handling notebooks without runnable queries. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen Lim
|
b6e43311d3 |
Reorganize explorer folder structure (#49172)
## Context Just reorganizing the files under the Explorer folder as details are a bit more clearer Mainly shifting related and exclusive files into their own folder and tests into `__tests__` folder + renaming some files <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added query result display settings for switching between table and chart views. - Added chart configuration options for chart type, axes, scaling, cumulative mode, and labels. - Automatically prevents invalid logarithmic scaling when chart data is incompatible. - **Refactor** - Standardized Explorer tab and query source naming across the interface without changing existing behavior. - Updated Explorer navigation, routing, and page wiring to use the standardized components. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen Lim
|
097a105663 |
joshenlim/fe 4176 add role impersonation to explorerquerysourcemenu (#49101)
## Context Stacked off from https://github.com/supabase/supabase/pull/49098 - adds role impersonation for both Notebook Query cell + Explorer Query tab Note that this refactors the role impersonation state a little to decouple some stuffs to make this work, since the role impersonation state is global and we need a local state to support this UX Similarly to row limit, for query tab its intentional that for now that the role impersonation isn't scoped to the query draft atm as I wanna avoid making changes to explorer-query given there was a couple of PRs in flux that adjusts that file - will handle that separately <img width="1117" height="577" alt="image" src="https://github.com/user-attachments/assets/9bfd6287-efff-418b-a1c0-934ee2c840cb" /> <img width="1917" height="436" alt="image" src="https://github.com/user-attachments/assets/bfd1be82-8f77-4764-bd3a-4b9c63169b82" /> ## To test - [ ] Verify that role impersonation works in notebook query cell - [ ] Verify that role impersonation works in notebook query tab <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added role impersonation support to SQL Explorer queries. * Users can select an impersonated role directly from database query menus. * Query execution now applies the selected role when configured. * Added local role selection state for individual query tabs and cells. * Improved reuse and consistency of role impersonation controls across the interface. * Role selections and impersonation details remain synchronized across supported query components. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen Lim
|
d61477085e |
Joshenlim/fe 4175 add row limit in explorerquerysourcemenu (#49098)
## Context Related to Explorer/Notebook - builds on the ExplorerQuerySourceMenu by adding an option for row limit in both Notebook Query cell + Query Tab ## Side note RE persistence of the selected row limit value Note that for QueryTab - its intentional that for now that the row limit isn't scoped to the query draft atm as I wanna avoid making changes to `explorer-query` atm as there's a couple of PRs in flux that touches that file. So will handle that separately ^ This means that switching between query tabs will not change nor persist the row limit <img width="931" height="335" alt="image" src="https://github.com/user-attachments/assets/d1d52ee7-7c1d-42aa-a6ae-1d7d99ab95c9" /> <img width="1381" height="486" alt="image" src="https://github.com/user-attachments/assets/689368c9-c0fc-4000-a09e-f59bfa7afa97" /> ## To test - [ ] Verify that row limit behaviour works in notebooks - [ ] Verify that row limit behaviour works in explorer query tab |
||
|
Charis
|
628473b3eb |
refactor(studio): extract notebook query-cell logic and give log cells display settings (#49075)
Final PR of the stack. #49069, #49070, #49072 and #49074 have merged, so this now targets `master` directly. **Rebased onto latest `master`**, which includes the centralized result-rendering work (#49096). See "Conflict resolution" below. ## What's left after master's own fixes `QueryCell` was written for database cells and adapted to log cells afterwards. Master has since fixed most of it directly: `handleUpdateCell` no longer bails on a non-database cell, the cell's own binding is read via `getQuerySourceBinding`, and `database_identifier` / `time_range` propagate across a source change. What remains: - **`display` was only passed for database cells**, so the `view` field on `log_cell` stayed unreachable and a logs query could never be charted. That is the one behavioral fix left in this PR. - The per-backend branching is inline and untested. ## What changed Per-backend logic moves into `QueryCell.utils.ts`, where it is unit-tested: `changeCellSource`, `setCellSql`, `cloneQueryCell`, `getCellDisplay`, `toQueryModel`. Each narrows on the cell tag exactly once, so the SQL brand and the backend's parameters stay correlated rather than being re-derived at each call site. `cloneQueryCell` also rebuilds the chart's series array, which valtio hands over as `readonly string[]`. `NotebookEditor` renders through `isQueryCell` (#49069) rather than a tag switch, so a new backend gets picked up by classifying it in `CELL_KINDS` instead of by remembering to add a `case`. ## Conflict resolution Two rounds of master's work landed in this file set. **`QueryCell/index.tsx` (master's own rework).** `changeCellSource` **subsumes the four source-change branches** master had inline, each covered by a test: | Master's branch | Test | |---|---| | database → database (replica change) | `keeps the query when only the database changes` | | logs → logs (time-range change) | `keeps the query when only the log time range changes` | | database → logs | `carries the query text over when moving from the database to logs` | | logs → database | `carries the query text over and restores a default row limit …` | Two improvements fall out of consolidating them: - A **logs → database** move now keeps the selected replica; pinned by `applies the selected database when moving from logs to the database`. - The row-limit default is **named** rather than a hard-coded `100`. `Explorer/utils.ts` now shares `DEFAULT_CELL_ROW_LIMIT` with `createQueryCellSkeleton`, so cell creation and backend conversion can't drift. Untouched from master: `snap.updateCell`, `AddCellDropdown`, `MoveCellDropdownContent`, the `SortableSection` grip props, and `NotebookEditor`'s add-cell buttons, skeletons, `reorderCells` and `insertCellAfter`. **Centralized result rendering (#49096).** That PR moved `QueryCell/QueryResultChart.tsx` up to `Explorer/`, split `QueryResultTable` into `QueryResultError`, and added `QueryResultRenderer`. Since this PR removes `QueryChartConfig`, the type swap had to follow the move and also reach `QueryResultRenderer`, which is new and referenced the removed type. `QueryResultRenderer`, `QueryResultError` and `DataGridResults` are otherwise untouched — the empty/error-state centralization is fully preserved, and `QueryEditor` still renders through it. ## Behavior worth a second opinion `changeCellSource` **carries the query text across a backend change** and rebrands it. This is probably not what a user wants — Postgres SQL and logs SQL are separate dialects over separate schemas, so a carried-over query will usually fail to run, and the rebrand asserts a dialect the text was never written in. Keeping it for now because it destroys nothing and needs no confirmation prompt. The tradeoff is written up at the function. Worth revisiting once we know whether people switch source to port an existing query or to start a fresh one — if it's the latter, clearing the body behind a confirmation is the better answer. Results *are* dropped on a backend change, since another engine returns unrelated columns. ## Incidental `Explorer/types.ts` drops `QueryChartConfig`, which duplicated the wire schema's `ChartConfig` field for field. `chart` stays persisted alongside `view`, so switching to the table and back returns the user's chart settings rather than rebuilding them. ## Verification Typecheck, Prettier, and the lint ratchet clean. 1013 tests pass across `state/`, the Explorer surfaces, notebooks, query sources, `data/sql`, the SQL editor, and `components/ui`; 13 of them are new coverage for the extracted helpers. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Improved notebook cell rendering with more consistent handling of query and markdown cells. - Query cells now preserve SQL, source settings, display preferences, chart configuration, and query results when edited or switched between sources. - Added a default limit of 100 rows for applicable database queries. - **Bug Fixes** - Prevented stale query results from carrying over when changing query sources. - Improved chart configuration consistency across query results and display settings. - **Tests** - Added comprehensive coverage for query-cell updates, source transitions, SQL changes, display state, and chart data. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen Lim
|
ebb8e2336e |
Centralize empty state + error handling for query results (#49096)
## Context Related to Explorer/Notebook - currently with the chart view, if the query has any errors, there's no error UI being shown Mainly because the error UI handlers are all within the table view Changes here hence opt to extract the empty state + error UI into a centralized renderer <img width="936" height="366" alt="image" src="https://github.com/user-attachments/assets/437891dc-241e-4c43-97a6-6eef52472ee7" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added unified query result display for prompts, errors, empty results, tables, and charts. * Query results now switch consistently between table and chart views. * **Bug Fixes** * Improved empty-result layout centering across views. * Expanded error display to use the available width. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Charis
|
b5bfc70c06 |
fix(studio): correlate a query's SQL brand with the backend it runs against (#49074)
Fourth of the stack; PRs 1–3 (#49069, #49070, #49072) have merged, so this now targets `master` directly. **Rebased onto latest `master`.** See "Conflict resolution" at the bottom for what was reconciled. ## The bug `QueryEditor` took `sql: string`, so a query's dialect brand died at the prop boundary and the component re-branded whatever it was handed based on a separately-passed `source`. Nothing tied the two together, which meant nothing stopped Postgres SQL from reaching the analytics endpoint. Explorer query drafts made it concrete. `explorer-query.ts` branded **every** draft with `untrustedSql` regardless of source: ```ts uncheckedSql: untrustedSql(sql) // even for a logs draft ``` and the editor then re-branded that same text with `untrustedLogSql` at run time for a logs draft — laundering a Postgres-branded value straight through the boundary that `safe-analytics-sql.ts` exists to defend. The brands are deliberately disjoint precisely so this can't happen; passing plain strings around defeated it. ## The fix Both carriers are now tagged by backend, so one `_tag` check narrows the SQL brand and that backend's parameters together. - **`ExplorerQueryDraft`** becomes `DatabaseQueryDraft | LogsQueryDraft`, and `toDraft` is the single place a persisted string re-enters the type system — branded for the backend its binding names. The draft is rebuilt rather than mutated in place, since a backend change changes which brand its SQL carries. - **`QueryEditor`** takes one discriminated `query` prop instead of `sql` + `source` + `rowLimit`. The tag picks both the brander at the editor boundary and the execution endpoint, so the mismatch is no longer expressible. - The two `acceptUntrusted*` promotions stay **inlined** in the run handler rather than factored into a shared helper, so each stays visible next to the user gesture that authorizes it, per the safe-SQL model. - **`rowLimit` moves onto the database member.** Logs execution has no use for it — `applyAutoLimit` is Postgres-specific — so it no longer sits on a shared type where it reads as meaningful for both. ## Local storage Existing query drafts shape-mismatch and fall back to a database binding via the existing `safeParse` guard — harmless, and notebooks are still behind the `explorer` flag so there is no saved server content in play. ## Conflict resolution `master` moved inside every file this PR touches. The type change is applied on top of that work; nothing was reverted. | Preserved from `master` | Where | |---|---| | zod parsing of persisted drafts (`persistedDraftsSchema`, `persistedDraftSchema`) | `explorer-query.ts` | | `MAX_PERSISTED_EXPLORER_QUERY_DRAFTS` cap, retaining most-recently-updated | `explorer-query.ts` | | debounced SQL persistence + `flushPendingPersistence`, immediate write-through for rename/source | `explorer-query.ts` | | `removeDraft` clearing pending timers | `explorer-query.ts` | | `getQuerySourceBinding(cell)` and the four source-change branches, incl. `database_identifier` / `time_range` propagation | `QueryCell/index.tsx` | | `restoredQueryKey` per `ref:id` and the `role="status"` loader | `QueryTab.tsx` | | `applyAutoLimit` relocated to `@/data/sql/utils` | `QueryEditor.tsx` | Two adaptations were needed: - `updateDraft` rebuilds the draft through `toDraft` instead of mutating it in place — required, because the object's shape depends on its tag. The debounced `persist` closure still re-reads `state.drafts[id]` at fire time, so behavior is unchanged. - Master's new test `falls back to the database source when persisted source data is invalid` asserted `draft.source`, which the tagged union replaces. Rewritten to assert the same intent against `_tag`. **Dropped from this PR's original description:** it previously claimed to fix a log cell always running against a synthesized default time range. Master fixed that itself by adopting `getQuerySourceBinding` (from #49072), so the claim no longer applies. ## Verification Typecheck, Prettier, and the lint ratchet clean. 736 tests pass across `state/`, the Explorer surfaces, notebooks, query sources, `data/sql`, and the SQL editor — including master's new `QueryTab.test.tsx`, `ExplorerQuerySourceMenu.test.tsx`, `ExplorerQueryTabCoordinator.test.tsx`, and the five draft-store tests added since this branch was cut. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Bug Fixes** - Improved Explorer query handling across database and logs backends. - Preserved query text when switching backends while clearing incompatible results. - Retained results when changing parameters within the same backend. - Improved restoration of saved drafts, including fallback handling for legacy or invalid sources. - Added validation before executing edited SQL to help prevent invalid requests. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Charis
|
0ed49231b7 |
refactor(studio): unify CellSource and the SQL editor's QuerySource into QuerySourceBinding (#49072)
Third of a stack. **Stacked on #49070** (which is stacked on #49069) — review those first. Base retargets automatically as each merges. Mechanical throughout; no behavior change. ## The problem Three types described where a query runs, and no two agreed: | | shape | |---|---| | `CellSource` (registry) | `{ id, type, parameters: { … } }` — `id` and `type` always held the same literal | | `QuerySource` (SQL editor) | `{ type: 'database' } \| { type: 'logs', dateRange }` | | notebook cells | flat per-backend fields, neither of the above | Anything crossing between them needed a translation that dropped fields on the way — which is how a notebook cell's replica selection had nowhere to go. ## What changed One `QuerySourceBinding`: a backend `_tag` with that backend's parameters spread flat beside it, borrowed from the wire schema (#49069) so the binding and the persisted cell agree by construction. - **`QuerySource` is deleted.** `useRunSource` returns the shared binding, so `runSource.type`/`dateRange` become `_tag`/`time_range` across the SQL editor — that is most of the file count here. - **`getQuerySourceBinding`** projects a notebook cell onto a binding; **`toQuerySourceBinding`** does the same for any backend-tagged carrier. Both overloaded so an already-narrowed caller gets the matching binding back rather than the union, which keeps the result spreadable without re-narrowing. - **`ExplorerQuerySourceMenu`** drops its inline copy of the custom-range and upgrade-prompt logic in favor of `useLogsCustomRange`, which the SQL editor menu already used. The registry keeps only what is genuinely runtime: endpoints, labels, icons, availability, defaults. What a query *is* stays in the wire schema. ## Verification Typecheck, Prettier, and the lint ratchet clean. 405 tests pass across the notebook schema, query sources, the logs components, the SQL editor, and the Explorer surfaces. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Improvements** * Updated query source handling across Explorer and SQL Editor for a more consistent selection experience. * Database and log sources now preserve identifiers and time ranges more reliably when switching or editing queries. * Source menus, labels, icons, validation, and query execution now reflect the selected source more accurately. * **Bug Fixes** * Invalid or outdated saved source settings now safely fall back to a database source. * Improved log-source detection and time-range handling throughout query editing and execution. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
Joshen Lim
|
2f89014f74 |
Add logs cells (#49064)
## Context Related to Explorer/Notebooks - adds the source selector for query cell within a notebook <img width="1108" height="648" alt="image" src="https://github.com/user-attachments/assets/d1434197-3738-41b0-a8ef-1919c91181d9" /> <img width="1103" height="633" alt="image" src="https://github.com/user-attachments/assets/97f8c6a3-629d-4a41-aab4-3fdc5e8b2c7e" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added support for displaying log cells in the query editor. * Added switching between database and log query sources. * Log and database cells can display results as tables or charts. * Log queries support optional row limits. * Improved reliability when changing query settings. * Notebook query views now default to table display when unspecified. * **Bug Fixes** * Log cells no longer appear blank or get omitted from notebook views. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen Lim
|
93d9d80535 |
joshen/fe 4149 explorer support adding removing cells in notebook (#49037)
## Context Related to Explorer/Notebooks - this PR adds the functionality to add / remove cells Separately - am thinking we can shift a lot of the "cell update" logic into notebook-state, mainly so that each UI component doesn't need to be aware of the notebook's `cells` but just its own cell. I'll do it separately though to prevent bloating this PR, already left comments where i think can be refactored <img width="250" alt="image" src="https://github.com/user-attachments/assets/91aae5f9-07b9-4327-8e21-8e9d71098aa6" /> <img width="250" alt="image" src="https://github.com/user-attachments/assets/677de208-5c52-4155-90c6-bc0879070693" /> <img width="250" alt="image" src="https://github.com/user-attachments/assets/17c3dae7-87bc-40bb-bfa0-15df101006ce" /> <img width="1091" height="262" alt="image" src="https://github.com/user-attachments/assets/a09c3d23-696a-4b55-a1f8-4602e56a60dc" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## New Features - Add query and Markdown cells directly within notebooks. - Move, remove, and reorder cells using drag-and-drop or cell controls. - Add cells from empty states and notebook toolbar actions. - Edit Markdown cells, mark edits as complete, and see placeholders for empty content. ## Improvements - Cell controls and hover interactions are more consistent and responsive. - Moving cells is disabled at the top or bottom of a notebook. - Sample cells now use standardized content and formatting. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Saxon Fletcher
|
ace9422bfd |
refactor(studio): share Explorer query editor (#49041)
## Stack Depends on #49027. Followed by #49038. ## Summary - extract a controlled `QueryEditor` from the existing notebook query cell - reuse it from `QueryCell`, leaving notebook persistence and sortable-block behavior in the adapter - make table/chart result settings controlled so other query surfaces can share them - persist notebook SQL on editor blur and query execution ## To test 1. Open a notebook query cell, edit and rename it, then run the query and confirm results appear. 2. Switch between table and chart results and confirm notebook move/delete actions still work. ## Why Notebooks, query tabs, and future chat tabs need consistent query actions and result rendering without duplicating the notebook implementation. ## Impact This is primarily a refactor of the existing notebook query experience. It introduces no new query-tab routes or source-selection behavior. ## Validation - fresh non-incremental Studio TypeScript check - focused NotebookEditor component tests <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added a shared query editor with SQL editing, execution, validation, visibility controls, editable titles, row limits, and loading/error states. * Added table and chart result views, including customizable bar and line charts. * Added support for switching display modes and updating chart settings. * **Improvements** * Improved query result handling and display-setting updates. * Repositioned the logarithmic-scale tooltip for better visibility. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
Joshen Lim
|
09894096e2 |
Add log scale support to query result chart (#49049)
## Context Related to Explorer/Notebooks - Adds support for log scale in the charts <img width="980" height="477" alt="image" src="https://github.com/user-attachments/assets/b3764023-bd9a-4edd-92d4-1b61df93b97e" /> Prevents setting to log scale if y axis has yet to be selected, or if the data set contains non positive values <img width="393" height="188" alt="image" src="https://github.com/user-attachments/assets/57695d9e-9724-47ed-aa2a-c104c16837b2" /> <img width="408" height="159" alt="image" src="https://github.com/user-attachments/assets/2290bb69-0ddb-4449-afad-aabae6ace669" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added logarithmic Y-axis scaling for line and bar charts. - Added logarithmic tick formatting and appropriate chart bounds. - Added contextual guidance when logarithmic scaling is unavailable. - **Bug Fixes** - Automatically switches charts back to linear scaling when data contains values that cannot support logarithmic scaling. - Prevented unnecessary stacking for single-series area charts. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen Lim
|
d434c63bad |
joshen/fe 4150 explorer query cells result display settings (#49003)
## Context Related to Explorer / Notebooks - this adds chart functionality for the Query cells <img width="250" alt="image" src="https://github.com/user-attachments/assets/4ea37c14-87dc-4c43-ba7f-cb9436085c81" /> Query results can be rendered as either bar or line chart - using the chart packages from `ui-patterns` [NOTE]: For design team reviewers - am patching the chart packages to be agnostic to the `timestamp` property within the provided data set. Would love to use this component from a consistency POV instead of the old `BarChart` component we have. Have intentionally omitted log scale functionality from this PR - will have that separately 🙏 <img width="999" height="483" alt="image" src="https://github.com/user-attachments/assets/14356ee4-c658-4fd1-90e0-17c38dac4822" /> <img width="988" height="478" alt="image" src="https://github.com/user-attachments/assets/cd0ca088-9a03-4aa3-9884-17bc36d3cabf" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added chart views for notebook query results, including bar and line charts. - Added display settings for selecting X/Y columns, chart type, scale, cumulative values, and label visibility. - Added configurable X-axis support for charts. - Display preferences are saved with each notebook cell. - **Improvements** - New database cells default to table view. - Chart results better handle varied data types. - Empty results and incomplete chart settings now display clear placeholders. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen Lim
|
77c5a0b9d9 |
Joshen/fe 4077 explorer query cells (#48989)
## 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 --> |