This change updates the handler for simple GET installations to
correctly appending the organization_slug and project_ref parameters as
documented in our Partner Integrations Guide.
Fixes INT-111
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Integration installs now open in a new browser tab instead of
replacing the current page.
* Organization and project context are appended to integration
installation links so setups receive correct context.
* Missing or invalid installation links now fall back to the home page
to avoid navigation errors.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
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.
Currently when a user clicks the **Install integration** button on an
OAuth integration like Grafana, they are redirected to the partner
website in the same tab in which they clicked the button. This makes
them lose context in the Supabase Studio. This PR changes the behaviour
such that the partner website will be opened in a new tab.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* OAuth integration installation now opens the redirect URL in a new
browser tab instead of redirecting the current window, allowing users to
remain in the application while completing the integration process.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## 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
This PR integrates with the new marketplace db to allow Grafana (and
other partners) OAuth apps to install from the integrations page. A demo
of this working locally is available here:
https://supabase.slack.com/archives/C01GN60J0BS/p1775551752479709. End
to end flow is documented here:
https://www.notion.so/supabase/Grafana-Integration-Flow-33a5004b775f80eeaf91c098beb8071f.
TODO:
- [ ] Make sure `NEXT_PUBLIC_MARKETPLACE_API_URL` variable is set to the
new marketplace db.
- [x] Test with the `marketplaceIntegrations` enabled and disabled in
staging once https://github.com/supabase/platform/pull/31298 is merged
and available in staging.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Add OAuth "Install integration" button that detects installed
integrations and supports GET/POST install flows
* Marketplace listings now include install links, installation method,
partner info, and listing assets/logos
* **Infrastructure**
* Allow marketplace API origin for images and content in security and
image config
* Centralize marketplace types and switch marketplace data source for
more reliable listings
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## 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 -->
## 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>
## 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?
We had some bugs where webhooks were not able to be turned on for
projects. This is to ensure that doesn't happen again
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Tests**
* Added UI tests for integration overview and installation flows: verify
action enablement/disablement (aria-disabled and visual opacity)
depending on required extensions, ensure the "Install integration"
button is disabled when no installation command or required extensions
are missing, and confirm the installation command is invoked (without
executing SQL) when appropriate.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## Context
For database extensions, previously dashboard would fire a separate call
just to retrieve the "default schema" for an extension via
`useDatabaseExtensionDefaultSchemaQuery` from the
`pg_available_extension_versions` table (the `schema` from this table
implies where the extension will be installed in)
## Changes involved
Am updating the `useDatabaseExtensionsQuery` to use a custom studio SQL
that will fetch this data in one request via a `LEFT JOIN`, so dashboard
no longer needs to fire a request to `pg_available_extension_versions`
each time we open the `EnableExtensionModal` since all the info we need
is loaded up front.
Have also validated that the cost of the custom studio SQL is low (6.8,
via explain analyze) so performance wise on the project's DB should be
okay.
This will then also allow us to correctly render the "default schema" of
the extensions in the new Install Integration Sheet now that we have
that information up front.
## Misc fix
Also fixed a small issue on the database extensions page whereby if you
searched for an extension that's hidden (e.g pg_tle), there's no "No
results" UI state showing up
<img width="1112" height="319" alt="image"
src="https://github.com/user-attachments/assets/eb488117-2a24-4317-ad73-1d636f9b1bc8"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Per-extension default schema detection surfaced across install flows;
default schema options added to selectors when applicable.
* **Bug Fixes**
* Hidden extensions filtered out earlier so they no longer appear in
lists.
* Install button now correctly disables when required extensions are
missing.
* **Refactor**
* Consolidated extensions metadata retrieval and simplified schema
selection/validation logic; UI text formatting standardized.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Summary
- The "Install integration" button in `InstallIntegrationSheet` was
unconditionally disabled when required extensions were missing from the
DB image (`hasMissingExtensions`)
- For webhooks, the installation goes through `installationCommand`
(platform API `/database/{ref}/hook-enable`) which handles `pg_net`
setup server-side — the client-side extension check is unnecessary
- Now only disables the button for missing extensions when there is no
custom `installationCommand`
## How this happened
PR #44277 migrated Database Webhooks to the new marketplace integrations
UI. The `InstallIntegrationSheet` already had a
`disabled={hasMissingExtensions}` guard from its original implementation
(for extension-only integrations like queues). When webhooks was added
with its `installationCommand` + `requiredExtensions: ['pg_net']`, the
guard wasn't updated to account for the command-based install path.
## Test plan
- [ ] With marketplace flag enabled, verify the "Install integration"
button is clickable for webhooks even if `pg_net` is not pre-installed
- [ ] Verify clicking it successfully enables webhooks via the platform
API
- [ ] Verify that extension-only integrations (e.g. queues) still
correctly disable the button when extensions are unavailable
Fixes FE-2928
## 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)
## Context
Related to marketplace integrations
Shifts Database Webhooks integration to the new Integrations UI. This
one's a bit different from the previous PRs as this involves a full SQL
installation query instead of only just a database extension. So am
tweaking `Integrations.constants` a little.
For context eventually all the integrations will be pulled remotely from
a database, so am still trying to figure out an optimal data structure,
but requirements will be clearer as we build out the UI
RE installing integrations:
- For now, if the integration has a provided SQL installation command,
that'll take precedence
- Else, if the integration has a provided SQL installation query, we'll
use that on the /query endpoint
- Otherwise, if the integration only requires database extensions,
dashboard will generate the queries to install the extensions
- In the case of the former tho, we won't allow users to choose which
schema to install the extension in too
Just ping me if any clarification's required!
## To test
- [ ] Verify that you can install the database webhooks with the new
integration UI
- [ ] Verify that behaviour is status quo without the new integration UI
This PR moves several components which rely on `next` out of the `ui`
package to the `ui-patterns` package.
`ui-patterns` package is intented to be imported with specific imports
so it's ok if there are components reliant on `next` in there.
The `SonnerToaster` component has removed its dependency by requiring a
prop for `theme`.
## Context
Related to marketplace related work, just moves the Queues integration
to the new UI (Changes are feature flagged)
<img width="1145" height="584" alt="image"
src="https://github.com/user-attachments/assets/d3245889-597d-44e2-9850-f20907e42056"
/>
Installation is now in a side panel with the intention that it'll just
be a single click to install integrations that involve multiple parts
<img width="400" height="955" alt="image"
src="https://github.com/user-attachments/assets/71903b61-6bd2-486c-903e-b48ae2133887"
/>
## To test
- Verify that you can install the integration and everything else should
be status quo
- Verify that everything should be status quo if the flag is off
## Context
Initial ground work for Marketplace Integrations (feature flagged under
the flag `marketplaceIntegrations`), in which some integrations will be
fetched over a network request (than hard-coded within the repo).
Feature flag just controls whether to we need to fetch them.
Similarly, categories under "Explore" will also be fetched, and the flag
just decides whether that should be enabled.
We're also planning to update the overview tab for integrations as well,
in which integrations fetched over the network request will use the new
UI (altho not functional just yet)
## To test
Note that the LOC changes are seemingly large, but that's just because
I've added in a types file for the Supabase project that we're using to
store the integrations data
- [x] Verify that behaviour is status quo with the flag off (Priority)
- [x] Verify that behaviour is status quo on CLI / self-host env
- [x] Verify that with the flag on you'll see one of the new
integrations fetched over network (Grafana), including an additional
category "Observability" (and clicking into it will show the new UI)
- [x] Verify that all other existing integrations are status quo
---------
Co-authored-by: Katerina Skroumpelou <sk.katherine@gmail.com>
Alex Hall