## What kind of change does this PR introduce?
Bug fix. Resolves DEPR-539.
## What is the current behavior?
When a focused child unmounts, Radix can move focus to the Sheet wrapper
and break the expected tab order. Several callsites suppress the
wrapper's tabindex individually.
## What is the new behavior?
Sheet still focuses its first interactive child when opened, but the
wrapper itself is no longer focusable by default. Callers can opt in
with an explicit `tabIndex` when needed.
## Additional context
### Testing
Compare this Studio experience on both this branch and `master`:
1. Open any project with an Edge Function.
2. Go to **Edge Functions**, open the function, then click **Test**.
3. Under **Headers**, click **Add Headers**. Click the first header key
input, then Tab slowly through the header inputs and remove buttons.
On `master`, focus can jump to the whole Sheet. On this branch, focus
stays on the controls in order.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved keyboard focus behavior across sheets and panels.
* Sheets now focus the first available interactive element when opened,
without adding unnecessary focus targets.
* Preserved support for programmatic focus and prevented focus from
unexpectedly moving to the sheet when focused content is removed.
* Updated authentication, integrations, connection, logging, storage,
and other sheet interfaces consistently.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Follow-up to #48344: collapses the two resolution paths for the
Admonition module into one.
`src/admonition.tsx` was a back-compat shim re-exporting
`src/Admonition/`. Two ways to resolve one module is exactly what
produced the macOS self-import bug fixed in #48344, and the local
typecheck errors that #48374 worked around. This removes the shim and
standardizes on the PascalCase subpath, matching every other export in
the package.
**Changed:**
- Codemodded all 246 `ui-patterns/admonition` imports to
`ui-patterns/Admonition` (240 `.tsx`, 5 `.mdx`, 1 `.ts` across studio,
docs, www, design-system, and lite-studio)
- Pointed the 5 internal `'../admonition'` imports back at the
`'../Admonition'` directory
**Removed:**
- `packages/ui-patterns/src/admonition.tsx`, and its `./admonition`
entry in the exports map (regenerated with `pnpm gen:exports`)
## To test
- `grep -r "ui-patterns/admonition" --include='*.ts*'` → no hits
- `pnpm test:case-hazards` → passes
- `pnpm typecheck` → all 15 tasks green
- `pnpm --filter studio run lint:ratchet` → passes
- `pnpm --filter ui-patterns vitest run src/Admonition` → 11 tests pass
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Standardized Admonition component imports across the application and
documentation.
* Improved compatibility with case-sensitive environments by using the
canonical component path.
* Removed the legacy Admonition import entry point.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
## Problem
We now export components under a subpath in ui-patterns to avoid barrel
files as they slow down every tools (from IDE to linters, etc.) and may
also affect bundles our users have to download.
## Solution
- Remove the UI patterns index file
- Fix invalid impors
## 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 outdated UI components and helper utilities to
streamline the app.
* Cleaned up unused analytics, database, and observability hooks and
queries.
* **Refactor**
* Simplified data table, unified logs, and assistant panel internals by
removing legacy display and navigation pieces.
* **Bug Fixes**
* Reduced the chance of showing stale or inconsistent status, chart, and
metric views by eliminating obsolete display paths.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Bumps the Stripe Sync Engine package to version 1.0.32. Note that the
package name has also changed from `stripe-experiment-sync` to
`@stripe/sync-engine`.
Manual tests run on preview:
- [x] Install a fresh version of 1.0.32.
- [x] Uninstall freshly installed version 1.0.32
- [x] Upgrade from a lower version (1.0.31 tested)
- [x] Upgrade to 1.0.32 and uninstall
- [x] Confirm that data is being synced
## 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>
Restores proper content in new marketplace detail overview pages
compared to the legacy overview pages.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added Data API URL settings and a visible "Required extensions"
section across integration overviews.
* Unified install/manage UIs for webhooks, Stripe Sync, wrappers,
queues, and others; marketplace mode now shows marketplace-specific
overview content.
* **Style**
* Improved marketplace detail rail and filter-bar button styling;
refined list/link row visuals.
* **Refactor**
* Overview pages reorganized to branch on marketplace mode and extract
shared overview content for consistency.
* **Tests**
* Stabilized integration overview test data for deterministic runs.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46179?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: Joshen Lim <joshenlimek@gmail.com>
Introducing a new Integrations Marketplace layout
- behind feature flag
- behind opt-out feature preview (default to true) to easily toggle
before and after
Doesn't introduce new functionality, only layout change behind ff.
## What changed
Nothing if `marketplaceIntegrations` flag is off.
### With flag
- New Marketplace index layout
- filter via text or by `category`, `integration type` and `source`
- Featured Partners Integrations hero (hidden when any filter is active)
- toggle between `grid` and `list` view
- new integration detail page layout
- with top action bar
- more consistent fullWidth or narrow content layouts
- can access Feature Preview toggle under Account Dropdown > Feature
Previews > Marketplace
## How to review and what to test
I recommend reviewing file changes from bottom to top in
https://github.com/supabase/supabase/pull/45856/changes because it makes
more sense from a pr-logic perspective.
- [ ] Visit
https://studio-staging-git-chore-integrations-ui-refine-fs-supabase.vercel.app/dashboard/project/_/integrations
- [ ] Check if new layout doesn't have big layout issues like weird
paddings or margins mostly. (We can iterate in upcoming PRs for
additional features/fixes)
- [ ] Toggle "Marketplace" feature preview to `FALSE` and check that the
Integrations layout looks like in prod
https://supabase.com/dashboard/project/_/integrations
- [ ] Also check individual integration pages and toggle the feature
preview on and off to see before and after and check if everything looks
good
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Full Marketplace experience: explorer with featured hero,
filters/search, list & grid views, cards, sidebar, detailed integration
pages, install flows, badges, and a preview toggle.
* **Bug Fixes**
* Prevented stale markdown from showing when switching integrations.
* **Style**
* Improved responsive layouts, loading placeholders, and header/nav
full-width behavior.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45856)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
Co-authored-by: Raminder Singh <romi_ssk@yahoo.co.in>
## What kind of change does this PR introduce?
Feature and design-system cleanup. Resolves DEPR-551.
## What is the current behavior?
Admonition supports several overlapping content shapes, but it
previously did not support a first-class success state or
description-only usage cleanly. Title-only usage was also possible,
which made some callouts read like floating headings without body copy.
Docs MDX Admonitions could also pick up prose spacing around rich
children, while the design-system Tailwind config emitted an
ESM/CommonJS warning in the design-system app.
## What is the new behavior?
Adds a `success` Admonition type, description-only support, and a
stricter content contract: `title` or legacy `label` now requires either
`description` or `children`. Existing title-only Studio callsites have
been converted to description-only callouts.
The design-system docs now include examples for description-only and
success Admonitions, plus guidance for `title`, `description`,
`children`, and legacy `label` usage.
This also tightens Admonition body spacing so rich MDX children keep
docs link/code styling without inheriting excessive prose margins, and
renames the design-system Tailwind config to `tailwind.config.cjs` so it
matches its CommonJS syntax.
Warning and destructive alerts now explicitly set `text-foreground`,
preventing nested Admonition titles from inheriting muted
form-description colour after the Tailwind v4 cascade changes.
| Before | After |
| --- | --- |
| <img width="1818" height="388" alt="Image"
src="https://github.com/user-attachments/assets/283a1853-348a-4d74-a408-013957350e5e"
/> | <img width="1380" height="462" alt="Image"
src="https://github.com/user-attachments/assets/e5761e8e-3697-423b-805b-45110205099a"
/> |
| <img width="1398" height="550" alt="CleanShot 2026-04-28 at 15 12
41@2x"
src="https://github.com/user-attachments/assets/982694d9-5461-4362-8bae-a6e2b4c60e8b"
/> | <img width="1402" height="450" alt="CleanShot 2026-04-28 at 15 13
09@2x"
src="https://github.com/user-attachments/assets/0b1257c4-6b58-4c39-a182-4861a9e378ee"
/> |
| <img width="1640" height="716" alt="CleanShot 2026-04-28 at 15 17
25@2x"
src="https://github.com/user-attachments/assets/a5be4d5f-2bf7-4dc2-b396-56129fe64ec9"
/> | <img width="1630" height="716" alt="CleanShot 2026-04-28 at 15 16
00@2x"
src="https://github.com/user-attachments/assets/0d589252-aaf8-4efc-9d81-15ec4f99ec61"
/> |
| Design System Docs |
| --- |
| <img width="1646" height="1864" alt="CleanShot 2026-04-28 at 14 59
15@2x"
src="https://github.com/user-attachments/assets/12d13595-8972-4fb2-a04a-fb916388ebb6"
/> |
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a "success" admonition variant and new example previews
demonstrating success and description-only usages.
* **Documentation**
* Clarified admonition guidance: when to use title vs description vs
children; added example sections for short callouts and success
messages.
* **Refactor**
* Standardized UI by moving short/advisory text into description across
the app and harmonized trailing punctuation.
* **Style**
* Ensured warning/destructive admonitions use consistent foreground text
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
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
## Context
Part of marketplace integrations, this moves the last integration over
to the new integrations UI
Just a heads up though that the code changes imo are quite messy - am
trying to figure out how to shift a lot of the integration logic (e.g
installing, installation progress tracking, etc) into a code
configuration within `Integrations.constants.ts` so pardon the
mid-transition state. I reckon we'll be able to clean up things once
requirements are bit more clearer. (Refer to "Moving forward" section
below for details)
## Changes involved
- Much of the details on the Stripe Sync Engine page will now live in
the Installation panel
<img width="1143" height="512" alt="image"
src="https://github.com/user-attachments/assets/cb23e49d-cc4e-4ad6-8a47-0bc3fe81ede7"
/>
<img width="656" height="955" alt="image"
src="https://github.com/user-attachments/assets/ff0e33c5-52ab-480f-b941-ebf3fd0708c5"
/>
- Code wise, `useStripeSyncStatus` will retrieve `ref` and
`connectionString` itself, don't need to pass in as parameters
## To test
- [ ] Verify that you can install + uninstall Stripe Sync Engine with
the flag off
- [ ] Verify that you can install + uninstall Stripe Sync Engine with
the flag on
## Moving forward
Couple of notes + open questions at the top of my head
- We'll need to do away with integration-specific overview UI (e.g
Queues, Data API, Webhooks, Wrappers, Stripe Sync Engine)
- Everything needs to be defined in code, so `IntegrationDefinition`
within `Integrations.constants.ts` is also a bit fluid at the moment as
we figure out what properties we need / don't need
- We'll need to figure out a way to do the following from a code config
POV, keeping in mind that integrations will be fetched remotely from a
DB
- How to trigger the installation of the integration (e.g from a set of
commands? SQL?)
- How to track the progress of the installation (e.g We can do long
polling but on what data?)
- How to uninstall the integration (if applicable, e.g Stripe Sync
Engine supports this)
- How all this this can work for self-hosted/CLI
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* New modular integration install experience: interactive install sheet
with form inputs, installation overview (Extensions & SQL), advanced
per-extension schema settings, and dedicated installation settings.
* New Stripe Sync Engine overview and action controls for
install/upgrade/uninstall flows.
* **Bug Fixes & Improvements**
* Improved installation status handling, long-polling/status checks,
progress/error reporting and telemetry; more robust install/uninstall
flows and error recovery.
* **Tests**
* Updated install-sheet tests to better simulate form submission.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
This PR:
* Adds an upgrade flow to the stripe sync engine, allowing users to
upgrade to the latest version when it becomes available.
* When a new version of sync engine becomes available, users will see an
upgrade button instead of install button.
* Bumps `supabase-management-js` to version 2.0.2 and
`stripe-experiment-sync` to version 1.0.27.
* Uses `parseSchemaComment` and related logic from the
`stripe-experiment-sync` package in order to avoid writing duplicate
code in supabase ui.
* Allows installation/uninstallation to timeout after 5 minutes to avoid
these operations from getting stuck in case an error occurs in their
processing. This allows users to retry the operation, as opposed to the
older behaviour where the users always see a spinner on the
install/uninstall button and couldn't do anything.
* Remove the SSL enforcement admonition as it is no longer required.
Sync engine can now be installed with or without SSL enforcement
enabled.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Enable the install/uninstall integration button on the stripe sync
engine only if the user has permissions to create/delete edge function
secrets. This fixes a problem when non-admin/non-owner users try to
install the integration but it fails due to lack of permissions. For a
user without appropriate permissions a tool tip will be shown:
<img width="1344" height="977" alt="image"
src="https://github.com/user-attachments/assets/49c950cc-d76b-40b4-ab6e-cb8f193561cc"
/>
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
This PR makes the following changes:
* Refactors the Stripe sync engine integration so that impossible states
are unrepresentable in the code.
* Factors out common code and functions into a single location to avoid
duplication.
* Factors out code to fetch installation/uninstallation and sync status
into a separate hook to make the code more readable.
* Shows uninstall progress when the user uninstalls the integration.
* Moves the **Uninstall integration** button from the **Settings** page
to the **Overview** page. This is done to avoid us having to track the
uninstallation progress via the url query params when the user is
redirected to the **Overview** page during uninstallation. Also it makes
sense for installation/uninstallation to be available on the same
location.
Note that even with the above changes there are some limitations to how
the uninstallation progress is shown. In particular, if the user
refreshes the page, the uninstallation status is lost because the
background uninstallation procedure currently doesn't update the comment
on the stripe schema during uninstallation. We are making a change in
the stripe sync engine code for that here:
https://github.com/stripe-experiments/sync-engine/pull/113
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* add initial installation flow of stripe sync engine
* update docs link
* Add supabase_vault extension dep
* Add stripe logo to sync engine integration
* Move overview content to bottom of integration pages
* Add sync state to stripe sync page
* only check sync state if stripe integration is installed
* Use proper stripe-sync package and setup flows
* Improve sync engine installation ux
* Remove unused hardcoded dep
* Add alpha status to stripe sync engine integration
* fix typo
* run format
* fix types
* Rename the stripe-sync path to remove the 'integration". The path needs to have BASE_PATH to work on prod.
* Design tidy up (#41337)
UI tidy up
* update to latest sync engine package
* Add stripe key verification
* Remove noop try/catch
* Add integration isntallation telelemtry
* Add basic settings page
* Address coderabbit comments
* remove unused dep
* Remove state setting on render
* s/description/comment
* Cleanup settings screen UI
* Improve settings screen design
* update schema test snapshot
* Use latest stripe-sync-engine package
* Update repo url to new official location
* revert marketing change
* Update stripe sync engine package
* Add link to table from overview page
* Add feature flag and improve telemetry
* Fix missing useMemo dep
* add uninstall telemetry note
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
Danny White
