Commit Graph

155 Commits

Author SHA1 Message Date
Gildas Garcia 678aec3845 chore: migrate Input usages to Shadcn component in various screens/components (#45604)
## Screenshots

### Table editor: foreign record selector
Before:
<img width="802" height="213" alt="image"
src="https://github.com/user-attachments/assets/82ee3ce6-ac72-4b49-b1b0-2e635688cbb1"
/>

After:
<img width="609" height="194" alt="image"
src="https://github.com/user-attachments/assets/e9cc09c1-1c6b-4099-8cae-abe08f50fda9"
/>


### Account - Add TOTP
Before:
<img width="527" height="679" alt="image"
src="https://github.com/user-attachments/assets/b9f4a626-e24b-46e3-8385-700ef181308b"
/>

After:
<img width="531" height="684" alt="image"
src="https://github.com/user-attachments/assets/549745a7-9655-4a7d-9e0e-51f75b6a1c61"
/>

### Organisation Audit Logs Details
Before:
<img width="673" height="1321" alt="image"
src="https://github.com/user-attachments/assets/0bb360cf-6f27-4574-b9af-485a3836b17b"
/>

After:
<img width="669" height="1273" alt="image"
src="https://github.com/user-attachments/assets/0382c662-e270-41fd-a8ee-08528dedfce3"
/>

### Data API Integration Docs
Before:
<img width="1115" height="891" alt="image"
src="https://github.com/user-attachments/assets/db0c7698-53b7-4422-aac3-5e674b0bf151"
/>

After:
<img width="1193" height="1272" alt="image"
src="https://github.com/user-attachments/assets/927e5c43-413b-49c1-9b71-8ab628179c70"
/>

### Edge Function Edit Secret
Before:
<img width="599" height="255" alt="image"
src="https://github.com/user-attachments/assets/d6aa2f87-e247-4724-9e43-02b71933241c"
/>

After:
<img width="596" height="261" alt="image"
src="https://github.com/user-attachments/assets/d94acb41-07e1-497f-9697-830390526f4a"
/>

### JWT Key Details
Before:
<img width="536" height="549" alt="image"
src="https://github.com/user-attachments/assets/43672adc-dc0e-4e65-b7d4-b4537d22f6ea"
/>

After:
<img width="523" height="517" alt="image"
src="https://github.com/user-attachments/assets/e501e8a8-7f41-46a0-bb69-d240cea594f0"
/>

### Realtime Filter Popover
Before:
<img width="403" height="576" alt="image"
src="https://github.com/user-attachments/assets/73842450-ba87-456b-98fc-625b99149449"
/>

After:
<img width="387" height="564" alt="image"
src="https://github.com/user-attachments/assets/f2b35035-947c-4342-84dd-3548f9bd5e9f"
/>

### Realtime broadcast message dialog
Before:
<img width="520" height="393" alt="image"
src="https://github.com/user-attachments/assets/4f4a1a93-e0cf-4268-ae4e-baf8b8a62e74"
/>

After:
<img width="525" height="392" alt="image"
src="https://github.com/user-attachments/assets/e1c1934a-1812-4013-8606-9b846dc2498d"
/>

### Impersonation Popover
Before:
<img width="604" height="501" alt="image"
src="https://github.com/user-attachments/assets/9abdc604-94f8-4ed4-9a95-4688e6504e76"
/>
<img width="587" height="599" alt="image"
src="https://github.com/user-attachments/assets/5293c80c-9abd-43eb-899f-da759c83b598"
/>

After:
<img width="594" height="585" alt="image"
src="https://github.com/user-attachments/assets/5eaf2162-2d7f-444c-9052-c9afb00080f6"
/>
<img width="590" height="597" alt="image"
src="https://github.com/user-attachments/assets/149dc7c1-689c-4e0f-a884-c6f5b0228ebc"
/>

### Storage move item
Before:
<img width="521" height="285" alt="image"
src="https://github.com/user-attachments/assets/7d0f945f-add5-412b-813a-9325b260ab28"
/>

After:
<img width="529" height="274" alt="image"
src="https://github.com/user-attachments/assets/ab0891a1-b31b-40b6-be53-92afc95095ea"
/>

### Table Editor - Spreadsheet import
Before:
<img width="673" height="506" alt="image"
src="https://github.com/user-attachments/assets/7a722908-10c2-4c04-95fb-b12d3c23557c"
/>

After:
<img width="671" height="638" alt="image"
src="https://github.com/user-attachments/assets/689b1fb6-031c-4a02-9e7f-739356c1453d"
/>

### Org Billing downgrade survey
Before:
<img width="788" height="655" alt="image"
src="https://github.com/user-attachments/assets/c7a0d4c6-e9b9-4c6c-9cf1-e7d05016233f"
/>

After:
<img width="1630" height="1354" alt="image"
src="https://github.com/user-attachments/assets/e3f5473b-db9a-42b1-9242-40480c25fc02"
/>

### Project API Docs
Before:
<img width="1030" height="396" alt="image"
src="https://github.com/user-attachments/assets/95643b21-811a-4ba7-918a-5e655c262ac1"
/>

After:
<img width="1012" height="457" alt="image"
src="https://github.com/user-attachments/assets/d5559646-bb89-43b6-ad62-c5684b54b3fb"
/>


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

* **Refactor**
* Standardized form field layouts across panels, dialogs, and modals for
a more consistent editing and reading experience.
* Replaced several Input-based textareas with dedicated
TextArea/ExpandingTextArea controls and aligned labels with wrapper
layouts for clearer accessibility.
* Introduced grouped/composable input controls, added additional
read-only detail fields and labeled value/copy blocks, and tightened
header/layout spacing and control alignment.
  * Swapped notice styles for improved warning/admonition presentation.

* **Chores**
  * Removed a deprecated AutoTextArea component.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-07 17:07:11 +02:00
Kalleby Santos f584fdc975 feat: refactor edge-functions templates (#45234)
## What kind of change does this PR introduce?

feature

## What is the new behavior?

Update dashboard templates to use new `@supbase/server` SDK

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

* **Updates**
* Standardized edge function templates to use a unified request handler
with built-in Supabase context, improved secret-based flows, and
consistent handling of OPTIONS, streaming, binary, and websocket
responses.
* Unified error handling to return consistent JSON error and simplified
success/unauthorized payloads across AI, database, storage, webhook,
email, image, and websocket templates.

* **Documentation**
* Guide examples and text updated to use the revised auth mode naming
(ctx.authMode).
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-07 01:27:15 +01:00
Vaibhav 31d3cc79d6 fix: role selection (#45625)
## TL;DR

The edge function tester was sending service role tokens even when
anonymous was selected,
Fixed by moving the role context provider to wrap both the selector and
the submit handler

## sol:


| Before | After |
|--------|-------|
| <img width="589" alt="Service role JWT sent when Anonymous selected"
src="https://github.com/user-attachments/assets/f4072838-4031-4325-9fd6-7519e50bd080"
/> | <img width="471" alt="Anon JWT correctly sent when Anonymous
selected"
src="https://github.com/user-attachments/assets/86160946-398e-456e-9585-66e3e49f16ed"
/> |
| Selecting "Anonymous" had no effect, always sent `service_role` |
Selecting "Anonymous" correctly sends it now |

## ref:

- Closes https://github.com/supabase/supabase/issues/45619


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

## Summary by CodeRabbit

* **Refactor**
* Internal code structure improvements to enhance maintainability and
component organization.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-06 08:01:14 -06:00
Joshen Lim 87e8c59405 Add view data as user in auth users + refactor UI for role impersonation (#45358)
## Context

As part of RLS testing, adding @awaseem's idea for having "View data as
user" CTAs in the Auth Users's table
<img width="348" height="190" alt="image"
src="https://github.com/user-attachments/assets/855c8f54-0aba-478c-982b-1d9d29e419bd"
/>

## Other changes

Similar from @awaseem's suggestions, am also refactoring the Role
Impersonation UI a little, mainly from a copy writing POV to improve the
clarity of the UI.
- More action-oriented and contextual header for the role impersonation
popover
- e.g Table Editor -> "View data as a role", or SQL Editor -> "Run SQL
query as a role"
- Updated labels to be bit more intuitive from a builder's POV
- The actual database role is still mentioned in the option's
description (so we aren't obfuscating the actual postgres logic)
- Add label descriptors to elaborate what each role implies
  - e.g Anon -> "Not logged in"
- Add docs button which points to
[here](https://supabase.com/docs/guides/database/postgres/row-level-security#authenticated-and-unauthenticated-roles)
that explains which roles Supabase uses
- (Nit) Refactor to use Card component

### Before
<img width="647" height="277" alt="image"
src="https://github.com/user-attachments/assets/9ebae084-38b7-4e21-886b-f609bd71976e"
/>

### After
<img width="604" height="309" alt="image"
src="https://github.com/user-attachments/assets/4d797309-1b6b-4fd0-aab3-63d5e144c53c"
/>

<img width="630" height="297" alt="image"
src="https://github.com/user-attachments/assets/ca748635-c5da-4426-a9c3-8cb5aeef47a6"
/>



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

* **New Features**
* Added "View data as user" and "Run SQL as user" actions to user rows
to impersonate a user and jump to table or SQL views.
* Impersonation now surfaces an identity card in new tabs showing the
impersonated identity and a Stop button.

* **UI/UX Improvements**
* Impersonation panels accept customizable headers, show clearer role
labels (Postgres), richer role descriptions, condensed RLS copy,
in-panel docs link, simplified "Stop" labels, and adjusted
typography/padding for consistent styling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-01 00:43:15 +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
Alaister Young 45ffa97240 [FE-3096] feat(studio): split edge function secrets into custom and default sections (#45355)
Splits the Edge Function secrets page into two sections so reserved
Supabase env vars are always visible, even on new projects without any
user secrets created.

<img width="1605" height="1006" alt="Screenshot 2026-04-29 at 12 20
43 PM"
src="https://github.com/user-attachments/assets/fc74f10e-557d-45bb-b0f0-66a706a9facb"
/>

**Added:**
- `DefaultEdgeFunctionSecrets` component — a read-only reference list
(Name + Description) of every `SUPABASE_*`, `SB_*`, and `DENO_*` env var
available in every project, sourced from [the
docs](https://supabase.com/docs/guides/functions/secrets#default-secrets)
- `isInternalEdgeFunctionSecret` helper used to filter the custom
secrets table

**Changed:**
- The custom secrets section now renders first (more actionable), with
the educational default secrets section below it
- Custom secrets table now filters out anything matching `SUPABASE_*` or
any of the hardcoded default names

**Removed:**
- `isReservedSecret` regex check + its tooltip branches in
`EdgeFunctionSecret.tsx` — dead code now that the custom table never
receives an internal secret

Addresses
[FE-3096](https://linear.app/supabase/issue/FE-3096/split-edge-function-secrets-into-internal-and-user-defined-views).

## To test

- Open `/project/_/functions/secrets` on a fresh project (no custom
secrets)
- "Default secrets" section is visible and lists all 9 env vars with
descriptions
  - "Custom secrets" section shows the empty state
- Create a custom secret — appears in the Custom section, not the
Default section
- Edit/delete dropdown still works on custom secrets
- Search input only filters the custom secrets table

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

* **New Features**
* Added a "Default secrets" section showing built-in edge-function
secrets with names, descriptions, and a "Deprecated" badge where
applicable.
* Secret names are clickable to copy to clipboard with a success
notification; secret names/values use inline code styling.
* UI now separates "Custom secrets" and "Default secrets" with distinct
empty states.

* **Bug Fixes**
* Edit/Delete controls reflect actual permission state (no longer
disabled for default/reserved secrets).

* **Tests**
  * Added tests for default-secret detection and visibility rules.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-04-29 18:08:32 +08:00
Jordi Enric fe928ad76d feat(studio): link edge function errors to troubleshooting docs (#45326)
## Summary

Improve the "Errors since last deploy" panel on the new edge function
overview page.

- **Error column**: stop showing the function URL. Pull the actual error
from the related runtime logs, trim the stack trace to a one-line
summary, and use that for the cell text and tooltip.
- **Troubleshoot column**: rename "Assistant" to "Troubleshoot" and add
a "View troubleshooting guide" item to the dropdown that opens
`supabase.com/docs/guides/troubleshooting` prefilled with `edge function
<ErrorType> <statusCode>`.
- **Runtime log block**: restyle the expanded per-row log section.
Monospace rows with structured timestamp / level badge / count /
message, a divider between entries, and destructive tinting only on
error rows. The previous layout ran text together with no separation.

## Test plan
- [x] `pnpm test:studio` for `EdgeFunctionRecentErrors.utils.test.ts`
(10 passing, including new cases for `summarizeErrorMessage`,
`getDisplayErrorMessage`, and `buildTroubleshootingDocsUrl`)
- [x] `pnpm typecheck` clean
- [x] `eslint` clean for changed files
- [ ] Visual check of the panel: Error cell shows the runtime error
summary, Troubleshoot dropdown opens docs in a new tab, log rows render
with the new structure

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

* **New Features**
* Added a "View troubleshooting guide" action that opens a
status-code-specific docs page for each recent error.
* Errors now show level badges and repetition counts in the logs for
clearer scanning.

* **Bug Fixes**
* Error text is summarized and normalized for concise, single-line
display with clearer per-line styling.

* **Tests**
* New tests validate error-summary, display-fallback, and
troubleshooting-URL behaviors.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
2026-04-28 16:35:34 +02:00
Saxon Fletcher 96939829bc change to useFlag not usePHFlag (#45265)
Just replace PH flag with ConfigCat flag for edge functions index error
rates

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

* **Refactor**
* Switched how the feature flag for edge functions request metrics is
read, affecting whether last-hour metrics columns are displayed.
* **Bug Fix**
* Fixed table layout so the "No results found" row correctly spans the
appropriate number of columns depending on whether last-hour stats are
shown, preventing misaligned table rows and improving display
consistency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-04-28 15:11:10 +08:00
Joshen Lim 7f5865872a Enforce noUnusedLocals and noUnusedParameters in tsconfig.json + fix all related issues (#45264)
## Context

Enforce `noUnusedLocals` and `noUnusedParameters` in tsconfig.json + fix
all related issues
2026-04-27 17:42:34 +08:00
Gildas Garcia 0facd341a6 chore: remove UI form components _Shadcn_ suffix (#45212)
## Problem

We used to have a `_Shadcn_` suffix for all the shadcn form components
because we also had `formik` form components.
This is not needed anymore.

## Solution

- Remove the suffix
- Update all usages
2026-04-24 12:14:15 +02:00
Saxon Fletcher b8a246f2d7 Errors since last deploy (#44733) 2026-04-10 20:11:02 +10:00
Ali Waseem a45e6cf333 fix: remove _DEFAULT from connect menu env var names (#44462)
## Summary

Removes `_DEFAULT` from the publishable key env var name across all
Connect and ConnectSheet framework content, so that e.g.
`NEXT_PUBLIC_SUPABASE_PUBLISHABLE_DEFAULT_KEY` becomes
`NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY`. This matches the docs and sample
apps.

### Connect

- Next.js (App Router)
- Next.js (Pages Router)
- React (Create React App)
- React (Vite)
- Remix
- SolidJS
- SvelteKit

### ConnectSheet

- Next.js (App Router)
- Next.js (Pages Router)
- React (Create React App)
- React (Vite)
- Remix
- SolidJS
- SvelteKit
- Vue.js
- shadcn env step

Resolves FE-2934

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

* **Bug Fixes**
* Standardized environment variable names in generated connection/setup
instructions: when a publishable key is present the templates now
reference the publishable env var (e.g.,
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY, VITE_SUPABASE_PUBLISHABLE_KEY,
REACT_APP_SUPABASE_PUBLISHABLE_KEY, etc.) with unchanged anon-key
fallback behavior.
* Updated cURL/tab placeholders to reflect the new publishable-key
identifier when hiding keys.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-09 13:23:21 +00:00
Charis 205cbe7d26 chore(studio}: enforce import order, remove bare import specifiers (#44585) 2026-04-07 20:34:10 -04:00
kemal.earth 99253068c3 feat(studio): hide overlay on test edge function sheet (#44627)
## 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?

Ability to view things beneath the sheet, such as edge function logs
while testing.

| Before | After |
|--------|--------|
| <img width="1203" height="842" alt="Screenshot 2026-04-07 at 13 33 57"
src="https://github.com/user-attachments/assets/90423650-fcf0-4a88-aadd-dbbb373e2a33"
/> | <img width="1206" height="838" alt="Screenshot 2026-04-07 at 13 30
53"
src="https://github.com/user-attachments/assets/103a05a6-eaed-4985-a83d-4aa4b945ee9f"
/> |



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

## Summary by CodeRabbit

* **Style**
* Improved the visual appearance of the edge function tester sheet by
removing the overlay effect, providing a cleaner interface.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-07 16:34:58 +01:00
Charis 333175b17b refactor: switch to @ imports and enforce sorting for studio/state (#44523)
* **Refactor**
* Updated internal module import paths to use standardized alias
conventions across the codebase.
  * Reorganized import statement ordering for improved code consistency.
2026-04-06 13:36:05 +00: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
Saxon Fletcher e21088144d Edge function overview (#44009)
<img width="1575" height="1134" alt="image"
src="https://github.com/user-attachments/assets/994b1113-717f-44a2-89a4-13bc0182db20"
/>

Attempts to improve our edge function overview pages to provide stronger
insights into the health of a function, including reliability (error
rates), performance (execution times) and usage (cpu and memory).

As part of this work it refactors existing charts to use our new chart
components.

main consideration is the collective performance of error queries
https://github.com/supabase/supabase/pull/44009/changes#diff-2a79cf61c5397a8ef363c333229fa7729a2efc90a4d8e0806e49c212d5aa97e7

## To test:
1. Create an edge function that errors out randomly across requests. You
can use cron to poll this function every second.
2. View the edge function and on the overview page confirm that errors
are showing and grouped correctly in recent failed invocations sections.

---------

Co-authored-by: Ali Waseem <waseema393@gmail.com>
2026-04-01 14:59:12 +10:00
Ivan Vasilov ee8eae7309 chore: Clean the ui package from next imports (#44278)
This PR moves several components which rely on `next` out of the `ui`
package to the `ui-patterns` package.

`ui-patterns` package is intented to be imported with specific imports
so it's ok if there are components reliant on `next` in there.

The `SonnerToaster` component has removed its dependency by requiring a
prop for `theme`.
2026-03-30 10:58:37 +02:00
Saxon Fletcher 3f6cd1f188 error rates in functions list (#44006)
<img width="1835" height="886" alt="image"
src="https://github.com/user-attachments/assets/c4ab5be6-cddc-49b3-8d09-169acb706a20"
/>

Adds total request and error rate columns to edge functions table behind
a feature flag

---------

Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>
Co-authored-by: SaxonF <1072756+SaxonF@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-03-25 17:23:46 +08:00
Joshen Lim c3f7318dbc Couple of minor UI nudges in edge functions UI (#44123)
## Context

Just a couple of minor UI nudges as I came across on the edge functions
page

- Added TimestampInfo for hover card + used `text-sm` for font size +
reduce width to match content size
  - Before:
<img width="393" height="271" alt="image"
src="https://github.com/user-attachments/assets/3db351fd-80e8-47a9-b4e9-dff8613163ad"
/>
  - After:
<img width="461" height="233" alt="image"
src="https://github.com/user-attachments/assets/d4ac9edb-58fc-4820-b04f-c7753baf9ef5"
/>

- Use `text-code-inline` in here + avoid `text-brand` in text (use
`text-foreground`) + added some spacing between the 2 sentences
  - Before:
<img width="707" height="153" alt="image"
src="https://github.com/user-attachments/assets/7d6b3acc-8bc6-454b-92ed-ab43227a9e07"
/>
  - After:
<img width="710" height="169" alt="image"
src="https://github.com/user-attachments/assets/b00fbf07-a6a3-4476-b417-d02225f02ce9"
/>

- Invoke code snippet adjust copy button placement + opt to not wrap
lines (was awkward esp when there's no line numbers)
  - Before:
<img width="730" height="278" alt="image"
src="https://github.com/user-attachments/assets/d3c646d9-c893-44cc-8c25-86fc0ddac050"
/>
  - After:
<img width="725" height="223" alt="image"
src="https://github.com/user-attachments/assets/f75c0a28-04e3-48c5-903f-25e9bbe2d879"
/>

- Use `text-brand` consistently here instead of `text-brand-600`
  - Before:
<img width="732" height="315" alt="image"
src="https://github.com/user-attachments/assets/48cdf54f-43e1-44ef-b09b-66d6db351a5b"
/>
  - After:
<img width="736" height="322" alt="image"
src="https://github.com/user-attachments/assets/3f176ccc-ec35-4abb-8491-d9a498933a26"
/>
2026-03-24 19:17:31 +08:00
Danny White b23c6a7fed chore(studio): share key-value field array editor (#43938)
## What kind of change does this PR introduce?

Chore that references DEPR-394.

## What is the current behavior?

Key/value editors for headers are implemented separately in multiple
places.

## What is the new behavior?

DEPR-394 is consolidating repeated RHF field-array UIs across Studio and
the design system.

- adds a shared `KeyValueFieldArray` component in `ui-patterns`
- adds a shared `httpHeaderAddActions` helper for preset header rows
- migrates the key/value header editors in:
  - Platform Webhooks
  - Cron Jobs HTTP headers
  - Database Webhooks HTTP headers
- documents the key/value pattern in the design system with:
  - a dedicated fragment page
  - updated forms guidance
  - updated form pattern demos

| Preview |
| --- |
| <img width="1102" height="420" alt="CleanShot 2026-03-23 at 12 22
18@2x"
src="https://github.com/user-attachments/assets/f8d23ff9-7063-462f-8074-b400561f77e9"
/> |

## Additional context

This is PR 1 of a 3-PR stack for DEPR-394.
2026-03-24 16:16:03 +11:00
Joshen Lim fd14df7077 Use TimestampInfo in edge functions created at column + use relative label (#44064)
## Context

Very tiny one - just uses TimestampInfo here
<img width="520" height="528" alt="image"
src="https://github.com/user-attachments/assets/1336cbc1-1c9e-424d-9674-178196c9ca10"
/>
2026-03-23 15:06:03 +08:00
Saxon Fletcher 8499d30e98 Slight tuning of edge function page (#43798)
<img width="1543" height="981" alt="image"
src="https://github.com/user-attachments/assets/8e6c37c5-15c7-4bc4-be87-477e36a62a65"
/>


Switches from two to one column layout for details page and removes an
inconsistent background colour in header. Moves critical detail
information from page into header (url and deploy dates/counts)
2026-03-19 15:55:19 +10: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
Shashwat Raj 68e6edd5e6 show/hide password logic fixed (#41694)
## 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?

This PR changes the logic for show/hide password icon in the sign up
form. Fix #39399 and #41459

## What is the current behavior?
For Password Field Eye Icon Label
<ul>
<li>When password is hidden: Button shows "Hide password" label
(incorrect).
<li>When password is visible: Button shows "Show password" label
(incorrect)
</ul>
For Edge Functions Secrets
<ul>
<li>All secret values are always visible in plain text
<li>No visibility toggle functionality exists
<li>No way to hide/show individual secret values
</ul>

## What is the new behavior?

Sign-up Form Password Field:
<ul>
<li>When password is hidden: Button correctly shows "Show password"
label
<li>When password is visible: Button correctly shows "Hide password"
label</ul>
Labels now accurately describe what clicking the button will do 
<p></p>
Edge Functions Secrets:
<ul>
<li>Secret values are hidden by default (security-first approach)
<li>Each secret has its own independent visibility toggle button
<li>Hidden secrets display as bullet points (•••••••••••••••••••••)
<li>Eye icon appears when secret is hidden - click to reveal
<li>EyeOff icon appears when secret is visible - click to hide
<li>Tooltip shows "Hidden" when value is masked, actual value when
visible</ul>

---------

Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Co-authored-by: Alaister Young <a@alaisteryoung.com>
2026-03-10 22:51:17 +08:00
Danny White 8a5ad58f81 chore(studio): replace CloseConfirmationModal with DiscardChangesConfirmationDialog (#43430)
## What kind of change does this PR introduce?

Form handling improvement.

## What is the current behavior?

https://github.com/supabase/supabase/pull/43201/ standardised our
discard changes behaviour with a shared hook and
`DiscardChangesConfirmationDialog` component. But many forms and sheets
still:

1. Don’t have any Discard-confirm close behaviour, making it too easy to
make accidental discards
2. Use a more complicated, manually-created `CloseConfirmationModal`
approach

## What is the new behavior?

- Replaced all instances of `#2` above that had `CloseConfirmationModal`
with `DiscardChangesConfirmationDialog` and its hook
- Improved design system documentation around dirty form dismissal

| Before | After |
| --- | --- |
| <img width="987" height="569" alt="Mercor Apexroles Foo
Supabase-9A40EC7C-F335-4B26-B567-450FC0845463"
src="https://github.com/user-attachments/assets/363bed82-34d2-4cc8-9164-6d18cfdbdbbc"
/> | <img width="987" height="569" alt="Mercor Apexroles Foo
Supabase-F427F1FA-DECC-4194-B663-A9E5A6F285A1"
src="https://github.com/user-attachments/assets/d49fafdc-a5c2-46df-9b67-ec42bacbe716"
/> |

## To test

Try editing values these sheets in staging, then blurring the sheet or
pressing `esc`:

- CreateQueueSheet.tsx
- CronJobsTab.tsx
- CronJobPage.tsx
- EditWrapperSheet.tsx
- OverviewTab.tsx
- WrappersTab.tsx
- CreateFunction/index.tsx
- EditHookPanel.tsx
- TriggerSheet.tsx
- SidePanelEditor.tsx
- EditSecretSheet.tsx
- PolicyEditorModal/index.tsx
- PolicyEditorPanel/index.tsx

## Still to come

- [ ] Incrementally take on `#1`: implement
`DiscardChangesConfirmationDialog` and its hook in sheets or dialog
forms that have no dirty form dismissal handling

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-03-06 03:17:35 +00:00
Danny White aef1d70351 chore(studio): standardise discard changes behaviour (#43201)
## What kind of change does this PR introduce?

UX consistency improvement. Updates DEPR-355.

## What is the current behavior?

Discard-confirm close behavioir is implemented inconsistently across
Studio forms:

- some sheets/dialogs used `useConfirmOnClose`
- some duplicated local `CloseConfirmationModal` components
- some (e.g. `CreateHookSheet`) closed unconditionally and could lose
unsaved changes

## What is the new behavior?

Extracts and validates a reusable discard-close pattern for
dialogs/sheets
- enhances `useConfirmOnClose` with `handleOpenChange(open)` for
`Dialog`/`Sheet` `onOpenChange`
- adds shared `DiscardChangesConfirmationDialog` (`AlertDialog`-based,
override-able copy)
- migrates:
	- `InviteMemberButton`
	- `CreateHookSheet`
	- `EditSecretSheet`

This standardizes close-guard behavior for
backdrop/escape/close-button/cancel-button flows without trying to block
route changes or arbitrary unmounts.

## Additional context

`CreateHookSheet` now also marks the generated secret action as dirty
(`setValue(..., { shouldDirty: true })`) so the discard guard behaves
correctly.

- Added tests for `useConfirmOnClose` covering:
	- clean vs dirty close
	- handleOpenChange(true|false)
	- confirm/cancel behavior
	- latest callback ref behavior

A follow-up PR is needed to migrate remaining duplicated
`CloseConfirmationModal` usages and older `useConfirmOnClose` call sites
to the shared `DiscardChangesConfirmationDialog` + `handleOpenChange`
pattern.

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-03-05 11:32:39 +11:00
Joshen Lim 90d3b56db0 Joshen/fe 2621 show custom domain on dashboard and connect modal (#43233)
## Context

Main fix is to adjust the new home page + connect dialog (and connect
sheet) to render the project's custom domain if available

<img width="471" height="255" alt="image"
src="https://github.com/user-attachments/assets/3a208b2e-bdeb-43f5-a2e7-3495881dbaaa"
/>
<img width="1065" height="233" alt="image"
src="https://github.com/user-attachments/assets/2a7b8f81-8c0b-4803-bf0a-fc16a2f1e0e1"
/>

## Changes involved

- Created a `useProjectApiUrl` hook that will return the API URL
depending if custom domains is available, otherwise default to default
project API URL
- Refactored all the other places that were manually deriving the
project's endpoint
  - Storage Explorer -> copy URL
  - Edge Functions
  - Integrations -> Data API + API Docs
  - Auth Providers -> Callback URL
- Also updated the copy CTA for the addons page
  - Instead of just "Change xxx", make it a bit more actionable
  - For add ons with binary states (Custom domains, IPv4)
    - If not enabled yet, "Enable xxx", otherwise "Toggle xxx"
  - For PITR
- If not enabled yet, "Enable PITR", otherwise "Change recovery
duration"
  - Also added "Edit custom domain" CTA if enabled
<img width="1144" height="518" alt="image"
src="https://github.com/user-attachments/assets/4f152ea5-0cc7-412c-95e8-ad5bb37c19c3"
/>


## To test
- [ ] Verify that for a project with custom domain set up, all the
affected UI mentioned in the above section look correct
2026-03-03 11:37:08 +08:00
Ivan Vasilov 637b6fb792 chore: update react-resizable-panels to v4 to support pixel width (#42990)
This pull request standardizes the usage of props and value types for
the `ResizablePanelGroup` and `ResizablePanel` components across
multiple files in the codebase. Specifically, it replaces the deprecated
`direction` prop with `orientation`, and updates numeric prop values
(such as `defaultSize`, `minSize`, and `maxSize`) to be passed as
strings. This ensures consistency with the updated component API and
improves type safety.

**Component API Updates:**

* Replaced the `direction` prop with `orientation` for all usages of
`ResizablePanelGroup`
* Updated all `ResizablePanel` props (`defaultSize`, `minSize`,
`maxSize`) to be passed as strings instead of numbers, ensuring
compatibility with the latest API requirements.
* Removed deprecated or unnecessary props such as `order` from
`ResizablePanel` components, and ensured all size-related props are
consistently formatted as strings.
2026-02-23 19:48:19 +01:00
Ali Waseem 65dac5429e feat: show recent invocations in functions view (#43030)
## 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?

By far the most important feature in the functions view is the
Invocations tab. This just adds recent invocations to the dashboard for
a function. So it's easy for you to digest what's happening.

## Demo 
<img width="1818" height="1312" alt="image"
src="https://github.com/user-attachments/assets/b3f59255-f780-4edc-bc9c-cc711b0d22f9"
/>
2026-02-20 07:55:42 -07:00
Yogeshwaran C 2674009c8a docs: fix grammar, spelling, and capitalization across docs and studio (#42917)
## What kind of change does this PR introduce?

Documentation and copy corrections.

## What is the current behavior?

Several docs and one Studio file contain grammar, spelling, and
capitalization issues:

- JS v1 upgrade guide: "we'll continuing" (should be "we'll continue"),
"Some the [PR]" (should be "See the [PR]"), extra space before comma
- Realtime docs: "PostgresSQL" (should be "PostgreSQL") in 2 files
- Kotlin SDK installing docs: "Websockets" (should be "WebSockets"),
"Checkout the" (should be "Check out the")
- Broadcast guide: "Websockets" (should be "WebSockets") in code
comments (5 occurrences)
- Prisma troubleshooting: "Checkout this" (should be "Check out this")
- Edge function template: "Websocket Server Example" (should be
"WebSocket Server Example")

## What is the new behavior?

All grammar, spelling, and capitalization issues are corrected:

- **Grammar**: "we'll continue" (verb tense), "See the [PR]" (correct
word), removed extra space
- **Spelling**: "PostgreSQL" (correct product name)
- **Capitalization**: "WebSocket" / "WebSockets" follows the official
W3C/IETF naming convention
- **Word splitting**: "Check out" as a phrasal verb (two words), vs
"checkout" the noun

## Files changed (8)

- `apps/docs/docs/ref/javascript/v1/upgrade-guide.mdx` — grammar fixes
(3 issues)
- `apps/docs/docs/ref/self-hosting-realtime/introduction.mdx` —
PostgresSQL -> PostgreSQL
- `apps/docs/docs/ref/realtime/realtime.mdx` — PostgresSQL -> PostgreSQL
- `apps/docs/docs/ref/kotlin/v2/installing.mdx` — WebSockets + Check out
- `apps/docs/docs/ref/kotlin/installing.mdx` — WebSockets + Check out (2
occurrences)
- `apps/docs/content/guides/realtime/broadcast.mdx` — Websockets ->
WebSockets (5 occurrences)
- `apps/docs/content/troubleshooting/prisma-error-management-Cm5P_o.mdx`
— Check out
- `apps/studio/components/interfaces/Functions/Functions.templates.ts` —
WebSocket template name
2026-02-19 07:22:50 -07:00
Ali Waseem 1890624a1a fix: add missing keys to studio (#42957)
## 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?

Cleanup from React Doctor! Components missing keys
2026-02-18 09:05:22 -07:00
Kalleby Santos 6e4aeed6d9 feat: improve empty secrets description (#42467)
## What kind of change does this PR introduce?

feature

## What is the current behavior?

Empty secrets page doesn't mention default `SUPABASE_*` envs.

<details>

<img width="2888" height="1418" alt="image"
src="https://github.com/user-attachments/assets/20a5ab71-9bb5-44c9-8dc4-0069f7605fcb"
/>

</details>

## What is the new behavior?

Add mentions to available default secrets as well useful doc link

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

* **Improvements**
* Clarified the Edge Functions "No secrets created" state to note that
SUPABASE_* default environment variables are available.
* Enhanced empty-state content with an explicit SUPABASE_* code example,
lighter text styling for readability, and an inline link to the
documentation for default secrets.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Kalleby Santos <kallebysantos@Kallebys-MacBook-Pro.local>
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
2026-02-11 21:20:57 +00:00
Danny White c3163fbf74 chore(studio): hide password managers from edge functions (#42667)
## What kind of change does this PR introduce?

- Chore
- Resolves DEPR-163

## What is the current behavior?

1Password and other password managers’ widgets pop up in the _Name_
`input` despite that being irrelevant to password managers.
 
## What is the new behavior?

We tell that field to ignore password mangers.

## Additional context

Apple’s own password manager does not have an attribute and the secret
value is password-like, so I’m unable to hide theirs.


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

## Summary by CodeRabbit

* **Chores**
* Improved form behavior with password managers by updating input
configuration settings on the edge function secrets form.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-02-11 17:05:58 +11:00
Alfred Sultson 18cc6f8fe9 Replace Edge Functions legacy OpenAI template with two new AI SDK-based templates (#40904)
## 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?

Edge Functions templates update 

## What is the current behavior?

An OpenAI template using GPT-3 and the legacy completions API.

## What is the new behavior?

Removed

- OpenAI text completion template

Added

- Stream text with AI SDK template
- Generate recipes with AI SDK template

## Additional context

- CORS inline as examples do not support multiple files yet
- Tested both by direct invocation and via `useChat`


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

* **New Features**
* Added "Stream text with AI SDK" template for real-time streaming
responses with CORS support and robust error handling.
* Added "Generate recipes with AI SDK" template for producing validated,
structured recipe outputs.

* **Refactor**
* Replaced the previous OpenAI text completion template with two new AI
SDK–based templates to provide streaming and schema-driven content
generation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Kalleby Santos <kallebysantos@Kallebys-MacBook-Pro.local>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-02-09 12:26:01 +08:00
Joshen Lim 8233902aef chore(studio): Edge functions secrets trim secret value for single value (#42382)
## Context

Addresses a small footgun where copying and paste a single value with
new lines and hitting save in the edge function secrets page will also
save the new lines in the secret name.

Fix is just adding a trim

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

## Summary by CodeRabbit

* **Chores**
* Internal code organization and refactoring improvements to enhance
codebase maintainability and consistency across the Functions module.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-02-03 15:04:35 +08:00
Kalleby Santos 8c3655cd71 feat(studio-local): functions management api - function details (#42322)
Functions page on self-hosted differs from Platform Adds the possibility to see function details page in Self-Host version.

## Summary by CodeRabbit

* **New Features**
* Edge function detail lookup added for self‑hosted deployments (new
retrieval endpoint & store method).
  * Consistent navigation to function pages from the functions list.

* **Improvements**
  * UI tabs, download, and test controls adapt to deployment type.
* Region, JWT verification, local development, and delete controls shown
only on the platform.
* Edit/save/delete controls enable/disable correctly based on deployment
and permissions.
  * Function details load reliably across deployments.
2026-01-30 21:14:28 +00:00
Kalleby Santos 29c5211864 feat(studio): improving functions secrets page for local (#42018)
## What kind of change does this PR introduce?

Improvement, studio docs update

## What is the current behavior?

Only instructions for local-development are shown

## What is the new behavior?

Include a new section with useful links for self-hosted environment

## Additional context

<details>

<img width="1475" height="947" alt="image"
src="https://github.com/user-attachments/assets/34f02e03-d666-4521-99af-d25ba778295d"
/>

</details>

---

cc @aantti 

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

* **Improvements**
* Reorganized the empty state for Functions into two distinct cards to
improve visual hierarchy and guidance.
* Added a dedicated section explaining local development and CLI usage,
with clearer header actions.
* Introduced a separate card with guidance for self-hosted Supabase and
related runtime notes.
* Increased vertical spacing on the secrets management page for better
readability.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>
2026-01-30 19:44:38 +00:00
Kalleby Santos 1862b71745 feat(studio-local): functions management api - list functions (#40690)
## What is the current behaviour?

Functions page on self-hosted differs from Platform

## What is the new behaviour?

Adds the possibility to see a list of edge-functions in Self-Host
version.

## Summary by CodeRabbit

* **New Features**
* Added self-hosted edge functions support with filesystem-based
artifact listing and a new API endpoint to list local functions.
* Improved functions UI: unified view, enhanced search and adjacent sort
controls, and clearer local-hosting guidance.

* **Chores**
* Added environment configuration and docker volume for edge functions
management.
* Updated build/task config to pass through edge functions env and
include contentlayer outputs.

Co-authored-by: Ali Waseem <waseema393@gmail.com>
Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
Co-authored-by: Terry Sutton <saltcod@gmail.com>
2026-01-30 08:00:21 +08:00
Joshen Lim f293036ec7 Add UX guardrails for edge functions RE unsaved and unimported files (#41921)
* Add UX guardrails for edge functions RE unsaved and unimported files

* useLatest on hasUnsavedChanges

* Remove checking of unimported files + add VS code like indicator for modified and unsaved files

* Nit

* Fix TS

* Fix

* nit

* Fixes

* Nit

* move hasUnsavedChanges on demand

* code rabbit nit

* code rabbit nit 2

* prettier

---------

Co-authored-by: Alaister Young <a@alaisteryoung.com>
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
2026-01-22 13:31:28 +08:00
Danny White 60dfcc00ea fix(studio): PageSectionSummary alignment (#42019)
* system

* nit

* docs and fixes

* more resilient component

* remove redundant text

* format

* nit

* PRettier

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-01-21 10:18:15 +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
Francesco Sansalvadore 5213e681b4 feat(studio): add "create" command menu commands (#41473) 2025-12-29 09:18:06 +01:00
Vaibhav 7981846a0e fix(studio): toggle secret visibility independently in edge function secrets (#41487)
* fix(studio): toggle secret visibility independently in edge function secrets

* nits

* cleanup

---------

Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
2025-12-22 13:35:03 +11:00
Ali Waseem 1df47957c2 chore: middle click, ctrl+click to open new tab for edge functions (#41376)
* updated middle click, ctrl click to open new tab

* updated PR review

* updated to create a wrapper for handling navigation

* updated file spelling

* updated to add edge functions button

* updated navigation for command space and enter

* added inset focus class
2025-12-18 08:33:38 -07:00
Ivan Vasilov cc47bcfa6d chore: Migrate studio to use ui-patterns/shimmeringLoader (#41405)
* Add shimmering-loader CSS to ui-patterns.

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

* Remove ShimmeringLoader from studio.

* Migrate studio to use ui-patterns/ShimmeringLoader.

* Migrate away from using default import for ShimmeringLoader.

* Fix the css imports in docs and studio.
2025-12-17 14:54:07 +01:00
Joshen Lim 27188c147c Support creating multiple publishable keys, and deleting publishable keys (#41186)
* Support creating multiple publishable keys, and deleting publishable keys

* FIx types

* Smol

* Smol fix

* Address issues

* Update comment

* Replace all usage of useApiKeysVisiblity for checking permissions to just call useAsyncCheckPermissions directly

* Clean up and deprecate useApiKeysVisibility hook

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

* Migrate keepPreviousData usage.

* Migrate all uses of InfiniteQuery.

* Fix refetchInterval in queries.

* Migrate all use of isLoading to isPending in mutations.

* Fix accessing location in claim-project.

* Fix a bug in duplicate query keys.

* Migrate all queries to use isPending.

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

This reverts commit 2a07df64b5.

* Revert the rss.xml file to master.
2025-12-10 10:10:29 +01:00
Danny White 1f84a19608 chore(studio): improve Edge Functions layout (#41176)
* subtitle clarity

* improve secrets presentation

* presentation improvements

* consistency

* improve NoPermission component
2025-12-10 09:41:31 +11:00