## Context
Resolves https://github.com/supabase/supabase/issues/43548
There's currently an issue with the Table Editor where if you have, for
example, a nullable `text` column with a default value, inserting a new
row and selecting "Set to NULL" doesn't do anything, and saving will
insert the row with the default value
<img width="700" height="258" alt="image"
src="https://github.com/user-attachments/assets/6a284ebb-c346-40a6-9a30-793118844084"
/>
This stems from a legacy logic in the Table Editor whereby we treat
`null` values as "no input" - which is incorrect as `null` values are
also valid values. So the PR here changes a few things to resolve this
properly:
## Changes involved
Main fix:
- `undefined` will be the "no input" value instead, and it'll be the
default value when generating the row object for inserting a new row
- `NULL` or even empty string like `''` will be treated as they are
(valid inputs)
Secondary adjustments:
- (Queue operations) Queueing an insert with no value but default value
is NULL, will show the placeholder as `DEFAULT` instead of `NULL` for
better accuracy in representation
<img width="892" height="96" alt="image"
src="https://github.com/user-attachments/assets/02cf86bf-c17b-4e25-9a8f-17960b1d2575"
/>
- Added a `Set to Default` CTA here, but will only show up if adding a
new row or updating a queued insert row operation, which will set the
value of the input field back to `undefined` for PG to handle it as the
default value
<img width="734" height="208" alt="image"
src="https://github.com/user-attachments/assets/23887c0c-533e-4494-acbe-61309ff5d7c5"
/>
## To test
Verify within the Table Editor (along with queue operation feature
preview)
- For inserting a new row, setting value to NULL and setting value to
Default works
- For updating a row, setting value to NULL works
## Summary
The `connectSection` A/B experiment concluded as a true null (no effect
on activation or any downstream metric after 13 days at 50/50, ~153K
mature orgs). Saxon decided to ship the Connect section as the permanent
experience. This PR removes the Getting Started control variant, the old
Connect modal, all experiment flag gating, and related telemetry types.
## Changes
- Delete `GettingStarted/` directory (5 files: section component, types,
utils, progress hook)
- Delete old `Connect.tsx` dialog modal (replaced by ConnectSheet)
- Remove `connectSection` PostHog flag reads from `Home.tsx` and
`LayoutHeader.tsx`
- Remove `getSectionVisibility()` experiment logic and
`ConnectSectionVariant` type
- Remove `getting-started` from `DEFAULT_SECTION_ORDER`
- Always render `<ConnectSheet />` in header (no more conditional with
old `<Connect />` modal)
- Remove `variant` prop from `ConnectSection` component
- Remove 4 getting-started telemetry event interfaces from
`telemetry-constants.ts`
- Update `mergeSectionOrder` tests to reflect new section order
## Testing
Tested on Vercel preview:
- [x] Project homepage shows Connect section for new projects (< 10 days
old)
- [x] Connect section hidden for mature projects (> 10 days old)
- [x] Header Connect button opens ConnectSheet (not old modal)
- [x] Connect tiles open ConnectSheet with correct tab
- [x] Section drag-and-drop still works without getting-started in the
order
- [x] Existing users with `getting-started` in localStorage order don't
break (mergeSectionOrder strips it)
## Linear
- fixes GROWTH-730
---------
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
Previously, the POST to `/v1/projects/{ref}/branches` didn't work on
free projects, which left some Supabase projects setup without a default
branch. Easy fix for those projects would be to disable/enable the whole
integration.
This PR fixes that so that when the user wants to setup a production
sync, the code checks if there's branches already setup and if not, sets
the selected branch as default.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## Context
Related to marketplace integrations
Shifts Database Webhooks integration to the new Integrations UI. This
one's a bit different from the previous PRs as this involves a full SQL
installation query instead of only just a database extension. So am
tweaking `Integrations.constants` a little.
For context eventually all the integrations will be pulled remotely from
a database, so am still trying to figure out an optimal data structure,
but requirements will be clearer as we build out the UI
RE installing integrations:
- For now, if the integration has a provided SQL installation command,
that'll take precedence
- Else, if the integration has a provided SQL installation query, we'll
use that on the /query endpoint
- Otherwise, if the integration only requires database extensions,
dashboard will generate the queries to install the extensions
- In the case of the former tho, we won't allow users to choose which
schema to install the extension in too
Just ping me if any clarification's required!
## To test
- [ ] Verify that you can install the database webhooks with the new
integration UI
- [ ] Verify that behaviour is status quo without the new integration UI
## What kind of change does this PR introduce?
Component update.
## What is the current behaviour?
TanStack tables in the repo are split between the shared `TableHeadSort`
primitive and the older Studio-local `DataTableColumnHeader` helper,
which makes the sorting UI and integration path inconsistent.
If you were to just use `DataTableColumnHeader` in `ui-patterns/Table`,
you’d get a very different visual result to the `TableHeadSort` UI you
see in most other tables.
## What is the new behaviour?
Adds a shared `TanStackTableHeadSort` adapter in `ui-patterns/Table`,
backed by the existing `TableHeadSort` primitive, and switches the
webhook table plus the design-system TanStack demo to that canonical
path. `DataTableColumnHeader` stays as a deprecated wrapper for now,
Studio gets a lint guard to block new imports of it, and the table docs
now point TanStack tables at the shared adapter explicitly.
## To test
Check out column sorting on the Platform Webhook endpoint deliveries
table.
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`.
## Context
Just brings more integrations over to the new UI bit by bit
- Vault
- Cron
- Data API
- GraphiQL
Will be tackling webhooks next which is a bit different as its not just
a database extension
## Context
Related to marketplace related work, just moves the Queues integration
to the new UI (Changes are feature flagged)
<img width="1145" height="584" alt="image"
src="https://github.com/user-attachments/assets/d3245889-597d-44e2-9850-f20907e42056"
/>
Installation is now in a side panel with the intention that it'll just
be a single click to install integrations that involve multiple parts
<img width="400" height="955" alt="image"
src="https://github.com/user-attachments/assets/71903b61-6bd2-486c-903e-b48ae2133887"
/>
## To test
- Verify that you can install the integration and everything else should
be status quo
- Verify that everything should be status quo if the flag is off
## What kind of change does this PR introduce?
UI update that resolves DEPR-114. Also resolves DEPR-113.
## What is the current behavior?
- The breadcrumbs on the file explorer have some rough edges in column
view
- Fancy hide/show behavior
- Hidden tap targets
- `FileExplorerHeader` actions can overflow on the x-axis
- The Navigate button is only shown on hover
- The inline Navigate flow does not work well on smaller screens
## What is the new behavior?
- Column view now shows the same in-explorer breadcrumb trail as list
view
- The active breadcrumb is visually emphasized, while inactive
breadcrumbs remain clickable
- The back affordance now uses a clearer arrow treatment with a stronger
separator from the breadcrumb trail
- The Navigate button is permanently visible and moved to the right-side
action group before Reload
- Navigate now opens a dialog on both desktop and mobile
- Added typed telemetry so we can measure `Navigate` usage before
deciding whether to keep or remove it
- Fixed header overflow by letting the full header contents scroll
horizontally together instead of visibly spilling out
| Before | After |
| --- | --- |
| <img width="947" height="997" alt="Buckets Storage AWS Healthy
Toolshed Supabase"
src="https://github.com/user-attachments/assets/fa53fdd4-954c-4832-bf9b-210b63ae020b"
/> | <img width="947" height="997" alt="Buckets Storage AWS Healthy
Toolshed Supabase"
src="https://github.com/user-attachments/assets/3689a0e5-97d1-4b36-a2dd-7adce23add5d"
/> |
| <img width="864" height="997" alt="Buckets Storage AWS Healthy
Toolshed Supabase"
src="https://github.com/user-attachments/assets/ad559118-205f-40e2-b3c5-97cef462d5f5"
/> | <img width="864" height="997" alt="Buckets Storage AWS Healthy
Toolshed Supabase"
src="https://github.com/user-attachments/assets/9c569b29-7c58-4a33-b809-34d6ed919008"
/> |
## Additional context
Also added a link to the `Buckets` portion of the `PageHeader`
breadcrumb:
```text
Files > Buckets > MyBucketName
```
It goes to the same place as Files because the root Files page lists
buckets, but having both links there feels more ergonomic in practice.
---------
Co-authored-by: Ali Waseem <waseema393@gmail.com>
## Problem
When scrolling down in a column that has more than 200 items to trigger
its lazy loading, while other columns are displayed and the targeted
column isn't the last one, it doesn't load its items.
Fixes#43799
## Solution
- Don't rely on the storage state for opened folders for the lazy
loading
- Add the item path information to the column and use it to define the
API request path
## How to test
- create a bucket
- create a folder and upload more than 200 items in it
- in this folder, create a sub folder and upload more than 200 items in
it (make sure its name position it _before_ the files)
- refresh the page
- without scrolling the first column, select the subfolder
- now scroll down on the first column past the last of its items and
verify it loads more items
- do the same on the sub folder column
To easily create many files to upload, use the following commands:
For root folder:
```sh
for i in {0..300}
do
echo hello >"root_$(printf "%03d" "$i").txt"
done
```
For sub folder:
```sh
for i in {0..300}
do
echo hello >"sub_$(printf "%03d" "$i").txt"
done
```
## What kind of change does this PR introduce?
UI update.
## What is the current behavior?
The webhook endpoint details view showed all mock deliveries in a single
table with a Studio-specific sortable header treatment, no pagination,
and uneven row heights when the retry action was absent.
## What is the new behavior?
Moves the deliveries table onto TanStack table state, adopts the shared
`TableHeadSort` header UI, keeps the existing delivery search, and adds
simple previous/next pagination controls at the bottom. The mock
deliveries are expanded so pagination and sorting can be exercised in
both organisation and project flows, and the actions column now reserves
a consistent button footprint so every row keeps the same minimum
height.
| Before | After |
| --- | --- |
| <img width="1728" height="997" alt="Webhooks Settings Chisel Toolshed
Supabase-A4712323-6FD9-471B-B1F4-234B20686018"
src="https://github.com/user-attachments/assets/2745e5fd-1ef7-4f3a-872c-1fd8d10dce41"
/> | <img width="1728" height="997" alt="Webhooks Settings Chisel
Toolshed Supabase-D482241B-F324-4EA2-9B89-133AD5E10F17"
src="https://github.com/user-attachments/assets/5bfcefd8-cb58-46c0-a863-dcf80e4da4a3"
/> |
## Additional context
This keeps the view on the Data Table path now, while aligning the
sortable headers with the design-system table pattern instead of the
older Studio-local `DataTableColumnHeader` helper.
Bug fix
## What is the current behavior?
When a user deletes a project, the `useProjectDetailQuery` in
`RouteValidationWrapper` returns an error (HTTP 404) because the project
no longer exists. This triggers the `isErrorProject` effect, which shows
a "You do not have access to this project" toast and redirects to the
home page — even though the user intentionally deleted the project.
## What is the new behavior?
The error's HTTP status code is checked before showing the toast. A 404
response (project not found / deleted) silently redirects without
showing the misleading access-denied toast. The toast is still shown for
other error codes (e.g. 403 Forbidden), where the "no access" message is
accurate.
## Additional context
Resolves FE-2831
## Problem
- SQL snippets modals still uses `formik` and we want to remove it in
favour of `react-hook-form` to keep only one form library
## Solution
- Migrate to `react-hook-form`
## Problem
- Disk size configuration modal still uses `formik` and we want to
remove it in favour of `react-hook-form` to keep only one form library
## Solution
- Migrate to `react-hook-form`
## How to test
Haven't found a way to test locally except by temporarily inverting
conditions in `apps/studio/pages/project/[ref]/database/settings.tsx` at
L57 and checking the API request payload in the network tab.
---------
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
## Problem
- observability report modals still uses `formik` and we want to remove
it in favour of `react-hook-form` to keep only one form library
## Solution
- Migrate to `react-hook-form`
## What kind of change does this PR introduce?
UI improvements. Resolves DEPR-419.
## What is the current behavior?
- `ColumnList` splits type information across separate `Data Type` and
`Format` columns, which makes scanning less efficient
- The list only surfaces a limited subset of column metadata up front,
so key structural information like primary keys, foreign keys,
uniqueness, and identity is not easy to scan
- Constraint and nullability affordances are not aligned with the visual
language already used in the Table Editor and Schema Visualiser
## What is the new behavior?
- `ColumnList` now shows a leading type affordance icon, while keeping
the exact Postgres type visible in the `Type` column
- The standalone `Data Type` column is removed, and `format` is now the
primary textual type shown in the table
- The `Constraints` column now surfaces explicit icon-plus-label tokens
for:
- `Primary`
- `Foreign key`
- `Unique`
- `Identity`
- `Nullable` / `Non-nullable`
- Constraint tokens use a purpose-built segmented style based on
`ComputeBadge`, including a green primary variant for primary keys
- Nullability now matches Schema Visualiser semantics exactly: outlined
diamond for nullable, filled diamond for non-nullable
- Existing search, descriptions, row actions, and permission gating are
preserved
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## Context
Refactors the Table Editor's `ColumnEditor` to use the latest UI
components, and fix some UI oddities along the way
## Bug fixes
- Fix header text vertical alignment
- Before:
<img width="325" height="59" alt="image"
src="https://github.com/user-attachments/assets/e4bc07d4-2630-4a86-a87c-4bbbf94e2f52"
/>
- After:
<img width="351" height="74" alt="image"
src="https://github.com/user-attachments/assets/d0a0a246-59b6-4d19-8674-8cc5eb33772c"
/>
- Fix closing a toast would close the panel as well
- Can verify by creating a new column, then hitting save without
entering anything. Will trigger some error toasts and closing them will
close the panel too
- Fix tooltips on "is nullable" and "is unique" showing up irregardless
if "is primary key" is toggled on or off
### Changes
- (shouldFetch): `!org.billing_partner` - prevents the unnecessary API
call to fetch the customer profile for partner orgs.
- (early return guard): `org.billing_partner` - returns null (hides the
banner) when the org has a billing partner.
## What kind of change does this PR introduce?
UI improvements
## What is the current behavior?
- The database tables list and columns list use inconsistent page shells
and table primitives
- The child columns page has weaker information hierarchy and row
actions than the parent tables page
- Responsive column priority on the tables list does not reflect the
most important data on smaller breakpoints
- Table actions and counts are harder to scan than they should be
## What is the new behavior?
- Both pages now use `PageLayout` with matching large-width content
containers
- `ColumnList` now uses the latest `ui` Table primitives instead of the
legacy cleaned-up-later table
- Both pages now show totals in a table footer
- `ColumnList` now uses a tiny filter input, case-insensitive filtering,
inline descriptions under the name, and a primary `Edit` button with
overflow actions
- `TableList` now has improved responsive column priority:
- smallest breakpoint keeps `Rows`
- `Columns` appears from `sm`
- `Size` appears from `lg`
- `Realtime Enabled` appears from `2xl`
- `TableList` now uses `View columns` as the CTA, removes the ambiguous
icon from that CTA, restores the entity icon from `sm` upwards only, and
tightens the name column on the smallest breakpoint only
- Boolean icon columns are right-aligned consistently, with the same
Realtime icon tones applied to both `Realtime Enabled` and `Nullable`
- The columns detail page now uses breadcrumbs for navigation back to
Tables instead of an inline back button
| Before | After |
| --- | --- |
| <img width="1728" height="997" alt="Tables Database Mallet Toolshed
Supabase-0E0E3DE0-4EA1-407F-88D4-B85664D26D8E"
src="https://github.com/user-attachments/assets/3a2e265c-394e-432c-8c29-12317b60fda8"
/> | <img width="1728" height="997" alt="Tables Database Mallet Toolshed
Supabase-C8FC339C-E9DA-4ADB-8458-C7EFF55F2AEC"
src="https://github.com/user-attachments/assets/50c83a3f-a70c-4d09-a8c3-1eeaed68b68b"
/> |
| <img width="1728" height="997" alt="Tables Database Mallet Toolshed
Supabase-FE9196A0-BEAF-4BA5-8A2C-06F934A62C38"
src="https://github.com/user-attachments/assets/707a564a-e764-45ac-8470-8532e22d39bc"
/> | <img width="1728" height="997" alt="Tables Database Mallet Toolshed
Supabase-36E93C1E-7943-4C98-8119-CAF48E2FE5BA"
src="https://github.com/user-attachments/assets/4cba5791-a4d7-4f43-aea0-8277b2ec5d28"
/> |
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## 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?
Investigation by claude, validated!
- Before (Formik): The old form used `<Form
initialValues={INITIAL_VALUES} validationSchema={...}>` Formik does not
unregister hidden fields — all fields from initialValues stay in form
state with their initial values, so hidden required fields still pass
validation because they retain their default values (e.g., the OTP
expiry/length numbers from the config).
- After (react-hook-form): The new form uses useForm({ shouldUnregister:
true }). This explicitly removes fields from form state when their
components unmount. When Twilio Verify is selected, the three hidden
fields are unmounted, their values become undefined, and yup's
unconditional .required() fails silently.
this bug was introduced today by PR #44095, the
Formik-to-react-hook-form migration.
## Problem
Users cannot create nor edit foreign keys when editing a table or a
column from the schema visualiser
## Solution
The foreign key edition component is always reading the current table
from the URL parameters. However, in the context of the schema
visualiser, the parameter does not exist.
Allows to override it from the side panel editor context
## How to test
- Create two tables
- Go to the schema visualiser and edit one of the table
- Click the _Add foreign key relation_ and add a foreign key to the
other table
- Edit one of the foreign key column
- You should be able to edit the relation
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES/NO
## What kind of change does this PR introduce?
fixes: #37454
The context menu on the FK row is a lie, its just exposing the cell
underneath. Ideally this should have its own context menu, right now we
only support copy operations.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
kemal