## Context
Part of dashboard scalability project
Opting to use the connection string of the project's read replica (if
available) for read queries on the database.
Trialing with the Table Editor as a first pass - changes involved will
opt to use replica connection string for `useTableRowsQuery`,
`useTableRowsCountQuery`, and `useForeignKeyConstraintsQuery`
There's definitely optimizations to be done for deciding which replica
to use - but am starting off with a rather naive logic to prioritize
replicas in the same region as the project.
## Changes involved
- We're no longer passing `connectionString` as a param into the
affected hooks, the `connectionString` is derived from within those
hooks instead
- Change is feature flagged, so things should be status quo if flag is
off (use primary database's connection string)
- Added `useConnectionStringForReadOps` hook which returns the replica's
connection string if (Otherwise defaults to primary database connection
string)
- Feature flag is on
- Project has a replica available
## To test
- [ ] Verify that the table editor works as expected for a project that
has read replicas (There shouldn't be any change really)
- [ ] Also just double check that updating cells in the table editor
works as well (There's no change there, we're using the primary DB's
connection string for mutation ops)
- [ ] ^ Same thing for a project that doesn't have read replicas
- [ ] ^ Same thing for local / self-host
Cleanup / chore — removing a feature flag that has been at 100% rollout
with no issues.
## What is the current behavior?
The `dataApiExposedBadge` feature flag is checked at runtime via
ConfigCat, even though it has been set to 100% for a while with no
issues.
## What is the new behavior?
The feature flag check is removed and the gated behavior is now
unconditionally enabled. A reminder has been set to delete the flag from
ConfigCat in a month.
## Summary by CodeRabbit
**Refactor**
* Simplified API access status indicators in the studio editor, ensuring
security-related tooltips now display consistently based on actual
access conditions.
* Updated component interfaces and consolidated internal hook
dependencies for improved code maintainability and organization.
Bug fix
## What is the current behavior?
The clipboard copy operation for table schema would show the success
toast before the copy actually completed.
## What is the new behavior?
Move the toast showing to the callback so it appears only after the copy
finishes
## Summary
* **Bug Fixes**
* Clipboard success confirmation now appears reliably after the copy
completes.
* **New Features**
* Copied table schemas are automatically formatted for improved
readability.
* **Improvements**
* Enhanced clipboard behavior for better reliability across browsers.
* fix(studio): schema copy bug in safari
The schema could not be copied to clipboard in Safari because of the
known problem where Safari does not allow awaits to happen before
copyToClipboard. Fixed by passing the promise directly to
copyToClipboard.
* chore(studio): add eslint rule to catch async copyToClipboard
* Apply suggestion from @charislam
* Smol fix
* Clean
* Revert
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Popover ui component to use portal by default, remove all manual declaration of portal for PopoverContent in dashboard
* Forgot to add ui changes lol
* Clean uop
* feat(studio): add mutation to update table access privileges
Adds a mutation to update table grants for `anon` and `authenticated`
roles.
* feat(studio): add data api toggles
Add toggles to the Table Editor, allowing fine-grained grants to the
anon and authenticated roles.
* fix(studio): don't show rls policies warning if table not exposed
RLS policies warning was showing in Table Editor side panel even if
table was not exposed due to no grants to anon/authenticated.
* fixup! feat(studio): add data api toggles
* fixup! feat(studio): add data api toggles
* fix(studio): revalidate rls lints when table grants are toggled
---------
Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
* feat(studio): show icon on tables exposed by data api
Show an icon in the Table Editor for tables that are exposed via the
Data API.
* refactor(studio): move table api access query up to parent
* fix(studio): invalidate table privileges query on table create
* fix(studio): make RLS disabled warning on table editor more obvious
Change from warning -> danger
* Only show add foreign key in side panel if isSuccess
* chore(studio): put data api exposed badge behind feature flag
Only show badge for now if flag `dataApiExposedBadge` is enabled.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Possible solution with building the URL from local storage.
* Refactor the local storage for tabs to use table ids.
* Fix the saving table state to local storage.
* Minor fixes.
* Open the correct schema when following the link.
* Minor fixes from CodeRabbit.
* Address charis' feedbacks
* Clean
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Bump the deps, refactor deprecated code.
* Migrate keepPreviousData usage.
* Migrate all uses of InfiniteQuery.
* Fix refetchInterval in queries.
* Migrate all use of isLoading to isPending in mutations.
* Fix accessing location in claim-project.
* Fix a bug in duplicate query keys.
* Migrate all queries to use isPending.
* Revert "Fix accessing location in claim-project."
This reverts commit 2a07df64b5.
* Revert the rss.xml file to master.
Exporting all rows (in CSV, SQL, or JSON format) currently uses offset pagination, which can cause performance problems if the table is large. There is also a correctness problem if the table is being actively updated as the export happens, because the relative row offsets could shift between queries.
Now that composite filters are available in postgres-meta, we can change to using cursor pagination on the primary key (or any non-null unique keys) wherever possible. Where this is not possible, the user will be shown a confirmation dialog explaining the possible performance impact.
---------
Co-authored-by: Ali Waseem <waseema393@gmail.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* refactor(infinite list): use @tanstack/react-virtual for virtualization
Swapping virtualization libraries from `react-window` to
`@tanstack/react-virtual`.
Motivation: we need a completely headless library for maximum
flexibility. `react-window` injects extra DOM elements which makes it
hard to customize styling and placement on elements that are very picky
about their DOM structure, like tables.
* refactor(table editor menu): use new infinite list
* refactor(notifications): use new infinite list
* cleanup(infinite list): remove old infinite list
* refactor(storage menu): use new infinite list & remove react-window deps
* Add table quickstart with templates and AI generation
Implement table quickstart feature with two variants:
- Template-based: Pre-built schemas across multiple categories (social, ecommerce, content, productivity)
- AI-powered: Generate custom table schemas from natural language prompts
Key features:
- Template selector with category tabs and schema previews
- AI generation using gpt-oss-120b via Bedrock for fast response times
- Streaming responses with real-time table generation
- Quick idea chips for common use cases
- Success feedback and seamless integration with table editor
- Feature flag gated (tableQuickstart) with 7-day new project window
- Comprehensive error handling and retry logic
- ARIA labels and accessibility improvements
Technical implementation:
- Custom React hooks for AI generation and state management
- Zod schema validation for type-safe streaming
- API endpoint with structured object streaming
- localStorage-based dismissal state
- Consistent styling with existing UI patterns
* Refactor and optimize AI table generation
Refactor to use AI SDK streaming with structured object generation:
- Use streamObject() with Zod schema validation for type-safe streaming
- Add 50KB buffer limit to prevent memory issues from oversized responses
- Replace custom stream parsing with Object.assign() for efficient merging
- Use fetchHandler utility for consistent error messages across codebase
- Clean up comments and unused code
* Update quickstart widget styling to match action card
- Changed background from bg-surface-75 to bg-surface-100
- Changed hover background to bg-surface-200
- Applied to AI widget, template widget, and quick idea buttons
* Address PR review feedback
- Persist AI results to localStorage so users can create multiple tables from same generation
- Remove unnecessary isMountedRef checks before synchronous state updates
- Change Quick ideas label to semantic h4 element for accessibility
- Add TODO comment about migrating to experimental_useObject() hook
* Clean up table quickstart implementation
- Match SQL Editor ActionCard styling with circular icons
- Implement smart Generate/Regenerate button logic
- Add tooltips for column counts
- Persist prompt to localStorage
- Fix React hook dependency warnings
- Remove debugging artifacts
* Improve stability and explicitness of table editor tab cache <-> url syncing
* fix: maintain filter state when using nav bar to switch back to Table Editor
---------
Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
* Update perms checking in audit logs
* Deprecate useCheckPermissions, useIsPermissionsLoaded and useCheckProjectPermissions as they're no longer used
* Rename useAsyncCheckProjectPermissions to useAsyncCheckPermissions
* Fix TS
* Wrap up remaining swapping of useCheckPermissions
* remove OrganizationSettingsLayout on billing, team, integrations and usage org pages
* Fix missing loading state in usage page
* Add comments for next step
There is a bug in the Table Editor mobile view:
1. Open the Table Editor in mobile.
2. Open a tab with a table.
3. Use the Table Editor Menu to switch schemas. This switches the schema
in the URL and in local storage, but the Table Editor Menu closes
immediately and you can't see the list of tables in the new schema to
pick.
4. Open the Table Editor Menu again to pick a new table. The schema
automatically flips back to the previous schema, and the Table Editor
Menu only flickers open temporarily before closing again. There is no
way to access the tables for your newly selected schema.
The cause of the bug:
There is a useEffect that triggers every time the Table Editor Menu is
opened in mobile. (It technically has selectedTable?.schema in its
dependency array, but since the menu unmounts and remounts on visibility
toggle, the effect runs regardless of whether global selectedTable state
has changed. That's also why desktop works fine, because the menu is
continuously mounted in desktop view.)
When the useEffect runs, it sets the schema to the schema of the
currently selected table. Therefore, what actually happens:
1. Schema is set to `schema_a`. The currently selected table is
`schema_a.table_a`.
2. User changes schema to `schema_b`.
3. User reopens Table Editor Menu. useEffect runs. Currently selected
table is `schema_a.table_a`, so the schema automatically changes back
to `schema_a`. Menu automatically closes.
The fix:
The actual behavior on desktop right now is probably what we want:
- The selected table is only used to set the schema if no explicit
schema is provided.
- If an explicit schema is provided, the user probably chose it, so we
allow the schema to not match the currently selected table. The table tabs
update to include the table schema anyway if the schema changes, so it should
be somewhat obvious that the schema of the menu and the selected table
don't match.
Therefore, the logic we want is `!!selectedTable?.schema &&
!selectedSchema`. Because of this change, we can also take it out of the
useEffect, which means less circular logic.
that
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Replace all usage of useProjectContext with useSelectedProjectQuery
* Replace all usage of useSelectedProject with useSelectedProjectQuery
* Replace all usage of useProjectByRef with useProjectByRefQuery
* Replace all usage of useSelectedOrganization with useSelectedOrganizationQuery
* Deprecate useSelectedProject, useSelectedOrganization, and useProjectByRef hooks
* Deprecate ProjecContext
* Add hooks for async protected schemas.
* Migrate the ProtectedSchemaWarning to support the new implementation.
* sq
* Migrate all uses of protected schemas to the new approach.
* Delete extra file.
* Refactor the import foreign schema dialog to forbid protected and exposed schemas.
* Add the type to the protected schema.
* Revert ImportForeignSchemaDialog, it'll be addressed in another PR.
* Update apps/studio/hooks/useProtectedSchemas.ts
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Fix a bad commit.
* Minor fixes.
* Fix the FDW delete mutation to handle names with numbers.
* Simplify the logic to skip a fetch.
* Minor fixes.
* Make the useIcebergFdwSchemasQuery work for all iceberg FDWs.
* Fix the tab schemas to always show in the Table Editor.
* Apply suggestion from @joshenlim
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Fix a minor typo.
* Refactor ProtectedSchemaWarning to use Admonition, and standardise input field for target schema iceberg
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Consolidate copy to clipboard
* Fix
* Fix some extra clipboard events.
* Fix the tests. Fix a small issue with the copy button.
* Fix
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
* Update table editor tab labels when entering table editor if labels dont match entity names
* Update sqlEditorTabsCleanup to also update tab labels if they dont match snippet names
* Update table editor tabs clean up logic to be consistent with sql editgor
* Clean up
* init
* Update inner-side-menu.mdx
* chore: update SQL sidebar to use ui pattern components
* mor
* Update
* Update index.tsx
* init: merge table editor and sql editor and schema visualization together
* more
* move to valtio
* fix issue with Command+B shortcut
* now shows in treeviews if item is opened in tab
* Update ProjectLayout.tsx
* fix sidebar
* fix schema selector for non explorer version
* show schema name in tabs
* added schema names to tabs
* tabs have been updated to support preview tabs
* fix URL issue
* add empty state stuff
* Update SQLEditorNav.tsx
* preview tab works now
* more tabs stuff. 'new' tab also added
* new tab concept
* updates
* fix type errors
* remove unused files
* update test
* move back button, fix width issues on sidebar
* update sidebar logic
* Update ProjectLayout.tsx
* lots of updates. layouts now streamlined. localstorage for tabs in use
* moar
* bunch of new tab logic
* fix empty tab issue
* Update tabs.ts
* layouts switched
* new pages now have fixed layouts
* fix tabs
* fix code bg
* add tabs support for multiple project refs
* intialization issue
* update ID handling
* fixed isOpened state for SQL snippets
* remove old assistant because its bugging up panels
* preview style works in sql editor
* fix border
* removes preview tab if there is one
* fix background of loading skeleton
* lots of issues with types/icons/redirect
* new tab cards
* snippets in empty state now work
* moar stuff
* tabs now in feature flags
* Update tabs.ts
* Update tabs.ts
* moar
* add feature previews
* remove code not needed
* Update next-env.d.ts
* Delete FeaturePreviewModal.tsx
* fix typescript errors. remove more explorer stuff
* remove explorer files
* fixed issues with templates and quickstarts tab
* fixed active state when tabs are not opted in
* logic error
* fix open/highlight issue when opted out of tabs
* templates/quickstarts now displayed with new cards
* Update recent-items.tsx
* Update new-tab.tsx
* add icon back in
* add old empty state back in
* recent items updated to respect project ref
* localstorage cleanup on deletion
* moar
* overflow tabs now working
* correct tab names used for new sql templates/quickstarts
* ongoing queries fix
* cleanup
* update images
* Update RouteValidationWrapper.tsx
* Update AppLayout.tsx
* Update NavigationBar.tsx
* add headers back into side panels
* improve writing
* tabs now drag and drop a billion times better
* Update tabs.tsx
* Update tabs.tsx
* init issues on stores, which caused a race condition.
* fix hydration error
* fix new tab issue in sql
* Update ProjectLayout.tsx
* Update pnpm-lock.yaml
* Update new-tab.tsx
* move EditorMenuListSkeleton
* Fix type issues
* fixes: DESIGN-87
fixes: DESIGN-87
* refactor sort/filter components
* Update rules-set-button-text.tsx
* remove discussions for now
* small styling fixes
* Update FeaturePreviewModal.tsx
* Update FeaturePreviewModal.tsx
* Update RouteValidationWrapper.tsx
* revert
* revert
* revert
* revert
* revert
* more revert
* Update collapse-button.tsx
* Update SQLEditorTreeViewItem.tsx
* revert
* Update SchemaGraph.tsx
* Delete new-upcoming.tsx
* revert
* Update ProjectLayout.tsx
* fix home link
* Update table-editor.spec.ts
* test update
* Update table-editor.spec.ts
* Fix the playwright tests.
* layout fixes
* layout fix
* revert sort/filter
* Update LastSignInWrapper.tsx
* revert
* revert
* remove
* update file names
* revert
* revert
* revert
* Fix TreeView console error props
* Add guards in SQL Editor to ensure that feature preview tabs changes do not affect existing UI when flag is off
* Fix missing DefaultLayout in SQL editor templates + fix New tab
* Remove console log
* Remove DatabaseSelector for SQL editor on local
* Fix SQL editor shared favorites for local
* Fix test
* Ensure NewTab doesn't show up if flag is not toggled for SQL editor
* Decouple UI state changes from content-query and entity-types-infinite-query
* Fix tab closing unnecessary rerouting
* Beef up feature previews
* Fix create new table from table editor new tab
* Fix tabs getting incorrectly reset when going between table and SQL editors
* Fix last visited SQL snippet for both tabs and not tabs
* Fix last visited table for table editor tabs
* Clear dashboard history when closing last tab
* Fix loading dashboard history
* Add comment to refactor stores
* Ensure we only save up to 8 items for recent items for each type
* Remove unneccesary logic in tabs
* Smol style fix for DeleteAccountButton
* Smol fix
* Fix inability to close New tab
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Alaister Young <a@alaisteryoung.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
* chore: remove react-tracked part 1
* move out table specific state to own store
* chore: remove react-tracked part 2
* remove unused type
* ensure table is properly updated on changes
* remove all filters save in local storage
* Tiny fixes
* fix sort / filters applying issue + feedback
* fix entity links
* remove unnecessary style
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>