## Context
Part of an investigation to see how we can make the dashboard more
resilient for large databases by ensuring that the dashboard never
becomes the reason for taking down the database accidentally.
Am proposing that for interfaces that rely heavily on queries to the
database for data to render, we add preflight checks to ensure that we
never run queries that exceed a certain cost threshold (and also have UI
handlers to communicate this) - this can be done by running an EXPLAIN
query before running the actual query, and if the cost from the EXPLAIN
exceeds a specified threshold, the UI throws an error then and skips
calling the actual query.
## Demo
Am piloting this with the Table Editor, and got an example here in which
my table has 500K+ rows, and I'm trying to sort on an unindexed column:
https://github.com/user-attachments/assets/ccad2ea9-d62c-4106-8295-2a6df5941474
With this UX, the pros are that
- It's relatively seamless and not too invasive, most users won't notice
this unless they run into this specific scenario
- We can incrementally apply this to other parts of the dashboard, next
will probably be Auth Users for example
However there are some considerations:
- The additional EXPLAIN query adds a bit more latency to the query
since its a separate API request to the query endpoint
- ^ On a similar note, it will hammer the API a bit more, which may
result in higher probability of 429s
- However, I reckon that the preflight checks are meant to be used
sparingly and only for certain parts of the dashboard that we believe
may cause high load.
- e.g for the Table Editor, reckon we only need this for fetching rows?
The count query is largely optimized already (although we could just add
a preflight check there too)
- It's just meant to be a safeguard to prevent running heavy queries on
the database
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Query preflight with cost checks and a user-facing high-cost dialog
showing cost details and remediation suggestions.
* Grid exposes an explicit error flag and surfaces richer error
metadata.
* **Bug Fixes**
* Standardized error handling and more consistent error displays across
the app.
* Explain analysis now reports an additional max-cost metric for
queries.
* **UI**
* Tweaked empty-state interaction/layout and slightly wider header
delete control.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Ali Waseem <waseema393@gmail.com>
## Context
Just adding some documentation to the more complex parts of the
dashboard in hopes to ease working on these parts for those who aren't
familiar
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Folder creation and updates in the SQL Editor now properly sync to the
backend with API calls, success notifications, and improved error
handling.
* Snippet save/upsert behavior updated: saves run via API with
optimistic handling and debounced execution; default automatic refresh
after save has been reduced to avoid unnecessary invalidations.
* **Documentation**
* Added a comprehensive SQL Editor guide covering UI, data flow, snippet
management, and improvement notes.
<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
* Add custom types for queries, mutations and infinite queries.
* Migrate all queries to use the new type.
* Migrate all infinite queries to useCustomInfiniteQueryOptions.
* Migrate all mutations to use useCustomMutationOptions.
* Add type to all imports in `types` folder.
* Migrate all uses of invalidateQueries to use object syntax.
* Migrate the remainder of useInfiniteQuery.
* Migrate all setQueriesData.
* Migrate all fetchQuery uses.
* Migrate some leftover functions from RQ.
* Fix issues found by Charis.
Add telemetry tracking for activation-related table operations
- Implement SQL event parser to detect table creation, data insertion, and RLS enablement
- Add telemetry tracking for these operations in table editor as well
- Add test coverage for SQL event parser
* Update database-triggers-query to use get from data/fetchers
* Update database triggers mutation RQs to use methods from data/fetchers
* Don't cd to the directory, use the --dir parameter of pnpm.
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
* Update the design of the sonner toasts. Add the close button by default.
* Migrate studio and www apps to use the SonnerToaster.
* Migrate all toasts from studio.
* Migrate all leftover toasts in studio.
* Add a new toast component with progress. Use it in studio.
* Migrate the design-system app.
* Refactor the consent toast to use sonner.
* Switch docs to use the new sonner toasts.
* Remove toast examples from the design-system app.
* Remove all toast-related components and old code.
* Fix the progress bar in the toast progress component. Also make the bottom components vertically centered.
* Fix the width of the toast progress.
* Use text-foreground-lighter instead of muted for ToastProgress text
* Rename ToastProgress to SonnerProgress.
* Shorten the text in sonner progress.
* Use the correct classes for the close button. Add a const var for the default toast duration. Remove the custom width class from sonner.
* Set the position for all progress toasts to bottom right. Set the duration for all toasts to the default (when reusing a toast id from loading/progress toast, the duration is set to infinity).
* Fix the playwright tests.
* Refactor imports to use ui instead of @ui.
* Change all imports of react-hot-toast with sonner. These components were merged since the last commit to this branch.
* Remove react-hot-toast lib.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
* Add two more sizes to the Panel component.
* Add alias for the older openai-api library. The new one is added under the openai name.
* Add API routes
* Add components for the new AI RLS panel.
* Bunch of changes to the AI Policy Editor.
* Add a button for opening the new Policy Editor.
* Add a feature flag for the new editor.
* Add a confirmation modal when closing the panel.
* Fix leftover data when closing the panel.
* Make the copy button work.
* Add the next/swc packages to package-lock.json.
* Merge master
* Scaffold debug sql in rls editor
* Small improvements to policy chat
* Hook up debug to ai assistant panel
* Improve debug UX
* Add debug request badge
* Some styling fix
* Small styling fix
* Another small styling fix
* Shift create new policy ai button + fix error stylign with code editor height
* Add tooltips to apply changes and copy code from assistant message
* Hide assistant button is not platform
* Small lint
* Add default error handlers to all AI RQ mutations
* Small fix
* Remove IS PLATFORM check for rls assistant
* Add placeholder to RLS code editor
* Fix diff + rls code editor
* Add placeholder message after sending prompt
* Small style
* RLSCodeEditor hit tab if empty to populate placeholder text
* Light mode nudeges
* Update logic for when confirmation close modal should show
* Set render overview ruler as false for rls diff editor
* improve chat UX to make it smoother (thank you alaister for your help 🙏)
* Dynamically do keepPreviousData
* Gracefully handle errors for add prompt
* Use animated ai icon while message is loading
* using Sheet component
* Address commernts
* Bit more improvements
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
* Move all studio files from /studio to /apps/studio.
* Move studio specific prettier ignores.
* Fix the ui references from studio.
* Fix the css imports.
* Fix all package.json issues.
* Fix the prettier setup for the studio app.
* Add .turbo folder to prettierignore.
* Fix the github workflows.
Charis