This PR adds new feature flags for controlling etl destinations
visibility based on the org slug.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## 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.
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. 🪄
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>
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.
## 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)
## 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.
## What is the new behavior?
the drag animation is consistent and snappy!
## 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 -->
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
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>
## 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 -->
## 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>
## 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>
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>
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
* 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.
* 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.
## 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
* 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.
* clean up AI assistant aside
* add Discord aside
* misc tweaks to AI cta
* improve Discord CTA
* markup
* fix test file
* Minor clean up and fixes
* Small improvement
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* feat: rename reports to observability on nav sidebar
* fix: observability route
* feat: observability navigation and redirects
* fix: first time load redirects
* feat: change auth overview reports link
* feat: clean up of other links to observability sections
* fix: query perf redirects
* chore: find exhaustive deps and disable for time being
* fix: charis suggested fixes
* fix: forgotten suggested fix
* chore: delete old reports views files
* fix: paths in reports tests
* fix: url sync useEffect should trigger only once
* feat: reorganise observability sidebar
* fix: data api not being selected
* fix: wrong layout for realitime
* fix: custom reports reloading
---------
Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
Co-authored-by: Ali Waseem <waseema393@gmail.com>
Kevin Grüneberg