mirror of
https://github.com/supabase/supabase.git
synced 2026-10-14 13:49:09 +03:00
scopedpat/dead-code-cleanup
1129
Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
|
a75a3b22b6 |
fix(studio): align PITR calendar dates in the first week (#47806)
## What Fixes misaligned day cells in the PITR calendar widget for the first week of the month. ## Why The PITR calendar draws a \`border\` on each day cell via \`classNames.day\`. The day \`<td>\` has no explicit width, so \`box-sizing: border-box\` doesn't apply and the 1px borders add to its size (36px → 38px), while the weekday header cells stay pinned at \`w-9\` (36px). Bordered day cells therefore drift right of their headers, which is most visible in the first partial week where unbordered leading cells sit flush next to the wider bordered ones. ## How Pin each day cell to a fixed \`w-9 box-border\` so the border is drawn inside the 36px box, and let the day button fill the cell (\`w-full\`). Column pitch now matches the weekday headers regardless of border state. Class-only change, no logic touched. Closes FE-3886 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Improved calendar day cell sizing and layout for more consistent rendering. * Ensured day buttons use full-width styling where applicable, while preserving existing hover, border, background, and corner behavior. * **Documentation** * Added documentation for “Calendar with disabled days,” including a new interactive preview. * **New Features** * Introduced a calendar example demonstrating disabled-day behavior with mid-week month start and restricted date selection. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com> |
||
|
Joshen Lim
|
073cada53a |
Fix observability custom reports menu item (#47759)
## Context More action button should be flushed to the right here <img width="294" height="156" alt="image" src="https://github.com/user-attachments/assets/65017960-3edb-4268-bb0e-1e2c26937d4b" /> ## Changes involved - Adjust `Menu.Item` in `packages/ui` to use a `div` instead of a `span` - Was otherwise causing HTML validation issues as we were trying to nest a `div` within a `span` - Having a `div` is a bit more flexible as well since `Menu.Item` expects `children` to be of any type (e.g a react node) <img width="279" height="149" alt="image" src="https://github.com/user-attachments/assets/12730cef-b077-4ef4-93c9-c21def939888" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Standardized the Observability menu component to use named exports, ensuring consistent usage across the app. * Updated the mobile observability menu registration to reference the correct exported component. * **Style** * Refined Observability menu item layout, spacing, truncation, and dropdown sizing for a cleaner presentation. * Enhanced menu item rendering to allow custom `className` styling and full-width content layout. * **Accessibility** * Added an aria-label to the “more actions” button for improved screen reader support. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Saxon Fletcher
|
27050a69b1 | Color spot fixes policy and sheet (#47682) | ||
|
Gildas Garcia
|
623a9230bd |
fix: add labels to org home page view buttons (#47633)
## Problem The buttons on the organization home page that allow to switch between list and grid views are not accessible. ## Solution Add screen readers only text to these buttons. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary of changes * **Bug Fixes / Improvements** * Improved accessibility for project view toggle controls and the clear-search action. * Added an explicit accessible label to the clear button. * Added screen-reader text and tooltips to better communicate grid vs. list view. * **Other** * Improved error handling robustness when updating report snippet visibility. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
4b7cb27ba9 |
chore: refactor docs tabs (#47557)
## Problem Now that `docs` is the only place where we use the deprecated `ui/Tabs`, we can move this component and the related HOC from `ui-patterns` in `docs` ## Solution - Move `ui/Tabs`, `ui-patterns/ComplexTabs/withQueryParams` and `ui-patterns/ComplexTabs/withSticky` to `docs` - Refactor `ui-patterns/ComplexTabs/withQueryParams` and `ui-patterns/ComplexTabs/withSticky` HOCs as hooks to make them easier to understand - Refactor `Tabs` accordingly No visual nor functional changes. ## How to test On https://docs-git-chore-refactor-docs-tabs-supabase.vercel.app/docs/guides/auth/passwords (Tabs are driven by URL and the flow tabs should have sticky headers even though there's a CSS bug already reported) - check that by default, the first tab in each tabs is active - change the tabs in different groups and validate it works - refresh the page and check that previously selected tabs are active (URL based selection) - In a new tab, visit https://docs-git-chore-refactor-docs-tabs-supabase.vercel.app/docs/guides/auth/passwords again and check that previously selected tabs are active (LocalStorage based selection) Do the same on https://docs-git-chore-refactor-docs-tabs-supabase.vercel.app/docs/guides/database/database-advisors (This one is driven by URL but does not have sticky tab headers) Do the same on https://docs-git-chore-refactor-docs-tabs-supabase.vercel.app/docs/guides/deployment/terraform/reference (this one is not driven by URL nor has sticky tab headers) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Docs tabs now persist and restore the active tab via URL query parameters. * Added optional “sticky” tab behavior that keeps the active panel in view. * Enhanced keyboard interaction for selecting tabs. * **Bug Fixes** * Improved active-tab initialization and synchronization when the URL query changes. * **Chores** * Refreshed the tabs UI implementation and styling to improve consistency and remove deprecated tab exports from shared UI packages. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Saxon FletcherandClaude Opus 4.8
|
fb02182e86 |
Color system (#47288)
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES/NO ## What kind of change does this PR introduce? Bug fix, feature, docs update, ... ## What is the current behavior? Please link any relevant issues here. ## What is the new behavior? Feel free to include screenshots if it includes visual changes. ## Additional context Add any other context or screenshots. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Refreshed theming across the UI to use modern color expressions and shared theme variables (including OKLCH-based gradients), improving consistency for charts, code blocks, overlays, icons, and decorative backgrounds. * **Bug Fixes** * Improved light/dark color and gradient consistency across axis/grid styling, reference lines, buttons/badges, sidebar accents, loaders, and other visual components. * **Documentation** * Updated styling/theming guidance to align with the revised semantic token system and the updated theme variable usage patterns. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com> |
||
|
Gildas Garcia
|
c41e2835e3 |
chore: UI theme cleanup (#47519)
## Problem - We still use/maintain the legacy theming even though we moved to Shadcn - We have two themes list with similar code ## Solution - Migrate some components to `cva` and `cn` instead of `styleHandler` - Remove redundant `themes` in favor of `singleThemes` <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Standardized theme selection across the app so theme menus consistently offer the same light/dark/system options, including dropdowns, navigation menus, and command menus. * **Refactor** * Refreshed styling for multiple shared UI components (menus, tabs, side panels, loading indicators, icons, and modal dialogs) to improve consistency while preserving visual behavior. * **Chores** * Improved the UI patterns CI “validate exports” check for clearer failure output when exports change unexpectedly. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny WhiteandCursor
|
1edcd311dc |
chore(ui): tighten dropdown sub-trigger spacing (#47355)
## What kind of change does this PR introduce? UI polish. ## What is the current behavior? Dropdown sub-menu triggers use symmetric padding and a heavier chevron. ## What is the new behavior? Tighter right padding and a smaller, muted chevron. | Before | After | | --- | --- | | <img width="1170" height="672" alt="CleanShot 2026-06-26 at 17 07 18@2x-4BDA3F92-78B4-45F4-B31E-897FF1FE537E" src="https://github.com/user-attachments/assets/ade505c7-f4b0-4046-a728-c49ee93009d4" /> | <img width="1168" height="672" alt="CleanShot 2026-06-26 at 17 06 33@2x-9A8992B6-C389-4698-BE19-7AEE3FB12A83" src="https://github.com/user-attachments/assets/c1c9ba73-e059-45a1-82f3-5c268f060e2f" /> | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Improved dropdown submenu trigger spacing and alignment for a cleaner, more consistent menu layout. * Updated the trailing chevron icon’s positioning and sizing to keep it consistently aligned at the far right across states. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Cursor <cursoragent@cursor.com> |
||
|
Gildas Garcia
|
c1646f9a95 |
chore: dead code deletion in packages/ui (#47385)
## Problem There's still more unused code in the repository which slows down everything: - checkouts - tooling - probably builds (not sure how good turbopack is at handling this) ## Solution - remove old unused code <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Cleaned up several UI building blocks and related styling, including typography, menus, buttons, loading states, side panels, form layout, input adornments, spinner, theme context, and mobile detection. * Removed some previously available UI helpers and variants from the public component set. * **Style** * Simplified or removed multiple CSS modules and visual rules across the design system. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Miranda Limonczenko
|
5fc0c86007 |
feat(studio) Link observability pages to relevant docs (#47351)
Closes DOCS-488 <img width="1266" height="353" alt="Screenshot 2026-06-26 at 11 02 57 AM" src="https://github.com/user-attachments/assets/67b5d47b-249e-4e53-9230-2bbcb7f037b7" /> ## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## Problem We have helpful documentation that delves into each observability metric, but it is not easily findable in the moment it is needed while viewing the dashboards. ## Solution Solution includes: - Add a docs link in Studio in every relevant place with the `DocsButton` component - Add aria-hidden on the `DocsButton` icon - An added `constants.ts` to see all of the docs links in one place - A contextual aria-label for the docs so that screenreader users know where they're going | Page | Docs link | |------|-----------| | Overview | `/guides/telemetry/reports` | | Query Performance / Query Insights | `/guides/platform/performance#examining-query-performance` | | API Gateway | `/guides/telemetry/reports#api-gateway` | | Database | `/guides/telemetry/reports#database` | | Data API | `/guides/telemetry/reports#postgrest` | | Auth | `/guides/telemetry/reports#auth` | | Edge Functions | `/guides/telemetry/reports#edge-functions` | | Storage | `/guides/telemetry/reports#storage` | | Realtime | `/guides/realtime/reports` | | Custom reports | `/guides/telemetry/reports#using-reports` | Query Performance and Query Insights already had the button in their custom headers. They now use the shared constants. ## Tophatting 1. Go to a project `/observability`. 2. Click into each of the panels and see a **Docs** link in the top right. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added direct documentation links across observability report pages, making it easier to open relevant help content from each view. * Added clearer, page-specific labels for observability headers and docs links. * **Bug Fixes** * Improved accessibility for icon buttons so icons are hidden from assistive technologies while button labels remain clear. * Adjusted report navigation layouts to keep controls aligned with the new docs buttons. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
968fa3f052 |
chore: remove old Input component (#47259)
## Problem Every inputs and textarea have been migrated to the new shadcn components. This `Input` is no longer needed ## Solution - Delete it - Clean up the `defaultTheme` accordingly <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Breaking Changes** * Removed the built-in Input component from the UI library, including its attached TextArea export. * Removed input styling support from the default theme (standard/error variants and related icon/action/textarea spacing). * Cleared the Input module styles, so prior textarea action UI styling is no longer available. * Removed the Reports filtering UI in Studio (including the popover component and the associated report-filter hook), which may affect report filtering screens. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
a6e79ebacb |
chore: delete Button alternative deprecated variant (#47260)
## Problem The `alternative` variant for `<Button>` has been deprecated but is still used in a few places. ## Solution - Migrate usages to the recommended `primary` variant - Delete the `alternative` variant <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Updated several buttons across forms, logs, recent queries, and release headers to use the primary visual style. * Button styling is now more consistent throughout the app, with a cleaner default emphasis for key actions. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
9eab4f8fbf |
build(studio): Vite/TanStack-Start build pipeline behind flag (stack 1/6, from #46424) (#47107)
**Stack 1/6** of the TanStack Start migration (#46424), split into reviewable, independently-mergeable PRs. > [!IMPORTANT] > **Next stays the default and only active framework after this PR.** This wires up the Vite/TanStack-Start build pipeline behind the `STUDIO_FRAMEWORK` flag, but there are no TanStack routes yet — so the TanStack build isn't functional or tested until later PRs in the stack. Nothing about the Next build, dev, or deploy changes behaviourally here. ## What's in this PR - **Dispatch:** `dev`/`build`/`start` now go through `scripts/dispatch.js`, which runs the Next variant unless `STUDIO_FRAMEWORK=tanstack`. The original commands are preserved as `dev:next`/`build:next`/`start:next`. - **Build pipeline:** `vite.config.ts`, `serve.js`, `smoke-server.mjs`, vite/tanstack deps, `turbo.jsonc`. - **`tsconfig.json`:** `jsx: react-jsx`, `moduleResolution: Bundler`, `target: ES2022`. Because `include` is `**/*.ts(x)`, this re-typechecks the whole app, so the companion adaptations below land with it. - **Shared adaptations (companions to the tsconfig change):** `BufferSource` casts, `packages/ui` unused-`React` import removals, etc. - **Routing/middleware plumbing:** `next.config.ts` + `redirects.shared.ts` (redirect rules now shared with `vercel.ts`), `proxy.ts`/`start.ts` middleware + `hosted-api-allowlist.ts`. ## Verification Run locally off `master`: frozen install ✓, `studio` typecheck ✓, **Next build ✓** (compiles + generates all routes), lint ratchet ✓ ("some rules improved"), prettier ✓. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added a hosted API endpoint allowlist to return 404 for non-supported `/api/*` routes. * Introduced a TanStack route-migration checklist and expanded TanStack Start routing support. * **Improvements** * Enhanced deployment refresh/detection by tightening cookie handling for “latest deployment” updates. * Centralized redirect/maintenance-mode rules for consistent platform vs self-hosted behavior. * Improved production serving with a dedicated static + proxy server and a post-build smoke test. * **Dependencies** * Updated TanStack-related packages and React Table/query tooling versions. * **Documentation / Chores** * Updated formatting and tooling config; added shared build environment parsing utilities. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com> |
||
|
Miranda Limonczenko
|
ea539b4f83 |
fix(docs) Remove unneeded double border on docs Accordion (#47202)
Closes DOCS-974 <img width="891" height="328" alt="Screenshot 2026-06-22 at 3 11 13 PM" src="https://github.com/user-attachments/assets/d7b49d56-cf77-4c1d-a933-7cbeab3168c2" /> ## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## Problem From Linear: Accordion usage in the docs is inconsistent and can render with double lines instead of single lines. The current docs contribution guidance appears to recommend wrapping accordions with an extra div, which seems to be the cause of the extra divider in some pages. ## Solution This PR: - Removes all wrapping `divs` to AccordionItems that adds an extra border - For a11y, adds a cursor pointer and a slight bg color change on hover to make the clickable area more obvious - For a11y, adds reduce-motion option for animation and `aria-hidden` on the chevron **Note:** It is good for a11y to have more than one hover-state indicator. For example, color-change and an underline. ## Tophatting To review changes on the preview environment: 1. Go to `/docs/guides/platform/backups` and `/docs/guides/platform/migrating-to-supabase/auth0#frequently-asked-questions-faq`. 2. Expand accordion. 3. See nothing visually odd such as strange spacing or double borders. **Note:** To be exhaustive in your review, view all affected URLs and scan the docs for `border-b` to see if there are any stragglers. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Enhanced accordion components with improved hover state styling for better visual feedback. * **Refactor** * Simplified accordion markup across documentation pages for cleaner, more consistent layout and improved component nesting structure. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
2d06acd0f4 |
chore: remove old <Breadcrumb> (#47184)
## Problem We now use the Shadcn breadcrumb everywhere but we still have the old breadcrumb code. ## Solution - Remove the old breadcrumb code - Fix import paths where needed <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Consolidated UI component imports across the codebase to use unified package entrypoints. * Removed legacy breadcrumb component implementation in favor of standardized components. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
bb1ad6780e |
Fix button styles (#47075)
## Problem When we restored the `Button` focus styles in [46800](https://github.com/supabase/supabase/pull/46800/changes#diff-97973c54c2ac5270cf2d68e8f372365341693c8ae9d540ed62e0f614bfe92cf0L16), we removed the wrong duplicate `display` property (`inline-flex` instead of `flex`). This made some buttons take up as much space as available on some pages: <img width="2992" height="1628" alt="image" src="https://github.com/user-attachments/assets/63943b27-10de-453a-ac96-51b3dbff633d" /> <img width="1216" height="952" alt="image" src="https://github.com/user-attachments/assets/24aa02c4-66b0-4c34-a3d4-39c4c74fec7a" /> ## Solution Use `inline-flex` instead of `flex` (it's one or the other, cannot be both). <img width="1277" height="566" alt="image" src="https://github.com/user-attachments/assets/4add0aff-7afc-4e8f-9b57-16f93be99689" /> <img width="756" height="493" alt="image" src="https://github.com/user-attachments/assets/b3f8c8ec-4e89-40f1-b14b-10a141887370" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Updated button layout rendering to use `inline-flex` instead of `flex`, improving how buttons align within inline contexts. * Refreshed button icon/loading styling configuration (including icon container and loader behavior) to keep visual states consistent. * Adjusted the “Open positions” primary button spacing on the careers page, changing its alignment to better match the header layout. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
211b99f144 |
fix: consolidate focus states across inputs (#46588)
## Problem All inputs don't have the same style when focused ## Solution Consolidate focus states across inputs ## How to test Checkout the design system form examples: https://design-system-git-gildasgarcia-depr-354-consoli-0188d7-supabase.vercel.app/design-system/docs/ui-patterns/forms <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Refined focus-visible ring/outline and ring-offset tokens across buttons, multi-select, radio groups, checkbox, select, and switch for a more consistent accessible experience. * Updated focus-state styling details within the shared Button and related controls (including open-state outline behavior). * **Refactor** * Updated icon upload preview triggers in form examples to use the shared Button component while preserving existing upload behavior and visuals. <!-- 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> |
||
|
Gildas Garcia
|
5b46264cdb |
fix: avoid showing navigation item as disabled while loading (#46942)
## Problem On pages that needs to check conditions for which data is loaded asynchronously, the navigation links in the sidebar appear disabled for a split second: <img width="1394" height="1636" alt="image" src="https://github.com/user-attachments/assets/0681966d-676d-4c8c-8bd4-852dcf93ddb7" /> ## Solution Check whether the required data is loading and override the styles so that the links are still disabled to avoid errors but appear as normal. ## How to test - Open the project setting page - Check the styles of the sidebar items carefully while it load (might require to refresh a few times to be sure) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **New Features** * Navigation buttons, menu items, and settings menus now display loading states while project data is being fetched, providing visual feedback and preventing interaction during data loading operations. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen Lim
|
aba4e147eb |
Joshen/fe 3613 database tables query should have schema filter wherever appropriate (#46935)
## Context There's certain areas in the dashboard where we're calling `useTablesQuery` without a schema filter, in which case the dashboard then fires a query against the project's database to fetch _all_ tables across _all_ schemas - this could easily be a heavy query if there's a large number of relations in the project's database. Am hence opting to either add a schema filter if appropriate, or otherwise opt to use the infinite loading behaviour ## Changes involved - Add schema filter to `useTablesQuery` in database triggers and publications - Use infinite loading for tables in Cmd K for "Run query on table" and "Search database tables" ## To test - [x] Verify that database triggers + publications still function as expected - [x] Verify that CMD K "Run query on table" and "Search database tables" still function as expected (including search) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Implemented debounced infinite-scrolling table search in the command menu and SQL editor command flow. * Added a schema selector dropdown to publications management for easier navigation. * **Improvements** * Removed the “Schema” column from the publications tables UI. * Updated search guidance and table-picker status (counts/loading) during infinite browsing. * Trigger table listings now follow the selected schema context. * Refined command menu list height and improved the database-tables placeholder text. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
856600e152 |
fix: restore button focus state design (#46800)
## Problem We lost the button focus state design while migrating to tailwind v4 See https://supabase.com/design-system/docs/components/button and move to each buttons with the _Tab_ key. ## Solution Restore it. ## How to test - Open https://design-system-git-fix-button-focus-state-supabase.vercel.app/design-system/docs/components/button - Move to each buttons with the _Tab_ key. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Updated Button component styling for improved layout, typography, and transitions. * Refined focus state and outline styling for better visual consistency. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Ali Waseem
|
8d49701cb0 |
fix: clip overflowing text in collapsed sonner toasts (#46752)
When multiple toasts stack up, Sonner compresses background toasts. The text content in these collapsed toasts was overflowing past the boundary and leaking into the page layout. This adds `data-[expanded=false]:overflow-hidden` to clip the overflowing text. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Updated toast notification styling to better handle content overflow behavior when toasts are in a collapsed state. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
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 --> |
||
|
Gildas Garcia
|
8de1027d06 |
chore: remove deprecated Space component (#46431)
## Problem The `Space` component is deprecated but was still used ## Solution - Convert the only usage to simpler HTML - Remove the `Space` component <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **Chores** * Removed deprecated Space UI component from the library exports and codebase. * Cleaned up unused component imports across the application. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46431?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
|
49292c0e12 |
chore: remove Modal (#46425)
## Problem Now that we migrated all `Modal` usages to `Dialog`, we don't need `Modal` anymore ## Solution Remove the deprecated component |
||
|
Danny WhiteandClaude Sonnet 4.6
|
1e354209aa |
fix(design-system): fix last table cell showing independent hover state (#46251)
## What kind of change does this PR introduce? Bug fix. ## What is the current behavior? On pages where the table has horizontal overflow (e.g. Database Tables with its 7 columns), `ShadowScrollArea` unconditionally applies `!bg-surface-200` to `td:last-child` on row hover. Since `TableCell` has `transition-colors`, this gives the last cell an explicit animated background change — making it visually distinct from every other cell, which simply inherit the row's hover bg transparently. This manifests as the last cell appearing to have its own independent hover state, separate from the row hover. ## What is the new behavior? The `!bg-surface-200` override on `td:last-child` is moved inside the `stickyLastColumn` block, since that's the only case where an explicit background is actually needed (sticky cells require a solid bg to avoid showing scrolled content behind them). Non-sticky tables no longer get the spurious cell-level hover. Also reverts the MoreVertical dropdown trigger in `TableList` back to `type="default"` (undoes the workaround from #46247). <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Fixed hover styling behavior in horizontally scrollable tables to apply only when appropriate. * **Style** * Updated the visual appearance of the row action dropdown button. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46251?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: Claude Sonnet 4.6 <noreply@anthropic.com> |
||
|
|
8c4aa5e034 |
Add missing hover bg color on table row (#46246)
## Context Previously removed the group hover background color for TableCell in this PR [here](https://github.com/supabase/supabase/pull/45933/changes#diff-6eac0b6bc77e68de6a37e675290a8e0634b53493470a9d9843a047fe5fa4202d) with the intention to apply the background color on the TableRow instead, but totally forgot to add that behaviour on the TableRow 🤦 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Table rows now display enhanced hover states with improved visual feedback, providing clearer interaction cues when users navigate and interact with table data. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46246?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: Danny White <3104761+dnywh@users.noreply.github.com> Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com> |
||
|
Danny WhiteandGildas Garcia
|
331278bfe4 |
feat(studio): add async handling to AlertDialog actions (#45960)
## What kind of change does this PR introduce? Feature, bug fix, and docs update. Addresses the AlertDialog async action behaviour discussed in Slack and follow-up PR feedback. ## What is the current behavior? `AlertDialogAction` delegates directly to Radix, so confirm actions close the dialog immediately on click. Async mutation flows have to use `asChild` with `event.preventDefault()` and a custom loading button to keep the dialog open while work is in flight. ## What is the new behavior? - `AlertDialogAction` now accepts async handlers and a controlled `loading` prop. Promise-returning actions keep the dialog open, show the existing Button loading state, disable cancel/dismissal while pending, close on success, and stay open on rejection. - Existing workaround usages in Studio have been migrated to the direct action API (see 'To test' callsite list below) - design-system docs now include async action examples and `AlertDialogBody` guidance for inline feedback https://github.com/user-attachments/assets/1af66410-e9f9-4231-9c6d-fe650bd717a4 ## Additional context - [ ] Once #45572 is rebased onto this change, `ResetTemplateDialog` should use `AlertDialogAction loading={isResettingTemplate}` with a promise-returning reset handler instead of a plain loading `Button` in `AlertDialogFooter`. ## To test - [x] On Studio API Keys settings, use a project with no publishable or secret API keys, click the “Create API keys” banner action, and confirm the Alert Dialog stays open with loading until the default publishable and secret keys are created. - [x] Delete a JIT database access rule and confirm the Alert Dialog stays open with loading until deletion succeeds, and stays open with inline feedback if it fails. - [x] With temporary access disabled and existing rules configured, enable temporary access and confirm the “This will activate existing rules” Alert Dialog stays open with loading until the configuration update succeeds, and stays open with inline feedback if it fails. - [x] Disable external replication and confirm the Alert Dialog stays open with loading until the mutation succeeds. - [x] Enable Index Advisor and confirm the Alert Dialog stays open with loading until the mutation succeeds, and stays open with inline feedback if it fails. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Alert dialogs support async actions with built-in loading, dismissal blocking while pending, and preserved dialog on error. * Two interactive examples demonstrating async success and error flows. * **Improvements** * Dialogs now surface inline error messages and consistent loading/confirm behavior across flows (create keys, replication, JIT DB access, index advisor). * Minor UI refinements for action controls. * **Documentation** * Docs updated with async-action guidance and inline-error recommendations. * **Tests** * New test suite validating async dialog behaviors. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45960) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com> |
||
|
Gildas Garcia
|
082c2546d2 |
chore: migrate from deprecated Accordion to new shadcn components (#46103)
## Problem We have multiple Accordion components ## Solution Migrate Accordion usages to Shadcn components ## Screenshots ### Documentation MDX pages Before: <img width="1156" height="1088" alt="image" src="https://github.com/user-attachments/assets/0f7b90ec-a613-45cf-8b04-39d2fd4b9644" /> After: <img width="1154" height="952" alt="image" src="https://github.com/user-attachments/assets/05c5051d-fa2a-497a-8f6f-96d555098e33" /> ### Documentation Mobile Menu Before: <img width="389" height="674" alt="image" src="https://github.com/user-attachments/assets/c9a0fa7a-3590-4f10-acfd-8add16c28b7b" /> After: <img width="376" height="665" alt="image" src="https://github.com/user-attachments/assets/d85fe05d-6d71-4e63-b0ea-cdc495d2fa94" /> ### www - Launch week pages Before: <img width="1434" height="718" alt="image" src="https://github.com/user-attachments/assets/d777f887-65d4-49f2-8b12-5b05010ba95d" /> After: <img width="1428" height="732" alt="image" src="https://github.com/user-attachments/assets/4fa7eb02-12c7-4b3b-b77f-09846518690c" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Replaced and standardized accordion UI across docs, navigation, mobile menu, pricing FAQs, Launch Week pages, and error/detail panels for a more consistent, reliable expand/collapse experience. * **Bug Fixes** * Fixed inconsistencies in accordion behavior and item rendering (e.g., multi-open support and disabled states) to improve navigation and content discovery. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46103?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 --> |
||
|
Danny White
|
09bbb7c323 |
fix(design-system): keep Alert variant text foreground explicit (#46050)
## What kind of change does this PR introduce? Bug fix. Follow-up to DEPR-551, #45302, #45535, #45618, and stacked on #46049. ## What is the current behaviour? Warning and destructive Alert variants do not explicitly own their foreground text colour. In muted parent contexts, nested Admonition content can inherit lighter text styling. ## What is the new behaviour? Warning and destructive Alert variants now include `text-foreground`, just like the default counterpart. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Updated styling for alert components with destructive and warning variants. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46050?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
|
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
|
d0fd4478c0 |
chore: migrate Popover usages to Shadcn components (#45980)
## Problem We have multiple Popover components ## Solution - [x] migrate Popover usages to Shadcn components - Migrated JSON and text editor in the `TableEditor` (inline row edition) - Migrated the template popover in the logs explorer templates page - [x] remove `_Shadcn_` suffix from Popover components (renaming + prettier) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Unified popover implementation across the app and design system; dropdowns, calendars, menus and tooltips now use a consistent popover API with no visual or interaction changes. * **Chores** * Minor prop typing update for the logs date-picker to align with the consolidated popover content type. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45980) <!-- 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" /> |
||
|
Danny WhiteandGildas Garcia
|
09fa2b8fc1 |
Clarify alert and collapsible design-system patterns (#45863)
## What kind of change does this PR introduce? Docs update and design-system component taxonomy cleanup ## What is the current behavior? The design-system docs conflate low-level shadcn primitives with product-level alert patterns. Collapsible documentation previews the alert-specific wrapper, and the alert/collapsible relationship is unclear ## What is the new behavior? - Documents Alert and Collapsible as low-level atom components - Moves the alert-styled expandable wrapper into `ui-patterns/expandable-alert` as `ExpandableAlert` - Documents Expandable Alert as a Fragment Component next to Admonition - Updates the Session Timeout modal to import `ExpandableAlert` from `ui-patterns/expandable-alert` <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * `CollapsibleAlert` component is now available for alert-styled expandable content. * **Documentation** * Updated component documentation to clarify when to use `Alert`, `Collapsible`, `Admonition`, and `CollapsibleAlert`. * Added comprehensive documentation for `CollapsibleAlert` with usage examples and variant options. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45863) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com> |
||
|
Joshen Lim
|
eb915e99f8 |
Joshen/debug 76 fix sticky hover state on log rows (#45933)
## Context The original problem was that some log rows remain in the hover state after the cursor moves away I was just cleaning up some of the styles and noticed that it doesn't seem to happen anymore so thinking this might have fixed it haha 😅 ## Changes involved - Remove `group-hover` background color change behaviour in `TableCell` in `ui` - `TableRow` should handle the background color instead, hence the changes in `UnifiedLogs.utils` too - Remove unnecessary `renderLiveRows` in `DataTableInfinite` -> the prop isn't being passed anywhere ## To test - [ ] The sticky hover state happens when you hover over the rows very quickly, so just make sure there's no "stale" hover state in any row eg: <img width="400" alt="image" src="https://github.com/user-attachments/assets/b4a91bc6-d269-4ee6-b222-b0476b9feffa" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Standardized hover styling for log rows and table cells to use direct hover rules for more consistent visual feedback. * Adjusted table cell hover/transition behavior to simplify styling while preserving layout and checkbox spacing. * Streamlined the data table API by removing the custom live-row rendering override. * Made the resizable panel’s minimum size dynamic based on dock position. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45933) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Ivan Vasilov
|
0abe792889 |
chore: Migrate the main Tailwind JS config to CSS (#45686)
This PR migrates the JS config for Tailwind into a CSS config. As such, all variables have been defined as CSS variables and they're using the specialized Tailwind syntax for generating utility classes. Beside the migration, these changes were also added: - Added `tailwind.config.css` to few packages to make the Tailwind Intellisense work. - Migrated away from Radix style color classes to our defined classes, the values will remain the same. - Most of the CSS is generated by scripts, they'll be removed in next PRs. * Removed redundant `border-light` classes from several components since it was undefined. * Removed redundant `text-strong` classes from several components since it was undefined. How to test: - Open all apps, compare the UI (mainly colors) to builds from #45417 and try to find a difference. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Harmonized color variable usages and updated UI color references (affects palettes, charts, gradients, hero illustrations, and scrollbars). * Tweaked border, tab, and selection visuals across components. * **New Features** * Added a suite of theme animations and refined typography presets used by site prose and docs. * **Refactor** * Overhauled Tailwind/theme configuration and color token generation for more consistent theming. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas GarciaandAli Waseem
|
bcfc666284 |
chore: migrate remaining old input usages (#45791)
## Problem We still use our old `Input` in some places. This means multiple components are bundled for the same use cases and we have some design differences across the application. ## Solution - [x] Migrate to the new ShadCN inputs - [x] Fix `<InputGroupButton>` cannot be used with components that triggers modal, popovers, dropdowns - [x] Fix `<FormLayout>` does not display errors for inputs that are not inside a React Hook Form - [x] Fix `InputGroup` invalid design ## Screenshots ### Table Editor - table edition sidepanel Before: <img width="758" height="1206" alt="image" src="https://github.com/user-attachments/assets/d4da4af0-a9d3-4967-935f-554233d7896b" /> After: <img width="747" height="1209" alt="image" src="https://github.com/user-attachments/assets/6286e6a0-317f-486c-a8b4-0e233706ba0f" /> ### Table Editor - row edition sidepanel Before: <img width="675" height="710" alt="image" src="https://github.com/user-attachments/assets/9fdfe819-6d62-40c8-bdc8-fa6051dab834" /> After: (I placed the TextArea button at the bottom because ShadCN reserves a full line space for it. It was weird at the top. <img width="674" height="714" alt="image" src="https://github.com/user-attachments/assets/611d5f8d-de12-4c16-ac38-bd9192cd6d73" /> ### Database settings - password reset modal Before: <img width="773" height="548" alt="image" src="https://github.com/user-attachments/assets/17f679a7-3aed-4cf9-8245-194a8a16823f" /> After: <img width="563" height="311" alt="image" src="https://github.com/user-attachments/assets/08888471-4cc8-4a3c-bf1e-8dce364f1aa6" /> ### Database - Event triggers Before: <img width="1134" height="453" alt="image" src="https://github.com/user-attachments/assets/e9d06d58-782c-4ccb-93c0-2ce1ca8c5748" /> After: <img width="1115" height="451" alt="image" src="https://github.com/user-attachments/assets/c437acb0-c602-4dd2-b249-66c7a7e739d6" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Copy action now shows confirmation state (“Copy” → “Copied”) when copying error details. * **UI Improvements** * Unified form-field layouts and input-group composition across editors, settings, and integration forms for a more consistent experience. * Password-strength feedback moved into field layout for clearer messaging. * Improved inline input/button/dropdown behaviors and non-React-form error display. * **Removed** * Display configuration settings component. [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45791) <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Ali Waseem <waseema393@gmail.com> |
||
|
Gildas Garcia
|
35571d242e |
chore: migrate <Collapsible> to shadcn <Collapsible> (#45819)
## Problem We have multiple `Collapsible` components. ## Solution Reduce their number by using only the one from shadcn. I haven't noticed any visual nor functional changes. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Migrated expandable/collapsible UI to a unified shadcn-based implementation for more consistent expand/collapse behavior across the app. * **Style** * Updated listbox check icon sizing and removed obsolete collapsible open/close animations. * **Chores** * Removed deprecated collapsible variants and consolidated UI component surface for simpler maintenance. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas GarciaandDanny White
|
1fbed21528 |
chore: migrate old <Alert> usages to <Admonition> (#45797)
## Problem Some pages still use the old `<Alert>` component ## Solution - [x] Use the new `<Admonition>` - [x] Remove `<Alert>` ## Screenshots ### Table Editor - Disable RLS modal Before: <img width="582" height="527" alt="image" src="https://github.com/user-attachments/assets/bbc5b874-2569-4cd6-98c0-5edd5ac78e0f" /> After: <img width="543" height="505" alt="image" src="https://github.com/user-attachments/assets/bb1da899-2163-4b26-ba0b-74726e0cb5df" /> ### Organization Billing Before: <img width="1111" height="512" alt="image" src="https://github.com/user-attachments/assets/6fb410fb-9ac0-4fb7-8dde-e304ddee7ece" /> After: <img width="1103" height="531" alt="image" src="https://github.com/user-attachments/assets/6eda6ede-edc6-482f-ab9c-d085402cbd64" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Replaced Alert UIs with Admonition across billing, settings, storage, integrations, and editor interfaces. * Removed the deprecated AlphaPreview component. * **Chores** * Removed the Alert component from the UI library, including its styles, tests, and theme configuration. [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45797) <!-- 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 --> |
||
|
Gildas Garcia
|
106d4e6add |
chore: migrate/remove Card_legacy_ (#45680)
## Problem We have lots of duplicated/deprecated components. ## Solution - Migrate to new ones - Fix invalid HTML ## Screenshots Before (translate the hovered card up, first item in the screenshot): <img width="2842" height="1178" alt="image" src="https://github.com/user-attachments/assets/298b51ba-2f4e-4caa-888e-d0de7b22eb7f" /> After (same as the features page): <img width="2824" height="954" alt="image" src="https://github.com/user-attachments/assets/b34637a7-ed6f-4997-8bb1-a133d4a736ac" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Updated the Company page layout with modernized UI components and simplified markup structure for improved clarity and consistency across the Team, Investors, and Press sections. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Jordi Enric
|
d859176eac |
fix(studio): restore readable warning banner and toast close button after Tailwind v4 (#45585)
## Problem Two visual regressions surfaced after the Tailwind v4 migration (#45318): 1. The Postgres upgrade-failed banner used the deprecated `Alert` component, whose `warning` variant relies on custom `amber-1100` / `amber-1200` color tokens that no longer resolve. The title rendered as near-white on the yellow background. 2. The sonner toast close button forced `bg-transparent! hover:bg-transparent!`, letting the library's default translucent circle bleed through against the toast's overlay background on hover. ## Fix - Migrate `ProjectUpgradeFailedBanner` to `Admonition` (the recommended replacement per the deprecation note on `Alert`), which uses semantic `warning-*` tokens defined in the theme. - Drop the transparent-bg overrides on the sonner close button and give it a proper `hover:bg-surface-200` with a fixed `size-6` hit area so the X has a clean hover target. ## Before <img width="2940" height="338" alt="image" src="https://github.com/user-attachments/assets/2cf2cf52-cdf2-429d-b50c-5dc4e5b9c84b" /> ## After <img width="1642" height="506" alt="CleanShot 2026-05-06 at 11 14 03@2x" src="https://github.com/user-attachments/assets/b6c9b3e2-9d3e-437d-92a6-95d12730e842" /> ## Testing - [ ] Trigger a failed Postgres upgrade state and confirm the banner title/description/actions are all readable on the amber background. - [ ] Fire a toast and hover the close button — the hover should show a subtle square background, not a translucent circle. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fix** * Project upgrade failure banner now only appears when an upgrade has failed and no longer supports dismissing. * **Style** * Replaced the warning banner UI with a streamlined admonition that shows only a “Contact support” action. * Improved toast close-button styling for clearer sizing, color, and interaction states. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny WhiteandJoshen Lim
|
daa3119b2f |
chore(studio): align sidebar hover states (#45569)
## What kind of change does this PR introduce? UI polish. Updates sidebar and submenu navigation hover and active styling. ## What is the current behavior? Product submenu navigation items either lack a hover fill or use a hover fill that visually matches the active state. Adjacent hovered and selected rows can appear to touch. ## What is the new behavior? Primary sidebar buttons, sidebar sub-buttons, and product submenu pills now share a muted hover fill while preserving the full accent fill for active/selected states. Product submenu rows also get a small visual gap with slightly reduced vertical padding to keep the overall spacing compact. | After | | --- | | <img width="988" height="408" alt="CleanShot 2026-05-05 at 11 53 05@2x" src="https://github.com/user-attachments/assets/560ac8a5-1262-41af-a196-618c86580150" /> | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Refined sidebar hover/active states with subtle accent alpha colors for a more polished visual experience. * Updated sidebar menu spacing and rounded corners for improved touch and visual clarity. * **UI Improvements** * Sidebar now only displays when sections exist and uses a streamlined submenu flow for more consistent, predictable navigation. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
Gildas Garcia
|
b554f58106 |
chore: migrate Input usages to Shadcn components (#45429)
## Problem We want to reduce the code we ship and maintain. ## Solution - Migrate old `Input` usage to the new Shadcn `input` This PR focuses on: - DevToolbar - design-system examples - `www` usages - `docs` usages ## Screenshots ### Docs: OAuth Apple Before: <img width="613" height="508" alt="image" src="https://github.com/user-attachments/assets/1d2d7726-cc5e-471f-a2c2-995b9d7f70ee" /> After: <img width="606" height="530" alt="image" src="https://github.com/user-attachments/assets/ca4f522f-de9c-4edf-966b-70cad5015d0c" /> NOTE: Also used the `DataInput` for the secret once the inputs are filled. ### Docs: Extensions Before: <img width="596" height="161" alt="image" src="https://github.com/user-attachments/assets/16d2f548-90dc-4987-9954-7c47ac58e76e" /> After: <img width="604" height="227" alt="image" src="https://github.com/user-attachments/assets/62c74102-98c6-47a6-b19b-cbf67dfad68f" /> ### WWW: Blog search Before: <img width="971" height="417" alt="image" src="https://github.com/user-attachments/assets/efb0307e-60b5-4d8f-9823-c8b8996cdf32" /> After: <img width="964" height="403" alt="image" src="https://github.com/user-attachments/assets/2dc0decd-b773-4bc6-9a72-c43f352f8cbf" /> ### WWW: Blog author search Before: <img width="953" height="337" alt="image" src="https://github.com/user-attachments/assets/1f629704-ab7d-4e4b-878e-1838ab16037f" /> After: <img width="1028" height="341" alt="image" src="https://github.com/user-attachments/assets/d8d54dcb-3c00-46ea-b97f-55c16cda917f" /> ### WWW: Assistant demo Before: <img width="421" height="715" alt="image" src="https://github.com/user-attachments/assets/bcc4a591-d53c-4202-acf8-2b3d6cfd52d2" /> After: <img width="435" height="731" alt="image" src="https://github.com/user-attachments/assets/8a57c5da-5c9e-474d-a89e-2835d3498aef" /> ### WWW: Integrations Before: <img width="740" height="599" alt="image" src="https://github.com/user-attachments/assets/cf3d3d8a-b247-4e20-b47d-11976ca49c57" /> After: <img width="911" height="492" alt="image" src="https://github.com/user-attachments/assets/dcb5b6e8-f4e2-4801-b390-352390a0b486" /> ### WWW: features Before: <img width="1098" height="491" alt="image" src="https://github.com/user-attachments/assets/ea3645c5-df03-4eb9-b28c-41018e01c41e" /> After: <img width="976" height="479" alt="image" src="https://github.com/user-attachments/assets/4439a38e-6342-42cd-a859-1e599a8cf0f4" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Adjusted input widths and spacing for more consistent search and form layouts. * **Refactor** * Standardized input components across apps and docs, and reimplemented search controls as composed input groups with dedicated icon/action areas. * **Chores** * Removed a deprecated legacy input variant along with its legacy styles and tests. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
77140cae32 |
fix: table hover styles are incorrect (#45512)
## Problem When migrating to tailwind v4, we introduced a regression on table styles when hovering a row: <img width="1190" height="131" alt="image" src="https://github.com/user-attachments/assets/b84b8968-fa23-42bd-ad84-091fe7ff8d73" /> ## Solution Fix the styles: <img width="1200" height="126" alt="image" src="https://github.com/user-attachments/assets/df99d215-4fcb-4437-804d-0fc784cd8aaf" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Enhanced table row and cell styling to improve hover effects and selection state visual feedback, providing clearer and more consistent interactions when working with tabular data. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Jeremias Menichelli
|
c49eb8bb7d | Revert "chore(studio + design-system): more flexible Admonition" (#45535) | ||
|
Ali Waseem
|
618c902e1a |
feat(studio): add keyboard shortcuts to Database listing pages (#45467)
## Summary Adds the `O→S` / `Shift+F` / `Shift+N` / `F→C` shortcut set across every Database listing page, on top of the schema-visualizer pattern from #45386. Fixes [FE-3131](https://linear.app/supabase/issue/FE-3131). A shared `list-page.*` registry replaces what would have been a per-page registry file for each route, and `useShortcut`/`Shortcut` gain a `label` override so a single ID renders contextually in Cmd+K and hover tooltips. ## Pages and shortcuts | Page | `O→S` | `Shift+F` | `Shift+N` | `F→C` | | --- | --- | --- | --- | --- | | Tables | Open schema selector | Search tables | Create new table | Clears search + entity-type filter | | Functions | Open schema selector | Search functions | Create new function | Clears search + Return Type + Security | | Triggers — data | Open schema selector | Search triggers | Create new trigger | Clears search + Table filter | | Triggers — event | — | Search event triggers | Create new event trigger | Clears search + Owner filter | | Enumerated Types | Open schema selector | Search enumerated types | Create new enumerated type | Clears search | | Indexes | Open schema selector | Search indexes | Create new index | Clears search | | Roles | — | Search roles | Add new role | Clears search + filter type → 'all' | | Publications | — | Search publications | — | Clears search | | Extensions | — | Search extensions | — | Clears search | `Shift+N` only fires when the page-specific gate allows it (permission + unlocked schema + any other prerequisite like `hasTables` for triggers). ## Test plan - [ ] On each of the 9 pages, all four shortcuts behave as listed in the table above - [ ] Hover the wrapped controls — tooltip shows the page-specific label and the right keybind badge - [ ] Open the schema selector via `O→S` — the hover tooltip is suppressed while the popover is open - [ ] `Shift+N` is a no-op on locked schemas / when permission is missing / when a prereq fails (e.g. no tables on Triggers data) - [ ] `Shift+F` focuses the search input; while focused, Escape clears (with text) → Escape blurs (when empty) - [ ] `Cmd+K` shows the page-specific shortcut name while on each page; the entry goes away on navigation - [ ] `Mod+/` reference sheet shows one "List pages" group with 4 generic entries - [ ] No regression to existing schema-visualizer / table-editor / SQL-editor shortcut behavior <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added a dedicated list-page shortcut group in the shortcuts reference. * **Improvements** * Keyboard shortcuts across database list pages: focus & select search, reset filters, and create-new-item shortcuts. * Escape now clears/searches or blurs inputs to avoid accidental popover closes. * Create/new buttons respond to shortcuts when allowed; disabled actions keep permission tooltips for clarity. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny WhiteandAli Waseem
|
e540f9089f |
fix(studio): restore Safari table editor cell copy and context menu (#45353)
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? Bug fix. ## What is the current behavior? - Safari Table Editor cells fail to copy from a focused cell with `⌘C`. - Safari right-click can show the browser menu instead of the custom cell menu. - Copy can leave RDG's copied-cell fill behind. ## What is the new behavior? - Reuses the existing shared `copyToClipboard(value, onSuccess)` pattern, with the Safari clipboard fix inside that util. - Handles selected-cell `⌘C` in the RDG keydown path, preventing browser/RDG defaults and showing the success toast only after copy. - Replaces the row-level synthetic context-menu shim with RDG's `onCellContextMenu`, so we prevent Safari's browser menu at the source and select/focus the target cell. - Keeps the selected-cell outline while the controlled menu is open. ## Additional context - `RowRenderer` was only supporting the old context-menu shim; removing it is part of moving to RDG's cell event path. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **New Features** * Context menu now provides feedback with toast notifications when copying cells or rows. * Selected cells retain their visual styling when context menu is open. * **Bug Fixes** * Improved keyboard shortcut handling for copy functionality. * Enhanced clipboard error handling with user-friendly error messages. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Ali Waseem <waseema393@gmail.com> |
||
|
Danny White
|
5bfbae22a9 |
chore(studio + design-system): more flexible Admonition (#45302)
## What kind of change does this PR introduce? Feature and design-system cleanup. Resolves DEPR-551. ## What is the current behavior? Admonition supports several overlapping content shapes, but it previously did not support a first-class success state or description-only usage cleanly. Title-only usage was also possible, which made some callouts read like floating headings without body copy. Docs MDX Admonitions could also pick up prose spacing around rich children, while the design-system Tailwind config emitted an ESM/CommonJS warning in the design-system app. ## What is the new behavior? Adds a `success` Admonition type, description-only support, and a stricter content contract: `title` or legacy `label` now requires either `description` or `children`. Existing title-only Studio callsites have been converted to description-only callouts. The design-system docs now include examples for description-only and success Admonitions, plus guidance for `title`, `description`, `children`, and legacy `label` usage. This also tightens Admonition body spacing so rich MDX children keep docs link/code styling without inheriting excessive prose margins, and renames the design-system Tailwind config to `tailwind.config.cjs` so it matches its CommonJS syntax. Warning and destructive alerts now explicitly set `text-foreground`, preventing nested Admonition titles from inheriting muted form-description colour after the Tailwind v4 cascade changes. | Before | After | | --- | --- | | <img width="1818" height="388" alt="Image" src="https://github.com/user-attachments/assets/283a1853-348a-4d74-a408-013957350e5e" /> | <img width="1380" height="462" alt="Image" src="https://github.com/user-attachments/assets/e5761e8e-3697-423b-805b-45110205099a" /> | | <img width="1398" height="550" alt="CleanShot 2026-04-28 at 15 12 41@2x" src="https://github.com/user-attachments/assets/982694d9-5461-4362-8bae-a6e2b4c60e8b" /> | <img width="1402" height="450" alt="CleanShot 2026-04-28 at 15 13 09@2x" src="https://github.com/user-attachments/assets/0b1257c4-6b58-4c39-a182-4861a9e378ee" /> | | <img width="1640" height="716" alt="CleanShot 2026-04-28 at 15 17 25@2x" src="https://github.com/user-attachments/assets/a5be4d5f-2bf7-4dc2-b396-56129fe64ec9" /> | <img width="1630" height="716" alt="CleanShot 2026-04-28 at 15 16 00@2x" src="https://github.com/user-attachments/assets/0d589252-aaf8-4efc-9d81-15ec4f99ec61" /> | | Design System Docs | | --- | | <img width="1646" height="1864" alt="CleanShot 2026-04-28 at 14 59 15@2x" src="https://github.com/user-attachments/assets/12d13595-8972-4fb2-a04a-fb916388ebb6" /> | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added a "success" admonition variant and new example previews demonstrating success and description-only usages. * **Documentation** * Clarified admonition guidance: when to use title vs description vs children; added example sections for short callouts and success messages. * **Refactor** * Standardized UI by moving short/advisory text into description across the app and harmonized trailing punctuation. * **Style** * Ensured warning/destructive admonitions use consistent foreground text styling. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
61c6c51b81 |
feat(studio): improve keyboard shortcuts reference (#45352)
## What kind of change does this PR introduce? Feature improvement to the Studio keyboard shortcuts reference and command palette behaviour. ## What is the current behavior? The keyboard shortcuts sheet does not support filtering, some shortcut labels are harder to scan at a glance, and the command palette shows "Show all keyboard shortcuts" before the more contextual shortcuts in the `Shortcuts` section. ## What is the new behavior? Adds live filtering to the keyboard shortcuts sheet, keeps the sheet width stable on small breakpoints, renders arrow-based shortcuts more compactly, and moves "Show all keyboard shortcuts" to the end of the `Shortcuts` section so contextual actions appear first. https://github.com/user-attachments/assets/315a1a36-0cfb-4a0d-b6de-ef3c86aa9a05 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added search for keyboard shortcuts with live filtering, group-aware results, clear-search action, and empty-state handling * Added arrow key symbols for clearer shortcut visuals * **Improvements** * Updated shortcut visuals and typography for a tighter, pill-style presentation * Improved command menu ordering so shortcut-related entries appear in a logical sequence * **Tests** * Added tests covering shortcut search behavior, display formatting, and platform-specific key rendering <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
