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
We used to have a `_Shadcn_` suffix for all the shadcn form components
because we also had `formik` form components.
This is not needed anymore.
## Solution
- Remove the suffix
- Update all usages
## Problem
We'd like to update react to `19` but many of our dependencies don't
support it.
## Solution
Update those dependencies. This PR focuses on `react-hook-form`
## How to test
Play with some forms, especially those that use arrays of values
(database/enumerated types for instance) and the highly dynamic ones
(auth providers for instance)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Summary by CodeRabbit
* **Chores**
* Bumped the form-handling library version across apps and packages for
improved compatibility and stability.
* **Refactor**
* Improved component form typings and generics in the studio to increase
type safety and reduce potential runtime issues.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Summary
Follow-up to #44801 — fixes the data layer issue flagged in the review
comment.
The previous fix handled the display crash (`table.columns.map` when
`columns` is undefined) but left the edit/save path broken. When a
Stripe wrapper table has `null` columns from the DB (e.g. `jsonb_agg`
returns `NULL` when there are no rows), `formatWrapperTables` was
forwarding that `null` directly into the react-hook-form state. The Zod
`tableSchema` declares `columns` as a non-optional `z.array(...)`, so
the zodResolver rejected the form silently on save — the Save button
appeared to do nothing with no error shown to the user.
## Change
In `Wrappers.utils.ts`, `formatWrapperTables`:
```ts
// before
columns: table.columns,
// after
columns: table.columns ?? [],
```
This ensures the form is always initialized with a valid array,
satisfying the Zod schema and allowing saves to proceed normally.
---
Slack thread:
https://supabase.slack.com/archives/C063LNYJJKS/p1776067210776939?thread_ts=1776067141.988569&cid=C063LNYJJKShttps://claude.ai/code/session_01N6nyTggA68yktWg4b46ssL
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Fixed an issue where wrapper tables could fail to display correctly
when column data was missing or invalid.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Co-authored-by: Claude <noreply@anthropic.com>
## Summary
- Adds null check for `table.columns` in `CreateWrapperSheet` and
`EditWrapperSheet` to prevent runtime errors when columns are undefined
- Fixes TypeError: "can't access property 'map', e.columns is undefined"
on `/dashboard/project/[ref]/integrations/stripe_wrapper/overview`
## Problem
When viewing the Stripe wrapper integration overview page, users
encounter a JavaScript error because `table.columns` can be undefined in
some cases, but the code attempts to call `.map()` on it directly.
## Solution
Changed `table.columns.map(...)` to `(table.columns ?? []).map(...)` to
safely handle cases where columns is undefined by defaulting to an empty
array.
## Test plan
- [ ] Navigate to
`/dashboard/project/[ref]/integrations/stripe_wrapper/overview` with a
wrapper that has tables with undefined columns
- [ ] Verify no JavaScript error occurs
- [ ] Verify tables without columns display correctly (showing "Columns:
" with nothing after)
---
Slack thread:
https://supabase.slack.com/archives/C063LNYJJKS/p1776067210776939?thread_ts=1776067141.988569&cid=C063LNYJJKShttps://claude.ai/code/session_01N6nyTggA68yktWg4b46ssL
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Fixed a stability issue in wrapper integrations where missing or
undefined column information from foreign tables could cause display
problems. The interface now safely handles these edge cases with
improved spacing and more reliable column rendering, ensuring consistent
and predictable presentation of integration data regardless of data
availability or table configuration.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Co-authored-by: Claude <noreply@anthropic.com>
## Problem
Foreign wrapper forms still use `formik` but we now use
`react-hook-form` everywhere and we'd like to reduce our dependencies.
## Solution
- [x] Write e2e tests for wrappers
- [x] Migrate to `react-hook-form`
## Notes
I tried to cover the 3 cases I identified for foreign wrappers with e2e
tests:
- Add all available tables to a new schema (stripe)
- Add selected tables to a new table (stripe)
- Create dynamic columns (s3 wrapper)
However, they are not exhaustive as I can't test the integration
actually works, only that it was created successfully. Besides, I can't
test the Iceberg wrapper case as it needs actual S3 buckets.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Enhanced column-type selector with searchable combobox, enum support,
icons, and optional recommendation prompts.
* **Refactor**
* Migrated many wrapper/table/editor forms to a schema-driven form
system with stronger validation, dynamic field arrays, and consistent
form controls.
* Updated input field integration to work with the new form control
model.
* **Bug Fixes**
* Improved handling of missing wrapper/error states during wrapper
loading.
* **Tests**
* Added unit tests for form schemas and end-to-end tests for wrapper
creation flows.
* **Chores**
* Removed legacy dynamic-columns component.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Related to marketplace integrations, now shifting wrappers over to the
new UI (feature flagged)
## Changes involved
- Added a "Installed" indicator if the integration is installed
<img width="1155" height="171" alt="image"
src="https://github.com/user-attachments/assets/6de2ea49-64bb-46af-ba04-db6629ec7546"
/>
- New UI will only show the "Add new wrapper" + "Recent wrappers" table
only if the required extensions have been installed (Current UI shows
them both irregardless)
<img width="1147" height="518" alt="image"
src="https://github.com/user-attachments/assets/c428ff70-4a52-401e-a369-6948100d1cef"
/>
- Once required extensions are installed, the wrappers tab will also
show up
- Currently the wrappers tab only shows up after a wrapper is created
- This change will affect the existing behaviour too (reckon it makes
more sense this UX)
<img width="1143" height="611" alt="image"
src="https://github.com/user-attachments/assets/b05f5196-854e-41c1-8a01-7a5e5cca9d4e"
/>
- In the install integration sheet, only extensions that have yet to be
installed will users be allowed to adjust schema selection for
<img width="553" height="583" alt="image"
src="https://github.com/user-attachments/assets/045e185a-6235-4dc5-a984-b039b64cd7fd"
/>
- Likewise, if the extension has already been installed, it will be
omitted from the SQL code output
<img width="575" height="267" alt="image"
src="https://github.com/user-attachments/assets/5e6c0a75-5738-4a0d-9e33-ff19aed074d3"
/>
- Updated docs URL for some of the integrations (vault, database
webhooks, graphql)
- Nit: This one's bugged me for the longest time but remove extra border
bottom in "Recent wrappers" table
<img width="1068" height="177" alt="image"
src="https://github.com/user-attachments/assets/1d6e24cf-072a-4605-8eca-ee0f37406d74"
/>
FWIW i think the integrations UI for wrappers is due for an update, but
we'll leave things as they are for now - at least until we're bit more
clearer on the requirements for marketplace integrations (less we make
changes now which then have to be redone again later)
## To test
- [ ] Verify that you can install + create wrappers still with the new
UI
- [ ] Verify that behaviour is status quo with flag off (except the ones
mentioned explicitly)
## What kind of change does this PR introduce?
Form handling improvement.
## What is the current behavior?
https://github.com/supabase/supabase/pull/43201/ standardised our
discard changes behaviour with a shared hook and
`DiscardChangesConfirmationDialog` component. But many forms and sheets
still:
1. Don’t have any Discard-confirm close behaviour, making it too easy to
make accidental discards
2. Use a more complicated, manually-created `CloseConfirmationModal`
approach
## What is the new behavior?
- Replaced all instances of `#2` above that had `CloseConfirmationModal`
with `DiscardChangesConfirmationDialog` and its hook
- Improved design system documentation around dirty form dismissal
| Before | After |
| --- | --- |
| <img width="987" height="569" alt="Mercor Apexroles Foo
Supabase-9A40EC7C-F335-4B26-B567-450FC0845463"
src="https://github.com/user-attachments/assets/363bed82-34d2-4cc8-9164-6d18cfdbdbbc"
/> | <img width="987" height="569" alt="Mercor Apexroles Foo
Supabase-F427F1FA-DECC-4194-B663-A9E5A6F285A1"
src="https://github.com/user-attachments/assets/d49fafdc-a5c2-46df-9b67-ec42bacbe716"
/> |
## To test
Try editing values these sheets in staging, then blurring the sheet or
pressing `esc`:
- CreateQueueSheet.tsx
- CronJobsTab.tsx
- CronJobPage.tsx
- EditWrapperSheet.tsx
- OverviewTab.tsx
- WrappersTab.tsx
- CreateFunction/index.tsx
- EditHookPanel.tsx
- TriggerSheet.tsx
- SidePanelEditor.tsx
- EditSecretSheet.tsx
- PolicyEditorModal/index.tsx
- PolicyEditorPanel/index.tsx
## Still to come
- [ ] Incrementally take on `#1`: implement
`DiscardChangesConfirmationDialog` and its hook in sheets or dialog
forms that have no dirty form dismissal handling
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## Context
Related to FE-2461
More refactoring to clean up usage of `useQueryStateWithSelect`, in the
following pages
- Auth OAuth Apps
- Cron Jobs
- Vaults Secrets Management
- Database Hooks
- Wrappers
## To test
In each of those pages, verify that
- [ ] Clicking the "new" cta updates the URL params, and refreshing
should re-open the sheet
- [ ] Editing an existing item should update URL params, and refreshing
should re-open the sheet with the right item
- Verify that if the URL param has the wrong id, page should not open
the sheet, show a toast, and reset the URL param
- [ ] Deleting an existing item should update URL params, and refreshing
should re-open the sheet with the right item
- Verify that if the URL param has the wrong id, page should not open
the sheet, show a toast, and reset the URL param
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Added "item not found" toasts and clearer feedback after
create/update/delete actions; prevent opening create flows when server
features are disabled.
* **Style**
* Standardized button labels, sizes and modal/dialog spacing; refined
table column widths and inline code formatting for readability.
* **Refactor**
* Simplified UI state flows across OAuth Apps, Hooks/Webhooks, Cron
Jobs, Vault Secrets, and Wrappers to use consistent URL-driven
interactions and centralized modals.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
When a wrapper is changed (e.g., by changing a table name, the entire
wrapper is destroyed and recreated. This also destroys dependent objects
like functions, but the user is not warned.
Add a confirmation modal warning that this will happen.
* Add types to the getDecryptedValues function.
* Refactor the edit-wrapper-sheet to fetch the secrets by id, instead of name.
* Add try/catch for the secret values fetching.
* Minor CodeRabbit nitpicks.
* Small improvement for types in EditWrapperSheet
* Small fix for WrapperRow icon space issue hiding ChevronRight
* Update comment
* Only fetch encrypted IDs if value is a valid UUID
* Nit
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Add shimmering-loader CSS to ui-patterns.
* Import the shimmering-loader classes from the ui-patterns component.
* Remove ShimmeringLoader from studio.
* Migrate studio to use ui-patterns/ShimmeringLoader.
* Migrate away from using default import for ShimmeringLoader.
* Fix the css imports in docs and studio.
* 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.
* When creating a s3 vectors fdw, add the target schema as a server option.
* Fix a bug in the row link, it didn't work when you middle click.
* Refactor the protected schema logic to include schemas from all fdws.
* Refactor the protected schema logic to include fdw type and name. Change the ProtectedSchemaWarning to show different messages for the 2 fdw types.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Fix childProps in Admonition so that they're added as a prop to the main div.
* Replace the admonition with Alert in Wrapper tab page to add a gap between childs.
* Add s3 vectors fdw.
* Minor fix to FormSection.
* Update the fdw mutations to support passing in options.
* Refactor the vector flow to create fdws.
* Revert cron description change.
* If the bucket can't be created, don't create a fdw.
* Update/delete the fdw when deleting a table or a bucket.
* Minor fixes.
* Clean up the delete modal.
* Handle edge cases when missing a wrapper.
* Remove the admonition in the create bucket modal.
* Fix the loading state when creating a bucket.
* Fix the createWrapper sheet to work with s3 vectors.
* Fix undefined wrapperMeta issue.
* Create the schema when installing a wrapper.
* Tiny cleanup.
* Clean up unneeded useState. Create a wrapper only if the all conditions are met.
* Fix all comments.
* Add s3 vectors for docs.
* Add a link and fix the file name for S3 Vectors in docs.
* Hide the table editor button if the wrapper instance is missing.
* Small fixes.
Abstract out a hook, useConfirmOnClose, for the pattern where we show a
confirmation modal on close, conditional on whether the user has made
edits.
---------
Co-authored-by: Alaister Young <a@alaisteryoung.com>
* Update Supabase docs URLs to use env variable
Co-authored-by: a <a@alaisteryoung.com>
* Refactor: Use DOCS_URL constant for documentation links
This change centralizes documentation links using a new DOCS_URL constant, improving maintainability and consistency.
Co-authored-by: a <a@alaisteryoung.com>
* Refactor: Use DOCS_URL constant for all documentation links
This change replaces hardcoded documentation URLs with a centralized constant, improving maintainability and consistency.
Co-authored-by: a <a@alaisteryoung.com>
* replace more instances
* ci: Autofix updates from GitHub workflow
* remaining instances
* fix duplicate useRouter
---------
Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: alaister <10985857+alaister@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
* 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>
* Change the import foreign schema to always create a schema.
* Fix the Iceberg wrapper.
* Refactor the create wrapper to always create a new schema.
* Remove unneeded props.
* Smol fixes
* Prevent double error toasts
* Smol fix
* Fix the wrapper creation to include the correct api key.
* Fix a bug with the new api keys.
* Handle both types of keys when fetching the iceberg namespaces.
* Add a field to all wrappers to hold the schema name which can import foreign schema.
* sq
* When importing a foreign schema, save the schema in a special field.
* Fix a type error.
* Fix importing foreign schema overriding wrapper server options with unencrypted values
* Add comment
* Handle duplicate and empty schemas when importing a foreign schema.
* Update the copy in the foreign schema wrappers.
* Remove unnecessary code.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Migrate the CreateBucketModal to use RHF.
* Minor fixes for the create bucket modal.
* Use the bucket type from the API everywhere.
* Improve the types on some functions. Add "skip" mode to FDWCreateMutation.
* Expand the CreateBucketModal to explain what will happen when creating an iceberg bucket.
* Add a page for iceberg buckets.
* Add error states to the iceberg explorer.
* Fix the names for the FDWs.
* Add a dialog for setting up namespace.
* Restructure the new files.
* Add a download env button.
* Add warning to install the wrappers extension when creating an iceberg bucket.
* Add failover details when the FDW is not setup.
* Fix a lint error.
* Fix a type error.
* Minor fixes.
* Fix the server name.
* Add an icon for iceberg buckets.
* Fix the import foreign schema dialog.
* Make the setup wrapper button functional.
* Fix a bad useMemo dependency.
* Small changes to the iceberg bucket page.
* Minor fix for the edit wrapper sheet.
* Rename the files from kebab-case to PascalCase.
* Rename the files again to include Analytic instead of Iceberg.
* Rename Iceberg type to Analytic.
* Add a switch for creating namespace in the import foreign schema dialog.
* Fix the CreateBucketModal.
* Fix the delete modal feature.
* Fix the S3 keys in the FDW.
* Only create a namespace if the switch is true.
* Regenerate and fix the types.
* Fix the FDW create mutation to handle numbers in the FDW names.
* Make the icon smaller.
* Check whether the namespace exists, if it doesn't create it.
* Hide action from the analytic bucket which don't work.
* Invalidate namespaces when creating them.
* Add small explanation for the creation of namespaces.
* Minor fixes.
* Tons of changes to make the namespace feature work.
* Fix type errors.
* Fix bad import.
* Minor copy fixes.
* Replace the multiple cards with a table of namespaces.
* update copy icon
* tiny copy update
* Fix the empty state for foreign tables.
* Hide the analytics bucket option for self-hosted.
* Minor copy fixes.
* Expand the CTA on no namespaces state.
* More minor fixes.
* More small fixes.
---------
Co-authored-by: Alaister Young <a@alaisteryoung.com>
* Copy a create wrapper sheet specific to Iceberg.
* Add an override for create wrapper sheet for iceberg.
* Refactor the create iceberg sheet to have a radio group for type of bucket.
* Fix the third option in the create iceberg wrapper sheet.
* Add errors for missing source schema or wrapper name.
* Hide the edit button when editing a wrapper with imported schema.
* Add schema flag to the foreign-schema wrappers.
* Support the new mode in the create wrapper flow.
* Minor CSS tweaks.
* Re-add a missing line.
* Add source schema field.
* Make source and target schema part of the form state.
* Fix the edit mutation.
* Show a warninf for the feature if the wrappers extension is below 0.5.0.
* Bring the SchemaEditor side panel into 21st century and simplify it.
* Use the schema editor in the Create wrapper sheet to create a new schema.
* Minor fixes.
* Fix the badge border in WrapperRow.
* fix: studio circular imports
* Fix the import cycle on Wrappers tabs components.
* Remove duplicate declarations of the feature previews array.
* fix feature previews circular import
* Minor nit
* update all project contexts to use useSelectedProject
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Ivan Vasilov