## Problem
Now that we migrated all usages of the deprecated `Tabs` component, we
don't need the `_Shadcn_` suffix anymore.
## Solution
Remove `_Shadcn_` suffix from `ui` tabs components. That's all this PR
does, no visual nor functional changes
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Standardized tab components across the app so pages and dialogs now
use the same consistent tab UI.
* Improved tab-based views in design, docs, studio, learn, and website
experiences for a more uniform interface.
* **Chores**
* Updated shared UI exports to expose tab components directly,
simplifying future usage across the product.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
Knip reports many duplicate exports (both named and default). Besides,
we're moving away from default exports and even have an eslint rule to
enforce it on new code.
## Solution
- Cleanup those exports
- Update imports when necessary
No functional changes. If it builds, it's fine
## Problem
There's still more unused code in the repository which slows down
everything:
- checkouts
- tooling
- probably builds (not sure how good turbopack is at handling this)
## Solution
- remove old unused code
- remove more recent code after checking git history to ensure it's not
unfinished/ongoing work
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Removed several unused interface, onboarding, and helper components
from the studio app.
* Cleaned up outdated branching, integrations, query performance,
support, and table/grid UI elements.
* Removed a few unused utility hooks and key-mapping logic.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
Our `<Button>` component breaks the default `button` contract by
redefining the `type` prop to set its variant (`primary`, `default`,
etc) instead of the button type (`submit`, `button`, etc).
This is confusing and forces to write more code when using it with
shadcn components that expect/inject the standard button props.
## Solution
- rename the `type` prop to `variant`
- rename the `htmlType` prop to `type`
- propagate the changes where necessary
- format code
## How to test
As this is just prop renaming, if it builds it's ok
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
## What kind of change does this PR introduce?
Chore. Rename / UX copy update in Studio's SQL Editor.
## What is the current behavior?
The SQL Editor sidebar has a **Community** section containing two pages:
- **Templates**: reusable SQL snippets for common tasks
- **Quickstarts**: end-to-end examples and starter projects
The section label "Community" is misleading because these are
first-party presets maintained by the Supabase team, not
user-contributed content. "Quickstarts" also doesn't clearly convey
"end-to-end example".
## What is the new behavior?
- **Community** → **Reference** (sidebar section header)
- **Quickstarts** → **Examples** (route: `/sql/quickstarts` →
`/sql/examples`)
- Templates keeps its name and route (`/sql/templates`), description
updated to "Reusable SQL snippets for common tasks"
Taxonomy:
- **Templates** = reusable SQL patterns you adapt
- **Examples** = end-to-end walkthroughs you run as-is
A permanent redirect is added so `/sql/quickstarts` gracefully forwards
to `/sql/examples`. The existing `/sql/templates` route is unchanged.
| Before | After |
| --- | --- |
| <img width="1024" height="759" alt="Quickstarts SQL Editor Pickles
Pantry Supabase-644881A5-6396-43AA-9AC4-61FFFFF18831"
src="https://github.com/user-attachments/assets/ff876c78-c499-4bac-b1ae-91e31817511d"
/> | <img width="1024" height="759" alt="Examples SQL Editor Pickles
Pantry Supabase-573775FA-E38F-4F8D-92E3-114237410C36"
src="https://github.com/user-attachments/assets/bdb8910f-94e9-4c21-bb3a-f6513008d8bc"
/> |
## Additional context
- `CommunitySnippetsSection.tsx`: header label + route keys updated; the
underlying `community` localStorage key is intentionally unchanged to
avoid resetting stored collapsed/expanded state for existing users.
- ESLint rule baselines and a docs troubleshooting link updated to
reflect the new filenames/routes.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Documentation**
* Updated troubleshooting guide to reference the correct SQL examples
location.
* **New Features**
* Renamed "Quickstarts" to "Examples" throughout the SQL editor for
improved clarity.
* Updated SQL template and examples section descriptions and labels to
better reflect their purpose.
* Reorganized SQL editor navigation to streamline access to templates
and examples.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46241?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## 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?
Improving accessibility for icon-only buttons
## What is the current behavior?
Icon-only buttons do not have explicit accessible names for screen
readers.
## What is the new behavior?
All icon-only buttons now have explicit accessible names using visually
hidden text (sr-only), ensuring proper screen reader support.
## Additional context
Tooltip text is preserved for visual users.
No visual changes were introduced.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Added/updated aria-labels across refresh buttons, sidebar controls,
dropdown triggers, and navigation links for better accessibility.
* Added conditional aria-labels for the “Create with Assistant” control
to reflect permission states.
* Improved screen-reader descriptions for sidebar toggle and other
stateful controls to better convey status changes.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45981)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
The `_Shadcn_` suffix isn't needed anymore on `<ContextMenu_Shadcn_>`
and related components
## Solution
Remove it. No other changes
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Replaced legacy context-menu component variants with the unified UI
context-menu components across the app for consistent rendering and
imports; behavior and menu content remain unchanged.
* **Tests**
* Updated a test mock to track the unified context-menu component mount
count.
* **Chores**
* Simplified UI package re-exports to expose the canonical context-menu
symbols.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45971)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR migrates the JS config for Tailwind into a CSS config. As such,
all variables have been defined as CSS variables and they're using the
specialized Tailwind syntax for generating utility classes.
Beside the migration, these changes were also added:
- Added `tailwind.config.css` to few packages to make the Tailwind
Intellisense work.
- Migrated away from Radix style color classes to our defined classes,
the values will remain the same.
- Most of the CSS is generated by scripts, they'll be removed in next
PRs.
* Removed redundant `border-light` classes from several components since
it was undefined.
* Removed redundant `text-strong` classes from several components since
it was undefined.
How to test:
- Open all apps, compare the UI (mainly colors) to builds from #45417
and try to find a difference.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Harmonized color variable usages and updated UI color references
(affects palettes, charts, gradients, hero illustrations, and
scrollbars).
* Tweaked border, tab, and selection visuals across components.
* **New Features**
* Added a suite of theme animations and refined typography presets used
by site prose and docs.
* **Refactor**
* Overhauled Tailwind/theme configuration and color token generation for
more consistent theming.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
As part of RLS testing, adding @awaseem's idea for having "View data as
user" CTAs in the Auth Users's table
<img width="348" height="190" alt="image"
src="https://github.com/user-attachments/assets/855c8f54-0aba-478c-982b-1d9d29e419bd"
/>
## Other changes
Similar from @awaseem's suggestions, am also refactoring the Role
Impersonation UI a little, mainly from a copy writing POV to improve the
clarity of the UI.
- More action-oriented and contextual header for the role impersonation
popover
- e.g Table Editor -> "View data as a role", or SQL Editor -> "Run SQL
query as a role"
- Updated labels to be bit more intuitive from a builder's POV
- The actual database role is still mentioned in the option's
description (so we aren't obfuscating the actual postgres logic)
- Add label descriptors to elaborate what each role implies
- e.g Anon -> "Not logged in"
- Add docs button which points to
[here](https://supabase.com/docs/guides/database/postgres/row-level-security#authenticated-and-unauthenticated-roles)
that explains which roles Supabase uses
- (Nit) Refactor to use Card component
### Before
<img width="647" height="277" alt="image"
src="https://github.com/user-attachments/assets/9ebae084-38b7-4e21-886b-f609bd71976e"
/>
### After
<img width="604" height="309" alt="image"
src="https://github.com/user-attachments/assets/4d797309-1b6b-4fd0-aab3-63d5e144c53c"
/>
<img width="630" height="297" alt="image"
src="https://github.com/user-attachments/assets/ca748635-c5da-4426-a9c3-8cb5aeef47a6"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added "View data as user" and "Run SQL as user" actions to user rows
to impersonate a user and jump to table or SQL views.
* Impersonation now surfaces an identity card in new tabs showing the
impersonated identity and a Stop button.
* **UI/UX Improvements**
* Impersonation panels accept customizable headers, show clearer role
labels (Postgres), richer role descriptions, condensed RLS copy,
in-panel docs link, simplified "Stop" labels, and adjusted
typography/padding for consistent styling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR migrates the whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.
---------
Co-authored-by: Jordi Enric <jordi.err@gmail.com>
This PR preps the monorepo for a migration to Tailwind v4:
- Bump all Tailwind dependencies and libraries to the latest possible
version, while still compatible with Tailwind 3.
- Cleans up obsolete Tailwind 3 specific options and configs.
- Cleans up unused CSS files and fixes the CSS imports.
- Migrates all `important` uses in `@apply` lines to using the `!`
prefix.
- Move `typography.css` to the `config` package and import it from the
apps.
- Migrated all occurrences of `flex-grow`, `flex-shrink`,
`overflow-clip` and `overflow-ellipsis` since they're deprecated and
will be removed in Tailwind 4.
- Make the default theme object typesafe in the `ui` package.
- Migrate all `bg-opacity`, `border-opacity`, `ring-opacity` and
`divider-opacity` to the new format where they're declared as part of
the property color.
- Bump and unify all imports of `postcss` dependency.
## Problem
While trying to update `react` to version `19`, I noticed type related
errors that can be fixed in version `18`, mostly usage of `JSX.Element`
instead of `ReactNode`.
## Solution
- Use `ReactNode` instead of `JSX.Element`
- Fix some invalid usage of `rechart`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
* **Refactor**
* Standardized React component type annotations across the codebase for
improved type consistency and flexibility.
* Updated component prop types to accept a broader range of renderable
content.
* **Bug Fixes**
* Adjusted chart layout positioning to improve visual alignment.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR fixes some prettier issues:
- Bump and unify all prettier versions to 3.7.3 across teh whole repo
- Bump the SQL prettier plugin
- When running `test:prettier`, check `mdx` files also
- Run the new prettier format on all files
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## Summary
Removes two concluded A/B experiments that didn't produce positive
results:
- **tableQuickstart**: Tested AI-powered table generation, template
selection, and assistant integration for new table creation
- **realtimeButtonVariant**: Tested hiding the realtime button or
replacing it with a triggers button
## Changes
- Delete `TableQuickstart/` folder with AI widget, templates widget, and
generation hooks
- Delete `useRealtimeExperiment` hook and remove variant-conditional
logic
- Delete `/api/ai/table-quickstart/generate-schemas` endpoint
- Remove telemetry event definitions for both experiments
- Remove local storage exposure tracking key
- Remove API endpoint from proxy whitelist
- Clean up eslint baseline references
## Testing
- [x] Tested locally - Table Editor renders correctly without experiment
widgets
- [x] TypeScript compiles without errors
- [x] No remaining references to removed experiment code
**Quick test:**
1. Navigate to Table Editor → New Tab shows only "Create a table" card
(no AI/Templates/Assistant variants)
2. Open table create panel → Realtime checkbox shows unconditionally
when realtime is enabled
## Linear
fixes GROWTH-609
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Removed Features**
* AI-powered table generation and quickstart assistance (templates, AI
widget, generation hook, templates data, and related utilities)
* Quickstart templates widget and predefined table templates
* Database triggers management interface
* Realtime experiment gating and related experiment variants
* **API & Storage**
* Hosted AI quickstart API endpoint removed
* Local storage key for quickstart exposure tracking removed
* **Telemetry**
* Quickstart- and realtime-experiment telemetry events removed
* **UI Changes**
* Simplified realtime toggle control in the table editor
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
* feat: scroll sql editor tabs to end when longer than container width
* feat: more fine tuned
* feat: code clean up into hook
* chore: run prettier
* fix: remove remnant of old useEffect
* 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>
* Add a generateDeterministicUuid function and tests for it.
* Use the new function and generate an id automatically when creating a snippet.
* Clean up extra code.
* Don't pass in id when creating a snippet.
* Add generateSnippetTitle function and use it instead of fixed string.
* When SQL editor is open, generate an id form a generated snippet title.
* Add id override for SQL editor to avoid flash when saving the snippet.
* Merge the two generate functions to happen in the same useMemo block.
* Save the snippet to the API when adding it.
* Minor fixes from CodeRabbit review.
* Hide new folder CTA in sql editor for self-hosted
* Don't add the snippet for saving, just set the value.
* UpsertContentPayload always has an id.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Fix table_quickstart_opened event to track control group
Previously, the control group was excluded from exposure tracking because
activeQuickstartVariant filtered out CONTROL variants. This prevented
establishing a baseline for A/B test analysis.
Changes:
- Add shouldTrackExposure variable to separate tracking from rendering logic
- Track all variants including control when conditions are met
- Add explicit type narrowing for TypeScript safety
- Update comment to document control as valid variant
The event now fires for all users in the experiment (including control)
when viewing NewTab on projects < 7 days old in table editor mode.
* Update apps/studio/components/layouts/Tabs/NewTab.tsx
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---------
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
* Add event tracking for table quickstart experiment
Implements telemetry instrumentation for the table quickstart experiment
to measure exposure and engagement across AI, Templates, and Assistant variations.
Events added:
- table_quickstart_viewed: Exposure tracking for variant assignment
- table_quickstart_ai_prompt_submitted: AI prompt submissions
- table_quickstart_ai_generation_completed: AI generation success/failure
- table_quickstart_template_selected: Template selection (unified for AI and templates)
- table_quickstart_quick_idea_clicked: Quick idea button clicks
- table_quickstart_category_selected: Template category navigation
- table_quickstart_assistant_opened: Assistant chat creation
All events use type-safe useTrack() hook with automatic project/org context.
Conversion tracking intentionally omitted - relying on joins with existing
table_created events for post-analysis.
* event name cleanup
* Address code review feedback
- Use nullish coalescing operator (??) instead of logical OR (||) for categoryName fallback
- Refactor handleGenerateTables to accept object parameter for improved call site readability
* prettier
* action key name alignment with event name
feat: add assistant variation to table quickstart experiment
Adds ASSISTANT variant to table quickstart that opens AI assistant with
pre-populated conversation to guide users through creating their first
database table.
Changes:
- Add QuickstartVariant.ASSISTANT enum value
- Add 'Create with Assistant' card for new projects (<7 days old)
- Implement handleOpenAssistant with proper loading states and error handling
- Add pre-populated messages to guide table creation workflow
The assistant card appears only for users bucketed into the assistant
variation of the tableQuickstart experiment on new projects.
* 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
* Part 1 of swapping useCheckPermissions with useAsyncCheckProjectPermissions
* Update apps/studio/hooks/misc/useCheckPermissions.ts
Co-authored-by: Drake Costa <drake@saeris.io>
* Address feedback
---------
Co-authored-by: Drake Costa <drake@saeris.io>
* 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
* just redirect to new on sql empty
* clean up
* update template and quickstarts link
* Nit clean up
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* 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>
Gildas Garcia
