Commit Graph
61 Commits
Author SHA1 Message Date
Ali WaseemandDanny White 712cf7e60b feat(storage): add keyboard shortcuts for storage screens (#45837)
## Summary

Adds keyboard shortcuts to the Storage section, mirroring the
conventions already established for Auth Users and Database pages:

- **Storage navigation chords** (`S, F` / `S, A` / `S, V` / `S, 3`)
active only inside `StorageLayout`.
- **Files (bucket list) page** shortcuts for search, create, refresh,
reset filters, reset sort.
- **Storage Explorer** shortcuts for upload, new folder, view toggle,
refresh, search, multi-select download/move/delete, and an Escape
ladder.
- `ShortcutTooltip` wired into the relevant buttons so users can
discover keybinds on hover.
- Reload spinner is now driven by a shared store flag, so it shows
whether you click the button or fire the shortcut.

## Test plan

### Storage navigation chords
Active anywhere under `/project/<ref>/storage/*`.

| Keybind | Action |
|---------|--------|
| `S` then `F` | Go to Files |
| `S` then `A` | Go to Analytics buckets (platform + feature-flagged) |
| `S` then `V` | Go to Vector buckets (platform + feature-flagged) |
| `S` then `3` | Go to S3 settings (platform only) |

### Files (bucket list) page
At `/project/<ref>/storage/files`.

| Keybind | Action | Notes |
|---------|--------|-------|
| `Shift+F` | Focus search ("Search buckets") | Selects existing text |
| `Shift+N` | Create new bucket | Opens the create-bucket modal |
| `F` then `C` | Reset filters | Clears the search string |
| `Shift+R` | Refresh buckets | Refetches the bucket list |
| `S` then `C` | Reset bucket sort | Only fires when sort ≠ default
(Created at) |

### Storage Explorer (inside a bucket)
At `/project/<ref>/storage/files/buckets/<bucketId>`.

| Keybind | Action | Notes |
|---------|--------|-------|
| `Shift+F` | Focus search ("Search files") | Opens the search input if
hidden, then focuses |
| `Shift+R` | Refresh | Refetches all opened folders; spinner reflects
state |
| `I` then `F` | Upload files | Disabled w/o ` STORAGE_WRITE ` or at
bucket root with no folder |
| `I` then `N` | Create folder | Same permission gates as Upload |
| `V` then `C` | View as columns | |
| `V` then `L` | View as list | |
| `Shift+D` | Download selected | Only fires when ≥1 item selected;
single vs many handled |
| `Shift+M` | Move selected | Only fires when ≥1 item selected AND `
STORAGE_WRITE ` granted |
| `Mod+Backspace` | Delete selected | Only fires when ≥1 item selected
(` Mod ` = ⌘ on macOS / ` Ctrl ` on Win/Linux) |
| `Escape` | Clear selection | If ≥1 item selected |
| `Escape` | Close file preview | If no selection and preview pane open
|
| `Escape` | Close search | If no selection, no preview, and search is
open |

### Tips while testing
- [x] Chords (two-key sequences): press the first key, release, then
press the second key within ~1s
- [x] Hover any wired button (search, Refresh, Upload, Create folder,
View, Download, Move, Delete, the bucket Create button, sidebar items)
to see the keybind in a tooltip
- [x] Most actions also appear under "Shortcuts" in `Cmd+P`
- [x] Chords starting with a plain letter (` S, F ` / ` I, F ` / ` V, C
` / ` F, C ` / ` S, C `) won't fire while typing in an input — click out
first
- [x] `Escape` does fire from inside the search field (closes the
search)
- [x] `Cmd+/` opens the full shortcuts reference

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

* **New Features**
* Keyboard shortcuts added across Storage: buckets (refresh, clear sort,
create, search), explorer (upload, create folder, refresh, download,
move, delete, clear search), and navigation shortcuts for
Files/Analytics/Vectors/S3.
* **UI**
* Shortcut keytips/tooltips added to relevant buttons and menu items for
discoverability.
* **Documentation/Tests**
  * Shortcut reference sheet labels updated and covered by a new test.

[![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/45837)
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
2026-05-13 08:26:04 -06:00
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
Ivan Vasilov 35905e70d5 feat: Add a logo picker for OAuth app creation sheet (#44995)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Logo field now accepts/editable logo URL, plus a new storage-based
Logo Picker to select or remove images from project storage.
* Full storage picker: browse buckets, columns/list views, search,
drag‑and‑drop uploads, file previews (image/audio/video), and
single-file selection with responsive mobile/desktop layouts.

* **Refactor**
* Logo submission streamlined to send the provided URL directly (legacy
file-read/upload flow removed).
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-06 16:44:18 +02: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
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
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 416210d666 chore: remove _Shadcn_ suffix for Checkbox and Radio components (#45263)
## Problem

With #45211 and #45218 merged, we don't need the `_Shadcn_` suffix
anymore

## Solution

- [x] Remove the `_Shadcn_` suffix 
- [x] Update exports and imports 

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

## Summary by CodeRabbit

* **Refactor**
* Standardized UI component exports by removing legacy naming
conventions and providing direct imports for checkbox and radio group
components throughout the design system.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-27 11:07:06 +02:00
Gildas Garcia 502c098d90 chore: migrate old <Checkbox /> usage to the new Shadcn component (#45211)
## Problem

We want to reduce the code we ship and maintain.

## Solution

Migrate old `<Checkbox />` usage to the new Shadcn component.
There's one visual change: no more green background or outline.

## Screenshots

### On `apps/www`

Before:
<img width="1095" height="772" alt="image"
src="https://github.com/user-attachments/assets/b14a0477-d8ac-4ae5-a1c3-63657609e4e5"
/>

After:
<img width="1085" height="766" alt="image"
src="https://github.com/user-attachments/assets/f4c2156c-38e1-4834-b013-e39b8c3dd76e"
/>


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

* **Refactor**
* Unified checkbox appearance and behavior across the app for consistent
toggles, labels, and interactions.

* **Bug Fixes**
* Fixed selection issues including shift-select edge cases and
click-propagation in lists; added ARIA labels for improved
accessibility.

* **Chores**
* Removed legacy checkbox implementation, associated styles, tests, and
deprecated theme entries.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-24 17:38:01 +02: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
Alaister YoungandAlaister Young c31230a90e chore(studio): remove @headlessui/react dependency (#44845)
Remove `@headlessui/react` as a direct dependency from both
`apps/studio` and `packages/ui`. It's incompatible with React 19 (at the
pinned v1 version) and overlaps with our existing Radix/shadcn
primitives.

The only usage was the `<Transition>` component in 3 files + a dead
`Overlay` component in `packages/ui`.

**Removed:**
- `@headlessui/react` from `apps/studio/package.json` and
`packages/ui/package.json`
- Dead `packages/ui/src/lib/Overlay/` directory (not exported or
imported anywhere)

**Changed:**
- `ChooseFunctionForm.tsx` — replaced `Transition` with a shadcn
`Accordion` for the "View definition" toggle
- `FileExplorerColumn.tsx` — replaced `Transition` with `framer-motion`
`AnimatePresence` for drag-over overlay
- `PreviewPane.tsx` — removed `Transition` wrapper entirely (wasn't
visually animating on prod), replaced with simple conditional render

Note: `@headlessui/react` will remain in `pnpm-lock.yaml` as a
transitive dependency of `@graphiql/react` and
`@graphiql/plugin-doc-explorer` — that's expected and not something we
control.

## To test

- **Triggers page** (`/dashboard/project/_/database/triggers`): Create
or edit a trigger, click "Choose a function" to open the side panel.
Click "View definition" on a function row — the SQL definition should
expand/collapse with a smooth height animation. Clicking the row itself
should still select the function.
- **Storage explorer**
(`/dashboard/project/_/storage/buckets/<bucket>`): Navigate into a
folder, drag a file over the column — the drag overlay should fade
in/out smoothly.
- **Storage file preview**
(`/dashboard/project/_/storage/buckets/<bucket>`): Click on a file — the
preview pane should appear on the right (no animation, same as current
prod behaviour).

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

* **Refactor**
* Replaced several transition wrappers with new animation/mounting
behavior for overlays, preview panes, and drag-over UI to improve
consistency and responsiveness.
* Swapped the function-definition toggle for an Accordion and updated
click handling to prevent accidental row selection.
* Removed the legacy overlay component, its context, and associated
overlay styling.

* **Chores**
  * Removed HeadlessUI dependency from project packages.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
2026-04-14 17:51:29 +09:00
Ali Waseem 26b3db8302 fix: remove API Docs nav item after transition period (#44637)
## Summary

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

## Test plan

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

Resolves FE-2759

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

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

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

* **Tests**
* Tests updated to stop depending on the removed feature-flag behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-08 14:40:05 +00:00
Charis 205cbe7d26 chore(studio}: enforce import order, remove bare import specifiers (#44585) 2026-04-07 20:34:10 -04:00
Ivan VasilovandClaude Opus 4.6 3f9765e2f8 refactor(studio): migrate all react-contexify usage to ContextMenu_Shadcn_ (#44520)
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Refactor

## What is the current behavior?

Studio uses `react-contexify` (an imperative, ID-based context menu
library) for right-click menus in the Table Editor grid, Log Table, and
Storage file explorer. This requires `createPortal` workarounds, a
separate CSS file, and has known bugs with fragment rendering.

## What is the new behavior?

All context menus now use the declarative `ContextMenu_Shadcn_`
(Radix-based) component that is already the standard across Studio. Each
context menu wraps its trigger element directly, removing the need for
imperative `show()` calls, portal hacks, and menu ID constants. The
`react-contexify` dependency and all associated styles are removed.

**Changes by area:**
- **Grid row context menu**: `RowRenderer` wraps each `<Row>` with
`ContextMenu_Shadcn_`. `RowContextMenu` refactored to accept `row`
directly as a prop instead of looking it up by index.
- **Log table**: Row renderer wraps each row with a context menu for
"Copy event message". Removes `cellPosition` state and `createPortal`.
- **Storage**: `FileExplorerRow` reuses its existing `rowOptions` array
for both the dropdown and context menu. `FileExplorerColumn` inlines the
column menu (new folder, select all, view/sort submenus). Three
standalone context menu files deleted.
- **Cleanup**: Removed `react-contexify` from `package.json`, deleted
`contextMenu.scss`, removed styles from `grid.scss`.

## Additional context

Net -370 lines. Follows the TODO comment in `CellContextMenuWrapper.tsx`
and the existing eslint ban on `react-contexify` imports.

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

* **Refactor**
* Replaced legacy right-click menus with a unified shadcn-style context
menu across grids, logs, and the storage explorer.
* Simplified row/column/item context menu behavior and copy actions;
menus now mount and trigger more reliably.

* **New Features**
* Added row-level context menu providers to ensure consistent triggering
and positioning for row actions.

* **Chores**
  * Removed legacy context-menu styles and deprecated menu components.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-07 13:46:29 +02:00
Ivan VasilovandClaude Opus 4.6 cccae29569 refactor(studio): extract storage preferences into useStoragePreference hook (#44519)
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Refactor

## What is the current behavior?

Storage explorer preferences (`view`, `sortBy`, `sortByOrder`,
`sortBucket`) are managed inline within the Valtio proxy state in
`storage-explorer.tsx`, which reads/writes localStorage directly.

## What is the new behavior?

Preferences are extracted into a dedicated `useStoragePreference` hook
backed by `useLocalStorage`. A companion `getStoragePreference` function
allows the Valtio state to read sort options imperatively for API calls
without holding preference data itself. Consumers import the hook
directly instead of reading preferences from the snapshot.

## Additional context

No behavioral or visual changes — localStorage key and data shape are
unchanged.

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

* **New Features**
* Storage view and sorting preferences now persist per project and drive
the explorer UI.
* Changing view or sort preferences refreshes folder contents and clears
the open file preview.

* **Chores**
* Centralized preference handling for consistent behavior across the
storage explorer.

* **Tests**
  * Updated tests to exercise the new preference-backed behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-03 17:28:56 +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
Danny WhiteandAli Waseem 12a43e5aba chore(studio): storage file explorer breadcrumbs (#43844)
## 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>
2026-03-30 13:14:27 +11:00
Gildas Garcia 753638caf4 fix: storage explorer column infinite loading loads the wrong column (#44275)
## 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
```
2026-03-27 16:55:15 +01:00
Gildas Garcia 63c63d57e3 chore: use react-hook-form in Storage custom expiry modal (#44245)
## Problem

- Storage custom expiry 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`

## Screenshots

Before:
<img width="443" height="235" alt="image"
src="https://github.com/user-attachments/assets/c9e10fa5-a618-4287-bc13-ca40ce41af10"
/>
<img width="438" height="335" alt="image"
src="https://github.com/user-attachments/assets/bf903eaf-0c31-4150-a17d-32a616dde7cc"
/>

After:
<img width="417" height="290" alt="image"
src="https://github.com/user-attachments/assets/be12f39e-0f1f-46cb-a442-82553b0a77e6"
/>
<img width="443" height="342" alt="image"
src="https://github.com/user-attachments/assets/4f537259-d3f6-4664-a1a1-f4a921c6a26c"
/>
2026-03-27 12:31:33 +01:00
048dd32861 feat(studio): add app id and installation id to private apps metadata (#44126)
## 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?

Small follow up to add these two rows on @phamhieu request:

<img width="585" height="175" alt="Screenshot 2026-03-24 at 11 18 27"
src="https://github.com/user-attachments/assets/5c08f8d4-e63e-491c-8731-db4b40e63ca7"
/>

---------

Co-authored-by: Ali Waseem <waseema393@gmail.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-03-24 16:52:58 +01:00
Gildas Garcia c473cf0720 fix: storage copy url include the opened folder for files that are not in it (#43875)
Fixes #42357
Supersedes #42364

## Problem

When copying the URL of a file that is not in the currently opened
folder, the folder path is still included in that file URL.

## Solution

We actually always have the file path, use it directly instead of
rebuilding it from the storage explorer state

## How to test

1. Create a bucket and upload a file in it
2. Create a folder and upload a file in it

While the folder is selected, right click the root file uploaded in 1
and copy its URL. It should not contain the folder name. Same with the
dropdown menu that appears when hovering the file.
2026-03-17 18:12:28 +01:00
Danny White 89895a7286 chore(studio): file explorer rows (#43845)
## What kind of change does this PR introduce?

UI touch-up

## What is the current behavior?

Explorer rows in file storage is a bit rough around the edges.

## What is the new behavior?

- Consistent loaders
- Consistent icons

Also includes:

- Fix to `stroke-width` on files-bucket.svg as documented in icons.mdx

| Before | After |
| --- | --- |
| <img width="1024" height="563" alt="Buckets Storage AWS Healthy
Toolshed Supabase"
src="https://github.com/user-attachments/assets/055518b2-6d93-4c9d-879b-6e7dd51e0620"
/> | <img width="1024" height="563" alt="Buckets Storage AWS Healthy
Toolshed Supabase"
src="https://github.com/user-attachments/assets/fae05446-95d9-4ca1-b441-7cd39d1c6036"
/> |
2026-03-17 15:47:25 +08:00
Charis 8732fc3bd9 fix: add multi-object download signing for storage (#43576)
Bug fix

## What is the current behavior?

Read-only users cannot download files because the download feature
requires minting a temporary API key, which is properly blocked for
read-only users.

## What is the new behavior?

Instead of using temporary API keys, we now create signed URLs for the
files to be downloaded. We batch-create signed URLs for an entire
folder's worth of files, requiring only a single management API call,
then use those signed URLs to download the files. This allows read-only
users to download files without needing elevated permissions.

## Additional context

Resolves FE-2737
2026-03-09 16:49:59 -04:00
Joshen Lim 9b0dc8d9b9 Chore/fix storage explorer when switching buckets (#43541)
## Context

Taking a slightly different approach to [this
PR](https://github.com/supabase/supabase/pull/43370)

Original problem was that if you opened some folders while in a bucket
and then switched to a different bucket, the folder UI will persists
(folders from Bucket A will render when landing on Bucket B)

## Changes involved
- Shift `StorageExplorerStateContextProvider` into `[bucketId].tsx]`
instead of `ProjectContext`
- The valtio store here only applies for the storage explorer so having
it so high in the project's context was unnecessary
- This also just implies that the valtio store will automatically reset
whenever the bucket changes
- Simplify storage explorer valtio store by initializing the store with
the bucket
- We'll initialize the selected bucket with the store now (Same as
previous PR)
- Removes unnecessary `setSelectedBucket` method which required a
separate `useEffect` in `StorageExplorer.tsx`

## To test
- [ ] Verify that the original is resolved
- [ ] General smoke test of the storage explorer - i've also re-added
the e2e test that Gildas wrote up in his PR
2026-03-09 14:32:34 +07:00
Joshen Lim 4a173eea60 Revert "fix: storage view is not reset when switching buckets" (#43539)
Reverts supabase/supabase#43370
2026-03-09 11:17:43 +07:00
Gildas GarciaandJoshen Lim 9ce3bdf552 fix: storage view is not reset when switching buckets (#43370)
## Problem

When navigating between buckets after having selected a folder, the
storage view shows the previous folder content.

## Solution

Set the selected bucket before navigating to it, preventing a race
condition with Valtio updates and the effect that loads the bucket
content.

## How to test

1. Create 2 buckets
2. In one of them, create a folder and upload some files
3. Go back to the bucket list
4. Open the other bucket

Results:
- It should not show the previous bucket content anymore
- It should not show an empty 2nd column either

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-03-05 12:10:46 +01: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
Charis b8b14f06e0 refactor: move storage utils out of valtio + write tests (#43225)
Refactor

## What is the current behavior?

Many utility functions are in the Valtio object which is overly large
and complex.

## What is the new behavior?

Some utility functions are moved out and tested. No behaviour has been
changed, they've just been moved with any necessary changes to
arguments.
2026-02-27 10:42:07 -05: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
Danny White da1a02752e fix(studio): colour contrast for selected file storage item (#42668)
## What kind of change does this PR introduce?

- Fix
- Resolves DEPR-334

## What is the current behavior?

Not enough colour contrast on selected item. It’s hard to tel what’s
selected, especially on light mode.

## What is the new behavior?

Updated the storage explorer row styling to use `bg-selection` for
selected, opened, and previewed rows, which increases contrast in light
mode.

| Before | After |
| --- | --- |
| <img width="1166" height="759" alt="Buckets
Supabase-60C5BBB5-FB94-44AA-9435-E9610ACB25AA"
src="https://github.com/user-attachments/assets/4f6071eb-70de-4389-89bf-3f3d127d32a9"
/> | <img width="1166" height="759" alt="Buckets Supabase"
src="https://github.com/user-attachments/assets/7c3d7f53-a340-4718-8224-e5a3bb184181"
/> |


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

## Summary by CodeRabbit

* **Style**
* Updated file explorer row background styling to provide consistent
visual feedback for opened, previewed, and selected item states in the
storage interface.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-02-11 17:06:24 +11:00
CharisandAli Waseem 5b83b714b9 fix(studio): remove bucket list query for useSelectedBucket (#42114)
* fix(studio): use paginated buckets query for useSelectedBucket

Part of the effort to migrate all buckets list queries to the paginated
version. This migrates the useSelectedBucket hook, which is used on the
bucket details page to fetch the bucket info.

* fix(studio): flash of stale content when switching buckets

There's a flash of stale content when switching between buckets in the
File Explorer. This happens since the change to useSelectedBucket,
because when the bucket changes, the new data is no longer available
immediately. It must be awaited, and meanwhile `columns` in global
storage state is stale. This commit adds a check for whether the state
is stale by checking the current ID against the stored ID.

---------

Co-authored-by: Ali Waseem <waseema393@gmail.com>
2026-01-27 09:41:47 -05:00
Joshen Lim 670b294615 Add error handling for deleting files in storage explorer (#42200)
* Add error handlign for deleting files in storage explorer

* Also error handle for deleteing folder

* Clean
2026-01-27 20:02:44 +08:00
Joshen Lim ea8649b1a1 Validate against empty name in FileExplorerRowEditing.tsx (#42093)
* Validate against empty name in FileExplorerRowEditing.tsx

* Update test

* Fix

* Opt to revert changes if saving empty string

* Nit

* Attempt to write tests with claude

* Trim whitespace in FileExplorerRowEditing when saving
2026-01-26 13:24:29 +08:00
Danny White fa9b22a171 fix(studio): StorageExplorer overflow on PreviewPane (#41918)
fix overflow
2026-01-15 19:08:53 +11: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
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
Ali WaseemandIvan Vasilov 3f6f8aa906 Fix: Use storage API for downloading files in the Dashboard (#40592)
* added ability to download files from storage api directly

* updated to rechange size

* updated test methods

* updated test suite

* updated tests

* updated to remove loops

* removed AI slop

* Updated to use single API key in mem

* Fix the memoization of the getOrRefreshTempApiKey function.

* updated imports

* updated imports

* updated to use import meta

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2025-11-19 11:56:04 -07:00
b164da4392 Improve time to FCP for storage files explorer (#40514)
* Improve time to FCP for storage files explorer

* fix: useEffect stale closures

---------

Co-authored-by: Ali Waseem <waseema393@gmail.com>
Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
2025-11-19 16:51:00 +08:00
Joshen LimandAlaister Young 8b5a087eb7 Joshen/depr 262 bucketid route needs to handle if a bucket doesnt exist (#40430)
* Handle landing on a bucket id that doesnt exist in project

* Standardize re routing behaviour for files bucket

* refactor

---------

Co-authored-by: Alaister Young <a@alaisteryoung.com>
2025-11-14 15:25:59 +08:00
47e1134a1d feat: Vector buckets - initial work (#39597)
* Initial work on vector buckets.

* Add more queries and UI.

* chore(studio): vector buckets contents (#39705)

* language

* match analytics buckets

* shared empty state

* proper loading state

* create dialog cleanup

* simplify copywriting

* proper details

* filtering

* use real data

* chore(studio): vector buckets polish A (#39759)

* empty state

* better checks

* bucket name in sheet

* fix typo

* sheet improvements

* rename vector index to vector table

* cleanup

* More work on the vector indexes.

* Add delete for bucket and indexes. Create index should now work.

* chore(studio): vector buckets polish B (#39794)

* loading

* delete modal

* fix modal behaviour

* Add modal for deleting vector buckets.

* Bring back the shimmering loader.

* chore(studio): vector buckets polish C (#39887)

* fix bucketname on deletion dialog

* empty states

* remove extraneous padding

* proper loading and not-found cases

* Minor fixes.

* Minor updates to the vector components.

* Add more instructions to the cursor rules.

* Some refactors and shifting files around

* Refactor analytics buckets detial to improve time to fcp

* Fix

* Refactors + simplify

* Last few nits, just leaving comments

* If the bucket is not empty, delete all indexes first.

---------

Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-11-04 15:25:46 +01:00
Joshen LimandDanny White 1f9906aab3 Use new Storage UI layout (#40076)
* First pass of deprecating old storage UI components

* Clean up local-storage flag for new storage UI

* Add coming soon UI for analytics and vector buckets pages

* Set up warning states for analytics buckets

* fix spelling and margin

* Smol fix

* nit

* Surface wrappers upgrade check in UI instead of toast

* Nit clean up

* update tests

---------

Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
2025-11-04 15:37:30 +08:00
Joshen Lim faf1167bf4 Remove ts nochecks and any typecasts, and have CreateBucketModal use POST analytics-buckets endpoint (#40031)
* Remove ts nochecks and any typecasts, and have CreateBucketModal use POST analytics-buckets endpoint

* Smol fix

* Smol fix

* nit

* Nit

* Nit
2025-11-04 11:43:44 +08:00
Ivan Vasilov 8b657165b5 chore: Migrate to use custom type for ReactQuery queries and mutations (#40073)
* Add custom types for queries, mutations and infinite queries.

* Migrate all queries to use the new type.

* Migrate all infinite queries to useCustomInfiniteQueryOptions.

* Migrate all mutations to use useCustomMutationOptions.

* Add type to all imports in `types` folder.
2025-11-03 13:18:13 +01:00
Joshen Lim 64e3e047eb Final final cleaning up barrel files (#40018)
* Final final cleaning up barrel files

* Fix merge conflict
2025-10-31 14:02:59 +08:00
Charis cfa59dabc8 refactor: use @tanstack/react-virtual for virtualization (#39992)
* refactor(infinite list): use @tanstack/react-virtual for virtualization

Swapping virtualization libraries from `react-window` to
`@tanstack/react-virtual`.

Motivation: we need a completely headless library for maximum
flexibility. `react-window` injects extra DOM elements which makes it
hard to customize styling and placement on elements that are very picky
about their DOM structure, like tables.

* refactor(table editor menu): use new infinite list

* refactor(notifications): use new infinite list

* cleanup(infinite list): remove old infinite list

* refactor(storage menu): use new infinite list & remove react-window deps
2025-10-30 14:27:53 -04:00
Joshen Lim 2c7492eed0 Chore/patch codegen type issues from analytics buckets changes (#39973)
* Patch TS issues from recent analytics buckets changes

* Nit
2025-10-29 21:42:51 +08:00
Joshen LimandDanny White 0910908561 Swap analytics buckets endpoint (#39610)
* Swap analytics buckets endpoint

* Fix type issues

* fix

* Update API types

* Fix tests

* nit

* Final fixes

* Fix

* chore(studio): analytics buckets contents (#39701)

* first commit

* improvements

* misc

* cleanup

* remove tappable whole

* design updates

* analytics improvements

* polish

* add clashed case

* fix pairing status

* connect tables basics

* add multiselect

* restore prod version for non-feature preview users

* fix padding inconsistency

* terminology fix

* better empty state

* fix terminology

* block table connection dialog button

* Nit refactors

* minor nits

* Add comment

---------

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

* Default circumstance to fresh in ImportForeignSchemaDialog

* Hook up connecting tables for analytics buckets (#39906)

* Hook up connecting tables for analytics buckets

* Address comments

* Clean up iceberg wrapper when deleting analytics bucket (#39902)

* Clean up iceberg wrapper when deleting analytics bucket

* Clean up s3 access key when deleting analytics bucket

* Make connect table disabled for now

* Most clean up and refactoring

* Refactor RQ

* Nit

* Refactor

* nit

---------

Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
2025-10-29 19:10:10 +08:00
Danny WhiteandJoshen Lim 44f0eff125 studio(chore): improve analytics bucket page (#39545)
* specialized dialog for analytics (and vector) bucket creation

* handle missing wrapper extension and iceberg wrapper integration

* bucket creation improvements

* extension and integration checks

* dialog header consistency

* simplify bucket dialog creation button trigger

* fix subtitle ternary

* example bucket without dynamic route

* create dynamic segment

* fancy connection table

* improve bucket page

* connection table polish

* polish

* delete bucket modal

* improve missing installations design

* new table modal

* fix copy icon

* copy all env button placeholder

* list all analytics buckets

* specialised bucket modal

* shared installer hooks and components

* make iceberg wrapper not dependent on wrapper extension

There are cases where the Iceberg Wrapper can be installed but the Wrapper extension has since been removed

* better admonition copywriting

* todo

* misc

* simplify

* simplifications

* work within existing page

* improvements to existing route

* v2 tables

* simplify

* new table modal

* change route to thin wrapper

* reduce size of PR

* remove double scaffold element

* minor nits

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-10-17 11:08:04 +11:00
Ivan Vasilov 56d40fe0b2 chore: Migrate eslint for all apps to use flat config (#39486)
* Use the "eslint" command instead of built-in next lint since it's getting obsolete.

* Bump all deps to support eslint 9+.

* Convert the rules in eslint-config-supabase to be flat-config compatible.

* Migrate all apps to use the new eslint config rules.

* Fix all errors found in the new setup.

* Fix the no default exports ignores.

* Scan all files for linting in studio.

* Fix all lint errors.

* Make the reportUnusedDisableDirectives a warning.
2025-10-15 16:35:24 +02:00