Commit Graph
64 Commits
Author SHA1 Message Date
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
Gildas Garcia bfb0737d14 Fix to ensure labels, descriptions and validation errors are correctly linked to their inputs (#50080)
## Problem

`FormItemLayout` does not correctly binds inputs descriptions and
validation messages to their inputs. This is because the input ids are
generated and not correctly propagated to the `FormMessage` and
`FormDescription` components. Besides, we still pass `name` or `id`
directly to the inputs or `FormItemLayout` in some places.

## Solution

- Fix `FormItemLayout` to correctly binds inputs descriptions and
validation messages to their inputs
- Fix incorrect usages
- Fix Design System documentation

## How to test

The issue is visible in production:
- Open https://supabase.com/design-system/docs/ui-patterns/forms
- Open the devtool and check the labels `for`, the description `id` and
the input `id` or `aria-describedby` attributes. You'll see they often
don't match

Do the same on staging:
- Open
https://design-system-git-fix-a11y-form-input-descriptions-supabase.vercel.app/design-system/docs/ui-patterns/forms
- Open the devtool and check the labels `for`, the description `id` and
the input `id` or `aria-describedby` attributes. They now match

Dashboard fixes:
-
https://studio-staging-git-fix-a11y-form-input-descriptions-supabase.vercel.app/dashboard/account/tokens:
_Expires in_ select button is now correctly linked to its label
-
https://studio-staging-git-fix-a11y-form-input-descriptions-supabase.vercel.app/dashboard/account/me:
the switches are now correctly linked to their label
- In Database/Indexes: the select buttons when creating an index are now
correctly linked to their label
- All other changes are the same things
2026-09-08 09:47:32 +02:00
Alaister YoungandAlaister Young ca2b50a0a7 chore(ui-patterns): collapse the admonition shim into ui-patterns/Admonition (#48377)
Follow-up to #48344: collapses the two resolution paths for the
Admonition module into one.

`src/admonition.tsx` was a back-compat shim re-exporting
`src/Admonition/`. Two ways to resolve one module is exactly what
produced the macOS self-import bug fixed in #48344, and the local
typecheck errors that #48374 worked around. This removes the shim and
standardizes on the PascalCase subpath, matching every other export in
the package.

**Changed:**

- Codemodded all 246 `ui-patterns/admonition` imports to
`ui-patterns/Admonition` (240 `.tsx`, 5 `.mdx`, 1 `.ts` across studio,
docs, www, design-system, and lite-studio)
- Pointed the 5 internal `'../admonition'` imports back at the
`'../Admonition'` directory

**Removed:**

- `packages/ui-patterns/src/admonition.tsx`, and its `./admonition`
entry in the exports map (regenerated with `pnpm gen:exports`)

## To test

- `grep -r "ui-patterns/admonition" --include='*.ts*'` → no hits
- `pnpm test:case-hazards` → passes
- `pnpm typecheck` → all 15 tasks green
- `pnpm --filter studio run lint:ratchet` → passes
- `pnpm --filter ui-patterns vitest run src/Admonition` → 11 tests pass

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

## Summary by CodeRabbit

* **Bug Fixes**
* Standardized Admonition component imports across the application and
documentation.
* Improved compatibility with case-sensitive environments by using the
canonical component path.
  * Removed the legacy Admonition import entry point.

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

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
2026-07-29 00:48:56 +08: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
ChloeGarciaMillerand c87f673c4c Fix: improve accessibility for icon buttons (database menu) (#47531)
## 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 (accessibility improvement)

## What is the current behavior?

Icon-only buttons do not have explicit accessible names for screen
readers or tooltips.

## What is the new behavior?

All icon-only buttons now have explicit accessible names using visually
hidden text (sr-only), ensuring proper screen reader support.

## Additional context

Tooltip text is preserved or added for visual users.
No visual changes were introduced.


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

## Summary by CodeRabbit

* **Tests**
* Tightened end-to-end checks for policy creation so policy names must
match exactly in the list.
* Improved validation coverage for SELECT, INSERT, UPDATE, and DELETE
policy flows, reducing the chance of false-positive test matches.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-06 16:59:40 +02:00
Gildas Garcia b30db91d71 chore: cleanup UI patterns exports (#47406)
## Problem

We now export components under a subpath in ui-patterns to avoid barrel
files as they slow down every tools (from IDE to linters, etc.) and may
also affect bundles our users have to download.

## Solution

- Remove the UI patterns index file
- Fix invalid impors
2026-06-30 09:23:17 +02: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
Joshen Lim f2e20eac34 Joshen/fe 3651 deprecate monacoeditor from grid folder to use codeeditor (#47179)
## Context

Part of efforts to consolidate all the code editors that we have in the
repository

`CodeEditor` will serve as the base monaco editor file that all UIs
should consume from
It's aimed to be generic and just stores the common logic that will be
generally used where-ever we need a code editor (editor options, base
editor set up on mount, etc)

The idea is that `CodeEditor` holds just 3 default actions (run queyr,
format document and placeholder fill)
If any editor needs specific behaviours (e.g SQL Editor), they can
declare them in the `onMount` prop of `CodeEditor` which gives some
flexibility

## Changes involved
- Use `CodeEditor` component for SQL Editor's `MonacoEditor`
- Shifted Cmd K behaviour into `CodeEditor` since that's probably needed
everywhere that we render that UI
- Deprecate `MonacoEditor` from the table editor's `grid` folder
- All files that were using that component to use `CodeEditor` component
instead

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

## Release Notes

* **Refactor**
* Migrated the studio’s code editing UI (including JSON, text, and
payload viewers) to a unified CodeEditor experience.
* **New Features**
  * Added plaintext language support for read-only/truncated views.
* **Behavior Changes**
* Improved editor startup by setting cursor position consistently and
deferring autofocus.
* Streamlined editor context-menu actions to the core set (run query,
format, placeholder fill).
* Updated SQL editor wiring for more consistent command/menu and
selection handling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-06-23 11:39:24 +08:00
Gildas GarciaandIvan Vasilov 96d43099bb chore: refactor Button API so that it can be used a standard button (#46880)
## Problem

Our `<Button>` component breaks the default `button` contract by
redefining the `type` prop to set its variant (`primary`, `default`,
etc) instead of the button type (`submit`, `button`, etc).
This is confusing and forces to write more code when using it with
shadcn components that expect/inject the standard button props.

## Solution

- rename the `type` prop to `variant`
- rename the `htmlType` prop to `type`
- propagate the changes where necessary
- format code

## How to test

As this is just prop renaming, if it builds it's ok

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-06-16 23:59:58 +02:00
ChloeGarciaMillerandandGildas Garcia d745036c9e chore: create index form (#46288)
## 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?

Refactored the Database Create Index side panel to align with the
recommended Studio form patterns.

## What is the current behavior?

The side panel was using a legacy layout that did not follow the common
Studio form patterns.
It's also not a real form.

## What is the new behavior?

The Create Index side panel in the Database section is now consistent
with the Studio form patterns.
It's now a real form using `react-hook-form`

## Additional context

Before:
<img width="668" height="855" alt="image"
src="https://github.com/user-attachments/assets/d15ee63c-8d03-4780-8945-1792f0493133"
/>

After:
<img width="606" height="856" alt="image"
src="https://github.com/user-attachments/assets/78e0269c-e79c-42d1-a2c2-9465c0b0c46a"
/>


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

* **UI Improvements**
* Reworked index-creation panel into a validated, form-driven workflow
with clearer field interactions, multi-column selector, live read-only
SQL preview, and updated submit/cancel behavior.
* Footer actions: Cancel resets the form and closes the panel; Create
triggers form submission and reflects loading state.
* **Tests**
* Updated end-to-end flow to click "Select a table" (replacing "Choose a
table") during index creation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
2026-06-08 11:53:29 +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 5d97339d41 chore: remove <Select> _Shadcn_ suffix (#45988)
## Problem

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

## Solution

Remove it. No other changes

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

## Summary by CodeRabbit

* **Refactor**
* Updated internal component architecture to standardize and simplify
the codebase. These changes improve code maintainability and consistency
across the application without affecting existing functionality or user
experience.

<!-- 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/45988)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-15 16:39:57 +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
Ali Waseem 618c902e1a feat(studio): add keyboard shortcuts to Database listing pages (#45467)
## Summary

Adds the `O→S` / `Shift+F` / `Shift+N` / `F→C` shortcut set across every
Database listing page, on top of the schema-visualizer pattern from
#45386. Fixes [FE-3131](https://linear.app/supabase/issue/FE-3131).

A shared `list-page.*` registry replaces what would have been a per-page
registry file for each route, and `useShortcut`/`Shortcut` gain a
`label` override so a single ID renders contextually in Cmd+K and hover
tooltips.

## Pages and shortcuts

| Page | `O→S` | `Shift+F` | `Shift+N` | `F→C` |
| --- | --- | --- | --- | --- |
| Tables | Open schema selector | Search tables | Create new table |
Clears search + entity-type filter |
| Functions | Open schema selector | Search functions | Create new
function | Clears search + Return Type + Security |
| Triggers — data | Open schema selector | Search triggers | Create new
trigger | Clears search + Table filter |
| Triggers — event | — | Search event triggers | Create new event
trigger | Clears search + Owner filter |
| Enumerated Types | Open schema selector | Search enumerated types |
Create new enumerated type | Clears search |
| Indexes | Open schema selector | Search indexes | Create new index |
Clears search |
| Roles | — | Search roles | Add new role | Clears search + filter type
→ 'all' |
| Publications | — | Search publications | — | Clears search |
| Extensions | — | Search extensions | — | Clears search |

`Shift+N` only fires when the page-specific gate allows it (permission +
unlocked schema + any other prerequisite like `hasTables` for triggers).

## Test plan

- [ ] On each of the 9 pages, all four shortcuts behave as listed in the
table above
- [ ] Hover the wrapped controls — tooltip shows the page-specific label
and the right keybind badge
- [ ] Open the schema selector via `O→S` — the hover tooltip is
suppressed while the popover is open
- [ ] `Shift+N` is a no-op on locked schemas / when permission is
missing / when a prereq fails (e.g. no tables on Triggers data)
- [ ] `Shift+F` focuses the search input; while focused, Escape clears
(with text) → Escape blurs (when empty)
- [ ] `Cmd+K` shows the page-specific shortcut name while on each page;
the entry goes away on navigation
- [ ] `Mod+/` reference sheet shows one "List pages" group with 4
generic entries
- [ ] No regression to existing schema-visualizer / table-editor /
SQL-editor shortcut behavior

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

* **New Features**
* Added a dedicated list-page shortcut group in the shortcuts reference.

* **Improvements**
* Keyboard shortcuts across database list pages: focus & select search,
reset filters, and create-new-item shortcuts.
* Escape now clears/searches or blurs inputs to avoid accidental popover
closes.
* Create/new buttons respond to shortcuts when allowed; disabled actions
keep permission tooltips for clarity.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-04 07:08:35 -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
Gildas GarciaandJoshen Lim f4abe3fca7 chore: migrate MultiSelectDeprecated to Shadcn multi-select (#45377)
## Problem

We want to reduce the code we ship and maintain.

## Solution

- Migrate old `MultiSelectDeprecated` usage to the new Shadcn
`multi-select`
- Fix `multi-select` background color to align it with other inputs
- Fix `multi-select` popover content alignment (now align to its input
start)

## Screenshots

### RLS policies
Before:
<img width="618" height="705" alt="image"
src="https://github.com/user-attachments/assets/098504fc-21a9-4386-9390-e69f929189c1"
/>

After:
<img width="549" height="704" alt="image"
src="https://github.com/user-attachments/assets/06842e31-90bf-4d24-8c19-78f74941cd65"
/>

### Storage policies
Before:
<img width="1177" height="664" alt="image"
src="https://github.com/user-attachments/assets/3cf1afb4-9604-4ee9-b7b6-8371f94bcfcc"
/>

After:
<img width="1170" height="653" alt="image"
src="https://github.com/user-attachments/assets/e3b235d3-5890-45ff-9658-82c6612ac82a"
/>

### Database indexes
Before:
<img width="675" height="496" alt="image"
src="https://github.com/user-attachments/assets/84c0d3b6-45af-49dc-b4f4-274abed4cea7"
/>

After:
<img width="674" height="498" alt="image"
src="https://github.com/user-attachments/assets/697ceafc-256f-4106-9193-8697bc3d9d8e"
/>

### Contact support
Before:
<img width="643" height="534" alt="image"
src="https://github.com/user-attachments/assets/ee7fc790-622d-4c09-afab-269271a31af4"
/>

After:
<img width="645" height="457" alt="image"
src="https://github.com/user-attachments/assets/db0b9a32-95e0-4864-a12a-88828c431aab"
/>


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

* **Refactor**
* Replaced legacy multi-select controls with a unified selector UI:
dynamic trigger labels, per-item disable support, explicit item
rendering, deletable badges, and improved search/selection behavior.
* **Chores**
* Removed deprecated multi-select badge and legacy picker
implementations; adjusted exports/types to align with the new selector
components.
* **Style**
* Minor UI text and inline code styling improvements and modal spacing
tweaks.
* **Tests**
  * Updated end-to-end flows to wait and interact with the new pickers.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-04-30 10:35:01 +02: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
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 88fd7f1185 fix: create index form dropdown behavior (#43906)
## TL;DR
Fixes/improves the create Index form ux by fixing schema/table dropdown
state coupling and dropdown scroll behavior

## Before

https://github.com/user-attachments/assets/093a6b42-b13e-4138-ab86-45149f4894cb

## After

https://github.com/user-attachments/assets/db9cc11b-0218-4276-9ccf-9c81831e95e5

## Related
- closes https://github.com/supabase/supabase/issues/43878
2026-03-23 09:18:58 -06:00
Joshen LimandAli Waseem 5e2e6690ad chore(studio): Deprecate usage of useQueryStateWithSelect in more files (#42500)
## Context

Related to FE-2461

Just following from the previous part
[here](https://github.com/supabase/supabase/pull/41819)
PR removes the usage of `useQueryStateWithSelect` in
- Publishable API Keys (Delete)
- Secret API Keys (Delete)
- Auth Hooks (Edit)
- Database Indexes (Edit + Delete)
-
Ensures that the appropriate behaviours are in place too
- Toast should show when landing on a page with an invalid ID param that
entity doesn't exist
- Toast should not show when deleting the param (which
useQueryStateWithSelect was using useRef as a workaround prior)

## To test

- [ ] API keys (Both publishable and secret key)
  - URL updates when deleting a key
  - Refresh the page, delete dialog should open with the right key
- Update the query param to something invalid, should see the "not
found" toast
  - Delete a key, should only see a success toast
- [ ] Auth Hooks
  - URL updates when adding / edit a hook
  - Refresh the page, panel should open with the right hook
- Update the query param to something invalid, should see the "not
found" toast
- [ ] Database Indexes
  - URL updates when editing/deleting an index
  - Refresh the page, delete dialog should open with the right index
- Update the query param to something invalid, should see the "not
found" toast
  - Delete an index, should only see a success toast

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

* **Bug Fixes**
* Improved error handling and user notifications when API keys, hooks,
or indexes are deleted or become unavailable; users now see clear toasts
when a target item cannot be found.
* **Refactoring**
* Internal state and dialog visibility handling for API keys, hooks, and
database indexes have been simplified to make UI flows more reliable and
consistent.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Ali Waseem <waseema393@gmail.com>
2026-02-06 12:32:53 +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
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
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
Joshen Lim 9c244df9f1 Add columns to database indexes UI (#41152)
* Add columns to database indexes UI

* Nit

* Update codeowner
2025-12-09 22:27:23 +08:00
Joshen Lim 1692393e09 Joshen/fe 2187 disable default sorting in table editor for large tables (#40976)
* Add confirmation modal in table editor when applying sorts if table has many rows

* nit
2025-12-03 15:06:48 +08:00
Francesco Sansalvadore dfecff7629 fix(ui-patterns): responsive with_icon spacing (#40841) 2025-11-27 15:38:10 +00:00
Ivan Vasilov 43cc61818c chore: Migrate all isPending uses in react-query (#40642)
* Bump react-query. Minor type and logic fixes.

* Migrate all use of isLoading to isPending in mutations.

* Fix type errors.
2025-11-20 16:44:53 +01:00
Francesco Sansalvadore cb045c9559 Chore: add param routing on panels (#40184)
* chore(studio): add useQueryStateWithSelect hook to handle nested param routing on panels
* handleErrorOnDelete fn for useQueryStateWithSelect
2025-11-12 15:58:31 +01:00
5f533247e1 Update docs url to env var (#38772)
* Update Supabase docs URLs to use env variable

Co-authored-by: a <a@alaisteryoung.com>

* Refactor: Use DOCS_URL constant for documentation links

This change centralizes documentation links using a new DOCS_URL constant, improving maintainability and consistency.

Co-authored-by: a <a@alaisteryoung.com>

* Refactor: Use DOCS_URL constant for all documentation links

This change replaces hardcoded documentation URLs with a centralized constant, improving maintainability and consistency.

Co-authored-by: a <a@alaisteryoung.com>

* replace more instances

* ci: Autofix updates from GitHub workflow

* remaining instances

* fix duplicate useRouter

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: alaister <10985857+alaister@users.noreply.github.com>
2025-09-26 10:16:33 +00:00
Saxon FletcherandJoshen Lim f9a6af7a68 Table consistency (#37924)
* update project tables

* org team table

* Minor fixes

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-08-15 13:16:55 +10: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
Michael Ong 61dedfa76f Chore/add e2e test for database (#37452)
* chore: add tests for database

* chore: add final tests and some refactoring

* chore: update playwright config
2025-08-05 12:33:32 +02:00
Ivan VasilovandJoshen Lim b3c6992e56 feat: Make the protected schemas dynamic, namespace schemas are now protected (#37290)
* Add hooks for async protected schemas.

* Migrate the ProtectedSchemaWarning to support the new implementation.

* sq

* Migrate all uses of protected schemas to the new approach.

* Delete extra file.

* Refactor the import foreign schema dialog to forbid protected and exposed schemas.

* Add the type to the protected schema.

* Revert ImportForeignSchemaDialog, it'll be addressed in another PR.

* Update apps/studio/hooks/useProtectedSchemas.ts

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

* Fix a bad commit.

* Minor fixes.

* Fix the FDW delete mutation to handle names with numbers.

* Simplify the logic to skip a fetch.

* Minor fixes.

* Make the useIcebergFdwSchemasQuery work for all iceberg FDWs.

* Fix the tab schemas to always show in the Table Editor.

* Apply suggestion from @joshenlim

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

* Fix a minor typo.

* Refactor ProtectedSchemaWarning to use Admonition, and standardise input field for target schema iceberg

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-07-30 11:38:50 +02:00
Terry Sutton 2aee61530d Chore/fix index delete (#36774)
pass schema to delete index
2025-06-30 13:06:18 -02:30
Jonathan Summers-MuirandJoshen Lim 2815dac7e0 Feat/index suggestions inline (#35107)
* init

* hovercard

* adds button to install index advisor

* hover card now now insert indexes

* update

* moved hook

* align alert dialog to design syste,

* Update index-advisor.utils.ts

* shows all index statements now

* Update query-performance.tsx

* Some refactors

* Clean up

* Fix

* One last nit refactor

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-05-07 19:09:58 +08:00
Francesco Sansalvadore ecd181bcd9 studio mobile v2 (#32630)
* improve some studio mobile layouts

* improve some studio mobile layouts

* improve settings

* assistant mobile

* assistant mobile

* assistant mobile

* responsive formlayout and new project layout

* improve dashboard pages headers

* improve dashboard auth pages

* mobile org settings

* mobile billing fixes

* adjust paused project container height

* remove comments

* triggers

* leftovers

* ai assistant

* fix errors

* remove 16px input size

* fix test

* merge access tokens settings page conflicsts

* smol integrations here and there
2025-01-17 19:07:35 +01:00
Joshen LimandPaul Cioanca a4243f438f Add restrictions for orioledb technical preview (#30410)
* Add restrictions for orioledb technical preview

* Add callouts to pgvector and postgis if orioledb

* Restrict restore to new project for orioledb

* Scaffold client side validation for preventing org upgrade if org has oriole db present

* Hook up proper logic for oriole

* Fix

* Remove console log

* Fix type

* Disable version selector if only one version is available

* chore: oriole badges

* UI updates based on requests

* Update copy

* Fix

* Dont open assistant if opt is selected

* Fix

* Fix

* Update badge

* Add feature flag for orioleDB

* Feature flag oriole check in plan update

---------

Co-authored-by: Paul Cioanca <paul.cioanca@supabase.io>
2024-11-30 17:36:15 +08:00
Joshen Lim d8a57c1c7e Add settings for queues: toggle expose through postgrest + permissions via table privileges (#30564)
* Add settings for queues: toggle expose through postgrest + permissions via table privileges

* Ensure appropriate grants are granted when toggling, and revoked when disabling

* Update to use queues_public schema

* Update queue schema to pgmq_public and add/remove from data api when enabling/disabling

* Fix query for retrieving toggle state

* Add schema invalidation

* Remove hard code

* Use QueuesSettings from Queues folder, remove from NewQueues

* Update SQL for toggling exposure + support RLS enabling

* Support toggling RLS for a queue

* Update admonition copy in queues for enabling/disable postgrest exposure

* Add custom RLS policy for queue

* Minor style fixes

* Fix

* Remove hard code

* Update RLS to add message regarding relevancy only if exposure to PostgREST is enabled

* Update message in exposing queues to postgREST

* Address feedback

* Address feedback

* Don't revoke postgres role stuff

* Remove hard code

* Update copy

* Update

* Address Oli's feedback, ensure that queues ALL have RLS enabled prior to allowing exposure to PostgREST

* Address remaining feedback

* Remove hardcode

* Update

* Address feedback
2024-11-27 12:10:33 +08:00
Joshen LimandSaxon Fletcher 12d92aed99 Assistant V2 (#30523)
* start

* added panels

* remove stuff

* fixes and refinements

* clean up

* remove old assistant panel

* resizable assistant kinda

* use icon

* Add missing package

* remove canvas

* add suggestions

* updated empty state if no tables exist

* fix table condition

* Implement diffing if using assistant in sql editor

* Reinstate old assistant in SQL editor if feature preview is off

* pane size adjustment

* assistant button corners

* Add SQL snippet content to assistant if opening assistant in sql editor

* Add the necessary checks for opt in and hipaa

* revert adding snippet to assistant when opening assistant in sql editor

* Add cmd i shortcut

* Add admonitions for when disablePrompt is toggled on, and if no api key is set. Add footer note RE rate limitation

* Bump ai package in packages

* some fixes for backwards compability depending on feature preview toggled

* Rename feature preview property for new assistant

* Smol fix

* Prevent SQL snippet from running until message is finished

* only loading last message

* fix z-index

* save chat state to global state

* add debug to failed ai queries

* Add basic contextual invalidation

* Add explain code action to SQL editor

* Add link to abort ongoing queries from SqlSnippet

* Update feature preview content

* Fix

* Fix

* Fix

* Te4st

* Fix tests

* ONly show ai button within a project

* Fix PH tracking

* Beef up a bit more event tracking

* Rough fix to padding when assistant is open

* A bit more telemetry stuff

* Update prompts

* fix rls editing via assistant

* Update generate-v3.ts

prompt to get auth schema too

* Add policy satement to assistant when editing

* Address all comments

* fixc

* Fix SqlSnippet not taking full width on larger viewports

* Adjust max width

---------

Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
2024-11-25 18:50:56 +08:00
Joshen Lim b01f1adaec Chore/misc fixes 251124 (#30641)
* Fix key prop in CreateIndexSidePanel

* Fix validation when creating FK in column side panel editor - array vs non array type not triggering validation

* Fix validation for saving FK of different type, save array type properly
2024-11-25 15:59:37 +08:00
Alaister YoungandJoshen Lim 6c592dec99 chore: remove useExecuteSqlQuery() part 2 (#30467)
* foreign-key-constraints

* update entity-types stale time

* schemas query

* deprecate useExecuteSqlQuery

* users count query

* database size query

* indexes query

* keywords query

* migrations query

* table columns

* database functions

* database roles query

* fdws query

* replication lag query

* ongoing queries query

* vault secrets query

* remove unneeded staleTime: 0

* max connections query

* fix entity types key in tests

* Some fixes

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2024-11-18 05:15:37 +00:00
Joshen Lim f521109ce2 Chore/database functions v2 (#29969)
* Init AiAssistantPanel

* Temp

* Temp

* iterating on assistant ux

* More spiking

* Tweaking...

* Moar tweaking..

* Even more tweaking

* Tweek

* More tweaks

* Final tweaking...

* TWEAK

* Spelling

* Fix

* Assistant error handling and small bug fix in context for message

* Add feature flag

* Fix

* Address all feedback

* Minor
2024-10-23 16:43:38 +08:00
Terry Sutton 262c439345 Pass search term to entity query (#29986) 2024-10-21 10:22:02 -02:30
Terry Sutton e4c2643bc4 Chore/index crash (#29258)
filter items with null colums
2024-09-12 16:53:10 -02:30
Ivan VasilovandJoshen Lim 05a542ccea chore: Migrate all feather icons to lucide icons (#29038)
* Add lucide-react to docs (to make the autocomplete work).

* Migrate the docs app icons.

* Migrate the ui-patterns.

* Remove the old icons from ui package.

* Migrate the www app from react-feather icons.

* Migrate all of studio icons.

* Migrate the only component in design-system.

* Fix an old import in ui package. Revert an import in docs app.

* Fix some pages in www.

* Remove unneeded files used in generation of icons.

* Fix a prettier error.

* Fix more issues in www.

* Fix an issue in Log Date picker.

* Replace all string sizes with number sizes because the icons grew in some cases.

* Fix more imports in security page.

* Fix an extra import.

* Remove the size prop from all icons if they're in a button and they match the button size.

* Minor fixes for docs and www.

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2024-09-04 19:46:21 +08:00
Jordi EnricandJoshen Lim 3fa447d57d fix layouts and make sure buttons are visible in smol screens (#28939)
* improve table editor headers

* sql editor horizontal scroll auto in headers

* fix headers in tablelist

* fix headers in db roles

* fix database functions in smol screens

* fix table list headers

* fix trigger lists table

* fix enum types headers

* Update Extensions component styling with flex-wrap

* Update Indexes component UI layout and styling

* fix publications table

* move sql editor pagination tobottom

* rm unused imports, add correct label to db selector

* fix layout shift in run button

* add tooltip to results limitter

* make header in sql editor results scrollable

* Fix Button tooltip and table header formatting for database/tables/[id] ColumnList

* Fix SQL editor footer disappearing with resizable panel

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2024-09-02 16:46:19 +07:00
df52ea7ee0 feat: Replace all toasts with sonner (#28250)
* Update the design of the sonner toasts. Add the close button by default.

* Migrate studio and www apps to use the SonnerToaster.

* Migrate all toasts from studio.

* Migrate all leftover toasts in studio.

* Add a new toast component with progress. Use it in studio.

* Migrate the design-system app.

* Refactor the consent toast to use sonner.

* Switch docs to use the new sonner toasts.

* Remove toast examples from the design-system app.

* Remove all toast-related components and old code.

* Fix the progress bar in the toast progress component. Also make the bottom components vertically centered.

* Fix the width of the toast progress.

* Use text-foreground-lighter instead of muted for ToastProgress text

* Rename ToastProgress to SonnerProgress.

* Shorten the text in sonner progress.

* Use the correct classes for the close button. Add a const var for the default toast duration. Remove the custom width class from sonner.

* Set the position for all progress toasts to bottom right. Set the duration for all toasts to the default (when reusing a toast id from loading/progress toast, the duration is set to infinity).

* Fix the playwright tests.

* Refactor imports to use ui instead of @ui.

* Change all imports of react-hot-toast with sonner. These components were merged since the last commit to this branch.

* Remove react-hot-toast lib.

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
2024-08-31 07:50:51 +08:00
Ivan Vasilov 8c6d0f1890 feat: Save the selected schema in the URL and local storage (#28662)
* Add nuqs package.

* Add useSchemaQueryState hook.

* Use the new hook in all places where there's is a schema selector.

* Make the useQueryState work with SSR in playwright.

* Fix the saving to local storage to happen as a side effect without any additional rerenders.
2024-08-19 13:28:25 +02:00
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
389feea6c8 🐛 fix: wrap column around quotes for creating index sql command (#27499)
* 🐛 fix: wrap column around quotes for creating index sql command

* Fix the package.lock.

---------

Co-authored-by: Girish Savlesha <girish.savlesh@gmail.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2024-06-28 12:47:35 +00:00