Commit Graph
44 Commits
Author SHA1 Message Date
Danny White ec53175b8a refactor(ui): rename text-brand to text-primary (#50564)
## What kind of change does this PR introduce?

Refactor. Follow-up to #49871.

## What is the current behavior?

Branded (green) text still uses the `text-brand` classname while the
colour comes from `--primary`.

## What is the new behavior?

**Rename-only:** `text-brand` → `text-primary` across callsites and
docs. Leftover `bg-brand` / `border-brand` alias to `brand-default`. No
intentional colour changes in this PR.

This better matches how we treat our green in other components and
props, like `variant="primary"` for green buttons.

## To test

On light mode: smoke-test that branded text still looks like #49871
(readable green, not the bright fill).

-
[Homepage](https://zone-www-dot-com-git-dnywh-depr-316-text-brand-de2380-supabase.vercel.app/):
“Scale to millions” uses `text-primary`
- [Docs
homepage](https://docs-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/docs):
branded links like “More on self-hosting” are still readable
- [Typography
docs](https://design-system-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/design-system/docs/typography):
documents `text-primary`
- [Colour
usage](https://design-system-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/design-system/docs/color-usage):
`text-primary` is visibly darker than `bg-brand-default` _on light mode_
- [Studio auth
providers](https://studio-staging-git-dnywh-depr-316-text-brand-to-60fa6c-supabase.vercel.app/dashboard/project/_/auth/providers):
enabled provider badge text readable; status dot stays bright green

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

* **Style**
* Updated branded text, link hover states, icons, badges, indicators,
and highlighted content across the Design System, Docs, Studio, Learn,
UI Library, and marketing experiences to use the primary theme color.
* Updated syntax highlighting and table-of-contents styling for
consistent primary-color presentation.
  * Refined brand color fallback behavior for bright fills and borders.

* **Documentation**
* Updated color-usage and typography guidance to recommend the primary
text utility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-22 16:19:03 +10:00
Danny White 476d4a5851 refactor(ui): drop redundant Button variant="default" props (#50161)
## What kind of change does this PR introduce?

Mechanical cleanup on top of the Button default-variant change (#50160).

## What is the current behavior?

Many callsites still pass `variant="default"` even though that is now
the component default.

## What is the new behavior?

Removes redundant static `variant="default"` from legacy `Button` and
`ButtonTooltip` callsites. Keeps explicit defaults where they document
the API:

- `button-default.tsx` and `button-sizes.tsx` demos
- `DocsButton`, which pins neutral styling at the wrapper boundary

## To test

Studio:

- [Auth → Rate
Limits](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/auth/rate-limits):
dirty the form so Cancel appears; Cancel stays neutral, Save stays green
- [Project Settings → API
Keys](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/settings/api-keys):
`DocsButton` in the header actions stays neutral

Design system:

- [Design system →
Button](https://design-system-git-dnywh-dc924ac1-supabase.vercel.app/design-system/docs/components/button):
`button-default` / `button-sizes` still show explicit default styling;
Primary (green) is restricted to the Primary section (and `asChild`)

WWW:

- [www → Brand
assets](https://zone-www-dot-com-git-dnywh-dc924ac1-supabase.vercel.app/brand-assets):
Download logo kit / Download button kit stay neutral
2026-09-11 17:05:26 +10:00
Danny WhiteandJoshen Lim fce9d475ee chore(studio): migrate combobox triggers (#50157)
## What kind of change does this PR introduce?

Studio UI consistency refactor.

## What is the current behaviour?

Several Studio comboboxes still build their triggers from `Button` and
supply their own double-chevron icon. This duplicates trigger styling
and allows these controls to drift from selects and other comboboxes.

## What is the new behaviour?

- Migrates the PITR timezone, AWS region, and account timezone controls
to `ComboboxTrigger`
- Migrates the shared `SchemaSelector` and `FunctionSelector`, updating
their Studio callsites together
- Preserves the globe icon in both timezone controls
- Exposes the correct combobox role and open state through the shared
trigger
- Tightens the tiny schema selector end padding so its chevron aligns
with adjacent controls
- Leaves organisation and project context switchers unchanged

| Before | After |
| --- | --- |
| <img width="504" height="490" alt="CleanShot 2026-09-09 at 13 56
56@2x"
src="https://github.com/user-attachments/assets/117a9169-88bf-4f9e-8302-9df9b911a307"
/> | <img width="496" height="512" alt="CleanShot 2026-09-09 at 11 31
26@2x"
src="https://github.com/user-attachments/assets/bc98cded-2723-4d20-9d8c-49630ea018af"
/> |
| <img width="1250" height="394" alt="CleanShot 2026-09-09 at 13 58
34@2x"
src="https://github.com/user-attachments/assets/9106f924-88fd-40d4-88e3-8d0ddbb61d12"
/> | <img width="1246" height="376" alt="CleanShot 2026-09-09 at 13 58
09@2x"
src="https://github.com/user-attachments/assets/7894a254-f6f9-40bb-a312-9f1a5079f096"
/> |

## To test

On the [Studio
preview](https://studio-staging-git-dnywh-choremigrate-combobox-680102-supabase.vercel.app):

1. Open **Database > Tables** and use the schema selector above the
table. It should use a single down chevron, open normally, and update
the selected schema.
2. Open **Authentication > Hooks > Add hook**, then select **Postgres**
as the hook type. The **Postgres schema** and **Postgres function**
selectors should use a single down chevron and continue to open and
select normally.

The PITR, AWS region, and account timezone callsites require the
relevant plan, integration, or feature flag. When available, their
triggers should use the same single down chevron, and both timezone
controls should retain the globe icon.

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

* **UI Improvements**
* Standardized timezone, AWS region, database backup, function, and
schema selectors with a consistent combobox interface.
  * Added clear visual feedback for open and closed selector states.
* Preserved contextual icons and labels, including globe icons for
timezone selections.
* Improved accessibility with appropriate combobox semantics, accessible
names, and state information.
* Timezone settings are now available without an optional feature flag.
* **Tests**
  * Updated end-to-end coverage for the standardized combobox controls.
* Added coverage confirming schema selectors expose the selected schema
as an accessible name.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-09-09 15:36:35 +08:00
f5d0bf5d98 fix(ui): let command dropdowns scroll on touch inside overlays (#50103)
## What kind of change does this PR introduce?

Bug fix.

## What is the current behavior?

A command dropdown cannot be scrolled by touch when it sits inside a
dialog or sheet.

Radix wraps a modal dialog's overlay in a scroll lock that cancels wheel
and touch events whose target is not inside the sheet. A dropdown
portals to the body, so it falls outside that boundary and its scroll
events get cancelled.

Callers have been rediscovering this one at a time and fixing only half
of it. `MultiSelectorList` stops wheel events reaching the document, and
`SchemaSelector` and `FunctionSelector` expose a `stopScrollPropagation`
prop that does the same. None of them handle touch, so the desktop
symptom is fixed everywhere and the mobile one is fixed nowhere.

## What is the new behavior?

`CommandList` keeps wheel and touch events off the document itself. That
covers every command dropdown in the monorepo, in an overlay or not,
with no call-site changes. A caller's own `onWheel` or `onTouchMove`
still runs.

The workarounds this replaces are removed: the handler in
`MultiSelectorList`, and the `stopScrollPropagation` prop on
`SchemaSelector` and `FunctionSelector` along with its four call sites.

One behavior change worth naming: overscrolling past the end of a
dropdown no longer scrolls the page behind it. That is what a dropdown
should do, and it is what the four `stopScrollPropagation` call sites
were already opting into.

#50072 depends on this. It swaps two selects for comboboxes, and Radix
Select brings its own scroll lock, so without this the swap would
regress touch scrolling.

## To test

- On the deploy preview, [open a project's Connect
sheet](https://studio-staging-git-dnywh-fix-multi-select-scrol-63608b-supabase.vercel.app/dashboard/project/_)
and pick the MCP tab.
- Narrow the window to phone width and switch on touch emulation in
devtools.
- Open the features dropdown and drag the list. It should scroll, and
the sheet behind it should stay put.
- Repeat with a mouse wheel to confirm desktop scrolling still works.
- [Open Authentication >
Hooks](https://studio-staging-git-dnywh-fix-multi-select-scrol-63608b-supabase.vercel.app/dashboard/project/_/auth/hooks)
> Create hook, open the schema picker, and confirm it still scrolls by
wheel now that `stopScrollPropagation` is gone.
- [Open the SQL
editor](https://studio-staging-git-dnywh-fix-multi-select-scrol-63608b-supabase.vercel.app/dashboard/project/_/sql/new)'s
schema picker on a page with no overlay and confirm the list scrolls
normally.


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

- **Bug Fixes**
- Improved wheel and touch scrolling behavior in command lists,
selectors, and multi-select menus.
- Reduced unwanted scroll-lock interference when using selectors inside
overlays such as dialogs and sheets.
  - Preserved support for supplied scroll event callbacks.

- **Accessibility**
- Added clearer accessible labels to the Connect and mobile navigation
menu buttons.
- Updated the Connect button text behavior for icon-only and standard
presentations.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-09-08 19:21:19 +08:00
Jordi Enric a66dae48f2 fix(studio): restart action for table editor load errors FE-4054 (#48687)
## Problem

When the table editor showed a "Failed to load tables" or "Failed to
load schemas" error (for example, when the underlying database or API
gateway is unhealthy), there was no working way to restart the project
from that error state. Restarting only worked by navigating to Project
Settings.

## Fix

"Failed to load tables" goes through the existing `ErrorMatcher`
classification system, which only showed troubleshooting steps
(including a restart action) for connection-timeout errors. Added an
`ERROR_MAPPINGS` entry for the unclassified/generic API error case,
reusing the existing `RestartDatabaseTroubleshootingSection` and
`RestartProjectDialog` components already used for connection timeouts.

"Failed to load schemas" (in the shared `SchemaSelector`, used across
the table editor and several Database pages) only offered a retry. Added
a "Restart database" button next to it, wired to the same
`RestartProjectDialog`.

## How to test

- In the table editor, trigger a table-load failure that isn't a
connection timeout (any generic API error). The error card should now
show a "Try restarting your project" step with a working restart action.
- Open the schema selector while schemas fail to load (e.g. mock a 503
from the schemas query). A "Restart database" button should appear next
to "Reload schemas" and open the restart confirmation dialog.
-
`apps/studio/components/interfaces/ErrorHandling/ErrorMatcher.test.tsx`
and `apps/studio/components/ui/SchemaSelector.test.tsx` cover both
cases.

FE-4054

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

* **New Features**
  * Added database restart guidance when schema loading fails.
* Added options to reload schemas or restart the database, including a
confirmation prompt.
* Added troubleshooting guidance for unclassified table-loading errors.

* **Bug Fixes**
* Improved error handling by displaying relevant fallback guidance for
unknown errors while preserving classified troubleshooting instructions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-04 14:36:06 +02:00
Alaister YoungandAlaister Young 0fe2366659 [FE-3790] fix(studio): hide Multigres from user-facing surfaces (#48191)
Hides the "Multigres" term from user-facing surfaces — it's the tech
powering High Availability projects, but "High Availability" is the only
term users should see for now (per Slack discussion with Saxon/Ivan).

**Changed:**
- High Availability badge hover card (project overview) no longer says
"Driven by Multigres"
- Project creation HA toggle description drops the Multigres name +
multigres.com link, keeps the informational copy
- All schema dropdowns now hide the `multigres` schema on HA projects,
by wiring in the previously-unused `filterSchemasForHighAvailability`
helper:
- `SchemaSelector` (shared — Table Editor, Functions, Indexes, Triggers,
Schema Visualizer, etc.)
  - `ExposedSchemaSelector` (API settings → exposed schemas)
- `EnableExtensionModal`, `CreateIndexSidePanel`, `ForeignKeySelector`,
`WrapperTableEditor`, Integrations install sheet `AdvancedSettings`
  - SQL editor schema autocomplete (`useAddDefinitions`)
- Schema list computations in the touched components are now memoized
(incl. stabilizing `SchemaSelector`'s `excludedSchemas` default so the
memo actually holds)

**Added:**
- Unit tests for `filterSchemasForHighAvailability` /
`resolveHighAvailability`
- MSW component test for `SchemaSelector` asserting `multigres` is
hidden on HA projects and still shown on non-HA projects

The filter is HA-gated on purpose: a self-hosted/non-HA user with their
own schema named `multigres` still sees it. The flag-gated Multigres
option in Logs is intentionally untouched — that exposure is kept for
the Multigres team's debugging (separate track).

## To test

- On an HA project (`high_availability: true`): hover the High
Availability badge on project overview — no "Multigres" mention; open
schema dropdowns in Table Editor / Database pages / SQL editor
autocomplete — no `multigres` schema
- Project creation with HA entitlement: toggle description has no
Multigres wording/link
- On a non-HA project: schema dropdowns behave as before

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

* **Improvements**
* Made schema dropdowns and related selectors high-availability aware
across extensions, indexes, integrations, SQL editing, API exposed
schemas, and relationship editors.
* Updated project high-availability UI text and badge hover description
to remove outdated branding and clarify horizontally scalable Postgres
architecture.
* **Tests**
* Added coverage to ensure the schema “multigres” option is hidden/shown
correctly based on high availability, and validated high-availability
value handling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
2026-07-23 00:08:11 +08:00
Gildas Garcia c6fc456910 chore: cleanup duplicate exports studio (#47387)
## Problem

Knip reports many duplicate exports (both named and default). Besides,
we're moving away from default exports and even have an eslint rule to
enforce it on new code.

## Solution

- Cleanup those exports
- Update imports when necessary

No functional changes. If it builds, it's fine
2026-06-29 15:46:16 +02: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
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
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
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
Ali Waseem e6f779ea30 feat(studio): add keyboard shortcuts to the schema visualizer (#45386)
## Summary

Adds the first batch of keyboard shortcuts for the Database → Schema
Visualizer page, following the registry pattern established for the SQL
editor and table editor.

Fixes [FE-3115](https://linear.app/supabase/issue/FE-3115).

## Shortcuts

| Shortcut | Action |
| --- | --- |
| `Mod+Shift+C` | Copy schema as SQL |
| `Mod+Shift+M` | Copy schema as Markdown |
| `D` then `P` | Download schema as PNG |
| `D` then `S` | Download schema as SVG |
| `O` then `A` | Open the auto-layout confirmation dialog |
| `O` then `S` | Open the schema selector |

All six entries appear in the Cmd+K command menu under "Shortcuts" and
in the global shortcuts sheet (`Mod+/`) under a new "Schema Visualizer"
group while the page is mounted. None are surfaced in Account →
Preferences yet (`showInSettings: false`), matching how the SQL/table
editor batches shipped.

The schema selector and auto-layout button are wrapped in the unified
`Shortcut` component so the keybind is shown on hover (Linear-style).
The dropdown items for copy/download don't get hover hints since
tooltips on dropdown items don't make sense — they're discoverable via
Cmd+K instead.

## Toasts

Each user-visible action now confirms via a sonner toast:

- `Successfully copied as SQL` — fires on Copy as SQL (button or
`Mod+Shift+C`).
- `Successfully copied as Markdown` — fires on Copy as Markdown
(dropdown or `Mod+Shift+M`).
- `Successfully downloaded as PNG` / `Successfully downloaded as SVG` —
already present in `useExportSchemaToImage`; fires on click or `D → P` /
`D → S`.
- `Failed to download current view: …` — error toast on download failure
(also pre-existing).

## Notes

- `Mod+Shift+C` and `Mod+Shift+M` collide with the SQL editor's
`results.copy-csv` / `results.copy-markdown` shortcuts. They coexist
cleanly because `useShortcut` only fires while the hook is mounted, and
the two pages live on different routes. Both labels appear in the global
shortcuts sheet honestly scoped per surface.
- `SchemaSelector` was promoted to a `forwardRef` component that spreads
extra props onto its outer `<div>`. This was needed for `<TooltipTrigger
asChild>` to attach event handlers and the ref properly — previously
they were silently dropped and the hover tooltip didn't render.
- `SchemaSelector` and the auto-layout `AlertDialog` accept controlled
`open` props now so the shortcuts can drive them and the tooltip can be
suppressed while the popover/dialog is open (`Shortcut` gained a
`tooltipOpen` passthrough for this).
- Auto-layout still pops the existing confirmation dialog rather than
running directly — destructive enough to keep the guardrail.

## Test plan

- [x] On the Schema Visualizer page, each of the six shortcuts fires the
corresponding action.
- [x] Hover the schema selector and the Auto layout button — tooltip
shows the action label and keybind badge.
- [x] Open the schema selector popover (click or `O → S`) — hover
tooltip is suppressed while open.
- [x] Open the auto-layout confirm dialog (click or `O → A`) — hover
tooltip is suppressed while open.
- [x] Cmd+K shows all six entries under "Shortcuts" while on the page;
navigating away unregisters them.
- [x] `Mod+/` shortcuts sheet has a "Schema Visualizer" group listing
all six.
- [x] Copy as SQL / Markdown each fire a confirmation toast; PNG / SVG
downloads each fire a confirmation toast.
- [x] On the SQL editor results page, `Mod+Shift+M` / `Mod+Shift+C`
still copy results (no regression from the duplicate keybinds).
- [x] The download dropdown items still work via click; PNG/SVG
downloads succeed.
- [x] All other consumers of `SchemaSelector` (~15 callsites) render
unchanged after the `forwardRef` promotion.

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

* **New Features**
* Keyboard shortcuts for schema visualizer: copy as SQL/Markdown,
download PNG/SVG, auto-layout, and focus selector
  * Success toasts when copying content to clipboard

* **Improvements**
* Schema selector and auto-layout dialog can be opened/closed via
keyboard and programmatically
* Shortcut tooltips can be suppressed when related overlays/dialogs are
open
  * Schema Visualizer added to the shortcuts reference sheet

* **Tests**
  * E2E tests dismiss transient toasts to avoid UI interference
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-01 07:13:37 -06:00
Ivan VasilovandJordi Enric 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
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
Vaibhav 1604baaca5 fix: cron integration form (#44181)
## TL;DR

Fixes the scroll behavior for both dropdowns in the database function
within the new job form

## Before


https://github.com/user-attachments/assets/92ad6bec-1c26-4759-b85a-b81aa8a938dc

## After


https://github.com/user-attachments/assets/fd34c54e-d9b1-46aa-9252-fa765d9f2a3f



## Related
- closes https://github.com/supabase/supabase/issues/44146
2026-03-25 06:26:29 -06:00
Alaister YoungandNick Babadzhanian 5894e37b40 [FE-2158] – feat(studio): Add exposed tables config to Postgrest settings (#43280)
Adds a feature flagged exposed tables config to postgrest settings:
<img width="1158" height="589" alt="Screenshot 2026-03-02 at 17 04 13"
src="https://github.com/user-attachments/assets/8fa8ab81-0bfa-4781-83bc-80ac52e180f8"
/>

To test:
- make sure the existing (feature flag off) settings work as expected
- make sure exposing and removing schemas works in the new mode
- make sure exposing and removing tables works in the new mode
- ideally try with a lot of tables to check search and infinite scroll
work as expected
- try exposing a schema without any tables (like `graphql_public`) and
make sure it doesn't get removed randomly when editing tables
- try with a table with custom permissions (for example `REVOKE SELECT
ON public.posts FROM anon;`) and make sure the user is informed with the
tooltip

---------

Co-authored-by: Nick Babadzhanian <33933459+pgnickb@users.noreply.github.com>
2026-03-06 20:51:37 +08:00
Joshen Lim c6b2fe6fee Popover ui component to use portal by default, remove all manual declaration of portal for PopoverContent in dashboard (#41818)
* Popover ui component to use portal by default, remove all manual declaration of portal for PopoverContent in dashboard

* Forgot to add ui changes lol

* Clean uop
2026-01-20 11:58:31 +08:00
Joshen Lim 32e1fedc79 (chore) studIo: Refactor use query state with select part 01 (#41819)
* Refactor to remove usage of useQueryStateWithSelect in auth policies and vector bucket

* Refactor to remove usage of useQueryStateWithSelect in edge functionn secrets
2026-01-12 12:30:04 +07: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
626eb30e77 Assistant action orientated approach (#38806)
* update onboarding

* update model and fix part issue

* action orientated assistant

* fix tool

* lock

* remove unused filter

* fix tests

* fix again

* update package

* update container

* fix tests

* refactor(ai assistant): break out message markdown and profile picture

* wip

* refactor(ai assistant): break up message component

* refactor: break ai assistant message down into multiple files

* refactor: simplify ReportBlock state

* fix: styling of draggable report block header

When the drag handle is showing, it overlaps with the block header.
Decrease the opacity of the header so the handle can be seen and the two
can be distinguished.

* fix: minor tweaks to tool ui

* refactor: simplify DisplayBlockRenderer state

* fix: remove double deploy button in edge function block

When the confirm footer is shown, the deploy button on the top right should be
hidden (not just disabled) to avoid confusion.

* refactor, test: message sanitization by opt-in level

Refactor the message sanitization to have more type safety and be more testable.
Add tests to ensure:

- Message sanitization always runs on generate-v4
- Message sanitization correctly works by opt-in level

* Fix conflicts in pnpm lock

* Couple of nits and refactors

* Revert casing for report block snippet

* adjust sanitised prompt

* Fix tests

---------

Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-09-29 03:57:36 +00:00
Joshen Lim d46525eac1 Chore/swap use check permissions with use async check project permissions part 8 (Season Finale) (#38619)
* Update perms checking in audit logs

* Deprecate useCheckPermissions, useIsPermissionsLoaded and useCheckProjectPermissions as they're no longer used

* Rename useAsyncCheckProjectPermissions to useAsyncCheckPermissions

* Fix TS
2025-09-16 17:05:57 +08:00
Saxon FletcherandJoshen Lim db4ae7e326 Refine the policies page (#38204)
* refine the policies page

* minor fixes

* Fix TS

* Do not transform table name in policy row table header

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-08-26 22:09:17 +07:00
Joshen Lim e320368dc7 Part 2 of swapping useCheckPermissions with useAsyncCheckProjectPermissions (#37860)
* Part 2 of swapping useCheckPermissions with useAsyncCheckProjectPermissions

* Fix TS

* Address feedback

* Fix
2025-08-12 17:34:53 +07:00
Joshen Lim cab0585533 Fe 1799/consolidate to useselectedprojectquery and (#37684)
* Replace all usage of useProjectContext with useSelectedProjectQuery

* Replace all usage of useSelectedProject with useSelectedProjectQuery

* Replace all usage of useProjectByRef with useProjectByRefQuery

* Replace all usage of useSelectedOrganization with useSelectedOrganizationQuery

* Deprecate useSelectedProject, useSelectedOrganization, and useProjectByRef hooks

* Deprecate ProjecContext
2025-08-06 10:53:10 +07:00
Jordi EnricandTerry Sutton 792e2316f0 fix schema selector in create fn sheet (#36141)
* fix schema selector in create fn sheet

* fix schemaselctor in auth hook

* add portal false to schemaselector in sqlfunction for cronjobs

* Fix schema selector in function sheet

---------

Co-authored-by: Terry Sutton <saltcod@gmail.com>
2025-06-03 09:26:13 -02:30
Terry Sutton 263b0c1c5b Fix pointer events (#35408) 2025-05-01 13:16:13 -02:30
Daniel Gabriel 915af35334 fix(ui): enable portal for popover components (#35370) 2025-04-30 06:52:23 +00:00
Joshen Lim dc91412538 Use useSchemaQueryState in schema visualizer (#33508)
* Use useSchemaQueryState in schema visualizer

* Fix
2025-02-11 17:02:09 +08:00
Jonathan Summers-MuirandIvan Vasilov 958cebbb2b feat: new item style for table editor and empty states for both editors (#33357)
* feat: new item style for table editor and empty states for both editors

* flex shrink issue

* Update SqlEditorMenuStaticLinks.tsx

* Fix the test.

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2025-02-06 10:22:50 +01:00
Ivan VasilovandJoshen Lim fd3309c886 feat: UI for pg-cron (#29291)
* Add crons option in the database menu.

* Add react-hook-form to the studio package.json.

* Refactor the functionSelector to be used by other features.

* Add the bulk of the functionality for the cron UI. Some of the code is copy-pasted from functions feature, needs to be cleaned before merging.

* Tons of changes, the Create Cron sheet works now.

* Added some more functionality for the cronjob feature.

* Convert the Cron table to a listing with cards.

* Add click-to-copy in the Auth Hooks feature.

* Remove extra prop.

* Fix type errors.

* Fix some random issues. Fix the tests.

* Fix the tests.

* Add a style for disabled radio button item.

* Make the default SQL snippet. Handle the case pg_net is not installed.

* Fix the heading and save button when creating a new cron job.

* Change the name of the custom label in the schedule dropdown.

* Minor fixes.

* Rename all mentions of cronjobs to cron jobs.

* Always show the cron jobs link.

* Rename the link from crons to cron-jobs.

* Fix the disabled state for the stacked radio group.

* More minor fixes.

* More small fixes.

* Fix the tests.

* Minor UI tweaks

* More minor tweaks

* Add padding bottom

* Add feature flag for the cron ui.

* Fix the SQL function option.

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2024-10-03 15:11:17 -02:30
Alaister YoungandKevin Grüneberg 70da0f1d1d chore: cleanup packages (#27770)
* chore: cleanup packages

- Avoid circular imports
- Export API-types as types
- pg-format without depending on Node internal Buffer (not browser-compatible)
- Avoid importing from barrel files in ui dir

* chore: avoid barrel file imports in studio (#27771)

* chore: avoid barrel file imports

- Removes some unused imports
- Avoids barrel file import for faster builds + less memory

* add eslint rule

* type fixes

* delete layouts barrel

* delete components/grid barrel file

* delete components/grid/utils barrel file

* delete components/grid/components/common barrel file

* delete components/grid/components/editor barrel file

* delete components/grid/components/formatter barrel file

* delete components/grid/components/grid barrel file

* delete components/grid/components/header/filter barrel file

* remote components/grid/store barrel file

* remove components/interfaces/Auth/Policies barrel file

* delete components/interfaces/Settings/Logs barrel file

* delete components/ui/CodeEditor barrel file

* delete components/ui/Forms barrel file

* delete components/ui/Shimmers barrel file

* delete data/analytics barrel file

* delete hooks barrel file

* cleanup lib/common/fetch barrel file

* final * barral files cleanup

* global react-data-grid styles

* remove console.log

---------

Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com>

* fix build

---------

Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com>
2024-07-04 14:48:10 +08:00
1127c4ba88 Project Level Permissions (#27347)
* fix: update Permission params

* fix: upgrade check permission hook to support project level role

* fix: usePermissionsLoaded

* fix: Permission params can be undefined

* Scaffold new access management UI

* Add validation

* Update roles view

* Add tooltip

* Add button to apply role to all projects

* Update UI to select projects first instead of roles

* Merge master update UI

* Midway trying to implementation project level perms API

* First pass implementating updating project level permissions

* Add client side validation for assigning/removing roles

* Midway implementing new invites

* Integrate most of the project level permissions functionality

* fix: filter out org-level permissions before checking

* Add relevant UI guards in org level pages for project role POV

* Minor refactors

* Small refactors

* More fixes

* Moar refactors

* More fixes

* More fixes

* Refactor update role logic and smack some test cases on it

* Fixes

* Fix type issue

* Fix type

* more fixes, refactors, adding checks...

* MORE fixes

* Add perms checking for replicas

* Add ButtonTooltip component and use them to prevent repetition of pointer events auto for buttons with tooltips

* Convert all buttons with tooltips to use ButtonTooltip

* refactor

* PRettier

* Small fix

* Remove commented out code in organization-invitation-accept-mutation

* fix: switch to use the platform oauth authorizations routes

* Add perms checking for org audit logs and org oauth apps

* PRettier

* Fix incorrect URL for oauth app flow

* Fix incorrect URL for oauth app flow

* Fix

* Add perms checking for warehouse related UI

* Update roles helper icon

* remove unused lib

* Update package lock... again

* Update package lock... again

* Smalllll update

* Update some checks

* Add gate for project level permissions

* Last fix

* update codegen

* Update warehouse endpoint routes

* Fix

---------

Co-authored-by: phamhieu <phamhieu1998@gmail.com>
Co-authored-by: Alaister Young <a@alaisteryoung.com>
2024-07-01 17:59:54 +08:00
Joshen Lim 63493daa65 Allow viewing ongoing queries and aborting them (#26887)
* Allow viewing ongoing queries and aborting them

* Fix

* Add refresh button + shift view running queries CTA

* Fix scrolling in SqlEditorMenu

* Small styling fix for table editor menu schema selector error state
2024-06-04 13:07:55 +07:00
Bobbie Soedirgo 8888bb0023 feat: initial version of @supabase/pg-meta (#22307)
* feat: initial version of @supabase/pg-meta

Unlike supabase/postgres-meta, this will be a pure-JS SQL & Zod schema builder

* chore: typescript 5.4

* fix: typescript errors
2024-04-01 18:07:34 +08:00
Ivan Vasilov e93316657c fix: Unset the width on the popover to be the same as the trigger (#22053)
* Don't make the width same as the trigger on all popovers.

* The schemaSelector should have the same width.
2024-03-15 22:04:48 +00:00
221ee13f79 feat: Expandable code editor in the Create Function panel (#22000)
* Refactor and remove the CreateFunctionStore.

* Fix a duplicate key in the functions table.

* More fixes for the create-function form.

* Add excluded schemas to schema selector.

* Cleanup the createFunction code after the merge.

* Remove unneeded wrapper fragments.

* Minor fixes for the FormItemLayout stories.

* Refactor the CreateFunction panel using the new FormItemLayout.

* Revert the migration to use FormItemLayout. Will revisit later.

* Add a CSS class for popover content width to match its trigger width. Use it on the schema selector.

* Replace all listboxes with selects.

* Fix the comments.

* Switch to FormItemLayout wherever possible.

* Move the createFunction file to its own folder.

* Refactor the panel to use shadcn components: Sheet, SheetContent and SheetHeader.

* Add showClose prop to the Sheet component.

* Add function editor and a feature to maximize/minimize the code editor.

* Some fixes

* Add sameWidthAsTrigger to the popover component.

* Fix the icon size.

---------

Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2024-03-15 10:36:48 +01:00
a775e3ba69 chore: Migrate create-function store from mobx to react-hook-form (#21888)
* Refactor and remove the CreateFunctionStore.

* Fix a duplicate key in the functions table.

* More fixes for the create-function form.

* Add excluded schemas to schema selector.

* Cleanup the createFunction code after the merge.

* Remove unneeded wrapper fragments.

* Minor fixes for the FormItemLayout stories.

* Refactor the CreateFunction panel using the new FormItemLayout.

* Revert the migration to use FormItemLayout. Will revisit later.

* Add a CSS class for popover content width to match its trigger width. Use it on the schema selector.

* Replace all listboxes with selects.

* Fix the comments.

* Switch to FormItemLayout wherever possible.

* Some fixes

* minor lint

* One more lint

---------

Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2024-03-14 14:38:52 +08:00
Jonathan Summers-Muir 84f092ac43 chore: update table editor input and schema selector styling (#21486)
* init input and button changes

* clean up

* button now active state when dropdown or popover active

* Update TableEditorMenu.tsx

* Update TableEditorMenu.tsx

* fix hover issues

* Update SchemaSelector.tsx
2024-02-26 13:24:29 +00:00
hallidayo d75a2a814f fix: alert description overflow (#21138)
* added word break on the description

* changed to break-words
2024-02-16 10:58:13 +00:00
754ee55cd0 chore: update themes and add dark-new theme set (#20865)
* chore: update themes and add dark-new theme set

* chore: update

* add deep dark css theme

* fix issue with wrong class

* chore: add `bg-studio` as a custom remapped color for studio background

* updated surface classes to use a surface-75.

* update backgrounds and borders

* Update CardButton.tsx

* Update NavigationIconButton.tsx

* chore: add theme selection

* Update package.json

* Update index.ts

* Update package.json

* update alias

* Update ThemeSettings.tsx

* chore: split up theme support

* remove old code

* Update index.ts

* add back in

* Update ThemeSettingsOld.tsx

* fix issue with system theme leaking through

* reset themes

* update imports

* packagelock updated

* Update ThemeSettingsWithPreferredTheme.tsx

* Update system.svg

* Update NavigationIconButton.tsx

* Update NavigationBar.tsx

* update

* Update light.css

* updated some colors

* light mode updated

* hacked

* prettier

---------

Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com>
2024-02-15 16:56:18 +01:00
Jonathan Summers-MuirandIvan Vasilov 05c674e2a7 Realtime inspector icons colors (#19402)
* colors

* Fix leftover issues from merging from master.

* Fix the schema/table selectors loading states to eliminate layout shifts.

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2023-12-07 13:51:16 +00:00
Stojan Dimitrovski 44694ef6de feat: add beta auth hooks UI (#19312)
feat: add beta hooks UI
2023-12-07 14:30:30 +01:00
Joshen LimandIvan Vasilov 7473a65361 Chore/realtime inspector fixes 051223 (#19430)
* Fix broken URLs

* Limit realtime inspector to only the public schema as any other schema won’t work out of the box due to missing permissions

* Hide copy to clipboard for realtime message panel timestamp

* Add placeholder value for sending test message and fix sending test message to be sent as JSON

* Change channel name input to form

* Add join channel empty state

* Update copy writing

* Shift broadcast, presence, db changes toggle to filter message popover

* Add cursor-default

* Small style fix

* Fix toggles

* Address some feedback

* Fix the impersonation UI.

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2023-12-05 13:50:59 +01:00
Ivan Vasilov 436bdb10ae chore: Move the studio app to apps/studio (#18915)
* Move all studio files from /studio to /apps/studio.

* Move studio specific prettier ignores.

* Fix the ui references from studio.

* Fix the css imports.

* Fix all package.json issues.

* Fix the prettier setup for the studio app.

* Add .turbo folder to prettierignore.

* Fix the github workflows.
2023-11-15 12:38:55 +01:00