Commit Graph
363 Commits
Author SHA1 Message Date
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
Pamela Chia fe5b22d314 fix(studio): fall back to legacy connect dialog when connectSection flag is unresolved (#43733)
## Summary

When the `connectSection` PostHog flag is unresolved (`undefined`) —
e.g. during loading or if PostHog is unreachable — the header Connect
button renders nothing (`null`), making it a no-op. This changes the
fallback to render the legacy `<Connect />` dialog instead, so the
button always works.

## Changes

- Remove `isFlagResolved` gate in `LayoutHeader` — render `<Connect />`
(legacy) whenever `connectSection !== 'connect'`, including when
`undefined`

## Testing

Tested on Vercel preview:
- [x] Flag returns `'connect'` — ConnectSheet opens
- [x] Flag returns `'getting-started'` or `false` — legacy Connect
dialog opens
- [x] Flag is `undefined` (unresolved) — legacy Connect dialog opens
instead of nothing
2026-03-13 04:28:41 +00:00
Pamela ChiaandAli Waseem 578a73f966 feat(studio): connectSection experiment — replace Getting Started with Connect section (#43629)
## Summary

Re-ports PR #43119 against the current `ProjectHome` codebase (the
original PR targeted `HomeNew/` which was removed during the `homeNew`
graduation in #43437). Also unifies the `connectSheet` and
`connectSection` feature flags into a single `connectSection` flag — the
`connectSheet` flag is removed entirely, so both the ConnectSheet
(header) and ConnectSection (homepage row) are controlled by one
experiment.

- Adds `connectSection` PostHog experiment flag that controls two
things:
1. Swaps the Getting Started section for a Connect section on the
project homepage for new projects (< 10 days old)
2. Swaps the legacy Connect dialog for the new ConnectSheet panel in the
header
- **Control** (`getting-started`): existing Getting Started section +
legacy Connect dialog in header
- **Treatment** (`connect`): new 4-tile Connect section + ConnectSheet
in header
- `undefined` (loading): neither section renders, avoiding flash
- Tiles filtered by the same `useIsFeatureEnabled` flags as ConnectSheet
(`show_app_frameworks`, `show_mobile_frameworks`, `show_orms`)
- Connect tile clicks tracked via `home_connect_action_clicked`; section
render tracked via `home_connect_section_exposed`; sheet opens tracked
via `connect_sheet_opened` with source attribution (`header_button` or
`connect_section`)

## Changes

- `packages/common/telemetry-constants.ts` — new
`home_connect_section_exposed`, `home_connect_action_clicked`, and
`connect_sheet_opened` event types
- `ConnectSheet/ConnectSheet.tsx` — read `connectTab` query param and
sync to active mode on open; `handleModeChange` keeps param in sync on
tab switch; fire `connect_sheet_opened` event with source attribution on
open
- `ConnectButton/ConnectButton.tsx` — set `connectSource=header_button`
query param on click
- `ProjectHome/ConnectSection.tsx` — new component (4-tile connect
card); set `connectSource=connect_section` on tile click
- `ProjectHome/Home.tsx` — experiment flag wiring
- `LayoutHeader/LayoutHeader.tsx` — read `connectSection` flag instead
of `connectSheet` to toggle ConnectSheet vs legacy Connect dialog

## Test plan

To test on the Vercel preview, set `connectSection=connect` to 100% in
PostHog (or override via cookie `ph_override_connectSection=connect`).
No separate `connectSheet` flag is needed — `connectSection` controls
both features.
- [x] Treatment (`connect` variant) — "Get connected" section renders on
new project, Getting Started hidden
- [x] Control (`getting-started`) — Getting Started renders, Connect
section hidden
- [x] Mature project (> 10 days) — neither section regardless of flag
- [x] Clicking each tile opens ConnectSheet on the correct tab
(Framework / Direct / ORM / MCP)
- [x] Switching tabs inside sheet updates `connectTab` URL param
- [x] Closing sheet clears `connectTab` param
- [x] Direct URL deep-link (`?showConnect=true&connectTab=orm`) opens
sheet on correct tab
- [x] Dark mode — background gradient renders correctly
- [x] Light mode — background switches to light gradient
- [x] Responsive layout — 4 cols (xl), 2×2 (md), stacked (mobile)
- [x] Telemetry — `home_connect_section_exposed` fires once on load;
`home_connect_action_clicked` fires with correct `mode`
- [x] Treatment — header Connect button opens ConnectSheet (not legacy
Connect dialog)
- [x] Control — header Connect button opens legacy Connect dialog (not
ConnectSheet)
- [x] Telemetry — clicking a ConnectSection tile fires
`connect_sheet_opened` with `source: 'connect_section'`
- [x] Telemetry — clicking header Connect button fires
`connect_sheet_opened` with `source: 'header_button'`

---------

Co-authored-by: Ali Waseem <waseema393@gmail.com>
2026-03-13 11:50:07 +09:00
Danny WhiteandJoshen Lim 817a2710da feat(studio): page titles for account and org surfaces (#43536)
Stacked PR 4/5 for page title improvements. Includes account and
organization-level title updates plus organization list/selector page
titles.

_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?

Account and organization-level title updates plus organization
list/selector page titles, adopting 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/43534
- https://github.com/supabase/supabase/pull/43535
- https://github.com/supabase/supabase/pull/43537

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-03-13 12:18:13 +11:00
Joshen Lim 0b97e0ff86 Joshen/fe 2642 project settings allow to select a replica to power (#43626)
## Context

Related to dashboard scalability
Previous PR: https://github.com/supabase/supabase/pull/42856

Note: Changes are all feature flagged still and I'm still not entirely
convinced with the current UX
Will iterate as as go along, and only make this publicly available when
we're satisfied with the behaviour

Adds a "Dashboard preference" section to the project settings
<img width="265" height="740" alt="image"
src="https://github.com/user-attachments/assets/6ce1aa19-26c2-47c6-a9c4-595137266631"
/>

In which users can then select which database they'd like to use for
read queries run from the dashboard
Note: Everything is local storage for now, but we'd need middleware
support if we want to make this setting persist for all users on the
project
<img width="791" height="434" alt="image"
src="https://github.com/user-attachments/assets/e651d6d9-fed4-4da4-b552-c9f93f8d46d3"
/>

Added a dialog as well to further explain what this implies
<img width="610" height="312" alt="image"
src="https://github.com/user-attachments/assets/0aa957af-cb51-476f-aa79-8948a7cbe5ae"
/>

## To test

- Choosing a replica in dashboard preferences will only affect the table
editor as thats the only place that's set up so far to use a replica for
read queries (I'll need to follow up for other parts of the dashboard in
subsequent PRs)
2026-03-12 11:18:28 +07:00
Francesco Sansalvadore b997b7fb13 feat(studio): org project branch mobile selector (#43238)
- add new
[OrgSelector](https://github.com/supabase/supabase/pull/43238/changes#diff-214b339101a9c06864ea2755ac7246eb4c971ce74c5d3169b1385a28ee1d4227)
and
[ProjectBranchSelector](https://github.com/supabase/supabase/pull/43238/changes#diff-82d25c128c306b61bea7481026f58f670a229874f23ca3a1a1d78ddeabde21e0)
components to the mobile navigation, replacing the previous which took
up a lot of horizontal space
- org/project/branch dropdowns now open up in the bottom MobileSheetNav
for a better mobile ux
- desktop nav remains unchanged
2026-03-11 16:25:22 +01: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
Joshen Lim 9b0dc8d9b9 Chore/fix storage explorer when switching buckets (#43541)
## Context

Taking a slightly different approach to [this
PR](https://github.com/supabase/supabase/pull/43370)

Original problem was that if you opened some folders while in a bucket
and then switched to a different bucket, the folder UI will persists
(folders from Bucket A will render when landing on Bucket B)

## Changes involved
- Shift `StorageExplorerStateContextProvider` into `[bucketId].tsx]`
instead of `ProjectContext`
- The valtio store here only applies for the storage explorer so having
it so high in the project's context was unnecessary
- This also just implies that the valtio store will automatically reset
whenever the bucket changes
- Simplify storage explorer valtio store by initializing the store with
the bucket
- We'll initialize the selected bucket with the store now (Same as
previous PR)
- Removes unnecessary `setSelectedBucket` method which required a
separate `useEffect` in `StorageExplorer.tsx`

## To test
- [ ] Verify that the original is resolved
- [ ] General smoke test of the storage explorer - i've also re-added
the e2e test that Gildas wrote up in his PR
2026-03-09 14:32:34 +07:00
Danny White df55c5c327 feat(studio): platform webhooks scaffolding (#43276)
## What kind of change does this PR introduce?

Impending feature addition. Resolves DEPR-340.

## What is the current behavior?

We don’t have any platform webhook support.

## What is the new behavior?

This puts the scaffolding for platform webhooks **behind a feature
flag**. The content is currently UI-only (with mock data and a
[temporary tracking
file](https://github.com/supabase/supabase/blob/8adadc61f57c70b686a0f5f05e9f7f05837e0466/apps/studio/components/interfaces/Platform/Webhooks/DEPR-340-backend-integration-tracker.md)).

Merging this in lets us work incrementally from here on.
2026-03-06 02:56:54 +00:00
Kevin Grüneberg 589cdae7e5 chore: log drains on Pro Plan (#42435) 2026-03-03 19:10:23 +08:00
Riccardo BusettiandJoshen Lim 43bccc52a3 feat(etl): Add new flags per org (#43292)
This PR adds new feature flags for controlling etl destinations
visibility based on the org slug.

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-03-03 15:44:57 +08:00
Danny White 706207436f chore(studio): move organization settings nav to sidebar layout (#43228)
## What kind of change does this PR introduce?

UI change

## What is the current behavior?

Organization settings are currently spread across a NavMenu. This is
getting unweildy as the amount of children within Organization settings
grows.

## What is the new behavior?

Organization settings are now on a sidebar, just like Project Settings
and most other surfaces.

| Before | After |
| --- | --- |
| <img width="1024" height="563" alt="Supabase"
src="https://github.com/user-attachments/assets/3889858c-157a-4deb-8714-71fe9cf002e6"
/> | <img width="1024" height="563" alt="General Supabase"
src="https://github.com/user-attachments/assets/1b4eb2c3-a67c-4eda-ab3c-e6610dd5ccf4"
/> |

## Additional context

@fsansalvadore and the design team have have other efforts going on to
reduce interface clutter, e.g. nested sidebars.
2026-03-03 10:15:40 +11:00
Francesco Sansalvadore affdf865e0 fix: mobile sheet nav close (#43239)
Mobile sheet nav doesn't close on route change and viewport resizing
after #43184.

This PR fixes that and also makes it optional to close on nav and
resizing, because the sidepanels need them _not_ to resize, while mobile
navigation menu does.

Also added some tests. 🪄
2026-02-27 16:14:57 +01:00
Francesco Sansalvadore 9145470ff6 feat(studio): mobile sheet nav (#43184)
- use `MobileSheetNav` for all `LayoutSidebar` panels on mobile viewport
- move `Help` to LayoutSidepanel for a more cohesive experience
- enables opening the help panel using params `?sidebar=help-panel`

https://github.com/user-attachments/assets/a84e56f0-f2e2-4217-89a2-ba895bb7d352
2026-02-27 12:06:27 +00:00
Ivan VasilovandJoshen Lim e8c309c312 fix: resolve undefined project ref in TabsStateContextProvider (#43222)
This pull request refactors how the `TabsStateContextProvider` receives
the project reference and updates related imports for consistency and
maintainability. The main change is to pass `projectRef` explicitly as a
prop instead of fetching it internally, which improves context control
and makes the component easier to test and reuse. Additionally, the PR
updates import paths to use absolute aliases and removes an unused
function.

This fixes an issue which you can replicate by:
1. Go to SQL editor
2. Open any snippet
3. Delete the local storage `supabase_studio_tabs_{project ref}`
4. Refresh the page while still the snippet is open

This will make the snippet to enter in a ghost state where the tab name
is not visible but you see the content.

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-02-27 12:32:01 +08: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
Francesco Sansalvadore bd9e78b209 chore: dashboard header alignments (#42769)
Align borders to match header heights.

<img width="2904" height="1734" alt="shot_2026-02-04_at_08 42 21z_2x"
src="https://github.com/user-attachments/assets/0538f8eb-64a5-4329-94fb-3ea4feed847d"
/>
2026-02-13 11:48:12 +01:00
Charis f7bf7d7ce4 feat(studio): move data api docs to integrations section (#42749)
Feature / Refactor

## What is the current behavior?

Data API docs live at the `/api` route as a standalone page. Old links
point to the previous location.

## What is the new behavior?

Data API docs are moved to the integrations section with a dedicated
docs tab and settings tab. Old links are cleaned up, a mobile menu is
added for data API docs navigation, and minor code review fixes are
applied.

## Additional context

Resolves FE-2517

## Summary by CodeRabbit

* **New Features**
* Revamped API docs UI with reusable section layout, language toggle
(JS/Bash), API key selection, and improved code snippets
* Added Data API docs tab, mobile navigation, and dedicated
loading/error/disabled states

* **Navigation Updates**
* Moved API docs and related links into the Integrations/Data API area
and added redirects to new routes
* Updated various internal links to the new Data API settings and
overview locations

* **Tests**
  * Added comprehensive unit tests for Data API utilities
2026-02-12 15:57:44 -05:00
Saxon FletcherandJoshen Lim b9a09d8612 Connect sheet content structure (#42373)
This is part two of a [PR
breakdown](https://github.com/supabase/supabase/pull/42276) that
introduces our connect schema and how content is retrieved. This focuses
on the Framework tab to start.

Fields are generated and content is rendered using a connect.schema
file. This schema file defines modes, fields and steps. Each mode has a
set of fields. Each field can be dependent on another field. The steps
generated are then based off the values of the modes and fields. Each
step can also render varying content dynamically using a template
{{framework}}/{{frameworkVariant}}/{{library}} which just replaces those
values with what's in state (fields selected).

[Part one needs to be merged
first.](https://github.com/supabase/supabase/pull/42367)

The next stage will add back all other tabs and content.

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

* **New Features**
* New Connect Sheet UI to guide app-to-project connections with dynamic
configuration and copyable connection parameters.
* Multi-framework & mobile support with ready-to-use code examples,
install commands, and step-by-step setup for 20+ frameworks.
* Multiple PostgreSQL connection methods (direct, transaction, session)
with safe/masked connection previews.
  * Copy-prompt that aggregates step content and code for easy sharing.
* **UI**
* Multi-file code viewer with tabbed code blocks and added syntax
support (Swift, TOML, HTML).
* **Tests**
  * Comprehensive unit tests for resolver and state logic.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-02-11 13:32:45 +08:00
Danny WhiteandJoshen Lim ee484c8517 chore(studio): restore feedback gating (#42548)
## What kind of change does this PR introduce?

UI improvement for self-debugging efforts.

## What is the current behavior?

https://github.com/supabase/supabase/pull/40937 removed our gating on
the feedback form (plus some related affordances) in an effort to
concentrate support entry into the Help dropdown instead:

| Before | After |
| --- | --- |
| <img width="1090" height="579" alt="Inventory Nuts Bolts Supabase"
src="https://github.com/user-attachments/assets/c7dacf40-5ae8-401c-a167-5e56c4c0635d"
/> | _Not applicable. This step is skipped in the new version._ |
| <img width="1090" height="579" alt="Inventory Nuts Bolts Supabase"
src="https://github.com/user-attachments/assets/9bd2489d-7e87-49e5-99af-13eb5f387f60"
/> | <img width="1090" height="579" alt="Inventory Nuts Bolts Supabase"
src="https://github.com/user-attachments/assets/fa499a40-6d70-4674-9eb6-c7bd96019b27"
/> |
| <img width="1090" height="579" alt="Inventory Nuts Bolts Supabase"
src="https://github.com/user-attachments/assets/e253381b-e8ba-476c-bd36-9dd522209498"
/> | <img width="1090" height="579" alt="Inventory Nuts Bolts Supabase"
src="https://github.com/user-attachments/assets/b5cf614b-329c-4517-90e9-c4d1b49bd139"
/> |

Despite putting other measures in place such as client-side form
detection, the result is that people are increasingly writing in to
support via the Feedback form.

## What is the new behavior?

- Restores the gating
- But also reuses the same self-debugging help options from the Help
dropdown

Other:

- Renames `HelpPopover` to `HelpDropdown` to match others
- Adjusts font size of `CommandMenu` _Search..._

| Before | After |
| --- | --- |
| <img width="1024" height="756" alt="Spinner Toolshed Supabase"
src="https://github.com/user-attachments/assets/12e3be32-743d-488a-a13d-bf400fd0fd8d"
/> | <img width="1024" height="756" alt="Spinner Toolshed Supabase"
src="https://github.com/user-attachments/assets/bb064ef1-a771-416d-9b5b-dbdd774efed3"
/> |
| _Not applicable. This step is skipped in the old version._ | <img
width="1024" height="756" alt="Spinner Toolshed Supabase"
src="https://github.com/user-attachments/assets/3bc0b1c2-7003-4973-8e9c-2c7ee93fb0b4"
/> |
| <img width="1024" height="756" alt="Spinner Toolshed Supabase"
src="https://github.com/user-attachments/assets/0bb18df4-d093-4440-8379-680f6c5e3cf9"
/> | <img width="1024" height="756" alt="Spinner Toolshed Supabase"
src="https://github.com/user-attachments/assets/1ef801d3-9cd7-4005-9082-8d229b7cdd19"
/> |
| <img width="1090" height="579" alt="Inventory Nuts Bolts Supabase"
src="https://github.com/user-attachments/assets/e253381b-e8ba-476c-bd36-9dd522209498"
/> | <img width="1024" height="794" alt="Spinner Toolshed Supabase"
src="https://github.com/user-attachments/assets/b80de142-2199-420f-9018-8622b6d24312"
/> |

## To test

To test the “thanks” end state, add something like the following to
`feedback-send.ts`:

```ts
 if (MOCK_FEEDBACK_SUCCESS) {
    return {} as Awaited<ReturnType<typeof sendFeedback>>
  }
```

Where `MOCK_FEEDBACK_SUCCESS` is `true`.

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

## Release Notes

* **New Features**
* Introduced multi-stage feedback dropdown with Issue and Idea selection
paths.
* Added AI assistant integration in help menu for quick support access.
* Enhanced help dropdown with expanded options: documentation,
troubleshooting, Discord community, system status, and support links.
* Added Community Support section featuring Discord community promotion.

* **Style**
* Refined command menu placeholder text sizing for improved visual
hierarchy.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-02-10 09:48:54 +11:00
Joshen Lim a057c951ea Make edge functions page accessible on coming up (#42549)
## Context

Related prior work was making edge functions page accessible while
project is restoring - however the status of the project gets flipped to
COMING_UP while it's restoring hence why the functions page was still
inaccessible.

## Changes involved

- Update `NavigationBar.utils` to have edge functions link to
`/functions` irregardless of project status
- (Unrelated) Disable (with tooltip) deploy new function CTA on edge
functions page if project is not active
<img width="403" height="108" alt="image"
src="https://github.com/user-attachments/assets/88479247-999b-4d41-a444-6705f8c3993e"
/>


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

* **New Features**
* Deploy Edge Function button now disables and shows a tooltip when the
project is inactive to make deployment status clear.

* **Bug Fixes**
* Edge Functions link now points consistently to the functions view
regardless of project build state.

* **Refactor**
* Consolidated project-active check and reorganized related UI wiring to
standardize inactive-state handling across settings and controls.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-02-09 16:56:23 +08:00
Sean OliverandCharis Lam 6bbe2c3297 feat(telemetry): add dev telemetry toolbar (#42259)
## Problem
We need a local-only UI to inspect client and server telemetry events
and override flags during development without touching non-local env
behavior. This work is intended to be shared across Studio, Docs, and
WWW.

## Changes
- Introduced a shared `dev-tools` package with the Dev Telemetry Toolbar
UI, trigger, and provider.
- Wired the toolbar into Studio, Docs, and WWW app shells (local-only
gating).
- Added a local-only `devTelemetry()` opt-in with storage gating and SSE
subscription.
- Wired client PostHog events into a local listener and re-exported
types.
- Added local flag override cookie support in the UI and CODEOWNERS for
the new package.
- Added unit tests covering local/non-local behavior and flag utilities.

## Testing
Manual (local only):
- Start each app locally: `pnpm dev:studio`, `pnpm dev:docs`, `pnpm
dev:www`
- Open the app, run `devTelemetry()` in the browser console
- Click around and confirm both client and server events appear (client
will be page views only)
- Verify feature flag overrides (PostHog + ConfigCat) persist and
restore correctly
- Confirm dismissing the toolbar clears local storage and hides the
trigger

Unblocked by https://github.com/supabase/platform/pull/29172

Resolves GROWTH-591

Demo:

[github.com/user-attachments/assets/60b376db-7440-4ada-82f5-d1bd4af4db3b](https://github.com/user-attachments/assets/60b376db-7440-4ada-82f5-d1bd4af4db3b)

Screenshots:

<img width="1368" height="972" alt="1"
src="https://github.com/user-attachments/assets/d2f20a0c-191f-4118-bb5e-15b25f5a54a9"
/>

<img width="1423" height="790" alt="2"
src="https://github.com/user-attachments/assets/115598e2-7287-49bf-9ed7-71ecc679dee3"
/>

<img width="1433" height="882" alt="3"
src="https://github.com/user-attachments/assets/51f666f2-9efc-410f-baec-378bdee9dbfe"
/>

<img width="608" height="483" alt="4"
src="https://github.com/user-attachments/assets/584d6cf5-1b2f-4cee-9e6a-d55ce2e3bae5"
/>

<img width="628" height="305" alt="5"
src="https://github.com/user-attachments/assets/991a9b39-578a-4565-b110-537a02040a53"
/>

<img width="659" height="447" alt="6"
src="https://github.com/user-attachments/assets/95ef405c-fffa-44af-bf6a-f974b780e3fc"
/>

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

* **New Features**
* Developer Toolbar (local only): view client/server telemetry, inspect
events, and manage/override feature flags with persistent overrides,
filtering, and clear/reload.
* Client-side telemetry hooks: surface structured events to dev tooling
for realtime inspection.

* **Bug Fixes**
  * Fixed end-of-file newline in shared code.

* **Chores**
* Added dev-tools package, integrated provider and trigger across
Studio, Docs, and marketing sites, and added CODEOWNERS entry.

* **Tests**
  * Added comprehensive tests and test setup for the DevToolbar.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
2026-02-06 11:46:53 -08:00
Joshen LimandAli Waseem 883bfb8ac1 Chore/fix connect sheet and dialog (#42512)
## Context

Connect dialog no longer shows up for local / self-host as we changed it
a bit to do some testing with a new UI

PR here fixes it + add some e2e tests to ensure that either the connect
sheet or dialog opens when clicking on the connect button

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

## Summary by CodeRabbit

* **Bug Fixes**
* Fixed a display issue where the Connect feature was not appearing in
certain application states. The feature now displays properly when
expected.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Ali Waseem <waseema393@gmail.com>
2026-02-05 16:51:15 +00:00
Kevin Grüneberg 4c9e5cf5b9 chore: change primary button for resumes (#42436)
Currently seems to be leading to accidental upgrades+support tickets, so
we are making the resume project the primary button instead of the
upgrade
2026-02-04 10:55:55 +05:30
Saxon FletcherandJoshen Lim 0e60c5f341 Chore/connect sheet/button (#42367)
This is the first smaller PR in the broader change of updating our
Connect dialog (see
[here](https://github.com/supabase/supabase/pull/42276)).

This PR focuses on decoupling the ConnectButton our of the Connect
dialog and into its own component . The button includes a flag to render
the new sheet. The new sheet is empty for the time being as the flag is
at 0%.

To test:
- Enable flag and click button, see new Sheet
- Disable and see old dialog
- Create a new project -> in getting started section see "connect to
app" step -> Click connect button and make sure it works


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

* **New Features**
  - Added a Connect button component and an alternative Connect sheet.
  - Added curl syntax highlighting for code blocks.

* **Changes**
- Connection dialog moved to a controlled open-state pattern; Connect
replaced legacy entry points across the UI and can be feature-flagged.
- Connection actions simplified and no longer depend on framework
selection.

* **Removals**
- Removed legacy framework selector, default framework constant, and
related tests.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-02-04 11:53:32 +11: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
Andrey A. 19c712ffac fix: add help popover for self-hosted and cli (#42015)
fix: add help icon for self-hosted and cli
2026-01-20 10:08:28 -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
Francesco Sansalvadore 5213e681b4 feat(studio): add "create" command menu commands (#41473) 2025-12-29 09:18:06 +01:00
Ivan Vasilov f3af2c3d3c feat: SQL Snippets (#41112)
* Use the .sql suffix when generating ids.

* Fix a bug where a new snippet would not show up in the snippet list until refresh.

* Add API routes which serve file snippets.

* Refactor the renameSnippet and moveSnippet to work with file snippets.

* Change the link to the SQL Editor.

* Minor fixes from CodeRabbit.

* Check the file/folder name for invalid chars.

* More fixes from CodeRabbit review.

* Fix minor issues.

* Use zod to parse the snippet ids when deleting.

* Try to fix snyk issue.

* Add validation to the GET content index route.

* Minor fixes.

* Show create a new folder, it was hidden by mistake.

* Add SNIPPETS_MANAGEMENT_FOLDER env var.

* Add snippets folder in the docker-compose.

* Add error toasts if the env var is not set.

* Add snippets management folder to the generateLocalEnv script.

* Revert the docker-compose changes, will be done in a followup PR.

* Revert also the snippets volume folder.

* Remove unneeded line.
2025-12-23 12:09:37 +01:00
Joshen LimandDanny White cbeb0912a2 Joshen/fe 2195 rework project api overview section with connect button (#41485)
* Update API keys panel

* Dnywh/chore/fe 2195 design pass (#41484)

* first pass

* fancy

* fixes

* text

* lang

* lang

---------

Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>

* Clean up

* Clean

* Nit

* Update enabled features

---------

Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
2025-12-19 16:51:58 +08:00
Ivan Vasilov d247cc0c9d fix: Clear the feedback text area after sending (#41466)
* Remove the stored feedback from local storage when it's sent.

* Minor CSS fixes for the success component in the feedback widget.
2025-12-18 17:00:10 +01:00
Ivan Vasilov cc47bcfa6d chore: Migrate studio to use ui-patterns/shimmeringLoader (#41405)
* Add shimmering-loader CSS to ui-patterns.

* Import the shimmering-loader classes from the ui-patterns component.

* Remove ShimmeringLoader from studio.

* Migrate studio to use ui-patterns/ShimmeringLoader.

* Migrate away from using default import for ShimmeringLoader.

* Fix the css imports in docs and studio.
2025-12-17 14:54:07 +01:00
Joshen Lim 84e5df97ea Fix log drains error handling (#41343) 2025-12-15 21:13:36 +08: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 3d6be390a6 Save opened side bar in local storage, and init on new session (#41224)
* Save opened side bar in local storage, and init on new session

* Fix test

* Fix

* Nit
2025-12-11 12:18:18 +08:00
Ivan Vasilov 0d5be306ef chore: Bump React Query to v5 (#40174)
* Bump the deps, refactor deprecated code.

* Migrate keepPreviousData usage.

* Migrate all uses of InfiniteQuery.

* Fix refetchInterval in queries.

* Migrate all use of isLoading to isPending in mutations.

* Fix accessing location in claim-project.

* Fix a bug in duplicate query keys.

* Migrate all queries to use isPending.

* Revert "Fix accessing location in claim-project."

This reverts commit 2a07df64b5.

* Revert the rss.xml file to master.
2025-12-10 10:10:29 +01:00
Danny WhiteandJoshen Lim 11dc1324aa chore(studio): improve alert composition and usage (#41147)
* finesse optical alignment

* improvements

* actions styling

* improvements

* margins

* improvements

* fix docs

* fix

* improve schema warning admonition

* misc fixes

* tweaks

* docs and improvements

* alphabetical sidebar navigation

* remove alert-error

* fix build error

* Tiny fixes

* tiny docs update

* semantic description

* handle intro pages

* note NoPermission component

* docs sidebar ordering

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-12-10 08:05:30 +00:00
Danny White 0399beba0e chore(studio): use Admonition and deprecate AlertError (#41095)
* use admonition and deprecate

* spot fix

* remove mb on admonition itself

* smart layout handling based on actions count

* fixes

* remove class

* fixes

* remove mb-0 instances

* remove redundant m-0

* remove single-use component

* use props

* reset leading

* remove redundant clause
2025-12-08 12:15:18 +11:00
Saxon Fletcher 2fa575113f Fix sidebar param (#40973)
fix sidebar param
2025-12-04 23:00:48 +00:00