Commit Graph
42 Commits
Author SHA1 Message Date
Saxon FletcherandJoshen Lim d9742d707f chore(studio): refine Explorer sidebar breadcrumbs (#50188)
Moves Explorer’s back navigation and create actions into a reusable
sidebar breadcrumb header. Reduces product-menu headings globally to
`text-sm` and keeps breadcrumb links free of padding, borders, and
backgrounds.

### How to test

1. Open `/project/<ref>/explorer` and confirm the header shows Explorer
and the SQL Editor switch action.
2. Open Notebooks and Chats. Confirm the header shows `Explorer >
Notebooks/Chats` and the corresponding create action works.
3. Return using the Explorer breadcrumb with a click or Tab + Enter.
Check that the label stays aligned and has no hover background.
4. Open another product, such as Database, and confirm its sidebar
heading uses the smaller font size.

5. At a mobile viewport, open the menu and repeat the notebook/chat
actions and back navigation without closing the sheet. Confirm the
header stays current and disappears when returning to the main menu or
opening another product.

Validation: 18 focused tests, typecheck, formatting, and lint ratchet
passed.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Added a shared Explorer sidebar header with breadcrumbs and contextual
actions for creating notebooks and chats.
- Added keyboard-accessible navigation between the Explorer overview and
notebook or chat sections.
- Added support for customized product menu headers across project
layouts.

- **Improvements**
- Centralized Explorer navigation and actions in the shared sidebar
layout.
- Improved mobile menu updates when navigating between Explorer
resources.
- Refined Explorer home layout and drag-handle behavior across screen
sizes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-09-10 15:38:19 +08:00
Joshen Lim 961fc749d4 Add feature preview banner toast for explorerd (#49606)
## Context

Adds a feature preview banner toast for the explorer - flagged behind
the configcat flag
<img width="315" height="342" alt="image"
src="https://github.com/user-attachments/assets/9dbd7ffd-02c6-4083-9ca0-266b862e1b5d"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Added an Explorer preview banner to project layouts when the feature
is enabled.
- Added an “Enable Explorer” call-to-action that opens the feature
preview.
  - Banner dismissal is remembered and persists across sessions.
  - Added telemetry tracking for banner dismissal and CTA interactions.

- **Bug Fixes**
- Improved banner behavior and stability when displaying database
connection notifications.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-27 14:12:04 +08:00
Danny White bd02d7f297 feat(www + studio): broaden Select 2026 banner reach and soften www edges (#49569)
## What kind of change does this PR introduce?

Feature polish for the Select 2026 promotion.

## What is the current behavior?

- Studio only shows the Select Banner Stack card inside `ProjectLayout`
(project routes).
- www glyph fields read as hard rectangles on each side of the
announcement banner.

## What is the new behavior?

- Studio registers the Select banner from `AppBannerWrapper`, so it also
appears outside project context (org / account surfaces).
- www fields use per-row widths with edge alignment: top/middle shorter,
bottom longer, growing inward from each side for a softer silhouette.


https://github.com/user-attachments/assets/c5275967-63d0-40dd-a472-e3db08d1c39d

## To test

- **Studio (non-project):** open an org home or account page on the
deploy preview. Confirm the Select Banner Stack card appears in the
usual stack and dismisses as before.
- **Studio (project):** open any project route. Confirm the same card
still appears and does not double-register.
- **www:** open the marketing homepage. On `sm+`, confirm each side of
the cream announcement bar has a 3-row field where the bottom row
reaches further inward than the top, and the middle row is shortest.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added the Select 2026 promotional banner to eligible hosted Studio
environments.
* Banner visibility reflects promotion status, platform eligibility,
loading state, and dismissal preferences.

* **Style**
* Refined decorative field layouts with improved row alignment, mirrored
visuals, and flexible sizing.

* **Bug Fixes**
* Updated visibility behavior so the banner is no longer tied to being
inside a specific project.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-26 13:28:15 +08:00
Danny White b5462ee7bb feat(www + studio): promote Select 2026 in www and Dashboard (#49511)
## What kind of change does this PR introduce?

Feature. Promotes Supabase Select 2026 across www and the Dashboard.

## What is the current behavior?

There is no active Select promotion on www or in the Dashboard.

## What is the new behavior?

- Adds a dismissible Select 2026 banner above the www navigation.
- Adds a low-priority Banner Stack card across hosted Studio project
pages.
- Shares a lightweight pixel lockup and CSS-only motion across both
surfaces, with light, dark, and reduced-motion treatments.
- Opens the application page in a new tab and automatically expires both
placements after October 2 in San Francisco.

## To test

- Open `/database` on the www preview. Confirm the banner is legible in
light and dark mode, the complete message remains visible at a phone
width, and the CTA opens `select.supabase.com` in a new tab.
- Dismiss the www banner, then refresh the page. Confirm it stays
dismissed.
- Open any `/project/{ref}` route in the Dashboard preview. Confirm the
Select card appears in the bottom-right Banner Stack behind
higher-priority notices.
- Dismiss the Dashboard card, navigate to another project page, and
confirm it stays dismissed.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added a time-limited Select 2026 promotional banner across the website
and Studio.
* Added responsive themed artwork, animated visuals, campaign messaging,
and an external “Apply to attend” CTA.
  * Banner dismissal preferences are saved and respected across visits.
  * Promotion automatically disappears after the campaign ends.

* **Accessibility**
* Improved announcement dismissal controls with semantic buttons and
accessible labels.
  * Added reduced-motion support for promotional artwork.

* **Bug Fixes**
* Improved product-card loading effects to prevent hydration
inconsistencies.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-25 18:07:38 +01:00
Jordi Enric 6c6ac567b1 feat(studio): workers list behind the workers flag (FE-4188) (#49193)
## What

The Workers list page at `/project/[ref]/workers`, behind
`useFlag('workers')`. Reads `GET /v2/projects/{ref}/workers`.

- Sidebar and command-menu entries, both hidden when the flag is off
- Name search, state and access filters, pagination
- Read-only

Gating, in order: flag off redirects to the project home; a 404 from the
API means the project is outside the alpha allow-list ("not enabled for
this project"); a 403 means the caller lacks the permission
(`NoPermission`); anything else is an `AlertError`.

`parseWorker` in `data/workers/workers.utils.ts` is the only place the
API shape becomes the view model. It validates with zod, so a drifted
response fails the query instead of half-rendering a row.

## How to test

Only on the **Mockamaster** project in staging — it is the one project
in the alpha allow-list, and standing a worker up anywhere else is
involved right now.

1. Staging dashboard → Mockamaster → **Compute** in the sidebar
2. Expect the `dashboard-test` worker: state `Active`, runtime Deno,
private, US West, 2 GB · 1 vCPU · 1 inst
3. Open any other project's `/workers` URL → "Compute is not enabled for
this project"
4. Turn the `workers` flag off → the sidebar entry disappears and the
URL redirects to the project home

Closes FE-4188
2026-08-20 17:54:57 +02:00
Danny White b3edaa02f0 feat(studio): remove unified logs banner and deprioritise tos banner (#49239)
## What kind of change does this PR introduce?

Studio UI cleanup for sidebar BannerStack items and Unified Logs preview
defaults.

## What is the current behavior?

The sidebar BannerStack shows both a Unified Logs promo banner and a
Terms of Service update notice. Unified Logs has been default opt-in for
a while, and the ToS banner currently shares priority with other
higher-value notices. The default opt-in behaviour is still gated behind
the `unifiedLogsDefaultOptIn` feature flag.

Closes
[DEPR-646](https://linear.app/supabase/issue/DEPR-646/remove-unified-logs-banner-and-deprioritise-tos-banner).

| Before |
| --- |
| <img width="1024" height="759" alt="5717"
src="https://github.com/user-attachments/assets/1a19e6f6-0c7f-49e8-8e7e-9f83196b2353"
/> |

## What is the new behavior?

- Removes the Unified Logs BannerStack item and its component
- Keeps the ToS update banner but lowers its priority so other banners
surface first
- Sets Unified Logs `isDefaultOptIn` to `true` and removes
`unifiedLogsDefaultOptIn` flag usage

## To test

- Open any project in Studio (e.g. `/project/<ref>`)
- Confirm the sidebar BannerStack no longer shows the "Unified Logs is
here" banner
- If you have not dismissed the ToS notice and it is still before the
expiry date, confirm it still appears but sits behind higher-priority
banners (e.g. free micro upgrade on eligible projects)
- Open `/project/<ref>/logs` and confirm Unified Logs loads by default
for users who have not previously toggled the preview off

## After merge

- [ ] Retire the `unifiedLogsDefaultOptIn` PostHog flag

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Unified Logs preview is now enabled by default when available, while
preserving individual user choices.

- **Bug Fixes**
- Terms of Service update notifications now appear with higher priority.

- **Changes**
- Removed the Unified Logs promotional banner, including related
navigation, dismissal, and tracking behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-19 17:37:14 +10:00
Joshen Lim a7671019a8 Scaffold the explorer layout (#48740)
## Context

Resolves FE-4074

Just adds scaffolding for the explorer UI - no data fetching yet.
Initializes the page + side nav, based off Saxon's POC in
`poc/explorer-prototype`

<img width="1389" height="500" alt="image"
src="https://github.com/user-attachments/assets/8f293992-97d9-403e-91d6-2e104cd20eb5"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## New Features
- Added a project Explorer page accessible from
`/project/:ref/explorer`.
- Added navigation for browsing notebooks and chats.
- Added search fields, back navigation, animated transitions, and empty
states for Explorer sections.
- Added a conditional Explorer link to the SQL Editor menu when enabled.

## Documentation
- Marked the Explorer route migration as complete in the migration
checklist.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-06 12:11:35 +07:00
Joshen Lim 88f3173920 Remove home page skeleton loader, improve base loading behaviour (#47903)
## Context

The project's home page has been updated for a while now, but the
skeleton loader is still showing the old layout

Am opting to remove the skeleton loader entirely and instead improve the
loading state of the base UI - adjusts some heights to minimize layout
shifts

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Improvements**
* Added shimmer loading for project titles while project details are
loading.
* Refined project connection dropdown behavior: improved URL
display/truncation, adjusted dropdown alignment, and more reliable
option selection (disabled items remain unavailable).
* Streamlined the project page’s loading and transition experience
across different project states.
* **Tests**
* Updated the connect E2E scenario to interact with the Connect sheet
via its accessible label before selecting the ORM option.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-14 23:55:23 +08:00
Ali WaseemandIvan Vasilov 3fcf980b0a fix(studio): batch of production Sentry crash fixes (array/null guards) (#47460)
Fixes a batch of production Studio crashes from Sentry (all caught by
the global error boundary). Most are missing array/null guards where an
endpoint typed as an array — or with a nested array field — returned a
non-array body in production; a few are one-off render crashes.

Resolves FE-3748.

## Issues fixed

| Sentry | Error | Fix |
| --- | --- | --- |
| [J7R](https://supabase.sentry.io/issues/7492997940/) | Maximum update
depth exceeded | Disable RadialBar animation in disk-cooldown countdown
|
| [JR5](https://supabase.sentry.io/issues/7548484681/) |
resourceWarnings.find is not a function | Guard in
ResourceExhaustionWarningBanner |
| [JCJ](https://supabase.sentry.io/issues/7506024989/) |
resourceWarnings.find is not a function | Guard in ProjectLayout +
normalize query |
| [K1Y](https://supabase.sentry.io/issues/7584792331/) | snippet.name on
undefined | Optional-chain SQL editor download filename |
| [B3K](https://supabase.sentry.io/issues/7141649636/) |
pagination.count on undefined | Guard pagination in projects infinite
query |
| [JVP](https://supabase.sentry.io/issues/7560437621/) | schemas.some /
extensions.find | Coerce pg-meta lists to arrays in
useInstalledIntegrations |
| [JR2](https://supabase.sentry.io/issues/7548339272/) | extensions.find
is not a function | (same fix as JVP) |
| [JQR](https://supabase.sentry.io/issues/7547163939/) | lints.filter is
not a function | Normalize project lints query |
| [JR3](https://supabase.sentry.io/issues/7548433501/) |
entitlements.find is not a function | Guard call sites + normalize
entitlements query |
| [JQS](https://supabase.sentry.io/issues/7547557098/) |
selected_addons.find is not a function | Normalize addons query arrays |


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Bug Fixes**
* Improved stability across several Studio screens by handling missing
or unexpected data more safely.
* Downloads now use a fallback name when a snippet name isn’t available.
* Project, entitlement, schema, addon, warning, and extension views are
less likely to break when data is missing or not in the expected format.
* Pagination and countdown visuals now behave more consistently, with
reduced chance of runtime errors or animation-related glitches.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-07-02 08:38:17 +00:00
Joshen LimandAlaister Young 2bac064adf Joshen/fe 3697 progressively default opt in to unified logs (#47296)
## Context

We're progressively opting in users to use the new Unified Logs UI 🙂🙏

## Changes involved

- [ ] Removed flag for controlling visibility of unified logs feature
preview
- [ ] Added flag for controlling default opt in behaviour of unified
logs
- [ ] Small tweak to Unified Logs banner is default opted in (Just show
"New" and more info CTA)
- Disabling, then enabling again will thereafter show the existing "Go
back to old logs CTA"
<img width="290" height="166" alt="image"
src="https://github.com/user-attachments/assets/a2c46ce1-63c3-490c-bc7d-fc1254982dbe"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Unified Logs preview now derives default opt-in state from a new
default-opt-in flag and exposes `isDefaultOptIn`.

* **Bug Fixes**
* Removed eligibility-based gating so the “Beta” badge and Unified Logs
banner render consistently across logs screens.
* Unified Logs banner was refactored to handle enable/disable and
navigation internally, while remaining shown unconditionally.

* **Tests**
* Updated mocks and assertions to reflect the revised preview/banner
enablement and dismissal logic.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
2026-06-25 21:45:40 +08:00
Gildas GarciaandIvan Vasilov 96d43099bb chore: refactor Button API so that it can be used a standard button (#46880)
## 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>
2026-06-16 23:59:58 +02:00
kemal.earth 3162cad715 feat(studio): add a banner to promote unified logs (#46847)
## 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?

Adds a one time banner to the `<BannerStack />` to promote Unified Logs
becoming available. This also fixes the `<BannerStack />` components
issue with stacking varying height banners.



https://github.com/user-attachments/assets/40f02709-0d67-43a9-ab95-750d9a4a582a




<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added a dismissible "Unified Logs" banner with an animated sample-log
carousel, CTA to Unified Logs, and a preview/enable flow for non-enabled
users. Dismissal is persisted locally and telemetry is recorded for CTA
and dismiss actions; banner appears only for eligible projects.

* **Refactor**
* Banner stack UI updated to display a single front banner with animated
"peek" slivers and refined hover/animation behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-06-11 17:00:48 +01:00
Vaibhav 0957932b1d fix: reset scroll (#46553)
- closes https://github.com/supabase/supabase/issues/46548

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Bug Fixes**
* Main content now reliably scrolls to the top when navigating between
project sections.

* **Tests**
* Updated tests to cover the updated scroll behavior and context
handling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-06-05 07:08:13 -06:00
Gildas Garcia 0713a1efc1 chore: remove shadcn suffix for Input, Textarea, Alert and Collapsible (#45867)
## Problem

Now that we migrated old components to their new shadcn alternatives, we
don't need the `_Shadcn_` suffix anymore.

## Solution

Remove it

<img width="659" height="609" alt="image"
src="https://github.com/user-attachments/assets/2d7271a9-066a-4dcc-92fe-729b106d2c2f"
/>
2026-05-15 14:55:37 +02:00
1ab7251060 chore(studio): clarify partnered orgs and projects (#44328)
## What kind of change does this PR introduce?

UI improvements.

- Resolves DEPR-401
- Resolves DEPR-424
- Resolves DEPR-425

## What is the current behaviour?

Studio currently blurs two different concepts together:

- `billing_partner` / `billing_via_partner`, which represent real
billing ownership for marketplace-managed organisations such as AWS and
Vercel
- Stripe connection state, which is not actually partner billing in the
same sense, but was previously being mocked through the same UI paths

That made the Stripe work harder to reason about and left some local
behaviour dependent on temporary overrides rather than the API shape we
want to ship.

## What is the new behaviour?

This PR separates those concerns while keeping the existing AWS and
Vercel marketplace experience intact.

- AWS and Vercel continue to use `billing_partner` /
`billing_via_partner` for billing ownership, lockouts, and manage CTAs
- Stripe display state now comes from `integration_source`, which lets
Studio show Stripe-specific badges and alerts without treating Stripe as
a billing partner
- organisation-level partner UI is unified across AWS, Vercel, and
Stripe, including the org banner, navbar icon treatment, and
organisation cards
- project-level Stripe UI now appears only when the project itself is
marked as Stripe-connected, including the project switcher, project list
surfaces, and a project-level banner
- Stripe-connected organisations are no longer incorrectly blocked
behind the AWS/Vercel-style billing management alerts for invoices,
billing address, payment methods, or plan changes
- banner dismissal is scoped to the relevant org/project and
partner/integration state

## Review order

Most of the diff size here is regression tests and generated types. The
behavioural changes are concentrated in a smaller set of files.

Recommended review order:

1. `integration_source` vs `billing_partner` data-model split and
org/project query mapping
2. org-level UI: partner icon, org banner, org dropdown/card treatment
3. billing gating updates for Stripe vs AWS/Vercel
4. project-level Stripe UI: dropdown, list surfaces, banner
5. tests and generated types

| Stripe Org(s) |
| --- |
| <img width="1024" height="759" alt="Organizations Supabase"
src="https://github.com/user-attachments/assets/d0ef338c-3b41-4c6d-b3bd-f21a2c182840"
/> |

| Vercel Org(s) |
| --- |
| <img width="1024" height="759" alt="Organizations Supabase"
src="https://github.com/user-attachments/assets/1dc57770-3f24-45ac-840f-34680555cde8"
/> |

| AWS Org(s) |
| --- |
| <img width="1024" height="759" alt="Organizations Supabase"
src="https://github.com/user-attachments/assets/7847dad0-ee30-4a65-ab0b-b3b16af0d34f"
/> |

| Stripe Org, Non-Stripe Project |
| --- |
| <img width="1152" height="885" alt="Mallet Toolshed
Supabase-1673E019-792C-462C-B6F8-C5DDB810B331"
src="https://github.com/user-attachments/assets/556fbea3-b5ae-4f2f-96b9-6f66c6654e4a"
/> |

| Stripe Org, Stripe Project |
| --- |
| <img width="1152" height="885" alt="Hammer Toolshed
Supabase-7E86C17C-561F-4221-BD16-EAFF7D41AAE0"
src="https://github.com/user-attachments/assets/94f8daf6-0320-413e-8d56-59f9acaaea15"
/> |

| Vercel Org |
| --- |
| <img width="1024" height="759" alt="Projects Toolshed
Supabase-A7891653-9366-4B99-89DD-789D70CD52E3"
src="https://github.com/user-attachments/assets/c87ee6e8-4451-4866-a905-23a38b2593e3"
/> |

| AWS Org |
| --- |
| <img width="1024" height="759" alt="Projects Toolshed
Supabase-58A43ECE-569E-4541-9463-346A90B02CFF"
src="https://github.com/user-attachments/assets/9350a180-4d58-42a1-ad1a-95893c2e8b12"
/> |

This also removes the old Stripe mock override path in Studio so the
frontend matches the intended API model more closely.

## ~~Dependencies~~ (merged!)

This work depends on the private platform change that exposes
`integration_source` on the relevant organisation and project payloads:

- https://github.com/supabase/platform/pull/31874

_Update: now merged._

## Local testing

### Stripe

If you have the private `platform` repo checked out locally, make sure
your local API returns `integration_source: 'stripe_projects'`
consistently for the Stripe-linked org/project you are testing.

Important responses:

- `/platform/organizations`
- `/platform/organizations/:slug/projects`
- `/platform/projects/:ref`

Verify:

- org banner and org icon show the Stripe connected state
- unopened and opened project switcher both show Stripe only for
Stripe-linked projects
- project cards / table rows show the Stripe chip only for Stripe-linked
projects
- the project-level Stripe banner appears across project surfaces
- billing address, tax ID, invoices, payment methods, and plan changes
remain editable in Studio for Stripe orgs

### Vercel

Use a Vercel Marketplace org with real `billing_partner` /
`billing_via_partner` values.

Important org-level endpoints for local mocking in `platform`:

- `/platform/organizations`
- `/platform/organizations/:slug`
- `/platform/organizations/:slug/billing/subscription`

Project-level Vercel indicators still come from
`/platform/integrations/:slug`, not `integration_source`.

### AWS

Use an AWS Marketplace org with real `billing_partner` /
`billing_via_partner` values.

Important org-level endpoints for local mocking in `platform`:

- `/platform/organizations`
- `/platform/organizations/:slug`
- `/platform/organizations/:slug/billing/subscription`

AWS does not currently have a Stripe-like project-level indicator in
these org/project payloads.

## Notes

- `billing_partner` is no longer the right abstraction for the
Stripe-connected case in this PR. It remains the source of truth for
marketplace billing ownership, while Stripe currently uses
`integration_source` as a connection/display signal.
- I re-ran `pnpm api:codegen` while tightening this PR and kept only the
generated type changes this branch actually depends on, to avoid
unrelated API drift in the review.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
  * Stripe Projects integration added for billing and project flows
* Partner icons/badges shown across org and project lists, dropdowns,
and rows
* Dismissible, partner-specific marketplace/integration banners with
contextual CTA behavior
* Improved partner-billing detection to drive billing UI and
invoice/plan availability

* **Tests**
* Extensive new test coverage for billing UI, partner-managed fallbacks,
banners, icons, and related flows
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-04-23 12:17:24 +10:00
Ali Waseem 9c716a6a48 fix(studio): make paused project dashboard view responsive on mobile (#45068)
Closes
[FE-3040](https://linear.app/supabase/issue/FE-3040/fix-paused-project-dashboard-view-on-mobile)

## Summary

The paused project dashboard card was locked to a fixed `w-[40rem]`
(640px) width, causing horizontal overflow on mobile viewports. The
Resume project button was pushed off-screen, which drove users into
Project Settings → General, where the only visible action (Restart) is
disabled for paused projects.

## Changes

- `ProjectPausedState` card: `w-[40rem]` → `w-full max-w-[40rem]`
- `CardFooter`: added `flex-wrap` so Resume +
Upgrade-to-Pro/View-settings buttons stay visible on narrow screens
- `PauseDisabledState` export-data footer: stacks on mobile, row layout
on `sm:`+
- Parent wrappers (`ProjectLayout/index.tsx`, `Home.tsx`): added `px-4`
so the card has breathing room from viewport edges

## Follow-up (not in this PR)

The Linear issue also suggests adding a Resume action (or differentiated
messaging) to Project Settings → General's "Project availability"
section, so users who land there on a paused project have a clear path
forward. Happy to tackle that separately.

## Test plan

- [x] Paused Free-plan project on mobile viewport (≤640px): Resume +
Upgrade buttons visible, text wraps within the card
- [x] Paused Pro-plan project on mobile viewport: Resume + View settings
buttons visible
- [x] Non-restorable (>90 days paused) project on mobile: Recovery
options list readable, "Download backups" dropdown visible and stacks
below description
- [x] Desktop (≥640px): card still renders at 40rem max width, layout
unchanged
- [x] Verified via `/project/[ref]` and `/project/[ref]/home` entry
points

## Demo
<img width="443" height="832" alt="image"
src="https://github.com/user-attachments/assets/d5b7713e-c0b5-44e8-82fe-98c3308d5e8b"
/>

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
* Added horizontal padding to the paused project state interface and
wrapper.
* Made the export data section layout responsive, stacking vertically on
mobile and horizontally on larger screens.
* Updated the paused state card container styling to use responsive
width constraints instead of fixed dimensions.
  * Adjusted footer element spacing, gap sizing, and wrapping behavior.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-20 13:45:22 -06:00
kemal.earth 5a66d00c5e feat(studio): update unhealthy project guards (#44855)
## 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?

This enables the user to restart an unhealthy project as opposed to
pausing and reactivating.

cc @GaryAustin1 


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
* Added detection and dedicated UI for unhealthy projects with restart
capability.
* Enabled automatic recovery monitoring that dismisses unhealthy state
once the project recovers.

* **Bug Fixes**
* Updated pause button to display appropriate message when project is
unhealthy.
  * Extended restart functionality to support unhealthy project states.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-15 13:41:33 +01:00
Charis 205cbe7d26 chore(studio}: enforce import order, remove bare import specifiers (#44585) 2026-04-07 20:34:10 -04:00
kemal.earth 908da85225 feat(studio): nano exhaustion indicators (#44395)
## 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?

This PR introduces some visual indicators when a Nano project is
exhausting resources on Pro plus plans. The indicator tells the user a
free upgrade to Micro is available via a flashing Nano badge that guides
them to Upgrade and a global banner that notifies them resources are
near exhaustion, please upgrade for free.

| Project List | Project View |
|--------|--------|
| <img width="412" height="223" alt="Screenshot 2026-03-31 at 16 11 19"
src="https://github.com/user-attachments/assets/0d0e7727-e4eb-4ade-9024-528a2501596c"
/> | <img width="1256" height="618" alt="Screenshot 2026-03-31 at 16 11
10"
src="https://github.com/user-attachments/assets/b664e020-2b18-4842-8e64-4e49fac69eef"
/> |

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Free Micro Upgrade banner appears for nano-tier projects near compute
exhaustion with animated visuals and an “Upgrade for free” CTA.
* Compute badge highlights near-exhaustion with glow/shimmer and an
animated upgrade indicator; optional icon support added.
* Per-project banner dismissal is saved locally; dismissed banners
remain hidden.
* **Tests**
  * Added tests covering banner display and dismissal scenarios.
* **Chores**
* Added local-storage keys and telemetry events for banner and upgrade
interactions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-01 11:48:43 +01:00
Joshen Lim 00ca386e24 Chore/add get restore initiated event endpoint (#43485)
## Context

Resolves FE-2709
Dependent on API PR: https://github.com/supabase/platform/pull/30564

While a project is in restoring, we should a "Contact support" CTA in
the footer, but this has led to a high number of tickets coming in
despite the project's status being `ACTIVE_HEALTHY` when we check on our
end.

Will be adjusting the behaviour of this CTA to only show up if the
project's status is RESTORING and it's `updated_at` is at than 30
minutes ago, and update the CTA a bit as well

<img width="765" height="243" alt="image"
src="https://github.com/user-attachments/assets/69fe6fa3-d46f-4268-ad1b-46cffb3cc6ba"
/>

<img width="566" height="273" alt="image"
src="https://github.com/user-attachments/assets/2d5f31c2-6ef2-444b-8aee-fd94139cf713"
/>
2026-03-19 00:49:01 +08:00
Danny WhiteandJoshen Lim 7d6995bbfe refactor(studio): clean up ProjectLayout title API (#43742)
## 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>
2026-03-16 18:03:10 +11:00
Francesco Sansalvadore 156f904018 feat: floating mobile toolbar (#43444)
- move navigation components to `apps/studio/components/layouts/Navigation`
- add [FloatingMobileToolbar](https://github.com/supabase/supabase/pull/43444/changes#diff-3dffe47fd51ca851d612d8728e03b2dc344ec213d4f3a46a824d3fa32a7cc851) as quick access to tools such as search, assistant, inline editor, etc - behind feature flag and feature preview (true by default as it's a bit
annoying to have to enable it all the time as previews are stored in
local-storage)
- fix sidebar panels closing on viewport resizing (regression from previous pr)

https://github.com/user-attachments/assets/d6881e3b-5128-4306-bb82-3ca39c755dba

<img width="986" height="697" alt="Screenshot 2026-03-12 at 12 40 11"
src="https://github.com/user-attachments/assets/da8511e2-7d01-4237-b814-596031c747c5"
/>
2026-03-13 12:13:07 +00:00
Francesco Sansalvadore 23c827bdda feat: nested mobile nav menu (#43333)
- consolidate `top level menu` and `contextual menu` into nested menu on
mobile
- remove legacy mobile submenu
2026-03-11 13:55:20 +01:00
Danny WhiteandJoshen Lim 0972d61db5 feat(studio): page titles for project surfaces (#43534)
Stacked PR 2/5 for page title improvements. Includes Auth, Database,
editors, and Edge Functions layout title adoption.

_Base:
[dnywh/feat/page-titles](https://github.com/supabase/supabase/pull/43538)_

---

## What kind of change does this PR introduce?

- Resolves FE-1960
- Resolves FE-1983
- Resolves DEPR-207

## What is the current behavior?

Page titles between surfaces are inconsistent and vague. Sometimes they
say the product name:

```
My Project | My Org | Supabase
```

...even when on a specific surface like Database > Tables.

Other times they show the entity name but skip over the project or org
name :

```
Edge Functions | Supabase
```

## What is the new behavior?

Auth, Database, editors, and Edge Functions adopt the layout title
format introduced in https://github.com/supabase/supabase/pull/43538:

```
users | Table Editor | My Project | My Org | Supabase
hello-world | Logs | Edge Functions | My Project | My Org | Supabase
Backups | Database | My Project | My Org | Supabase
Authentication | My Project | My Org | Supabase
```

That format is:

entity, section, surface, project, org, brand

## Additional context

Related stacked PRs also based on the the original
[dnywh/feat/page-titles](https://github.com/supabase/supabase/pull/43538)
branch:

- https://github.com/supabase/supabase/pull/43535
- https://github.com/supabase/supabase/pull/43536
- https://github.com/supabase/supabase/pull/43537

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-03-11 12:38:02 +11:00
Pamela Chia 01c178e159 chore(studio): graduate homeNew experiment (#43437)
## Summary

The `homeNew` PostHog experiment has concluded. This PR graduates it by
making the new homepage (`ProjectHome`, formerly `HomeV2`) the permanent
default for all users, and removes all dead code from the old
experiment.

## Changes

- Remove `homeNew` PostHog feature flag checks and `home_new` experiment
exposure tracking from 3 files
- Rename `HomeNew/` → `ProjectHome/` directory and `HomeV2` →
`ProjectHome` export
- Delete old `Home/Home.tsx` component (shared components like
`ProjectList/` are kept — still used by org pages)
- Delete `pages/project/[ref]/building.tsx` and add a server-side
redirect from `/project/:ref/building` → `/project/:ref` to prevent 404s
during rollout (old cached JS bundles may still route to `/building`)
- Simplify `ContentWrapper` building-state logic in `ProjectLayout` —
always redirect building projects to home, always suppress building
interstitial on home page
- Always route to `/project/{ref}` after project creation (remove
`/building` path)
- Update all Observability imports from `HomeNew` → `ProjectHome`

## Self-hosted behavior change

Self-hosted Studio previously showed the old `Home` component (client
libraries + example projects) since PostHog flags don't load. This PR
changes self-hosted to show `ProjectHome` (TopSection with service
status + instance diagram, advisor, custom reports). All sections query
backend APIs that exist on self-hosted. E2E tests pass against the
self-hosted build.

## Testing

- [x] `pnpm turbo run build --filter=studio` passes
- [x] No remaining references to `homeNew`, `home_new`, or `HomeNew` in
codebase
- [x] No broken imports to deleted files
- [x] Self-hosted E2E tests pass (145 passed, 1 flaky, 4 skipped)
- [x] `/building` redirect added to both platform and self-hosted config
blocks

**Quick test:**
1. Navigate to any project homepage — should render the ProjectHome
component
2. Create a new project — should redirect to `/project/{ref}` (not
`/building`)
3. Visit a project in `COMING_UP` state on a non-home route — should
redirect to home
4. Visit `/project/{ref}/building` directly — should 302 redirect to
`/project/{ref}`

## Linear

- fixes GROWTH-671
2026-03-10 17:03:58 +09:00
Danny White 96ac1c2652 feat(studio): page titles (core) (#43538)
## What kind of change does this PR introduce?

- Resolves FE-1960
- Resolves FE-1983
- Resolves DEPR-207

## What is the current behavior?

Page titles between surfaces are inconsistent and vague. Sometimes they
say the product name:

```
My Project | My Org | Supabase
```

...even when on a specific surface like Database > Tables.

Other times they show the entity name but skip over the project or org
name :

```
Edge Functions | Supabase
```

## What is the new behavior?

Page titles *mostly* (see below) follow the same format:
```
users | Table Editor | My Project | My Org | Supabase
hello-world | Logs | Edge Functions | My Project | My Org | Supabase
Backups | Database | My Project | My Org | Supabase
Authentication | My Project | My Org | Supabase
```

That format is:

entity, section, surface, project, org, brand

## Additional context

This is stacked PR 1/5 for page title improvements. Includes the core
title utility and ProjectLayout integration/tests. Follow-up stacked PRs
are based on this branch:

- https://github.com/supabase/supabase/pull/43534
- https://github.com/supabase/supabase/pull/43535
- https://github.com/supabase/supabase/pull/43536
- https://github.com/supabase/supabase/pull/43537

This one should be merged first. The others (listed right above) can
_then_ be merged in any order.
2026-03-09 15:25:05 +07:00
Ivan Vasilov 637b6fb792 chore: update react-resizable-panels to v4 to support pixel width (#42990)
This pull request standardizes the usage of props and value types for
the `ResizablePanelGroup` and `ResizablePanel` components across
multiple files in the codebase. Specifically, it replaces the deprecated
`direction` prop with `orientation`, and updates numeric prop values
(such as `defaultSize`, `minSize`, and `maxSize`) to be passed as
strings. This ensures consistency with the updated component API and
improves type safety.

**Component API Updates:**

* Replaced the `direction` prop with `orientation` for all usages of
`ResizablePanelGroup`
* Updated all `ResizablePanel` props (`defaultSize`, `minSize`,
`maxSize`) to be passed as strings instead of numbers, ensuring
compatibility with the latest API requirements.
* Removed deprecated or unnecessary props such as `order` from
`ResizablePanel` components, and ensured all size-related props are
consistently formatted as strings.
2026-02-23 19:48:19 +01:00
Joshen Lim 42f1344303 Ensure logs pages are accessible irregardless of project's status (#43010)
## Context

Ensure that project's logs pages are accessible irregardless of
project's status, given that logs are mutually exclusive from the
project's database and doesn't require the database to be online for it
to be functional.

## Other changes
Mainly around simplifying some logic within ProjectLayout
- Remove `disabled` prop in `SideBarNavLink` component, given that
`route` prop already has a `disabled` param
- Define `disabled` within `NavigationBar.utils.tsx` -> just have one
place to define the "configuration" of a route
- Minimize manually declaring specific routes to render specific UI (for
Restore failed)
  - All of these can be grouped under `routesToIgnoreDBConnection`

## To test
- [ ] Verify that you can access the logs page while the project is
coming up
- [ ] Verify that you can access the logs page on a paused project (and
also use it)
2026-02-19 17:53:45 +08:00
Zachary Stallings 192cbfe999 One liner: Adding more specific css to target open and closing animations without affecting the resize animation (#42069)
## 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?

Bug fix. One liner.

## What is the current behavior?

The resizable product menu to the left on drag responds with a slow drag
animation.
This is inconsistent with other resizable drag animations.


![supabase-resizable-before](https://github.com/user-attachments/assets/d8807aa9-2d9a-4371-a4a3-13f0983a1866)

## What is the new behavior?

the drag animation is consistent and snappy!


![supabase-resizable-after](https://github.com/user-attachments/assets/716c28af-3cba-4d97-8ee5-8d1331dd6bd5)


## Additional context

As far as I can tell the transition animation on the `ResizablePanel` is
for the open and closing of the menu and not for resizing. It looks like
a just overly broad transition target (`transition-all`).

The react-resizable-panels seems to use flex grow to do the animation.
The `transition-all` which is currently on the `ResizablePanel`
component is causing the flex grow to animate and this in turn is
causing some minor layout thrashing.
<img width="406" height="579" alt="Screenshot 2026-01-21 at 8 40 24 PM"
src="https://github.com/user-attachments/assets/9282731a-f1d6-411d-9092-25f0bddff29f"
/>

After this update the layout thrashing from flex-grow is fixed.
<img width="539" height="520" alt="Screenshot 2026-01-21 at 6 38 00 PM"
src="https://github.com/user-attachments/assets/dc2b2e28-8298-400e-8f19-77edaf6b9884"
/>

Related to [this](https://github.com/supabase/supabase/issues/27801)
issue.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Style**
* Refined sidebar animation to animate width-related properties only,
delivering smoother and more responsive open/close transitions without
changing timing.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-02-18 08:52:48 -07:00
Joshen Lim 164dcf3e92 Adjust disabled state while project is paused (#42096)
* Adjust disabled state while project is INACTIVE

* merge master, unlock add ons page if paused
2026-01-27 15:28:23 +08:00
Joshen Lim a4c10ae87c Chore/allow users to access edge functions while project is paused (#42097)
* Allow edge functions pages to be accessible while project is paused or restoring

* nit
2026-01-26 11:51:36 +08:00
Pamela Chia faa2588392 chore(studio): remove homeNew feature flag helper (#41984)
PostHog migration from boolean to string variants is complete.
The helper was only useful during migration - now it's just
`value === 'new-home'` which is trivial to inline.

- Delete apps/studio/lib/featureFlags/ folder
- Inline flag check at 3 call sites
2026-01-21 12:32:02 +07:00
Sean Oliver 57a9c0e719 feat: add homeNew flag helper for boolean to string migration (#41724) 2026-01-05 15:44:24 -08:00
Pamela Chia 3336b22451 chore(flags): migrate homeNew flag from configcat to posthog (#41101)
Switch homeNew flag to usePHFlag.
2026-01-05 15:22:06 +07:00
Danny WhiteandJoshen Lim ad2ac05d7d fix(studio): project resume dialog (#41300)
* move desc to body

* better copy

* loading label

* smol gap change

* nit

* Nit

* NIt

* Attemt

* fix

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-12-15 11:15:24 +11:00
Charis c0c824809e feat(studio): add infinite pagination for buckets policies (#41277)
## Summary of changes

Buckets policies page at /project/_/storage/files/policies now uses the
paginated buckets endpoint to fetch buckets.

## Before

Used a non-paginated query.

## After

To support a paginated query, we now have:
- Infinite scroll loading behavior
- Fixed some of the buckets utilities to account for policy references
to buckets that haven't loaded yet
2025-12-11 15:45:16 -05:00
Joshen Lim 2c91a79b58 Joshen/fe 2180 right side sidebars too wide on laptop displays (#40940)
* Fix default size for resizeable panel in table editor

* Fix default size for resizeable panel for global

* Clean up

* nit

* Tweak

* Adjust
2025-12-01 17:32:07 +08:00
Joshen Lim 713e2949d9 Remove GOING DOWN to determine if project is pausing (#40941) 2025-12-01 17:24:13 +08:00
c63d2a92a0 Unify Inbox and Advisor (#40026)
* sidebar-manager

* storage keys

* tests

* more ai spots

* test fix

* revert to default

* remove ref

* Update apps/studio/state/sidebar-manager-state.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* fix ts

* fix

* fux

* fux query param

* clean

* fix

* more

* mock local storage

* simplify

* remove provider test

* remve useopensidebar

* fix(new homepage): open ai assistant on advisor card button clicks

* Update apps/studio/components/layouts/ProjectLayout/LayoutSidebar/index.tsx

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* Update apps/studio/state/sidebar-manager-state.tsx

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* refine

* editor sidebar manager

* reset results

* advisor sidebar manager

* empty state and notice

* event tracking

* remove variable

* remove use effect

* open in sidebar

* use sidebar old home

* Update apps/studio/components/ui/EditorPanel/EditorPanel.tsx

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* connect hotkey

* Update apps/studio/components/layouts/AppLayout/AssistantButton.tsx

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* Update apps/studio/state/advisor-state.ts

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* Update apps/studio/state/advisor-state.ts

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* fix

* initial prompt

* fix(inline editor button): only show keyboard shortcut if hotkey active

* cleanup(advisor panel): minor code cleanup

* fix(advisor panel): misplaced key on list

* fix(advisor panel): add error state

* fix(advisor panel): improve a11y

* fix(advisor panel): cannot find selected item

* fix

* fix

* tooltip

* link

* sidebar move up

* merge inbox

* project/org sidebars

* panels

* clean

* fix use effect

* layoutheader export

* fix

* ts

* prettier

* tests

* remove markdown

* remove org and project filters from state

* text link

* Update apps/studio/state/sidebar-manager-state.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* fix

* prettier

* remove files

* bump limit

* noop

* format

* remove notifications on self hosted

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
2025-11-07 15:01:53 +10:00
Danny WhiteandJoshen Lim abd35216f7 chore(studio): clean up storage UI (#40164)
* copywriting updates

* remove unused file and comment

* copy tweaks

* remove stickySidebarBottom

* extraneous comment

* remove unused components

* unused image

* files policies redirect

* Update redirects for storage settings

* Fix loader for storage policies

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-11-05 14:57:19 +11:00
Joshen Lim b4d38fabd0 Chore/barrel files bye part 05 (#40016)
* Clean up barrel files part 4

* nit

* Part 5 of cleaning up barrel files

* Revert changes for types

* Nit
2025-10-31 13:15:31 +08:00
Joshen Lim 75e1717a02 Remove barrel files part 02 (#39956)
* Remove barrel files part 02

* Clean up
2025-10-30 23:50:14 +08:00