Commit Graph

23 Commits

Author SHA1 Message Date
Gildas Garcia
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
Andrey A.
ca9b02b5ac feat(self-hosted): add minimal project settings (#46554) 2026-06-02 15:37:42 +02:00
Gildas Garcia
243e079a2c chore: remove _Shadcn_ suffix from Command components (#46153)
## Problem

The `_Shadcn_` suffix isn't needed anymore on `Command` components

## Solution

- Remove the `_Shadcn_` suffix
- Simplify UI package exports
- Apply prettier

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

## Summary by CodeRabbit

* **Refactor**
* Simplified command component imports and exports across the UI library
by removing internal naming aliases and adopting direct component
references. Updated the public UI package barrel export to use wildcard
re-exports for cleaner API surface.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46153?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-20 15:45:32 +02:00
Mert YEREKAPAN
1ef80fec23 chore(studio): remove HeaderUpgradeButton experiment code (#46144)
## Summary

- Removes the `HeaderUpgradeButton` component, all call sites, and the
`HeaderUpgradeCtaClickedEvent` telemetry type. The GROWTH-615 header
upgrade CTA experiment ended on Apr 29.
- Fixes the `Flag key "headerUpgradeCta" does not exist in PostHog flag
store` console errors that were logging on every render. PostHog drops
disabled flags from `/feature-flags` responses, so the still-mounted
consumer logged a missing-flag warning continuously. Removing the
consumer lets the flag be safely disabled again.

Context: [Slack
thread](https://supabase.slack.com/archives/C07P3AU3J2D/p1779250648219089?thread_ts=1779166940.445709&cid=C07P3AU3J2D)

## Test plan

- [x] `pnpm dev:studio`, open the dashboard, confirm no
`headerUpgradeCta` warning in the browser console
- [x] Desktop header still renders correctly (the button was hidden
behind the `test` variant; visually nothing changes for users since
rollout was 100/0 control)
- [x] Mobile nav bar still renders with `UserDropdown` to the right of
the org/project selector

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

## Summary by CodeRabbit

* **Chores**
* Removed the upgrade call-to-action button from the navigation header
in both desktop and mobile layouts.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46144?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-20 10:38:04 +00:00
Gildas Garcia
d0fd4478c0 chore: migrate Popover usages to Shadcn components (#45980)
## Problem

We have multiple Popover components

## Solution

- [x] migrate Popover usages to Shadcn components
- Migrated JSON and text editor in the `TableEditor` (inline row
edition)
  - Migrated the template popover in the logs explorer templates page
- [x] remove `_Shadcn_` suffix from Popover components (renaming +
prettier)

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

* **Refactor**
* Unified popover implementation across the app and design system;
dropdowns, calendars, menus and tooltips now use a consistent popover
API with no visual or interaction changes.

* **Chores**
* Minor prop typing update for the logs date-picker to align with the
consolidated popover content type.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45980)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-15 15:20:28 +02:00
Joshen Lim
f7ea722b35 Consolidate grid header actions in table editor into a single row (#45504)
## Consolidate Table Editor grid header actions into a single row


https://github.com/user-attachments/assets/1020c385-8fa9-4ef1-b5e7-03983111508b

## Changes involved
- Index advisor, Realtime, and API docs are now behind a dropdown menu
button (Treated as secondary actions)
- Grid header actions shifted into the same row as filter bar (more
space for data grid)
- Header actions will hide while filter bar is in focus (remove
distractions, more space for filter bar)

## Changes to filter bar
- Filter bar will refocus when deleting a filter
- Clicking on the search icon will focus on the free form input of the
filter bar

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

* **New Features**
* Added a “More” dropdown in grid actions to access Realtime, API docs,
and Index Advisor.
* New dialogs for enabling Index Advisor and toggling Realtime are now
consistently managed.

* **Improvements**
* Improved filter focus handling with auto-refocus when conditions
change and responsive header behavior.
* Adjusted popover alignment, separator visuals,
header/footer/pagination layout and sizing.
* Filter bar now supports programmatic focus; Connect button supports
icon-only mode.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
2026-05-06 10:53:49 +08:00
Ivan Vasilov
56de26fe22 chore: Migrate the monorepo to use Tailwind v4 (#45318)
This PR migrates the whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.

---------

Co-authored-by: Jordi Enric <jordi.err@gmail.com>
2026-04-30 10:53:24 +00:00
Francesco Sansalvadore
072006ba0f chore(studio): remove mobile toolbar flag (#45317) 2026-04-28 13:45:00 +00:00
Ivan Vasilov
308cd791a2 chore: Prep work for migrating to Tailwind v4 (#45285)
This PR preps the monorepo for a migration to Tailwind v4:
- Bump all Tailwind dependencies and libraries to the latest possible
version, while still compatible with Tailwind 3.
- Cleans up obsolete Tailwind 3 specific options and configs.
- Cleans up unused CSS files and fixes the CSS imports.
- Migrates all `important` uses in `@apply` lines to using the `!`
prefix.
- Move `typography.css` to the `config` package and import it from the
apps.
- Migrated all occurrences of `flex-grow`, `flex-shrink`,
`overflow-clip` and `overflow-ellipsis` since they're deprecated and
will be removed in Tailwind 4.
- Make the default theme object typesafe in the `ui` package.
- Migrate all `bg-opacity`, `border-opacity`, `ring-opacity` and
`divider-opacity` to the new format where they're declared as part of
the property color.
- Bump and unify all imports of `postcss` dependency.
2026-04-28 11:33:53 +02:00
Alaister Young
5f6060197e [COM-205] feat(studio): add logs:all flag to hide all logs (#45202)
Adds a top-level `logs:all` flag (default `true`) so self-hosted and
local setups can hide the logs pages in Studio when Logflare isn't
configured — no separate Studio build required. The flag itself works
everywhere; the additional `ENABLED_FEATURES_LOGS_ALL` env-var override
(from FE-3036) is the self-hosted escape hatch so deployers can flip it
without a custom build — that part is a no-op on `IS_PLATFORM` because
hosted feature gating flows through `profile.disabled_features` instead.

Addresses
[COM-205](https://linear.app/supabase/issue/COM-205/add-feature-flag-to-disable-all-logs-in-studio).

**Added:**
- `logs:all` feature flag in `enabled-features.json` + schema

**Changed:**
- Sidebar "Logs" nav entry is hidden when `logs:all` is off (same
pattern as `reports:all` / `billing:all`)
- Cmd-K "Logs Explorer" / "Auth Logs" / etc. routes are hidden when the
flag is off
- `LogsLayout` renders `<UnknownInterface />` (soft-404) when the flag
is off — covers all ~18 logs pages in one spot
- `/logs/index.tsx` applies the same soft-404 for the unified-logs entry
point

## To test

Needs to be tested locally (preview doesn't let you flip the flag —
hosted gating is profile-driven, not env-driven). Two ways:
- Temporarily edit `"logs:all": false` in
`packages/common/enabled-features/enabled-features.json` and run `pnpm
dev:studio`, or
- Run Studio locally with `ENABLED_FEATURES_LOGS_ALL=false` (env-var
path, same as how self-hosted deployers would use it)

With the flag **off**:
- Sidebar "Logs" entry is hidden
- Cmd-K search for "Logs" / "Auth Logs" / "Postgres Logs" etc. returns
nothing
- Direct navigation to `/project/<ref>/logs`,
`/project/<ref>/logs/explorer`, `/project/<ref>/logs/auth-logs`,
`/project/<ref>/logs/postgres-logs` (etc.) all render the "Looking for
something?" soft-404 with a Head back button

With the flag **on** (default): everything works as it does today.
**Check on the preview deploy too** — nothing should change, no
behaviour difference on hosted.

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
2026-04-27 23:13:42 +08:00
Ali Waseem
28a2c25e0e feat(studio): add navigation shortcuts with hover tooltips (#45127)
## Summary
- Adds `<Shortcut>` component: binds a registered shortcut + renders a
Linear-style hover tooltip (label + keybind pills) in one declaration
- Adds `<ShortcutTooltip>` as the lower-level primitive for cases where
binding lives elsewhere
- Registers 13 G-chord navigation shortcuts (`G H` / `G T` / `G S` / `G
D` / `G A` / `G B` / `G F` / `G R` / `G V` / `G O` / `G L` / `G I` / `G
,`)
- Wires shortcuts into `SideBarNavLink` — binding + dynamic-delay
tooltip (0ms collapsed, 1000ms expanded) replaces the old label-only
collapsed tooltip

Closes
[FE-3048](https://linear.app/supabase/issue/FE-3048/create-navigation-shortcuts).

## Test plan
- [x] Hover each main sidebar nav item with sidebar expanded — tooltip
appears after delay with label + shortcut pills
- [x] Collapse sidebar — tooltip appears instantly on hover
- [x] Press `G` then a registered letter anywhere outside text inputs —
navigates to that screen
- [x] Press `G` inside a text input — no navigation fires
- [x] Disabled nav items (project inactive) — no shortcut fires, no
tooltip anomaly
- [x] Feature-gated routes (auth/storage/realtime off) — shortcut is
gone with the route

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

* **New Features**
* Global keyboard shortcuts added for navigating major app sections
(home, editors, database, auth, storage, functions, realtime, advisors,
observability, logs, integrations, settings).
* Navigation items display their keybinds in hover tooltips and can be
triggered via those shortcuts.
* Tooltip timing adapts to sidebar state (immediate when collapsed,
delayed when expanded).
* Shortcut-aware tooltip display now shows multi-step key sequences
clearly.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-23 08:06:03 -06:00
Ali Waseem
26b3db8302 fix: remove API Docs nav item after transition period (#44637)
## Summary

- Removes the "API Docs" navigation item from the sidebar and mobile
menu
- Removes the `UI_PREVIEW_API_SIDE_PANEL` feature preview flag since the
feature is fully rolled out
- Makes API docs buttons unconditionally visible across Auth Users,
Storage, Edge Functions, and SecondLevelNav

## Test plan

- [x] `NavigationBar.utils` tests pass (26 tests)
- [x] `FileExplorerHeader` tests pass (6 tests)
- [x] TypeScript compiles with no errors
- [ ] Verify sidebar no longer shows "API Docs" nav item
- [ ] Verify API docs buttons still appear in Auth Users, Storage, and
Edge Functions pages
- [ ] Verify feature preview modal no longer lists "Project API
documentation"

Resolves FE-2759

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

* **New Features**
* APIDocs button can optionally display a label and use a custom
tooltip.

* **Chores**
* Removed the API docs side-panel feature flag and its localStorage key.
* “API Docs” navigation entry removed; sidebar no longer special-cases
that route.
* Back links and API Docs buttons now render consistently across the app
(no flag gating).

* **Tests**
* Tests updated to stop depending on the removed feature-flag behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-08 14:40:05 +00:00
Alaister Young
421eaedd50 fix(studio): skip project count query for platform orgs (#44566)
Platform orgs can have very high project cardinality (>1M projects),
making the project count query expensive. This disables the query across
all count-only usages for platform plan orgs.

**Changed:**
- `OrgSelector` — disable query, show "Platform" label instead of count
- `OrganizationCard` — disable query, hide project count for platform
orgs
- `NoProjectsOnPaidOrgInfo` — disable query (component already returned
null for platform orgs)

**Not changed:**
- `TeamSettings` — also uses the count, but the warning it powers is
specifically relevant for orgs with a lot of projects, and it's tucked
away on the team settings page rather than on every page load.

## To test

- On a platform org, verify no `/organizations/{slug}/projects` requests
fire from the org selector, org cards, or billing info
- For regular orgs, verify the project count still displays normally
everywhere

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

## Summary by CodeRabbit

* **Improvements**
* Organization selector now shows a dedicated "Platform" label for
platform organizations instead of a project count.
* Reduced unnecessary network activity by skipping project fetching when
a platform organization is selected, improving load performance.

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

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
2026-04-06 18:05:12 +09:00
Mert YEREKAPAN
b9e83b25e1 feat(studio): adding upgrade button to header experiment (#44494)
## 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?

- Add an always-visible "Upgrade to Pro" button in the dashboard header
for free-plan users (GROWTH-615)
- Button is gated behind a PostHog experiment (`headerUpgradeCta`) with
`control` and `test` variants
- Experiment exposure is tracked for both variants; click events are
tracked when the button is clicked
- Button reuses existing `UpgradePlanButton` component for routing,
permissions, and billing logic

## What is the current behavior?

<img width="3840" height="2160" alt="Arc 2026-04-02 16 36 22"
src="https://github.com/user-attachments/assets/8a94db0c-06c8-4237-8ba5-6ac1fe111a56"
/>

## What is the new behavior?

<img width="3840" height="2160" alt="Arc 2026-04-02 16 36 12"
src="https://github.com/user-attachments/assets/0e60d834-028b-49fd-845e-ce1b4cbcc960"
/>


## Additional context

Add any other context or screenshots.


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

* **New Features**
* Added an upgrade call-to-action in the header and mobile navigation
(visible on medium+ screens in platform builds) shown to free-plan users
as part of a controlled experiment.
* The CTA records experiment exposures and sends analytics for
impressions and clicks, including the user's current plan, to measure
engagement and upgrade interest.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-03 20:51:54 +02:00
Charis
4a0bb36ca8 style: require sorted imports in studio/components (#44408)
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-04-01 10:22:37 +02:00
Ivan Vasilov
bd10880d52 feat: Enable Github on free plan under a feature flag (#44171)
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-03-25 11:54:30 +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
Ali Waseem
5a3fe010cd fix: refactor nav bar to be more testable, add unit tests (#43867)
## 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?

- refactor navigation utils to pass in is_platform 
- write unit tests for configuration returns 
- default is always passed from constant IS_PLATFORM
2026-03-18 08:32:16 -06:00
Raminder Singh
65237597e4 feat: upgrade flow and other improvements (#43289)
This PR:

* Adds an upgrade flow to the stripe sync engine, allowing users to
upgrade to the latest version when it becomes available.
* When a new version of sync engine becomes available, users will see an
upgrade button instead of install button.
* Bumps `supabase-management-js` to version 2.0.2 and
`stripe-experiment-sync` to version 1.0.27.
* Uses `parseSchemaComment` and related logic from the
`stripe-experiment-sync` package in order to avoid writing duplicate
code in supabase ui.
* Allows installation/uninstallation to timeout after 5 minutes to avoid
these operations from getting stuck in case an error occurs in their
processing. This allows users to retry the operation, as opposed to the
older behaviour where the users always see a spinner on the
install/uninstall button and couldn't do anything.
* Remove the SSL enforcement admonition as it is no longer required.
Sync engine can now be installed with or without SSL enforcement
enabled.

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-03-18 08:29:03 +00:00
Jordi Enric
3b010f146f fix(studio): hide observability from sidebar for self-hosted (#43862)
Ensure the observability link in the sidebar and command menu are
properly guarded by IS_PLATFORM to prevent them from showing in
self-hosted or CLI environments.

The logic is functionally the same (IS_PLATFORM && reportsEnabled), but
restructured with IS_PLATFORM as the outer check for clarity, and added
comments explaining the platform-only restriction.

https://claude.ai/code/session_01PG2TEGaSxaXZfXkbSBU3kQ

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES/NO

## What kind of change does this PR introduce?

Bug fix, feature, docs update, ...

## What is the current behavior?

Please link any relevant issues here.

## What is the new behavior?

Feel free to include screenshots if it includes visual changes.

## Additional context

Add any other context or screenshots.

Co-authored-by: Claude <noreply@anthropic.com>
2026-03-17 15:06:46 +01:00
Ivan Vasilov
9fa96977be chore: Minor prettier fixes (#43849)
This PR fixes some prettier issues:
- Bump and unify all prettier versions to 3.7.3 across teh whole repo
- Bump the SQL prettier plugin
- When running `test:prettier`, check `mdx` files also
- Run the new prettier format on all files

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-03-17 11:17:42 +01:00
Francesco Sansalvadore
8fd868bc6e restore org selector loaders (#43782) 2026-03-16 15:18:18 +00: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