mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 18:05:11 +03:00
032c71c5bfa1f4425d2f93072e28fa7d4e9a8321
86
Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
 Ivan VasilovandClaude Sonnet 5
|
12894ddd2a |
feat(studio): migrate storage infinite-query hook to list-v2 (#50730)
## Problem Storage's `list` (v1) endpoint is being deprecated in favor of `list-v2`, which uses cursor pagination instead of numeric offset (which degrades on large buckets) and fixes folders that differ only by case not both being listable. This is PR 1 of the migration (parent: FE-4423); it covers the shared infinite-query hook and its two consumers. ## Solution Added `listBucketObjectsV2` alongside the existing v1 `listBucketObjects` (still used elsewhere, migrated in a later PR), and replaced the `useBucketObjectsInfiniteQuery` hook with `bucketObjectsInfiniteQueryOptions` built on `infiniteQueryOptions`, following the repo's preferred data-fetching pattern. Pagination now uses `hasNext`/`nextCursor` instead of an offset multiplier, and `queryFn` rejects a response that claims `hasNext` without advancing the cursor so a misbehaving backend can't send `fetchNextPage` into an infinite loop. v2 splits results into separate `folders`/`objects` arrays and has no `search` field, so the two consumers (`BucketFilePickerColumn`, `MoveItemsFolderPicker`) merge/sort those arrays themselves, and search is folded into a `prefix` match instead. Also removed "Time last accessed" from the picker's sort dropdown since v2's `sortBy.column` doesn't support it, with a defensive fallback to `name` in case the shared sort preference (still used by the v1 main file explorer) carries that value over. Added the missing self-hosted `list-v2` API proxy route (`pages/api` + the TanStack `routes/api` wrapper) using storage-js's `listV2()`, since self-hosted Studio only had a v1 route and every v2 request was 404ing there. ## Review instructions 1. Open the bucket file picker (e.g. via an OAuth app logo upload), confirm folders and files both render and paginate correctly, and that searching still filters as expected. 2. Open the "Move items" modal's folder picker, confirm you can navigate into and back out of subfolders, and that folder search still works. 3. Run `pnpm test:studio -- MoveItemsModal`. ## Checklist - [x] I have read [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) - [ ] If I wrote a new docs topic or edited an existing topic, I used the `/write-the-docs` or `/edit-the-docs` skill, which references [WORD_LIST](https://github.com/supabase/supabase/blob/master/apps/docs/WORD_LIST.md) and the docs [CONTRIBUTING](https://github.com/supabase/supabase/blob/master/apps/docs/CONTRIBUTING.md) guide 🤖 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** * Storage browsing loads large bucket listings in pages, helping keep navigation responsive. * Folder pickers display folders and files together across paginated results. * Moving items between folders uses the same paginated browsing experience. * Search remains available in the final folder level, and folder navigation shows the correct contents. * **Updates** * “Time last accessed” is no longer available as a sorting option in storage pickers. Sorting is available by name, creation time, or update time. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com> |
||
|
Danny White
|
ec53175b8a |
refactor(ui): rename text-brand to text-primary (#50564)
## What kind of change does this PR introduce? Refactor. Follow-up to #49871. ## What is the current behavior? Branded (green) text still uses the `text-brand` classname while the colour comes from `--primary`. ## What is the new behavior? **Rename-only:** `text-brand` → `text-primary` across callsites and docs. Leftover `bg-brand` / `border-brand` alias to `brand-default`. No intentional colour changes in this PR. This better matches how we treat our green in other components and props, like `variant="primary"` for green buttons. ## To test On light mode: smoke-test that branded text still looks like #49871 (readable green, not the bright fill). - [Homepage](https://zone-www-dot-com-git-dnywh-depr-316-text-brand-de2380-supabase.vercel.app/): “Scale to millions” uses `text-primary` - [Docs homepage](https://docs-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/docs): branded links like “More on self-hosting” are still readable - [Typography docs](https://design-system-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/design-system/docs/typography): documents `text-primary` - [Colour usage](https://design-system-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/design-system/docs/color-usage): `text-primary` is visibly darker than `bg-brand-default` _on light mode_ - [Studio auth providers](https://studio-staging-git-dnywh-depr-316-text-brand-to-60fa6c-supabase.vercel.app/dashboard/project/_/auth/providers): enabled provider badge text readable; status dot stays bright green <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Updated branded text, link hover states, icons, badges, indicators, and highlighted content across the Design System, Docs, Studio, Learn, UI Library, and marketing experiences to use the primary theme color. * Updated syntax highlighting and table-of-contents styling for consistent primary-color presentation. * Refined brand color fallback behavior for bright fills and borders. * **Documentation** * Updated color-usage and typography guidance to recommend the primary text utility. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Francesco SansalvadoreandClaude
|
47a532eef7 |
feat(studio): add copy path and copy link row actions (#50480)
| | PR | Base | Branch | | --- | --- | --- | --- | | 1 | #50476 | `master` | pre-existing correctness fixes | | 2 | #50413 | `fix/storage-explorer-listing-and-scroll` | `?path`/`?preview` deep-linking | | 3 | #50478 | `feat/storage-nav-improvement` | end-to-end deep-link test | | 4 | **this PR** | `test/storage-deep-link-e2e` | copy path / copy link row actions | To read the whole change in one view: ```bash git diff master...feat/storage-copy-row-actions -- apps/studio e2e ``` ## What is the new behavior? Both row menus now offer two actions: - **Copy relative path** — the bucket-relative object key, i.e. what `storage.from(bucket)` takes - **Copy link** — the dashboard URL that reopens the item in the explorer **Copy path to folder** is replaced by **Copy relative path**. It produces the same value for a folder and now works for files too, so nothing is lost. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Storage Explorer now provides separate actions to copy a relative path or a direct link for files and folders. * Copied links open the relevant storage location, including folder navigation and file preview details. * Success notifications appear after clipboard copying completes. * **Tests** * Added coverage for file and folder copy actions, generated paths and links, URL encoding, and clipboard behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai --> Co-authored-by: Claude <noreply@anthropic.com> |
||
|
|
d9cfdcd741 |
feat(studio): deep-link folders and files in the storage explorer (#50413)
| | PR | Base | Branch | | --- | --- | --- | --- | | 1 | #50476 | `master` | pre-existing correctness fixes | | 2 | **this PR** | `fix/storage-explorer-listing-and-scroll` | `?path`/`?preview` deep-linking | | 3 | #50478 | `feat/storage-nav-improvement` | end-to-end deep-link test | | 4 | #50480 | `test/storage-deep-link-e2e` | copy path / copy link row actions | ## What is the current behavior? The file explorer doesn't keep track of folder navigation. Files and folders paths aren't shareable ## What is the new behavior? With this PR: - nav state is stored via params - "path" to store folder path (if nested folder paths) - "preview" to store the selected filename - back/forward nav history - file url opens correct folder/file [https://github.com/user-attachments/assets/](https://github.com/user-attachments/assets/528d5c1d-a1b9-4061-9b67-a41dd98716e0)[0cfb7fcc-2c6e](https://github.com/user-attachments/assets/0cfb7fcc-2c6e-4f5a-950d-060c8eb2027b)[528d5c1d-a1b9](https://github.com/user-attachments/assets/528d5c1d-a1b9-4061-9b67-a41dd98716e0)[-](https://github.com/user-attachments/assets/528d5c1d-a1b9-4061-9b67-a41dd98716e0)[4f5a-950d](https://github.com/user-attachments/assets/0cfb7fcc-2c6e-4f5a-950d-060c8eb2027b)[4061-9b67](https://github.com/user-attachments/assets/528d5c1d-a1b9-4061-9b67-a41dd98716e0)[-](https://github.com/user-attachments/assets/528d5c1d-a1b9-4061-9b67-a41dd98716e0)[060c8eb2027b](https://github.com/user-attachments/assets/0cfb7fcc-2c6e-4f5a-950d-060c8eb2027b)[a41dd98716e0](https://github.com/user-attachments/assets/528d5c1d-a1b9-4061-9b67-a41dd98716e0) ## Steps to review - Open bucket in Storage File Explorer - navigate between files and folders and notice url params change - reload page, it should reopen where you left off - hitting back/forward on the browser history should follow file/folder navigation history --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com> |
||
|
Francesco SansalvadoreandClaude Opus 5
|
c8a9a7a630 |
fix(studio): correct storage explorer listing pagination and column scroll (#50476)
| | PR | Base | Branch | | --- | --- | --- | --- | | 1 | **this PR** | `master` | pre-existing correctness fixes | | 2 | #50413 | `fix/storage-explorer-listing-and-scroll` | `?path`/`?preview` deep-linking + copy row actions | | 3 | #50478 | `feat/storage-nav-improvement` | end-to-end deep-link test | | 4 | #50480 | `test/storage-deep-link-e2e` | copy path / copy link row actions | To read the whole change in one view: ```bash git diff master...test/storage-deep-link-e2e -- apps/studio e2e ``` ## What is the current behavior? Four independent bugs in the storage explorer, all pre-existing on `master`: - `hasMoreItems` is derived from the *formatted* listing, but `formatFolderItems` drops the `.emptyFolderPlaceholder` — so a full page can format to `LIMIT - 1` and stop pagination a page early. - A failed listing is indistinguishable from an empty folder, so a fetch error reads as "this folder has nothing in it". - `fetchFoldersByPath` commits its result against whichever bucket is selected when the requests resolve. Switching buckets mid-flight files the old bucket's items under the new bucket's name — and because `columns[0].name` then matches, nothing downstream notices and refetches. - The horizontal auto-scroll never runs its guard (`if (fileExplorerRef)` is always truthy), scrolls relatively so repeated runs drift, and depends on the `columns` array identity — so a background refetch yanks the view back to the right. It also scrolls in list view, where there is nothing to scroll. ## What is the new behavior? Each of the above is fixed at its source. Pagination and the exhaustiveness check now compare the raw page length; listings carry an `isComplete` flag; `fetchFoldersByPath` captures the bucket id at entry and discards a stale result; the scroll is absolute, guarded, keyed on `columns.length`, and skipped in list view. Two new test files cover the parts that were silently wrong before: `state/storage-explorer.test.ts` (MSW, the bucket race) and `FileExplorer.test.tsx` (scroll geometry, with the container's layout defined by hand since jsdom reports everything as zero-sized). Both were checked by reverting the fix and confirming they fail. ## Additional context `fetchFoldersByPath` also starts returning `{ missingPaths }` here. Nothing reads it yet — the first consumer is in PR 2 — but it shares a hunk with the `isComplete` work, so separating it would mean two PRs editing the same lines. It is backward-compatible: all three existing call sites ignore the return value. 🤖 Generated with [Claude Code](https://claude.com/claude-code) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Bug Fixes - Improved Storage Explorer column-view scrolling so the newest column remains visible, including when the preview pane opens. - Prevented folder results from a previously selected bucket from appearing after switching buckets during loading. - Improved handling of incomplete or partial folder listings to avoid incorrectly treating failed results as empty folders. - Preserved the correct scroll position when using list view. <!-- end of auto-generated comment: release notes by coderabbit.ai --> Co-authored-by: Claude Opus 5 <noreply@anthropic.com> |
||
|
Francesco SansalvadoreandClaude
|
2db6fbf410 |
test(studio): add e2e coverage for the storage move picker (#50460)
## 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? Tests, plus one small test hook in Studio. ## What is the current behavior? The Storage file explorer's move dialog was recently reworked: the free-text "Path to new directory" input was replaced with an embedded folder picker (folder browsing, bucket-wide folder search, a responsive breadcrumb, and a confirm button that targets the folder currently open). That work shipped with unit and component tests, but nothing exercises it end to end against a real bucket. ## What is the new behavior? New `e2e/studio/features/storage-move.spec.ts` with seven tests: | Test | What it covers | | --- | --- | | moves a file into a folder picked from the explorer | The core path: open the picker, click a folder, confirm, and assert the file left the root and landed in the destination | | offers folders only, never files, as destinations | Files are excluded from the listing entirely | | blocks confirming a move into the folder the file already sits in | The confirm button reports `aria-disabled` when the destination matches the source | | finds a nested folder by search and moves into it | Bucket-wide folder search, including the "`<folder>` in `<location>`" row label | | reports when a search matches no folders | The empty-search message instead of a blank list | | collapses the middle of a deep path into a breadcrumb dropdown | The responsive breadcrumb: bucket and the two deepest folders stay inline, the middle collapses, and picking a collapsed folder navigates to it | | walks back up the path with the up-one-level button | Disabled at the bucket root, and drops the deepest folder otherwise | Supporting changes: - `utils/storage/queries.ts` gains `uploadObject` and `seedBucket`. Storage has no standalone folders — a folder exists because an object sits under that prefix — so seeding a folder tree means uploading objects at the paths a test needs. Doing this through the API keeps setup off the UI, which is both faster and less flaky than clicking through "Create folder" for each level. - `utils/storage/client.ts` accepts a string body so object uploads can send raw content alongside the existing JSON requests. - `utils/storage-helpers.ts` gains `openMoveDialog` and `confirmMove`. - `MoveItemsFolderPicker.tsx` gains `data-testid="folder-picker-list"` on its list container. ## Additional context **Why the `data-testid`.** Once a path is deep enough for the breadcrumb to collapse, the breadcrumb renders crumb buttons whose accessible names are folder names — so `getByRole('button', { name: 'beta' })` scoped to the dialog can match either a folder row or a breadcrumb crumb depending on depth. Scoping row lookups to the list container removes that ambiguity. This follows the e2e guidance about adding explicit test hooks where a component lacks an unambiguous accessible name. **These tests have not been executed.** They were written against the merged implementation and verified as far as the environment allows: - `npx playwright test --list` collects all seven - `tsc --noEmit` is clean for the new spec and helpers (the pre-existing errors in `column-editor-types.spec.ts`, `table-editor.spec.ts`, and `wait-for-response-with-timeout.ts` are untouched) - Studio's unit and component tests (82) still pass, and typecheck, eslint, prettier, the lint ratchet, and knip are all clean The suite needs Docker to bring up the local Supabase stack, which wasn't available where this was authored, so a real run in CI is the first actual execution. Selectors were all read off the merged source rather than guessed, but timing assumptions in particular deserve attention on the first CI run. **One thing this surfaced, not fixed here.** The success toast reads `Successfully moved 1 files to docs` — it doesn't singularize. The tests assert on `/Successfully moved/` rather than the full string so they don't encode that, but it's worth a follow-up. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_01Q94G7pWso6vQn5FQz6TUns --- _Generated by [Claude Code](https://claude.ai/code/session_01Q94G7pWso6vQn5FQz6TUns)_ <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Tests** - Expanded end-to-end coverage for moving files between folders in Storage. - Validated folder selection, nested-folder search, empty search results, collapsed breadcrumbs, and navigation to parent folders. - Confirmed files are excluded from destination choices and moving to the current folder is prevented. - Added coverage for creating isolated test buckets, uploading fixture files, and confirming successful move operations. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Joshen Lim
|
ee3fbc4e61 |
Joshenlim/fe 4383 consolidate tablerow no search result state (#50389)
### Context Just some housekeeping/consolidate refactors. There's a number of places where we render the same "no result" empty state for tables. So this PR just consolidates that into a reusable component `TableRowNoResults` to reduce duplication. Opting to save this under `components/ui` instead of the `ui` package as this is more of a derivation of `TableRow` than a primitive <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **UI Improvements** - Standardized empty search-result messages across database, functions, storage, and vector bucket tables. - Search terms now appear consistently when no matching records are found. - Added an accessible label to the vector bucket row actions menu. - Improved the storage explorer loading layout so content expands to use available vertical space. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Francesco SansalvadoreandClaude
|
92fdb1d3c5 |
feat: update storage move UI (#50346)
Update path selection as destination where to move files in the Storage File Explorer. ## What is the current behavior? Currently you need to write out the entire path by hand, which is error prone and quirky. <img width="727" height="436" alt="Screenshot 2026-09-14 at 15 49 11" src="https://github.com/user-attachments/assets/2bb8fc78-d973-4b17-9343-08df23b67d2a" /> ## What is the new behavior? This PR adds a ui that lets the user select any folder as the destination of the file move. <img width="923" height="606" alt="Screenshot 2026-09-15 at 11 40 00" src="https://github.com/user-attachments/assets/2f4c50f8-3c11-4896-832e-b1e99defc9af" /> https://github.com/user-attachments/assets/261ac24e-ec24-4bcf-ad47-72bc48e27bab To test: - go to Storage File explorer and pick a file to "move" (action in the dropdown menu) - mov file to any other folder in the same bucket selecting destination folder from the ui in the dialog - both empty folder or also a folder with sub-folders can be destinations, as any selected folder becomes the active destination (notice the cta changing when selecting a folder) - batch move multiple items via multi-select (already supported, but using the updated ui now) - only folders should appear in this ui - destination folders can be searched using the search input <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Replaced the move-items path field with an interactive folder browser. - Browse, select, and search folders by name or path, with pagination and loading or empty states. - Navigate using breadcrumbs, including collapsed-path menus for deeply nested folders. - Receive warnings when folder search results are incomplete for very large buckets. - See clearer destination labels and protection against moving items to their current location. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Danny White
|
476d4a5851 |
refactor(ui): drop redundant Button variant="default" props (#50161)
## What kind of change does this PR introduce? Mechanical cleanup on top of the Button default-variant change (#50160). ## What is the current behavior? Many callsites still pass `variant="default"` even though that is now the component default. ## What is the new behavior? Removes redundant static `variant="default"` from legacy `Button` and `ButtonTooltip` callsites. Keeps explicit defaults where they document the API: - `button-default.tsx` and `button-sizes.tsx` demos - `DocsButton`, which pins neutral styling at the wrapper boundary ## To test Studio: - [Auth → Rate Limits](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/auth/rate-limits): dirty the form so Cancel appears; Cancel stays neutral, Save stays green - [Project Settings → API Keys](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/settings/api-keys): `DocsButton` in the header actions stays neutral Design system: - [Design system → Button](https://design-system-git-dnywh-dc924ac1-supabase.vercel.app/design-system/docs/components/button): `button-default` / `button-sizes` still show explicit default styling; Primary (green) is restricted to the Primary section (and `asChild`) WWW: - [www → Brand assets](https://zone-www-dot-com-git-dnywh-dc924ac1-supabase.vercel.app/brand-assets): Download logo kit / Download button kit stay neutral |
||
|
Danny White
|
76257f164b |
fix(studio): align storage row icon weight (#48480)
## What kind of change does this PR introduce? Bug fix stacked on #48478. ## What is the current behavior? Storage Explorer renders the custom closed-folder icon at `1.5` but leaves the Lucide open-folder icon at its default `2`. The duplicated file-picker implementation also uses a different set of stroke-width overrides. ## What is the new behavior? A shared `StorageRowIcon` renders loading, open and closed folder, image, audio, video and generic file icons at `1.5` across Storage Explorer, row editing and the bucket file picker. Test by comparing open and closed folders and file-type rows in Storage Explorer and the bucket file picker. | Before | After | | --- | --- | | <img width="524" height="336" alt="CleanShot 2026-08-03 at 18 38 06@2x" src="https://github.com/user-attachments/assets/15eb8b9f-69fc-4eee-8428-d7ec26dce8dc" /> | <img width="522" height="328" alt="CleanShot 2026-08-03 at 18 39 20@2x" src="https://github.com/user-attachments/assets/17b7dddd-8d36-421c-8356-c9c1bd7456e8" /> | | _Thicker image and file icon compared to folder icon_ | _Every icon has the same stroke thickness_ | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Improvements** * Standardized file, folder, media, and loading icons across storage views. * Improved visual consistency with unified icon sizing, styling, and stroke width. * **Tests** * Added coverage for loading, folder, media, and generic file icon states. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
eef0f57309 |
fix(studio): clarify Storage columns keyboard focus and selection (#48222)
## What kind of change does this PR introduce? Accessibility / UX fix ([DEPR-630](https://linear.app/supabase/issue/DEPR-630)). ## What is the current behavior? In Storage **As columns** view, keyboard select is unclear: the checkbox stays hidden until hover, so Tab/Space selection is hard to see. The row actions (three dots) menu also shows a browser default blue outline on Tab. ## What is the new behavior? Same icon/checkbox swap as list/hover, but also on keyboard focus: - Checkbox replaces the icon on hover, `:focus-within`, and when selected (no layout shift) - Checkbox becomes visible when focused via keyboard (without needing hover) - Row gets an inset outline while the checkbox is focused - Folders have no checkbox (non-focusable spacer only) - Row actions trigger uses `focus-ring` instead of the browser blue outline | Before | After | | --- | --- | | <img width="1046" height="362" alt="CleanShot 2026-07-31 at 14 37 47@2x" src="https://github.com/user-attachments/assets/9b827627-17e6-49a6-87a3-1253b4cef1da" /> | <img width="1046" height="390" alt="CleanShot 2026-07-31 at 14 37 13@2x" src="https://github.com/user-attachments/assets/2fd2b426-a8e2-4fda-b1ba-4df728b7b2f1" /> | | _Checkbox focussed but not visually shown_ | _Checkbox focussed and visually shown_ | ## To test 1. Open the **Studio preview** for this PR. 2. Go to **Storage → Files** → open a bucket with several files. 3. Set view to **As columns**. 4. Tab until a **file** checkbox is focused. **Expect:** - Icon is replaced by the checkbox (same slot; neighbouring row icons should not look shifted) - Checkbox visible without hovering - Row shows an inset outline 5. Press **Space** to select. Checkbox stays in the icon slot; selection background applies. 6. Hover another file. Same icon to checkbox swap as before. 7. Tab to the three-dot actions control on a row. Expect the shared focus ring (not a blue browser outline); the menu icon should become visible. 8. Folders: no checkbox in the tab order; click icon/name still opens the folder. 9. Smoke **As list**. Same swap behaviour. ## Additional context From Kemal's DEPR-621 review. |
||
|
Charis
|
50e1eb7436 |
chore(eslint): bump eslint-config-next to v16 for useEffectEvent (#48458)
## 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? Chore / build (ESLint config upgrade + lint cleanup). ## What is the current behavior? `eslint-plugin-react-hooks` v5 (pulled in transitively by `eslint-config-next` v15) doesn't recognize stable `useEffectEvent`, so every effect that calls an effect-event handler needs an `eslint-disable react-hooks/exhaustive-deps` to silence a false positive. There are 30 such dead disables across Studio. ## What is the new behavior? Bumps `eslint-config-next` to v16, which pulls in `eslint-plugin-react-hooks` v7 whose `exhaustive-deps` understands `useEffectEvent`, and removes the 30 now-dead disable directives (and their orphaned explanatory comments). Supporting changes: - **Flat-config migration**: v16 is a native flat-config array (v15 was eslintrc), so `eslint-config-supabase` now spreads it directly instead of bridging through `FlatCompat`. - **React Compiler rules off**: v16 enables react-hooks v7's `recommended`, which layers the React Compiler lint rules on top of the two classic rules. These are switched off (derived dynamically from what next enables) to keep this change scoped to the `exhaustive-deps` improvement. - **Plugin-registration fallout** (v16 scopes plugin registration to a file glob rather than registering globally like FlatCompat did): stop re-registering `@typescript-eslint` (shared) and `jsx-a11y` (studio); scope our react / react-hooks / jsx-a11y rule overrides (studio, www) to v16's plugin glob so they don't error on files outside it (e.g. `.cjs`). - **Lint surface preserved**: v16's glob newly includes `.mts`/`.cts` (v15 didn't lint them), which surfaced pre-existing errors in tooling scripts. The shared config keeps the prior surface by leaving `.mts`/`.cts` unlinted; linting them is left as a separate change. - **Ratchet**: rebaselines `@tanstack/query/exhaustive-deps` 9 → 89. v15 forced next's `@babel/eslint-parser` onto `.ts` files, hiding these deps; v16 parses `.ts` with `@typescript-eslint/parser` and correctly surfaces the intentional `connectionString`-excluded-from-`queryKey` pattern. Worth a follow-up to review whether any are real cache-correctness bugs. - Drops three now-dead devDeps from `eslint-config-supabase`: `@eslint/eslintrc`, `@eslint/js`, `@typescript-eslint/eslint-plugin`. Verified locally: `turbo run lint` → 7/7 packages pass with 0 errors; Studio `lint:ratchet` passes; Prettier clean on changed files; typecheck unaffected. ## Additional context <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Chores** * Refined linting configuration and removed outdated lint suppressions across Studio. * Updated Next.js linting support and refreshed related development configuration. * Expanded lint baseline coverage for query-related code. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
e3d7267845 |
fix(studio): chip away explicit-tabindex ratchet debt (#48040)
## What kind of change does this PR introduce? A11y cleanup follow-up to #47984 / [DEPR-626](https://linear.app/supabase/issue/DEPR-626). ## What is the current behavior? Studio had 82 ratcheted `supabase/require-explicit-tabindex` violations (raw `<button>` / `role="button"` without explicit `tabIndex`). ## What is the new behavior? - Explicit `tabIndex={0}` (or disabled → `-1`) on those Studio call sites across nav, `components/ui`, Database, Storage, and the remainder - Ratchet baseline cleared (**82 → 0**) and the rule **removed from the Studio ratchet** (debt is gone; ratchet is temporary) - Rule remains a shared **`warn`** for now — promoting to `error` (and sweeping www/docs/design-system) is a follow-up - Also fixed the learn/ui-library call sites that surfaced while experimenting with error promotion - Small follow-ups where making controls focusable exposed gaps: accessible names, disabled/focus consistency, focus-ring polish on To-test surfaces, home section `KeyboardSensor`, and an E2E locator tightened after `aria-label="Remove column"` Prefer migrating to `Button` from `ui` in future touch-ups; this PR takes the minimal path so Studio debt can stay at zero. ## Additional context Batches landed together so baseline conflicts stayed simple while chipping away: - Hotspots / nav (FirstLevelNav, Marketplace, AttachmentUpload, Column, Tabs, …) - `components/ui` shared - Database + Storage - Remainder **Out of scope / intentional deferrals** - Promoting `supabase/require-explicit-tabindex` to a lint **error** (follow-up after www/docs/design-system sweeps) - Tabs/Radio roving, tooltips, context menus, in-menu items - Full keyboard-accessible tab-close UX (close stays hover + `tabIndex={-1}`; context menu still closes tabs) - Data API docs links (`/project/<ref>/api` redirect) **Reviewer notes** - Rule only flags raw `<button>` / `role="button"` without a `tabIndex` prop. `Button` from `ui` already bakes this in - `tabIndex={-1}` is intentional for disabled controls, in-menu / roving-focus children, and hover-only tab close - For dnd-kit grips, put `tabIndex` **after** `{...attributes}` so it isn’t overwritten (TS2783) ### To test Use **Safari** with macOS Keyboard navigation **off** (System Settings → Keyboard). Chrome once for a sanity pass. For each surface below: Tab until the control is focused, then activate with Enter/Space where relevant. 1. **API Docs side panel** (Table Editor → open a table → **API docs**) - Floating API Docs panel — **not** `/project/<ref>/api` (that redirects to Data API docs; language ToggleGroup uses arrow keys; links are out of scope) - Left nav buttons — Tab through several and activate one; active highlight / navigation still works 2. **Integrations → Marketplace** - Enable **Integrations layout** feature preview first (avatar menu → Feature previews) - `/org/<slug>/integrations` or project integrations marketplace - “Clear all”, grid/list toggles — Tab + activate 3. **Table Editor → create a table → Columns** - Drag handles only appear while **creating** (not when editing an existing table) - Tab to grip / remove (X) / sensitive-data eye if shown 4. **Project Home** — section drag handles - Tab to a grip (visible focus ring) - Optional: Space to pick up, arrows to move, Space/Esc to drop (KeyboardSensor added) - Mouse dnd still works 5. **Storage → Policies** — expand/collapse bucket list chevron (design-system focus ring, no stuck grey open bg) 6. **Support form** (Help → Support) — attachment remove (×) and add-attachment control when visible Disabled controls should be **skipped** by Tab. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Accessibility Improvements** * Improved keyboard navigation throughout Studio by explicitly managing focus (`tabIndex`) across many interactive controls (menus, tabs, tables, charts, dialogs, navigation, and form actions). * Disabled or non-interactive controls are now removed from the tab order (or made unfocusable), while available actions remain reachable. * Ensured `type="button"` on relevant controls to prevent unintended submissions, and refined keyboard focus behavior for various toggles and copy/remove actions. * **Chores** * Updated the ESLint rule baseline configuration to match the new focus behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas GarciaandIvan Vasilov
|
96d43099bb |
chore: refactor Button API so that it can be used a standard button (#46880)
## Problem Our `<Button>` component breaks the default `button` contract by redefining the `type` prop to set its variant (`primary`, `default`, etc) instead of the button type (`submit`, `button`, etc). This is confusing and forces to write more code when using it with shadcn components that expect/inject the standard button props. ## Solution - rename the `type` prop to `variant` - rename the `htmlType` prop to `type` - propagate the changes where necessary - format code ## How to test As this is just prop renaming, if it builds it's ok --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com> |
||
|
Ali Waseem
|
1c2d28d5b3 |
chore: wrap local storage into helper methods that are safer (#46628)
## 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? - Noticing our code we have many patterns of calling localstorage and handling those errors - We should add those in a single well tested file - Handle those errors in the singleton which makes it easier for us to debug customer issues. Logger is outputing local storage warnings for feature we expose - Side effect of this is random crashes on studio when local storage isn't available or handled correctly <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Improved browser storage handling across the app for more reliable persistence and graceful behavior in restricted or non-browser environments (settings, previews, charts, tabs, sign-in/session flows, integrations, and UI state). * **New Features** * Introduced a safe storage layer to standardize and harden local/session persistence. * **Tests** * Added comprehensive tests covering the new safe storage behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Alaister YoungandAlaister Young
|
7e9badc6b8 |
chore(studio): migrate useStaticEffectEvent to React 19 useEffectEvent (#46415)
Studio is on `react@^19.2.6`, and `useEffectEvent` shipped stable in React 19.2 with the same signature as the userland polyfill. This drops the local hook in `apps/studio` and `apps/www` in favor of the built-in. **Removed:** - `apps/studio/hooks/useStaticEffectEvent.ts` - `apps/www/hooks/useStaticEffectEvent.ts` - `.claude/skills/use-static-effect-event/` — skill is obsolete **Changed:** - 26 call sites: dropped the `useStaticEffectEvent` import, added `useEffectEvent` to the existing `react` import, renamed call sites - `.claude/CLAUDE.md`: `apps/studio` row updated React 18 → React 19 - `.claude/skills/vercel-composition-patterns/SKILL.md`: removed stale "Studio uses React 18, skip these patterns" warning ## To test - `pnpm typecheck --filter=studio` — passes locally - `pnpm typecheck --filter=www` — passes locally - `grep -rn "useStaticEffectEvent"` returns nothing outside `node_modules` - Smoke-test areas that use the hook: schema visualizer edges (intersection check), spreadsheet import, sign-in/CLI login flows, side panels with unsaved-changes prompts **Out of scope:** pre-existing Tailwind lint warning on `DefaultEdge.tsx:141` (`outline` + `outline-1` conflict) — unrelated to this migration <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Internal event handling migrated to React’s built-in event hooks across the Studio app; no user-facing changes. * **Documentation** * Clarified React 19 compatibility and noted Studio now targets React 19. * Removed obsolete documentation for a deprecated internal hook. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46415?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> |
||
|
Saxon Fletcher
|
e13486e358 |
Storage file bucket design (#46184)
<img width="1285" height="654" alt="image" src="https://github.com/user-attachments/assets/10074f07-3ac0-4f1f-b920-4255c67968d6" /> Updates file storage buckets to make use of new page components and follow more standard full width pages as recommended in our design system. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Search input now always visible with dynamic placeholder and cancel control. * “Go up one level” navigation button shown in list view when not at bucket root. * **Style** * Thinner icon strokes and smaller button/icon sizing across the Storage Explorer and preview. * Header, breadcrumbs, and page container spacing/layout refined; explorer outer container simplified. * Selection count UI made compact/monospaced; new layout tokens for header and bulk-action rows. * **Tests** * Unit and e2e tests updated; added e2e helper for rename/create inputs. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46184?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
e91e50d2ae |
chore: migrate storage Modal to Dialog (#46227)
## Problem Storage still uses the deprecated `Modal` for: - custom expiry - moving items - analytics bucket namespaces ## Solution - use `Dialog` instead <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Updated dialog component implementations across Storage features for improved consistency and maintainability. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46227?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
5d97339d41 |
chore: remove <Select> _Shadcn_ suffix (#45988)
## Problem The `_Shadcn_` suffix isn't needed anymore on `Select` components ## Solution Remove it. No other changes <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Updated internal component architecture to standardize and simplify the codebase. These changes improve code maintainability and consistency across the application without affecting existing functionality or user experience. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45988) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
86a3f8b03d |
chore: upgrade to react-19 (#45886)
- Most changes are related to either types or `useRef` usages (it now requires an initial value). - also updated `vaul` to its latest version and haven't noticed any change ([design-system demo](https://design-system-git-react-19-supabase.vercel.app/design-system/docs/components/drawer)) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Upgraded workspace to React 19. * **Bug Fixes** * Improved null-safety and ref handling across editors, UI components, shortcuts, and markdown/image rendering to reduce runtime errors. * Safer event/timeout/interval cleanup and more robust command/context handling. * **Chores** * Bumped vaul dependency versions. * **Documentation** * Type and TypeScript accuracy improvements for clearer developer feedback. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45886) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
8c6d5036ea |
chore: remove <Label> _Shadcn_ suffix (#45986)
## Problem The `_Shadcn_` suffix isn't needed anymore on label component ## Solution Remove it. No other changes <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Standardized Label usage across the codebase by removing the legacy alias and using the direct Label export from the UI package consistently. * **Documentation** * Updated component examples and docs to use the standardized Label component in usage snippets and demos. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45986) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Vaibhav
|
1591e41351 |
fix: storage shortcuts (#45978)
## TL;DR fixes a few storage shortcut edge cases ## ref: - closes https://github.com/supabase/supabase/issues/45977 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * The storage bucket creation shortcut now respects user permissions and will only be available when allowed. * Storage file deletion shortcut now requires appropriate write permission before it can be used on selections. * Refresh shortcut in the storage explorer is always available regardless of selection state. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45978) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
4e86c39ea1 |
chore: remove <ContextMenu> _Shadcn_ suffix (#45971)
## Problem The `_Shadcn_` suffix isn't needed anymore on `<ContextMenu_Shadcn_>` and related components ## Solution Remove it. No other changes <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Replaced legacy context-menu component variants with the unified UI context-menu components across the app for consistent rendering and imports; behavior and menu content remain unchanged. * **Tests** * Updated a test mock to track the unified context-menu component mount count. * **Chores** * Simplified UI package re-exports to expose the canonical context-menu symbols. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45971) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
69acd647e1 |
chore: remove fields _Shadcn_ suffix (#45972)
## Problem The `_Shadcn_` suffix isn't needed anymore on fields components ## Solution Remove it. No other changes <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **Refactor** * Streamlined internal component export patterns and standardized import references to improve code organization and maintainability. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45972) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
0713a1efc1 |
chore: remove shadcn suffix for Input, Textarea, Alert and Collapsible (#45867)
## Problem Now that we migrated old components to their new shadcn alternatives, we don't need the `_Shadcn_` suffix anymore. ## Solution Remove it <img width="659" height="609" alt="image" src="https://github.com/user-attachments/assets/2d7271a9-066a-4dcc-92fe-729b106d2c2f" /> |
||
|
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.
[](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>
|
||
|
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 --> |
||
|
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 --> |
||
|
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> |
||
|
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. |
||
|
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 |
||
|
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 --> |
||
|
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 --> |
||
|
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 |
||
|
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> |
||
|
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 --> |
||
|
Charis
|
205cbe7d26 | chore(studio}: enforce import order, remove bare import specifiers (#44585) | ||
|
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> |
||
|
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> |
||
|
|
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> |
||
|
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> |
||
|
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 ``` |
||
|
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" /> |
||
|
|
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> |
||
|
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. |
||
|
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" /> | |
||
|
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 |
||
|
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 |
||
|
Joshen Lim
|
4a173eea60 |
Revert "fix: storage view is not reset when switching buckets" (#43539)
Reverts supabase/supabase#43370 |
||
|
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> |
