This PR overrides title, description, content, logo, images, docs url,
and site url from marketplace db for wrappers. If marketplace doesn't
yet publish a wrapper listing, the page falls back to the hardcoded
content we show today.
It also improves the marketplace listings and categories queries by
returning typed results, making the code more type safe.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Studio integrations now surface updated marketplace metadata (name,
description, icon, docs, site, author, files) when available.
* Marketplace wrapper integrations are consolidated and shown alongside
studio integrations.
* **Refactor**
* Marketplace category and integration fetching rewritten for more
reliable loading, cancellation support, and improved menu/category
population.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46472?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 -->
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>
This PR:
* Refactors integrations page implementation to make it simpler and
easier to understand.
* Integration category pages from marketplace db show category name and
description.
* Shows featured integrations coming from the marketplace db at the top
of the page.
* Hides empty categories:
https://linear.app/supabase/issue/INT-113/hide-empty-categories-on-dashboard-integrations-page
Below design related fixes will be done in a separate PR:
https://github.com/supabase/supabase/pull/45856. So this PR is ready to
merge with current fixes.
<details>
~~Design fixes needed after consulting with the design team:~~
- [ ] ~~Do not use inverted colors on images for featured integrations.
This leads to inconsistent images for the featured marketplace listings.
E.g. Grafana listing shown in the featured listings:~~
<img width="463" height="260" alt="image"
src="https://github.com/user-attachments/assets/76816807-667f-44b0-b68c-5e1ca342be1f"
/>
~~vs shown on it's own page:~~
<img width="909" height="667" alt="image"
src="https://github.com/user-attachments/assets/00efda48-3e4e-4b05-87ad-cbbce9047c94"
/>
- [ ] ~~The images on featured marketplace integrations should not be
truncated as seen in the first image above.~~
- [ ] ~~The **Install integration** button feels floating far out on the
right.~~
- [ ] ~~The description under the title is too long and truncated.
Requested by Doppler here:
https://supabase.slack.com/archives/C0AL11JG5MG/p1778009104728819?thread_ts=1777654129.027269&cid=C0AL11JG5MG~~
- [ ] ~~The content section doesn't render bulleted lists correctly.~~
</details>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Dedicated "Featured Integrations" section on the integrations page.
* Integrations can be marked as featured to appear in the featured
section.
* **Improvements**
* Sidebar shows only categories that contain integrations.
* Integration image handling improved for featured cards.
* Updated loading placeholders for integrations to provide a smoother
loading experience.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45507)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
## What kind of change does this PR introduce?
UI polish.
## What is the current behavior?
- A few product sidebar areas render menu rows outside the shared
ProductMenu/Menu.Item styling path, so their hover and selected states
differ from the rest of Studio.
- Database product menu shortcut tooltips are also scoped to the text
label instead of the full hoverable row.
## What is the new behavior?
- Integrations Explore/Installed, Observability, and Reports sidebar
rows now use the shared ProductMenu or Menu.Item pill styling.
- Observability spacing is tightened after the ProductMenu conversion.
- Product menu shortcut tooltips now wrap the full row trigger, so the
entire Database sidebar row opens the tooltip.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Enhanced navigation menu components with improved loading and error
state handling across the dashboard.
* Streamlined menu structure and styling consistency for integrations,
reports, and observability sections.
* Added enhanced tooltip support for navigation items.
<!-- 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 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>
## What kind of change does this PR introduce?
Refactor, cleanup, and docs update.
## What is the current behavior?
After the page-title rollout, `ProjectLayout` is still in a transitional
state:
- it accepts a deprecated `title` prop
- it still supports a separate `browserTitle.surface`
- wrapper layouts are split between passing `title` directly and passing
`browserTitle.section`
That makes the API harder to reason about than it needs to be, even
though the rendered titles are already correct.
## What is the new behavior?
This cleanup finishes the API simplification that came out of the
stacked PR review:
- wrapper layouts stay `title`-first for DX
- `ProjectLayout` no longer accepts `title`
- `product` is now the single source of truth for the project-surface
title segment
- `browserTitle` is now only used for extra browser-title metadata
(`entity`, `section`, `override`)
- the remaining project-scoped callers now pass `browserTitle.section`
when they need a section label
- docs now reflect the final pattern instead of the transitional one
Rendered page titles stay the same.
## Additional context
Checks run:
- `pnpm --filter studio exec vitest --run lib/page-title.test.ts
components/layouts/ProjectLayout/index.test.tsx`
- `pnpm --filter studio typecheck`
- `pnpm exec prettier --check ...` on touched files
This is intended as the post-rollout cleanup PR based on Joshen's review
feedback across the stacked title changes.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## 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>
