mirror of
https://github.com/supabase/supabase.git
synced 2026-10-07 02:15:05 +03:00
cli/ref-doc
829
Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
|
|
29ad86558c |
fix(studio): make menu links reliable (#49584)
## What kind of change does this PR introduce? Bug fix. Resolves [FE-4192](https://linear.app/supabase/issue/FE-4192/org-and-project-selectors-sometimes-dont-register-selections). ## What is the current behavior? Navigation actions sometimes nest links inside command or dropdown menu items. Closing the menu during selection can prevent the nested link navigation from registering. ## What is the new behavior? - Adds a documented Studio CommandItemLink composition that wraps command items with their navigation link. - Migrates all Studio command-item links, including organisation, project, function, database, branch, and integration actions. - Uses the dropdown menu asChild composition for both infrastructure-diagram Manage replica actions. - Preserves native link behaviour and leaves disabled command items non-navigable. ## To test - [ ] [Organisation and project selectors](https://studio-staging-git-dnywh-fe-4192-selector-links-supabase.vercel.app/dashboard/org): open the organisation selector and try an organisation, All Organizations, and New organization. Open a project, then use the project selector to switch projects and open New project. Confirm every action navigates on the first click. - [ ] [Branch selector](https://studio-staging-git-dnywh-fe-4192-selector-links-supabase.vercel.app/dashboard/project/_): in a project with branching enabled, open the branch selector. Switch branches and select Manage branches. Confirm both navigate on the first click. - [ ] [Database selector](https://studio-staging-git-dnywh-fe-4192-selector-links-supabase.vercel.app/dashboard/project/_/observability/query-performance): open the Source selector. Switch between the primary database and a read replica if available, then select Create a new read replica. Confirm selections apply and the footer action navigates on the first click. - [ ] [Function selector](https://studio-staging-git-dnywh-fe-4192-selector-links-supabase.vercel.app/dashboard/project/_/auth/hooks): select Add a new hook, choose a hook, select Postgres, then open the Postgres function selector and select New function. Confirm it navigates on the first click. - [ ] [Infrastructure diagram](https://studio-staging-git-dnywh-fe-4192-selector-links-supabase.vercel.app/dashboard/project/_/settings/infrastructure): for a project with a read replica, select Manage replica from both diagram variants. Confirm the replica settings open on the first click. - [ ] On any navigational row above, modifier-click and confirm native link behaviour is preserved. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added consistent link navigation across organization, project, branch, function, replica, and integration menus. * Added project-specific destinations to organization and project selectors. * Preserved disabled-item behavior while improving accessible command-menu link semantics. * **Bug Fixes** * Improved navigation and menu-closing behavior for command items and dropdown actions. * **Tests** * Added coverage for link destinations, accessibility roles, disabled states, and route preservation. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
928049ce2c |
[FE-3717] feat(studio): Multigres cluster topology diagram (#49298)
Adds an infrastructure/topology diagram for High Availability (Multigres) projects showing the real cluster topology — gateway tier, shard group, and the primary + read replicas inside it — on both the project homepage and the database/replication page, replacing the primary-only view and the "Replication unavailable" empty state. <img width="790" height="541" alt="Screenshot 2026-08-20 at 8 23 42 PM" src="https://github.com/user-attachments/assets/0bce21e3-2091-4285-84ca-60fdecb10d39" /> Addresses [FE-3717](https://linear.app/supabase/issue/FE-3717/show-replicas-in-replication-diagram). **Added:** - `data/ha-admin/` — read-only queries for the mgmt-api `/ha-admin/v1/{gateways,poolers,cells,databases}` multiadmin passthrough (ported from `bobbie/ha-stub`, re-authored to `queryOptions`). Responses are validated with zod at the fetch boundary (all fields optional per proto3 zero-value omission; enum-shaped fields stay plain strings so new proto values degrade gracefully); malformed payloads surface through the diagram's error fallback. - `HaTopology.utils.ts` — pure topology mapper (+ 26 unit tests): shard grouping, primary identified via `routingState.role` (deprecated `type` as fallback) with **failover-safe election** — when the outgoing and incoming primary briefly both claim `ROUTING_ROLE_PRIMARY`, the highest routing rule (coordinator term, leader subterm) wins, matching the multigateway's own election — plus status mapping onto the existing Healthy / Coming up / Going down / Unhealthy vocabulary, and an AZ formatter for `id.cell` that degrades to the raw cell name. - HA diagram nodes/edges: `Multigateway` card, shard group box with header pill (`Shard 1`, `Automatic failover` + tooltip), `Primary Database` card styled like the standard diagram's — neutral border, green icon chip (with the standard CPU / Disk / RAM footer — connections omitted until their meaning through the multigateway is confirmed), `Read Replica` cards, and the standard animated replication edges (status lives on the card badges). Poolers and gateways poll every 30s without re-running layout (topology projection + structural sharing). Drag-to-pan works through the shard group box, and the metrics footer's skeleton matches the loaded row height so the card doesn't shift. - Accessibility: the failover tooltip trigger is a keyboard-focusable button, status badges sit in stable `role="status"` live regions, the region flag is decorative (`alt=""`), and the edge dash/spinner animations respect `prefers-reduced-motion` (applied to the pipelines diagram's edges too). - Fallbacks: `AlertError` ("Failed to retrieve cluster topology") when either ha-admin query errors, and a "Cluster topology unavailable" empty state when the topology comes back empty — never a half-rendered diagram. **Changed:** - `InstanceConfiguration` is now topology-source-aware: it branches internally on `useHighAvailability()`, so both surfaces (homepage `TopSection` and the replication page) get the right diagram with no new wiring. The two-pass measured dagre layout moved into a shared `DiagramFlow`; `nodeTypes`/`edgeTypes` are module-level consts. - `getEdgeVisual` + the mid-edge icon chip lifted out of `ReplicationDiagram/Edges.tsx` into `components/ui/ReactFlow/EdgeVisual.tsx` so both diagrams derive edge icon + line style from one state object (no behavior change for the pipelines diagram). The primary card's CPU/Disk/RAM footer is likewise extracted into a shared `ComputeMetricsFooter`. - Fixes a latent relayout loop inherited from the region-box pattern: handing React Flow a freshly created (unmeasured) group node on every layout pass reset `nodesInitialized`, re-triggering the measured pass and `fitView` forever — which made the diagram snap back to center and effectively unpannable. The shared `DiagramFlow` now re-attaches known measurements to group nodes, which also covers the standard diagram's region boxes. - Standard diagram: the API Load Balancer → primary edge is now static — no data flows over it, the line only indicates a relation. - `database/replication` page: the HA early-return empty state is replaced by the diagram under a "High Availability cluster topology" header. Non-HA projects are untouched. **Intentional deviations from the mock** (for design review): 1. **No per-replica regions** — alpha replicas are one-per-cell inside a single region, so the mock's `eu-west-1` / `ap-southeast-1` on sibling replicas would be false. Availability zone per node, region shown once on the primary. 2. **"Primary Database", not "Main Database"** — matches the string both existing diagrams already ship, and the same component now renders both project types. 3. **No collapse chevron on the shard header** — alpha has exactly one shard; collapsing it would hide the whole diagram. The group box still ships; add collapse when `shards.length > 1`. 4. **Failover shown on the shard group, not replica cards** — failover is a cohort property; per-card badging would assert readiness we can't verify without a per-pooler `/status` fanout. 5. **Standard node/edge styling reused** (per review) — neutral primary border + green chip and the default animated edges instead of the mock's green ring and dashed green arrowed edges, keeping the HA and non-HA diagrams visually consistent. **Confirmed against a real local Multigres cluster:** cells are named `cell-1`/`cell-2`/… (not AZ-shaped — the AZ formatter falls back to the raw cell name as designed); `GET /platform/projects/{ref}/databases` returns only the primary row for HA projects; and the `/ha-admin` passthrough returns **each gateway/pooler record once per cell it fans out to** — the topology mapper dedupes by id, but worth confirming with @sbc-bobbie whether the backend should dedupe. **Known alpha limitation:** node health and the "replicating" edge state derive from the pooler's *topology record* (`lifecycleStatus`/`servingStatus`), not a live probe — a pooler that crashes without publishing a terminal state can read as healthy until the topology evicts its record, and a serving replica with paused replay still shows a green edge. This matches the existing replication diagram's semantics (`ACTIVE_HEALTHY` ⇒ animated edge). Live per-pooler signals (WAL receiver state, replay position) exist on `GET /poolers/{cell}/{name}/status` but need a per-pooler fanout — deliberately deferred, noted on `getPoolerStatus`. **Still to confirm** (doesn't block review): whether the `/ha-admin` passthrough is deployed to production or staging-only (if staging-only, this should get a flag before GA). ## To test Tested end-to-end locally against a real Multigres project (standard-project regression pass, HA creation flow, error fallback against real 500s, and full topology + polling + console checks against live multiadmin data): - **HA project homepage**: diagram card shows Multigateway → shard box (`Shard 1`, count badge, `Automatic failover` tooltip) → green-bordered Primary Database (region, AZ, size) + Read Replica cards (AZ), dashed green animated edges to healthy replicas. No flow/map toggle for HA. - **HA project → Database → Replication**: same diagram under a "High Availability cluster topology" header; no Destinations section; the old "Replication unavailable…" state is gone. - **Error path**: if `/ha-admin/v1/*` fails, both surfaces show "Failed to retrieve cluster topology" with Contact support — no partial diagram. - **Standard project regression**: homepage diagram (primary card, flow ⇄ map toggle round-trips), replication page (pipelines diagram + Destinations) all unchanged; zero requests to `/ha-admin/*`. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added High Availability topology diagrams to the Replication page. - Display gateways, primary databases, replicas, shards, statuses, regions, infrastructure details, and compute metrics. - Added observability links and live topology updates with loading, error, and unavailable states. - **Bug Fixes** - Improved handling of incomplete infrastructure identities and unexpected data. - Corrected topology layout, node spacing, and visual edge behavior. - **Accessibility** - Reduced-motion preferences now disable diagram animations and loading effects. - Improved status announcements for assistive technologies. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> |
||
|
|
34d6c2fbc5 |
feat(studio): move read replica creation to a dialog (#49516)
## What kind of change does this PR introduce? Studio interface improvement. ## What is the current behavior? Read replica creation uses an oversized sheet, with region selection, eligibility guidance, and pricing all awkwardly competing for space. The cost estimate can briefly show a compute-only subtotal while disk pricing is still loading. ## What is the new behavior? Read replica creation uses a focused, centred dialog with a vertical region field, contextual eligibility guidance, and a separate cost breakdown. Disabled forms omit redundant deployment-location text. The additional monthly cost appears only after both compute and disk pricing inputs are available. | Before | After | | --- | --- | | <img width="1024" height="759" alt="Infrastructure Settings Chives Pantry Supabase" src="https://github.com/user-attachments/assets/afb0a9a6-3575-4d65-98a3-f21b23a032ac" /> | <img width="1024" height="759" alt="Infrastructure Settings Chives Pantry Supabase" src="https://github.com/user-attachments/assets/89fd96f8-8f95-4b88-b1fd-505a261ff9a0" /> | | <img width="1024" height="759" alt="Infrastructure Settings Chisel Toolshed Supabase" src="https://github.com/user-attachments/assets/dd110b3a-6aca-4074-9a69-2dc711f4d1c7" /> | <img width="1024" height="759" alt="Infrastructure Settings Chisel Toolshed Supabase" src="https://github.com/user-attachments/assets/894bbd81-01d5-411e-8279-1bd2e5839cff" /> | | <img width="1024" height="759" alt="Infrastructure Settings Chisel Toolshed Supabase" src="https://github.com/user-attachments/assets/09cbd315-c13d-4987-b274-daf4f91ea10d" /> | <img width="1024" height="759" alt="Infrastructure Settings Chisel Toolshed Supabase" src="https://github.com/user-attachments/assets/a1effb33-1bf2-450a-8cd8-0de8675231c9" /> | ## To test - Open `/project/<ref>/settings/infrastructure` and select **Add read replica** from the section header or empty state. Confirm the dialog opens and closes using Close, Escape, backdrop, and Cancel. - On an eligible project, confirm the pricing note initially reads **Estimated additional cost**, then adds **of $X/month** once pricing loads. **View breakdown** should remain disabled until then. - Change the region and open **View breakdown**. Confirm the monthly cost table has standard row borders and an estimated total. - On a project below Small compute, confirm the region field is disabled, its deployment-location description is hidden, and **Change compute** returns to the compute controls. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Replaced the add read replica sheet with a dialog-based setup experience. * Added region details, eligibility guidance, compute recommendations, and estimated pricing. * Added retry options when pricing information fails to load. * **UI Improvements** * Updated warning messages, documentation links, and action labels. * Improved dialog behavior and deferred data loading until opened. * **Tests** * Expanded coverage for dialog behavior, eligibility warnings, pricing errors, retries, and recommendations. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
3811e75140 |
[MUL-1417] feat(studio): show SSL enforcement as always on for HA projects (#49524)
High Availability (Multigres) projects always enforce SSL, and the management API now rejects any attempt to read or change the setting (supabase/platform#37484). This makes the Database Settings toggle reflect that instead of surfacing an error. **Changed:** - `SSLConfiguration`: skip the `ssl-enforcement` query for HA projects (via `useHighAvailability`) and render the "Enforce SSL on incoming connections" switch checked + disabled with the tooltip "SSL is always enforced on High Availability projects". Non-HA projects are unchanged. - `SSLEnforcementConfirmDialog`: add a controlled `open`/`onOpenChange` mode. The switch now opens the dialog from its own `onCheckedChange` rather than a wrapping `AlertDialogTrigger`, so a disabled switch can no longer open the dialog by clicking the row wrapper beside it (this was reachable for every disabled state, and for HA would have PUT into the new 400 guardrail). The JIT section's existing trigger-with-children usage is untouched. **Added:** - `SSLConfiguration.test.tsx` (MSW): HA → checked/disabled, tooltip, no `ssl-enforcement` request, no dialog from switch/wrapper clicks; non-HA → reflects fetched config, switch opens the dialog and Cancel leaves it unchanged. ## To test On an HA project → Project Settings → Database → SSL configuration: - Switch is on and disabled, hovering shows "SSL is always enforced on High Availability projects" - No request to `/v1/projects/{ref}/ssl-enforcement` fires, no spinner sticks, no error toast - Clicking the disabled switch or the empty area beside it does **not** open the "brief downtime" dialog On a non-HA project: - Switch reflects the current config and the GET fires once - Clicking the switch opens the confirm dialog with Enable/Disable SSL; Cancel and Escape close it without changing the switch or sending a PUT - Clicking beside the switch (not on it) does not open the dialog Linear: https://linear.app/supabase/issue/MUL-1417/database-settings-disable-ssl-enforcement-toggle <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - High Availability projects now show SSL as always enabled, with an explanatory tooltip. - SSL settings are protected from changes on High Availability projects. - SSL confirmation dialogs now open and close reliably when changing settings. - Added accessible announcements for SSL configuration loading and updates. - **Bug Fixes** - Improved SSL state handling for standard and High Availability projects. - Prevented unnecessary SSL enforcement checks for High Availability projects. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> |
||
|
|
5f50338a2f |
fix(studio): keep region flags visible on light surfaces (#49517)
## What kind of change does this PR introduce? Studio interface fix. ## What is the current behavior? Region flags with light backgrounds, such as Japan, can disappear against light Studio surfaces. Flag rendering is also repeated across region selectors and infrastructure views. ## What is the new behavior? Region flags use a shared `RegionFlag` component with the existing small radius and a subtle 1px border. The treatment is applied consistently across project creation, replication, read replicas, infrastructure, and Edge Function observability. | Before | After | | --- | --- | | <img width="746" height="246" alt="CleanShot 2026-08-25 at 14 01 07@2x" src="https://github.com/user-attachments/assets/5ccffccd-f253-47ca-a587-e97d1e8306a8" /> | <img width="746" height="234" alt="CleanShot 2026-08-25 at 14 09 20@2x" src="https://github.com/user-attachments/assets/9d59f7f6-4364-4c2c-8b97-a9673616736a" /> | ## To test - Open the new project flow and inspect the selected region and region menu. Confirm light flags remain visible without changing size or aspect ratio. - Open Database Replication and inspect region flags in the diagram and destination form. - Open `/project/<ref>/settings/infrastructure` and inspect flags in the topology, map, and read replica details. - Open Edge Function observability and inspect the region filter options. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **UI Improvements** * Standardized region flag displays across project creation, replication, infrastructure, read replica, and observability views. * Region flags now use consistent styling, rounded borders, and rendering throughout the Studio interface. * Improved visual consistency for selected regions, database nodes, tooltips, and region options. * Decorative flags in observability views are handled appropriately for assistive technologies. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
6ac5bf6b86 |
feat(studio): point replica deep links at Infrastructure and recommend compute (#48921)
## What kind of change does this PR introduce? Feature. Stack 5 of 5 (tip) for [PIPE-1007](https://linear.app/supabase/issue/PIPE-1007/move-read-replicas-out-of-replication-into-infrastructure). ## What is the current behavior? Selectors still open Replication with `destinationType=Read+Replica`. Compute eligibility actions leave the add-replica flow without carrying a recommended size into the Infrastructure form. ## What is the new behavior? DatabaseSelector and the SQL submenu open Infrastructure `?addReplica=true`. Change to Small/XL compute waits for the sheet to close, pre-selects that size, then focuses and scrolls the Infrastructure form to Compute without shifting the page footer. ## Additional context Last stack PR. [#49043](https://github.com/supabase/supabase/pull/49043) has merged. Please review, but do not merge until 2→4 are also approved. Then merge [#49044](https://github.com/supabase/supabase/pull/49044) → [#49045](https://github.com/supabase/supabase/pull/49045) → [#49046](https://github.com/supabase/supabase/pull/49046) → this PR in succession, and drop the `do-not-merge` labels. Update the read replicas getting-started doc in the same sitting so it points only at Infrastructure (it currently also links Database → Replication). Remaining stack: [#49044](https://github.com/supabase/supabase/pull/49044) → [#49045](https://github.com/supabase/supabase/pull/49045) → [#49046](https://github.com/supabase/supabase/pull/49046) → this PR ## To test `infrastructure:read_replicas` is an enabled-feature, on by default. There is no Feature Preview or ConfigCat switch. You should already see the Infrastructure Read replicas section. If you do not, your profile lists `infrastructure:read_replicas` in `disabled_features`. 1. [Infrastructure](https://studio-staging-git-dnywh-choreread-replicas-in-829a4b-supabase.vercel.app/dashboard/project/_/settings/infrastructure): topology, Read replicas, Scaling. 2. Add read replica. If blocked on compute, Change to Small compute: sheet closes, Small is selected and focused, the price footer is dirty, and no blank page gap appears. 3. From the SQL editor database selector, Add replica should open Infrastructure, not Replication. |
||
|
|
7fd7ace118 |
feat(studio): add Infrastructure replica detail route and redirects (#49045)
## What kind of change does this PR introduce? Feature. Stack 3 of 5 for [PIPE-1007](https://linear.app/supabase/issue/PIPE-1007/move-read-replicas-out-of-replication-into-infrastructure). ## What is the current behavior? Replica detail lives at `/database/replication/replica/:id`. ## What is the new behavior? Detail moves to `/settings/infrastructure/replica/:id`. Old URLs redirect. List and diagram View/Manage replica links follow. ## Additional context Stacked on [#49044](https://github.com/supabase/supabase/pull/49044). Please review, but do not merge. Merge 2→5 in succession once they are all reviewed, so users never sit on a split create/list vs detail path. Replication still lists and creates replicas until [#49046](https://github.com/supabase/supabase/pull/49046). ## To test `infrastructure:read_replicas` is an enabled-feature, on by default. There is no Feature Preview or ConfigCat switch. You should already see the Infrastructure Read replicas section. If you do not, your profile lists `infrastructure:read_replicas` in `disabled_features`. From [Infrastructure](https://studio-staging-git-danny-pipe-1007-03-detail-redirects-supabase.vercel.app/dashboard/project/_/settings/infrastructure), open View replica on a row. Confirm you land on `/settings/infrastructure/replica/:id`. If you have an old bookmark, `/database/replication/replica/:id` should redirect there. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added read replica management to Infrastructure settings, including replica creation, status monitoring, details, restart, and removal actions. * Added eligibility guidance and estimated pricing details during replica setup. * Added support for topology and replica information within infrastructure configuration. * **Improvements** * Legacy database replication links now permanently redirect to the corresponding Infrastructure pages. * Added clearer empty, loading, error, and transition states for read replica management. * **Tests** * Expanded coverage for replica navigation, redirects, eligibility warnings, and empty states. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
e9abda6c79 |
feat(studio): add read replicas section on Infrastructure (#49044)
## What kind of change does this PR introduce? Feature. Stack 2 of 5 for [PIPE-1007](https://linear.app/supabase/issue/PIPE-1007/move-read-replicas-out-of-replication-into-infrastructure). ## What is the current behavior? Settings / Infrastructure only covers compute and disk. ## What is the new behavior? Adds topology, a Read replicas list, and the add-replica sheet on Infrastructure. Still gated on `infrastructure:read_replicas`. | Before | After | | --- | --- | | <img width="1279" height="1323" alt="Infrastructure Settings Chisel Toolshed Supabase" src="https://github.com/user-attachments/assets/34e7b414-a326-415b-984c-00ae0000f46e" /> | <img width="1279" height="1323" alt="Infrastructure Settings Chisel Toolshed Supabase" src="https://github.com/user-attachments/assets/547cd7ac-435e-45d1-80ad-2f35476f579f" /> | ## Additional context [#49043](https://github.com/supabase/supabase/pull/49043) is merged. This PR targets `master`. Please review, but do not merge. `infrastructure:read_replicas` is already on, so merging this alone would show replicas on both Infrastructure and Replication. Merge 2→5 ([#49045](https://github.com/supabase/supabase/pull/49045), [#49046](https://github.com/supabase/supabase/pull/49046), [#48921](https://github.com/supabase/supabase/pull/48921)) in succession once they are all reviewed. Replica detail still uses the old Replication URL until #49045. ## To test `infrastructure:read_replicas` is an enabled-feature, on by default in `enabled-features.json`. There is no Feature Preview or ConfigCat switch. On this preview you should already see it: Settings → Infrastructure shows topology and a Read replicas section. If those are missing, your profile lists `infrastructure:read_replicas` in `disabled_features` (from `/platform/profile`), and you cannot flip it in the UI. Open [Settings / Infrastructure](https://studio-staging-git-danny-pipe-1007-02-infra-section-supabase.vercel.app/dashboard/project/_/settings/infrastructure). Confirm the topology, Read replicas section, and Add read replica sheet. Replication should still list replicas too. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added infrastructure topology visibility to project infrastructure settings. * Added read replica management, including status monitoring, empty states, creation flow, documentation access, and discard-change confirmation. * Infrastructure settings now include read replicas alongside compute and disk configuration. * Added flexible placement for supplemental disk overview and scaling content. * **Bug Fixes** * Simplified project configuration rendering for more reliable display. * **Tests** * Added coverage for enabled and disabled read replica states. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
ce2ed77c02 |
Add clickhouse migration banner to QueryEditor (#49184)
## Context Adds the clickhouse migration banner into the QueryEditor for explorer if the source selected is logs - will apply for both the notebook query cells and query tab JFYI i've omitted out the diffing view for now, like what've currently got for the SQL Editor Got a separate ticket to look into that, but was thinking of waiting for [this PR](https://github.com/supabase/supabase/pull/49112) from Charis to go in first <img width="1391" height="369" alt="image" src="https://github.com/user-attachments/assets/5880df99-44b5-4a9f-8ff7-c9d7af3bcb93" /> <img width="1054" height="474" alt="image" src="https://github.com/user-attachments/assets/ef5d225b-3b53-4d6d-ab6c-19804e3358e6" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added guidance in SQL editors to identify and rewrite legacy logs queries. * Integrated rewrite suggestions into the query editor’s existing SQL diff workflow. * Increased the height of embedded query editors for improved usability. * Kept rewrite guidance available when no rewrite is needed or an attempt is unsuccessful. * **Bug Fixes** * Improved spacing for empty query-result messages. * **Tests** * Added coverage for rewrite visibility, acceptance, dismissal, and no-change outcomes. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Ali Waseem <waseema393@gmail.com> |
||
|
|
4760c1af77 |
feat(studio): polish PrivateLink connection UI (#49164)
## What kind of change does this PR introduce? Polish for the AWS PrivateLink integrations UI. ## What is the current behavior? The add/view sheet labels the optional nickname field as "Description", delete confirmation always shows the AWS account ID, list admonitions use generic copy, and delete uses a fire-and-forget mutation. ## What is the new behavior? - Rename the optional nickname field to **Name**, with helper copy explaining it appears on the connections list - Tighten list admonition copy to reference connections below and pluralise share wording - Rename `showAcceptLink` to `shouldShowAcceptLink` - Delete confirmation uses the connection name (or account ID when unnamed) and clearer read replica fallback copy - Delete uses `mutateAsync` so the dialog can await the mutation | Before | After | | --- | --- | | <img width="828" height="515" alt="Integrations Settings Chisel Toolshed Supabase" src="https://github.com/user-attachments/assets/9e255d4b-a048-459c-87ff-ee1b65f42f9a" /> | <img width="828" height="515" alt="Integrations Settings Chisel Toolshed Supabase" src="https://github.com/user-attachments/assets/500e3922-912f-4e3b-a875-295ac7bd689e" /> | ## To test 1. Open **Project settings → Integrations → AWS PrivateLink** on a project with PrivateLink access 2. Click **Add connection** and confirm the optional field is labelled **Name** with helper copy underneath 3. Add a connection with a name (e.g. `Production VPC`) and confirm the list row shows that title 4. If you have a waiting or expired connection, confirm the list admonition copy references shares below 5. Open a named connection, click **Delete**, and confirm the dialog uses the connection name rather than always showing the raw account ID 6. Cancel delete and confirm the sheet stays open <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Improvements** * Updated AWS PrivateLink connection messages with clearer singular and plural wording. * Improved guidance for expired and pending connections, including acceptance-instruction links. * Renamed the account field to “Name,” marked it optional, and clarified its purpose and default behavior. * Enhanced deletion confirmations with clearer connection names and AWS account identifiers. * Improved deletion handling to provide more reliable feedback. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
14fe0c0cc8 |
fix(studio): slightly round split-button corners on focus (#49129)
## What kind of change does this PR introduce? UI polish for split buttons (primary action + dropdown chevron). Follow-up to #49055. ## What is the current behavior? The focus ring sits above the neighbouring half, but the inner edge stays square, so the ring has two sharp corners at the join. ## What is the new behavior? On keyboard focus, the squared-off edge uses a slight radius so the ring matches the outer corners more closely. Resting state is unchanged. Split-button callsites now share the same join classes as the design-system example. | Before | After | | --- | --- | | <img width="1030" height="296" alt="43471" src="https://github.com/user-attachments/assets/9df3bd72-c7ac-4419-ae18-a7e649dc2d66" /> | <img width="1056" height="276" alt="CleanShot 2026-08-17 at 10 45 09@2x" src="https://github.com/user-attachments/assets/52e8a4dc-9c52-45ce-b4d0-f0e7b1b75935" /> | ## To test Tab to each half (labelled button, then chevron). Inner corners of the focus ring should be slightly rounded, not square. 1. [Split with dropdown](https://design-system-git-fix-split-button-focus-radius-supabase.vercel.app/design-system/docs/components/button#split-with-dropdown) (no login) 2. [Access Tokens](https://studio-staging-git-fix-split-button-focus-radius-supabase.vercel.app/dashboard/account/tokens) → Generate new token 3. Any project on [studio staging](https://studio-staging-git-fix-split-button-focus-radius-supabase.vercel.app/dashboard/_/settings/general) → Settings → General → Restart project <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Accessibility** - Added accessible labels to dropdown and export controls. - Improved keyboard-focus visibility, layering, and rounded edge treatment across joined buttons and menus. - Removed misleading or redundant screen-reader text and titles. - **Bug Fixes** - Prevented split-button controls from shrinking or displaying awkward borders and corners. - Refined hover and focus behavior for action buttons throughout settings, database, storage, account, and documentation interfaces. - **Documentation** - Clarified guidance for using overflow menus and responsive split-button actions. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
65a5e593ca |
feat(studio): tighten Integrations layout (#49088)
## What kind of change does this PR introduce? UI ## What is the current behavior? GitHub’s empty state and Integrations icon spacing do not match the PrivateLink list. Add connection has no plus. PrivateLink rows use a kebab instead of click-to-view. ## What is the new behavior? GitHub empty state matches the connections list. **Connect GitHub** is tiny and asks you to connect before choosing a repo. Section icons align. **Add connection** has a plus. PrivateLink rows are clickable; delete stays in the sheet. | Before | After | | --- | --- | | <img width="1456" height="1508" alt="CleanShot 2026-08-14 at 12 48 48@2x" src="https://github.com/user-attachments/assets/27485e35-c24f-478e-8328-aad03ebb1dfb" /> | <img width="1468" height="1494" alt="CleanShot 2026-08-14 at 14 22 19@2x" src="https://github.com/user-attachments/assets/056e3b48-4542-4be5-9b21-4b5abd726e8e" /> | ## Additional context Stacked on #49087. No Vercel card work in this PR. See #49030 for the end state, as it may already include fixes you might propose. ## To test - **Project Settings → Integrations.** Check GitHub, Vercel, and PrivateLink icon alignment. - GitHub not connected: description should say **Connect GitHub to link a repository to this project.** Button should be tiny. - If GitHub has no repo (org page), the empty state should ask you to add a connection. - PrivateLink **Add connection** should show a plus. Click a connection row to view it. No kebab. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * AWS PrivateLink connections now display clearer titles, status, replica details, and database visibility. * GitHub organization integrations now provide improved empty states and clearer connection actions. * Added plus icons to connection buttons. * **Improvements** * Updated GitHub guidance based on authorization and repository selection status. * Standardized connection labels and refined integration page layouts. * Improved AWS integration icon presentation and responsive upgrade prompts. * **Bug Fixes** * Simplified default connection button wording across integrations. * Improved AWS account title fallback behavior when a nickname is unavailable. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
fe347d8876 |
feat(studio): show PrivateLink accept guidance on the list (#49087)
## What kind of change does this PR introduce? Feature ## What is the current behavior? Accept-in-AWS guidance lives only in the view sheet, as a per-status essay with a nested button/link. Delete is easy to miss and does not name the database. ## What is the new behavior? The list warns when any connection is Waiting or Expired. View connection uses that same admonition. Delete uses a confirm dialog that names the database, including from **View connection**. | Before | After | | --- | --- | | <img width="1444" height="480" alt="CleanShot 2026-08-14 at 12 46 23@2x" src="https://github.com/user-attachments/assets/015b261b-0bee-48f4-8f2d-d0d23293e120" /> | <img width="1456" height="676" alt="CleanShot 2026-08-14 at 12 47 17@2x" src="https://github.com/user-attachments/assets/0a12371b-553a-4e52-b042-7498af722f4a" /> | | <img width="844" height="560" alt="CleanShot 2026-08-14 at 12 46 49@2x" src="https://github.com/user-attachments/assets/f664b165-d351-4572-8536-27f4a9749975" /> | <img width="842" height="452" alt="CleanShot 2026-08-14 at 12 47 09@2x" src="https://github.com/user-attachments/assets/a387c294-5814-451b-9359-e70c73de2cb2" /> | ## Additional context Stacked on #49086. See #49030 for the end state, as it may already include fixes you might propose. ## To test - **Project Settings → Integrations → AWS PrivateLink → Add connection.** Leave it unaccepted in AWS. The list should show the 12-hour accept warning. - **View connection** on that row. Same warning, **View instructions**, not a status essay. - **⋯ → Delete** on a row, and **Delete** inside **View connection.** The dialog should name the database. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added clearer AWS PrivateLink connection alerts for pending and expired connections, including guidance and acceptance links when applicable. * Existing PrivateLink connections can now be deleted directly from the connection form. * Added confirmation dialogs with loading and completion states for deletion. * Added more specific descriptions for primary databases and read replicas. * **Bug Fixes** * Improved connection status messaging and handling for AWS PrivateLink integrations. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
4433d9ddaf |
feat(studio): mark PrivateLink waiting as a warning (#49086)
## What kind of change does this PR introduce? UI ## What is the current behavior? Waiting (still labelled Ready in #49085) is green. Creating is orange. Deleting is red. ## What is the new behavior? Waiting is orange. Creating is grey. Deleting is orange. Connected stays the only green state. | Before | After | | --- | --- | | <img width="1448" height="492" alt="CleanShot 2026-08-14 at 12 43 59@2x" src="https://github.com/user-attachments/assets/c0d95b51-7841-4714-a01b-47e5587c3efb" /> | <img width="1434" height="470" alt="CleanShot 2026-08-14 at 12 44 59@2x" src="https://github.com/user-attachments/assets/3ba10dc5-5fdd-464a-a748-5085d2d65df3" /> | | <img width="842" height="440" alt="CleanShot 2026-08-14 at 12 44 21@2x" src="https://github.com/user-attachments/assets/757db647-4b7c-4f77-8dcf-1eb289c40cc1" /> | <img width="842" height="432" alt="CleanShot 2026-08-14 at 12 44 49@2x" src="https://github.com/user-attachments/assets/1311a6d2-4712-4cb9-a6f2-f39387f0a953" /> | ## Additional context Stacked on #49085. See #49030 for the end state, as it may already include fixes you might propose. ## To test - **Project Settings → Integrations → AWS PrivateLink.** A connection that AWS has not accepted yet should show an orange **Waiting** badge, not green Ready. - Creating should be grey. Deleting orange. Expired and Failed stay red. - **Docs preview → Platform → PrivateLink.** Should say Waiting, not Ready. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Updated AWS PrivateLink connection statuses to accurately show “Waiting” while the AWS Resource Share is pending acceptance. * Refined status badge styling for creating, waiting, and deleting connections. * Clarified that Resource Shares must be accepted within 12 hours. * **Documentation** * Updated PrivateLink setup instructions to reflect the revised connection status flow. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
0c1da8fd09 |
feat(studio): tighten PrivateLink sheet fields (#49085)
## What kind of change does this PR introduce? Feature ## What is the current behavior? Add connection field order and nickname handling are harder to scan. Empty description can still show up as a blank name. ## What is the new behavior? Add connection is AWS account ID, then database, then optional description. An empty description is omitted from the list title. | Before | After | | --- | --- | | <img width="846" height="874" alt="CleanShot 2026-08-14 at 12 42 33@2x" src="https://github.com/user-attachments/assets/abfc4f37-a401-4bba-9408-c2530b0ac09b" /> | <img width="844" height="794" alt="CleanShot 2026-08-14 at 12 43 01@2x" src="https://github.com/user-attachments/assets/0cadeaea-583d-4c2b-9336-3d0fe6a1415b" /> | ## Additional context Stacked on #49084. See #49030 for the end state, as it may already include fixes you might propose. ## To test - **Project Settings → Integrations → AWS PrivateLink → Add connection.** Confirm field order: account ID, database, description. - Save once with a description and once without. Without one, the row title should fall back to the account ID. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added AWS account ID and database target fields to the PrivateLink setup form. - Added validation and improved preservation of entered values while editing. - Made the connection description optional. - Updated connection status labels and badges for clearer status visibility. - **Documentation** - Updated PrivateLink setup instructions to reflect the revised field order and optional description. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
44292c0996 |
feat(studio): extract PrivateLink status copy (#49084)
## What kind of change does this PR introduce? Refactor ## What is the current behavior? Status labels and sheet copy are inline switches in the list and form. ## What is the new behavior? One status lookup drives the badge and the view-sheet copy. No intended visual change. Ready is still green. | Before and After | | --- | | <img width="1460" height="486" alt="CleanShot 2026-08-14 at 12 37 13@2x" src="https://github.com/user-attachments/assets/0c6c0b03-25f7-4e64-a0cd-72e7ef966454" /> | | _No visual changes_ | ## Additional context Stacked on #48967. See https://github.com/supabase/supabase/pull/49030 for the end state, as it may already include fixes you might propose. ## To test - **Project Settings → Integrations → AWS PrivateLink.** Look at a connection row badge, then **View** it. Labels should match today’s statuses. Ready should still be green. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added clear status messaging for AWS PrivateLink connections, including accepted, ready, creating, deleting, expired, and failed states. * Added fallback messaging for unavailable or unrecognized connection statuses. * **Bug Fixes** * Improved consistency of PrivateLink status badges, labels, descriptions, and visual styles. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
3d966e3709 |
feat(studio): show PrivateLink resource IDs and use connection copy (#48967)
## What kind of change does this PR introduce? Feature and docs ## What is the current behavior? PrivateLink is labelled as an AWS account, and there is no way to tell which resource configuration belongs to the primary vs a read replica. Put simply: you’re not adding an AWS account. You’re adding a connection. One AWS account can have multiple PrivateLink connections, just to different databases, with more fields also coming soon. Part of PRODSEC-238 and fixes SEC-939. ## What is the new behavior? Each connection shows resource configuration IDs so primary and replica are distinguishable. Customer-facing copy says **connection**. API paths and AWS console labels still say association. | Before | After | | --- | --- | | <img width="1452" height="496" alt="CleanShot 2026-08-14 at 12 33 49@2x" src="https://github.com/user-attachments/assets/3b295136-0325-4587-9291-b5f01fc07806" /> | <img width="1440" height="434" alt="CleanShot 2026-08-14 at 12 34 30@2x" src="https://github.com/user-attachments/assets/dd6ba064-18e4-4969-9c76-e3b79ac9d288" /> | | <img width="846" height="912" alt="CleanShot 2026-08-14 at 12 33 28@2x" src="https://github.com/user-attachments/assets/c4c6caca-a2f6-4516-99c7-ad7cf865f8ac" /> | <img width="844" height="880" alt="CleanShot 2026-08-14 at 12 34 39@2x" src="https://github.com/user-attachments/assets/f3874c6b-abdc-4ef8-84fa-141cd9150871" /> | | <img width="1448" height="560" alt="CleanShot 2026-08-14 at 12 33 10@2x" src="https://github.com/user-attachments/assets/8ae734cb-ec1f-4e4e-acf7-f4de459296d1" /> | <img width="1460" height="496" alt="CleanShot 2026-08-14 at 12 32 15@2x" src="https://github.com/user-attachments/assets/883050d5-a6f1-44bd-8ebd-1513a2c41e9f" /> | ## Additional context First PR in a stacked PrivateLink series (#49084 onwards). See https://github.com/supabase/supabase/pull/49030 for the end state, as it may already include fixes you might propose. ## To test - **Project Settings → Integrations → AWS PrivateLink.** Open **Add connection**, or **View** an existing one. Confirm the UI says connection, and that resource config IDs are copyable. - **Docs preview → Platform → PrivateLink.** Procedure steps should say Add connection / View connection. --------- Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com> |
||
|
|
2c8cc7ec8a |
feat(studio): relocate read replica modules under Infrastructure (#49043)
## What kind of change does this PR introduce? Feature. Stack 1 of 5 for [PIPE-1007](https://linear.app/supabase/issue/PIPE-1007/move-read-replicas-out-of-replication-into-infrastructure). ## What is the current behavior? Read replica UI lives under Database / Replication. ## What is the new behavior? Moves replica form, row, and modals into Settings/Infrastructure and extracts `REPLICA_STATUS` plus path helpers. URLs and user-facing behaviour are unchanged. ## Additional context Keep `infrastructure:read_replicas` off in prod until the full stack lands. Stack: this PR → [#49044](https://github.com/supabase/supabase/pull/49044) → [#49045](https://github.com/supabase/supabase/pull/49045) → [#49046](https://github.com/supabase/supabase/pull/49046) → [#48921](https://github.com/supabase/supabase/pull/48921) ## To test Open [Database / Replication](https://studio-staging-git-danny-pipe-1007-01-relocate-701014-supabase.vercel.app/dashboard/project/_/database/replication?destinationType=Read+Replica). Confirm add replica still works as today. No new Infrastructure section yet. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added navigation for viewing a specific read replica and starting the add-replica setup flow. - Improved read-replica setup validation, including unsupported regions and invalid PostgreSQL versions. - **Bug Fixes** - Corrected default region and success messaging behavior. - Prevented incomplete pricing labels and clarified eligibility warnings. - Improved display handling for localized pricing values. - **Tests** - Added coverage for read-replica navigation paths and fallback behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
88e916a4c0 |
fix(studio): focus state for buttons with dropdown (#49055)
## 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? We've quite a few instances where some buttons have a dropdown appendage. The focus state for these were broken as well as visually regarding the separator. This first pass fixes the instances we have in studio, I've left potentially adding this to our design system fragment components as another PR. | Before | After | |--------|--------| | <img width="531" height="133" alt="Screenshot 2026-08-13 at 11 29 36" src="https://github.com/user-attachments/assets/70747fd0-11d4-4670-85fa-d76f3564837b" /> | <img width="519" height="130" alt="Screenshot 2026-08-13 at 11 40 15" src="https://github.com/user-attachments/assets/5920bebb-81ce-4962-908b-5f61526ca7ca" /> | | <img width="538" height="146" alt="Screenshot 2026-08-13 at 11 29 48" src="https://github.com/user-attachments/assets/f1c7018f-cd43-47fa-b4c0-045af350f80b" /> | <img width="515" height="148" alt="Screenshot 2026-08-13 at 11 39 56" src="https://github.com/user-attachments/assets/fee09113-433a-4b5d-ac68-3ab3f2565d34" /> | | <img width="538" height="143" alt="Screenshot 2026-08-13 at 11 29 52" src="https://github.com/user-attachments/assets/3063d391-99b2-4599-9cdf-edd0b2cdfdf0" /> | <img width="529" height="159" alt="Screenshot 2026-08-13 at 11 40 05" src="https://github.com/user-attachments/assets/4bdeb9e0-8324-45df-a211-8c7fd0ee11a6" /> | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Improved keyboard focus visibility across Studio controls, including token management, email settings, replication, log drains, query insights, infrastructure, storage, and assistant actions. * Focused buttons in adjacent or split-button groups now appear above neighboring controls, preventing borders and overlays from obscuring the active selection. * Preserved existing button behavior, layout, and appearance while improving focus-state clarity. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
b5477a89a3 |
chore: Update API types (#48981)
Update the API types by running `api:codegen`. Some of the changes are fixed in code, some of the type changes had to be reverted (JIT Access, SSO features). <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Billing** * Updated subscription messaging to reflect AWS Marketplace billing. * Removed outdated partner-billing downgrade notices. * **Bug Fixes** * Improved request handling for API keys, custom domains, SQL snippets, branches, and storage operations. * Improved legacy signing-key compatibility. * Refined temporary database access availability messaging. * **Updates** * Removed Fly as an available cloud provider for region selection. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
51c5b9f013 |
chore: sync ssl enforcement and temporary access (#48743)
## 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 - fix-up ## What is the current behavior? Temporary access depends on ssl enforcement. The frontend doesn't enforce this very well or keep state between the two configs. ## What is the new behavior? This updates the two configs to be interdependent and updates to each one triggers a frontend state change on the other. ## Additional context Before: https://github.com/user-attachments/assets/8f040b62-587c-4268-9e27-27dd09b052a3 After: https://github.com/user-attachments/assets/c62e006e-6147-4c94-b6cf-375ca300b890 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added confirmation dialogs and downtime warnings before changing database SSL enforcement. - Added loading states and success or failure notifications for SSL updates. - Enabled SSL enforcement directly from temporary database access settings. - **Bug Fixes** - Prevented SSL enforcement from being disabled while temporary database access is enabled. - Improved settings refresh after SSL enforcement changes. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
5986fecc89 |
fix(studio): use table + card component in log retention upgrade prompt (#48713)
## Summary - Refactor the SQL Editor / Logs "Log retention" upgrade-prompt dialog to use the design system's `Card` + `Table` components instead of a custom flexbox-div table, matching the pattern in `apps/design-system/registry/default/example/table-demo.tsx` - No behavior or data change Fixes FE-4034 Non-blocking review nit from #48452 (comment: https://github.com/supabase/supabase/pull/48452#issuecomment-5128918096) ## Test plan - [x] `pnpm --filter studio typecheck` passes - [x] `pnpm --filter studio run lint:ratchet` passes (no new warnings) - [x] Prettier check passes <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Updated the upgrade prompt with a more consistent card and table layout. * Preserved existing plan names and log retention details. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
8b38e0d1ed |
feat(studio): ClickHouse dialect for logs snippet AI + rewrite to ClickHouse (#48501)
## 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? Feature, plus a refactor of the shared logs-rewrite flow. PR 8 of the SQL editor query-source series. Stacked on #48457 — review that one first, and merge this after it. ## What is the current behavior? A `log_sql` snippet runs against the ClickHouse-backed analytics endpoint, but the SQL editor's AI still writes Postgres: inline edits get Postgres system prompts, and the result is run through `sql-formatter`, which mangles ClickHouse backticks and `log_attributes` map lookups. Legacy Logs Explorer saved queries open in the editor as `log_sql` snippets. Those are BigQuery dialect and error against the ClickHouse endpoint the editor runs them on, with no in-editor way out — only the Logs Explorer offered a rewrite. The completion route was also asymmetric. It assembled a schema/code/instruction message for Postgres but forwarded `prompt` verbatim for ClickHouse, so a client wanting ClickHouse had to hand-build the equivalent string. ## What is the new behavior? **Inline AI speaks ClickHouse for logs snippets.** `sqlSourceToDialect` maps a snippet's source to `postgres`/`clickhouse` and `buildCompletionRequestBody` threads it through. For ClickHouse, `useSqlEditorAi` strips code fences from the response and skips `formatSql`. Execution and dialect both follow the snippet type, so a snippet's valid dialect never flips. **Rewrite to ClickHouse in the editor.** A banner offers the rewrite for a logs snippet whose text trips `looksLikeLegacyLogsQuery`, and proposes the result through the editor's existing AI diff view rather than replacing the snippet, so it's accepted or discarded like any other AI edit. Gated on `otelLegacyLogs`: on a non-migrated org the BigQuery text is still correct, so rewriting it would break a working query. The offer is a state machine (`offered` / `rewriting` / `failed` / `noRewriteNeeded` / `dismissed`) with a declarative table of valid transitions, so the states are mutually exclusive by construction and dismissal is terminal. A failure keeps its message and offers a retry; a response identical to the input is reported rather than opening an empty diff. **One place assembles completion prompts.** The route now uses a single template for both dialects, branching only the schema section and — for `intent: 'rewrite'` — the instruction. `lib/ai/clickhouse-logs.ts` is the single home for ClickHouse-logs prompt content, replacing two independently maintained descriptions of the same table. Clients carry no prompt text. **The rewrite flow is shared with the Logs Explorer.** Both surfaces previously hand-rolled the same sequence and had drifted: only one detected a no-op rewrite, they sourced `log_attributes` keys differently, and the Explorer formatted errors with an `as Error` cast. Both now use `useLegacyLogsRewrite` and the same state-driven banner, so the Explorer picks up no-op detection and typed error extraction. **Attribute keys are fetched on submit, not while typing.** The detected source would otherwise feed a reactive query key, making every edit that changed it cost another network call. `useLogsAttributeKeys` is imperative and goes through `queryClient.fetchQuery`, so a source already cached — including by the Explorer header and query panel, which subscribe reactively — is reused. This also closes a gap where inline edits never received keys at all, unlike full rewrites. `getErrorMessage` gains an optional typed fallback and no longer stringifies a bare object into `'[object Object]'`; every existing caller already hand-rolled a fallback, except `QueueSettings`, which interpolated the raw result and now passes one. Nothing here is user-visible until the `sqlEditorLogsSource` flag is enabled. Tests: dialect selection and request-body shape, the ClickHouse prompt content (including that the schema section does not restate the dialect rules), the reducer's valid and invalid transitions, `shouldOfferLegacyLogsRewrite`, on-submit key discovery with cache reuse, and `getErrorMessage`. ## Additional context <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added an Assistant banner to help rewrite legacy BigQuery-style logs queries into ClickHouse SQL. * SQL assistance now adapts to the selected query type, including relevant log attribute context. * Rewrite suggestions can be reviewed as editor diffs before being applied. * **Bug Fixes** * Improved rewrite failure handling, retry options, dismissal behavior, and “no rewrite needed” messaging. * Error notifications now provide a clearer fallback message when details are unavailable. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
9dc5c0faf3 |
feat: privatelink read replica (#48642)
Frontend changes for new privatelink functionality. The updates to the API are already live, but will be putting the UI changes behind a feature flag while we do some full end to end testing. Changes to Integration page: <img width="744" height="456" alt="image" src="https://github.com/user-attachments/assets/02026083-4b61-4f36-927b-1bac42cb73e2" /> Changes to create associations page: <img width="859" height="411" alt="image" src="https://github.com/user-attachments/assets/303b4ec5-3b5a-4eaf-8d22-45e1e63a0705" /> Fixes SEC-919 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - AWS PrivateLink connections can target the primary database or a read replica. - Connection lists and confirmation dialogs now identify the selected database clearly. - Replica details include improved status information and a “Manage replica” link. - **Bug Fixes** - Replica removal errors now provide clearer guidance and link to integration settings when PrivateLink issues occur. - **Updates** - Infrastructure diagrams focus on visualization, with replica management actions moved to dedicated management views. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
|
a0cec24f49 |
Remove references to fly (#48648)
## Context As per PR title - should not have any visual nor functional change <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Changes** - Standardized infrastructure, region, and database configuration around AWS-based environments. - Removed Fly.io-specific region and provider options from project creation, instance sizing, and infrastructure settings. - Enabled disk validation, spend-cap eligibility, backup restoration, and extension setup consistently across supported projects. - Updated billing and region displays to use the applicable AWS configuration. - **Bug Fixes** - Corrected project-specific restrictions that could incorrectly hide configuration and billing controls. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
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 --> |
||
|
|
ddc1f4175f |
HA continued surface coverage (#48425)
- Updates connection pooling settings to be read-only when a high availability project with ip4 admonition removed - Updates organization usage to be disabled until supported - Updates database publications to be disabled until supported <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added High Availability handling for database publications, usage, and connection pooling. * Publications and usage now display dedicated “unavailable” empty states and hide gated content when High Availability is enabled. * Connection pooling switches to managed/read-only mode on High Availability, disabling edits and form submission and disabling related data fetching. * Pooling mode controls are hidden on High Availability. * **Refactor** * Refactored database publications pages by extracting main rendering logic into internal components. * **Tests** * Added Vitest + React Testing Library coverage for High Availability behavior across publications availability, usage, connection pooling, and pooling modes. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> |
||
|
|
f9a1d2e983 |
Disable unsupported Studio features for HA projects (#48376)
## Summary More gating to support upcoming High Availability projects. - Keep the Recent Branch stat visible on the project home page for HA projects, but disable its interaction, reduce its opacity, and skip the branches query. - Treat Realtime as disabled for HA projects in the service-status dropdown so it does not make the project appear unhealthy or trigger unhealthy polling. - Show the shared unsupported-feature empty state for Custom Domains and skip its query on HA projects. - Disable the Enable Realtime checkbox in the table creation sheet for HA projects. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added High Availability–aware behavior across activity stats, service status, custom domains, and table realtime controls. - Introduced reusable Branch value UI that shows an “Unavailable” state in High Availability mode. - Added a dedicated realtime toggle UI that disables interaction and updates helper text when unavailable. - **Bug Fixes** - Ensured realtime is treated as disabled (not unhealthy) in High Availability and prevented realtime enabling/saving. - Reduced unnecessary data fetching by gating addon/custom-domain requests and disabling branch queries. - **Tests** - Added coverage for realtime status resolution, BranchStatValue “Unavailable” rendering, and TableRealtimeToggle behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
fcfb0f0222 |
Refactor all usage of form.watch to either useWatch or subscribe (#48436)
## Context Replaces all usage of `form.watch()` to use `useWatch` instead + follows the "name what you watch" convention as specified in the react-hook-form skills. There's also a small refactor in `SmtpForm.tsx` which removes the unnecessary use of a `useState` to track if SMTP is enabled or not <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Improvements** * Updated many Studio forms to watch specific fields more precisely, improving live UI updates for previews, warnings, conditional sections, and validation messages. * Enhanced responsiveness across settings, authentication, billing, storage, integrations, and support flows while keeping save/update behavior the same. * **Refined Experiences** * Improved the analytics table creation flow with tighter, enum-based column type validation and structured, type-specific column options. * **Preserved Behavior** * Maintained existing permission checks, submission flows, and account-management workflows. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
6a6ebf8702 |
feat: logs sticky header (#44020)
## 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? [Supabase Studio > Logs](<https://supabase.com/dashboard/project/_/logs/edge-logs>) ## What is the current behavior? When you click on an log row and you scroll the header disappears so you can not close the log straight away you have to scroll back up. ## What is the new behavior? https://github.com/user-attachments/assets/8cac74d8-e3ce-429c-a9ca-393779d1efd9 ## Additional context ## Summary by CodeRabbit * **UI Improvements** * The log selection tabs now stay visible while scrolling, with a fixed header style, better layering, and a solid background for improved readability. |
||
|
|
ad203ae277 |
Merge compute and disk into Infrastructure (#48370)
## Summary This is the final step in merging compute and disk with infrastructure to become a single place to manage everything. This moves everything we've done in compute and disk over to infrastructure along with redirects. - Makes Infrastructure canonical for the completed compute and disk configuration and usage charts. - Moves Service Versions to General Project Settings. - Removes the legacy Infrastructure activity implementation and constants. - Updates settings navigation, shortcuts, banners, billing links, warning CTAs, usage pages, support suggestions, and other internal entry points. - Adds the permanent `/settings/compute-and-disk` redirect, removes its Next and TanStack routes, regenerates the route tree, and updates the migration checklist. - Preserves query parameters and legacy metric anchors, including `#cpu`. ## Stack 1. #48368 2. #48369 3. #48370 (this PR) ## How to test 1. Check out `chore/infra-compute-3-cutover`. 2. Test the Next implementation with `pnpm dev:studio`, then stop it and test TanStack with `STUDIO_FRAMEWORK=tanstack pnpm dev:studio`. 3. In each implementation, open `/project/<ref>/settings/infrastructure`. Confirm the page contains the usage charts and the Scaling, Compute, Disk, and Advanced configuration sections. 4. Open `/project/<ref>/settings/general`. Confirm Service Versions appears there with its existing name, content, and styling, and no longer appears on Infrastructure. 5. Open `/project/<ref>/settings/compute-and-disk?upgrade=micro#disk`. Confirm it permanently redirects to `/project/<ref>/settings/infrastructure?upgrade=micro#disk`, preserving the query string and hash. 6. Confirm the settings menu exposes Infrastructure and no longer exposes Compute and Disk. Repeat with platform and self-hosted settings. 7. Follow representative entry points from billing usage, resource warning CTAs, upgrade banners, shortcuts, and support suggestions. Confirm they land on Infrastructure and preserve any query parameters or metric anchors such as `#cpu`. 8. Smoke-test compute and disk updates from Infrastructure, including validation, the sticky review footer, and warning/critical chart states. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Consolidated compute and disk management under the **Infrastructure** project settings page. * Added a **Service versions** section to **General** project settings. * **Bug Fixes** * Updated links and upgrade CTAs across the product to route to the correct **Infrastructure** or **Service versions** destinations. * Added permanent redirects from legacy **Compute and Disk** to **Infrastructure**, preserving query/hash. * Improved resource warning upgrade routing for compute scenarios. * **Tests** * Expanded automated coverage for **Infrastructure**, **Service versions**, redirects, and warning-link routing. * **Chores** * Updated ESLint rule baseline configuration for the studio app. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> |
||
|
|
d5436ae826 |
feat(studio): log date range domain + session logRange state (#48401)
## 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? Feature (+ a small refactor and a docs/convention note). PR 4 of the stacked SQL-editor query-source series (Database vs Logs). ## What is the current behavior? The SQL editor has no representation of a logs query's time range: `querySource.ts` only knows how to map a snippet type to a source (`getSnippetSource`), and session state (`sql-editor-session-state.ts`) tracks results and the row limit but not a per-snippet time range. The Logs date picker's pure range helpers (`parseCustomInput`, `generateDynamicHelper`, the `Unit` type) are trapped inside the `Logs.DatePickers.tsx` React component. ## What is the new behavior? - **Logs time-range domain** in `querySource.ts`: branded `IsoDateTimeString` + `isoDateTimeString()`, `RelativeTimeUnit`, a `LogDateRange` discriminated union (relative/absolute), `DEFAULT_LOG_DATE_RANGE`, a single date-picker parser (`datePickerValueToLogDateRange` / `logDateRangeToDatePickerValue` — handles the five presets *and* dynamic `2h`/`30m` helpers; `calcTo === ''` means "now"; unparseable helpers degrade to absolute), and `resolveLogRunRange` which re-resolves relative ranges against `now` at run time (reusing the existing `ResolvedLogDateRange` shape). - **Session state**: per-snippet `logRange` + `setLogRange` — session-only, never written to snippet content, so it works on read-only shared snippets and is cleaned up in `clearForSnippet`. - **Refactor**: extracted the picker's framework-free helpers into a new pure `Logs.datePickerHelpers.ts`; the logs domain now shares the `Unit` type and reuses `generateDynamicHelper` instead of duplicating them. Importers point at the new module directly (no re-export shim). Hardened the amount parse against `NaN`. - **Full unit coverage** in `querySource.test.ts`. Recorded the no-shim refactoring convention in the `studio-best-practices` skill. Verification: `pnpm typecheck` clean, lint ratchet improved, 43 tests pass (querySource + Logs.Datepickers), Prettier clean. ## Additional context <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added robust Logs date-range modeling with support for relative (e.g., last N units) and absolute time periods. - SQL Editor sessions now remember log date ranges per snippet. - **Bug Fixes** - Safer handling of invalid or missing date inputs, with sensible fallback to default/current time. - **Tests** - Added/expanded automated coverage for date-range conversion, helper parsing, and resolution behavior. - **Refactor** - Centralized date-picker helper utilities for reuse across the Logs and SQL query experience. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
ca2b50a0a7 |
chore(ui-patterns): collapse the admonition shim into ui-patterns/Admonition (#48377)
Follow-up to #48344: collapses the two resolution paths for the Admonition module into one. `src/admonition.tsx` was a back-compat shim re-exporting `src/Admonition/`. Two ways to resolve one module is exactly what produced the macOS self-import bug fixed in #48344, and the local typecheck errors that #48374 worked around. This removes the shim and standardizes on the PascalCase subpath, matching every other export in the package. **Changed:** - Codemodded all 246 `ui-patterns/admonition` imports to `ui-patterns/Admonition` (240 `.tsx`, 5 `.mdx`, 1 `.ts` across studio, docs, www, design-system, and lite-studio) - Pointed the 5 internal `'../admonition'` imports back at the `'../Admonition'` directory **Removed:** - `packages/ui-patterns/src/admonition.tsx`, and its `./admonition` entry in the exports map (regenerated with `pnpm gen:exports`) ## To test - `grep -r "ui-patterns/admonition" --include='*.ts*'` → no hits - `pnpm test:case-hazards` → passes - `pnpm typecheck` → all 15 tasks green - `pnpm --filter studio run lint:ratchet` → passes - `pnpm --filter ui-patterns vitest run src/Admonition` → 11 tests pass <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Standardized Admonition component imports across the application and documentation. * Improved compatibility with case-sensitive environments by using the canonical component path. * Removed the legacy Admonition import entry point. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> |
||
|
|
7743fee3ab |
feat(studio): log_sql content shape + remap content.sql to unchecked_sql (#48305)
## What PR **2 of 9** in the SQL-editor query-source (Database vs Logs) stack. **Base:** `charislam/snippet-source-typing` (#48301) — this is a stacked PR; review/merge that one first. Client-side rename only — **the wire format is unchanged** (the platform API still stores and returns `content.sql`). This moves the frontend `LogSqlSnippets.Content` field to the branded `unchecked_sql`, matching `SqlSnippets.Content`, and hardens the remap boundary so the rename can't silently drop saved query text. ## Changes - **`types/userContent.ts`** — `LogSqlSnippets.Content`'s plain `sql: string` becomes `unchecked_sql: UntrustedLogSqlFragment` (the brand added in PR 1). Shape kept minimal: `{ content_id, unchecked_sql, schema_version }`. - **`data/content/content-remap.ts`** — extend `remapSqlContentField`/`unmapSqlContentField` to `log_sql`, branding **per type** (`untrustedLogSql` for logs, `untrustedSql` for database) and never mixing brands. **Defensive unmap**: content missing `unchecked_sql` is never clobbered with `sql: undefined`; a residual raw `sql` field (a missed save-path rename) throws in development to surface the bug loudly, while production no-ops safely. - **Legacy Logs Explorer consumers** updated to the branded field: the explorer save/update paths, `SavedQueriesItem`, `RecentQueriesItem`, and the recent-queries page. - **Two db-only write sites** that leaned on `LogSqlSnippets.Content.sql`: `EditorPanel` now saves `unchecked_sql`, and `MoveQueryModal` switches to the SQL-editor-specific `getSqlSnippetById` so its content is typed as `SqlSnippets.Content` — no narrowing or casting. ## Tests - **content-remap**: `log_sql` remap/unmap round-trip with the logs brand; the defensive-unmap no-op (prod) and dev throw. - **content-upsert-mutation**: a `log_sql` payload reaches the wire as a plain `content.sql` and the response remaps back to `unchecked_sql` (the data-loss-critical round-trip shared by both explorer save-new and `SavedQueriesItem` update). ## Verification - `pnpm --filter studio run typecheck` ✓ - `pnpm --filter studio run lint:ratchet` ✓ (no new warnings) - `pnpm test:studio` for `data/content` + `Settings/Logs` — 139 passing ✓ - Prettier ✓ Nothing is user-visible yet — logs snippet entry points arrive later in the stack behind the `sqlEditorLogsSource` flag. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Bug Fixes** - Improved handling of saved and recent log queries across the SQL editor and Logs Explorer. - Log SQL now uses `unchecked_sql` (branded as untrusted) consistently when creating, editing, moving, and reopening queries, with correct remapping to/from the API boundary. - Fixed saved-query update payloads to preserve the right query content and omit legacy fields. - **Tests** - Added/expanded Vitest coverage for saved log query editing, recent-log normalization, and `log_sql` remap/upsert request/response behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
8c092185ae |
feat: paused project restore window copy and backup downloads (#48279)
Shows the restore deadline as a date on the paused-project screens, and offers backup downloads while a paused project is still restorable (previously only after the restore window ended). Depends on a backend change — keep as draft until that is live. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Extended the paused-project restore window from 90 days to up to 1 year. * Added clearer, downloadable options for database backups and storage objects while a project is paused. * Paused-project screens now show an “available until” date when applicable (and updated resume guidance). * **Documentation** * Updated platform and troubleshooting guides to reflect the new 1-year restore window and post-window recovery limitations. * **Bug Fixes** * Standardized restore-window wording across the pause confirmation and paused-state UI. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
6f6badae51 |
fix(eslint): promote require-explicit-tabindex to error (#48170)
## What kind of change does this PR introduce? Accessibility / lint hardening (Safari keyboard focus). ## What is the current behavior? `supabase/require-explicit-tabindex` is `'warn'`. Studio’s ratchet was at 0 but the rule was still ratcheted; www / docs / design-system still had raw `<button>` / `role="button"` call sites without an explicit `tabIndex`. [DEPR-627](https://linear.app/supabase/issue/DEPR-627) · follow-up to #47984 / #48040 ## What is the new behavior? - Shared config: `'supabase/require-explicit-tabindex': 'error'` - Swept www / docs / design-system (+ Studio test fixtures the ratchet skipped) - Removed the rule from the Studio ratchet + baselines ## To test Prefer **Safari**. This PR only adds explicit `tabIndex` to raw `<button>` / `role="button"` call sites — not links, and not controls that already go through `Button` from `ui`. ### Marketing (`www`) ([staging link](https://zone-www-dot-com-git-danny-depr-627-promote-req-7ae43c-supabase.vercel.app/)) - [x] Homepage frameworks / dashboard feature tabs — Tab through each tab button - [x] Product pages (e.g. `/auth`, `/database`) — section tab switchers - [x] Narrow viewport — open the hamburger; Tab through menu buttons - [x] `/partners/catalog` — filter / view controls - [x] Blog view toggle (list ↔ grid) ### Docs ([staging link](https://docs-git-danny-depr-627-promote-require-explici-25e46d-supabase.vercel.app/)) - [x] **Desktop (≥ lg):** top-right **⋯ menu** (hamburger icon) — opens a dropdown that includes Theme. Not a separate theme button. - [x] **Mobile (< lg):** top-right **hamburger** opens the sheet; close (X) is the raw button we tagged. Theme inside the sheet uses `ThemeToggle` / `DropdownMenuTrigger` from `ui` (already supposed to set `tabIndex`). - [x] **Code blocks** — copy / language controls - [x] **Is this helpful?** — X / check are `Button` from `ui` (should already Tab). After voting **while signed in**, the follow-up “What went well?” / “How can we improve?” text button is the raw one we tagged. - [x] **AI Tools → Copy as Markdown** (right rail on a guide) — this is the only GuidesSidebar control this PR changed. “On this page” TOC items are **links**, not covered by this lint. - [x] **Reference docs** (e.g. JS client reference) — section headers that expand/collapse in the left nav (`Collapsible.Trigger`) - [x] **Troubleshooting index** — type in the search field, then Tab to the **clear (X)** control ### Dashboard (`studio`) No production UI changes in this PR (tests + lint config only). Quick Safari smoke that prior tabindex work still holds: - [x] Project sidebar — Tab through primary nav links - [x] Settings → General — Tab through inputs / buttons - [x] Storage → Files — Tab a bucket row / file actions |
||
|
|
c8aca8d3a0 |
chore(design-system): standardise keyboard focus rings (#41575)
## 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? UI / design-system consistency (accessibility). ## What is the current behavior? Keyboard focus rings are inconsistent across Studio and `packages/ui`: - Custom Button uses thick `outline` with per-variant colours (brand / grey / destructive / warning) - Form controls use muted grey rings (`ring-background-control`) - Tabs / NavMenu / Radio use soft brand `ring-ring` - Studio `.inset-focus` uses dark green `outline-brand-600` Related: [DEPR-354](https://linear.app/supabase/issue/DEPR-354). ## What is the new behavior? One shared focus recipe, exposed as Tailwind `@utility` classes in `packages/config/css/utilities.css`: | Utility | Use when | | --- | --- | | `focus-ring` | Buttons, inputs, most controls (offset ring) | | `focus-inset` | Dense/flush surfaces such as interactive table rows (renamed from `inset-focus`) | ```txt # focus-ring outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background ``` Applied on Button, shadcn form controls, Menu/NavMenu, Command palette trigger, Studio table rows, and related call sites. Documented in the design-system accessibility docs. Variants do not change focus ring colour. When the ring must appear on a different element than the focused one (e.g. Menu + ProductMenu `Link` via `group-focus-visible`, or InputGroup via `:has()`), keep an explicit ring stack. The utilities bake in `:focus-visible` on the same element. ## Additional context **Out of scope** - Full `packages/ui` / Studio / www sweep - Legacy Studio form-group green box-shadow cleanup - ESLint rule for bare `outline-none` ## Test plan Prefer Safari (“hard mode” for `tabIndex`). Expect one soft brand ring everywhere: not grey, not solid green outline. ### Design system - [ ] [Accessibility](https://design-system-git-dnywh-choreimprove-tab-focus-styles-supabase.vercel.app/design-system/docs/accessibility): recipe docs match what you see - [ ] [Button](https://design-system-git-dnywh-choreimprove-tab-focus-styles-supabase.vercel.app/design-system/docs/components/button): Tab primary / default / danger; same ring colour - [ ] [Table → Row-level navigation](https://design-system-git-dnywh-choreimprove-tab-focus-styles-supabase.vercel.app/design-system/docs/components/table#row-level-navigation): Tab an interactive row; inset outline (`focus-inset`) sits inside the row ### Studio - [ ] **Org home → table view** (`/organizations/_` or org projects): switch to the table layout, Tab onto a project row; inset outline sits inside the row (list/card view uses CardButton, not `focus-inset`) - [ ] **Project sidebar** (Database, Auth, Storage, …): Tab the main product nav links; ring follows the focused item (not the nested section menus like Tables / Roles) - [ ] **Storage → Files**: Tab a bucket row; same inset outline as org table rows - [ ] **Project Settings → General** (or Compute and Disk): Tab through inputs, checkboxes, switches, selects; same offset ring, no ring on mouse click - [ ] **Header ⌘K** (desktop width): Tab to the search control after Feedback; same soft brand `focus-ring` (was a thicker `ring-border-strong` before) - [ ] **Table Editor or SQL Editor tabs**: focus a tab, Tab to × if active; close shows a ring - [ ] **Light + dark**: ring stays visible against both backgrounds |
||
|
|
0fe2366659 |
[FE-3790] fix(studio): hide Multigres from user-facing surfaces (#48191)
Hides the "Multigres" term from user-facing surfaces — it's the tech powering High Availability projects, but "High Availability" is the only term users should see for now (per Slack discussion with Saxon/Ivan). **Changed:** - High Availability badge hover card (project overview) no longer says "Driven by Multigres" - Project creation HA toggle description drops the Multigres name + multigres.com link, keeps the informational copy - All schema dropdowns now hide the `multigres` schema on HA projects, by wiring in the previously-unused `filterSchemasForHighAvailability` helper: - `SchemaSelector` (shared — Table Editor, Functions, Indexes, Triggers, Schema Visualizer, etc.) - `ExposedSchemaSelector` (API settings → exposed schemas) - `EnableExtensionModal`, `CreateIndexSidePanel`, `ForeignKeySelector`, `WrapperTableEditor`, Integrations install sheet `AdvancedSettings` - SQL editor schema autocomplete (`useAddDefinitions`) - Schema list computations in the touched components are now memoized (incl. stabilizing `SchemaSelector`'s `excludedSchemas` default so the memo actually holds) **Added:** - Unit tests for `filterSchemasForHighAvailability` / `resolveHighAvailability` - MSW component test for `SchemaSelector` asserting `multigres` is hidden on HA projects and still shown on non-HA projects The filter is HA-gated on purpose: a self-hosted/non-HA user with their own schema named `multigres` still sees it. The flag-gated Multigres option in Logs is intentionally untouched — that exposure is kept for the Multigres team's debugging (separate track). ## To test - On an HA project (`high_availability: true`): hover the High Availability badge on project overview — no "Multigres" mention; open schema dropdowns in Table Editor / Database pages / SQL editor autocomplete — no `multigres` schema - Project creation with HA entitlement: toggle description has no Multigres wording/link - On a non-HA project: schema dropdowns behave as before <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Improvements** * Made schema dropdowns and related selectors high-availability aware across extensions, indexes, integrations, SQL editing, API exposed schemas, and relationship editors. * Updated project high-availability UI text and badge hover description to remove outdated branding and clarify horizontally scalable Postgres architecture. * **Tests** * Added coverage to ensure the schema “multigres” option is hidden/shown correctly based on high availability, and validated high-availability value handling. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> |
||
|
|
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 --> |
||
|
|
05d5da0340 |
chore: add ssl_enforcement_required for jit (#48032)
## 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 / bug fix ## What is the current behavior? The new `ssl_enforcement_required` state is not handled ## What is the new behavior? Displays the correct message <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Improved temporary database access messaging when SSL enforcement is required. * Added a direct action to open database settings and enable SSL enforcement before activating temporary access. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
50e9fedb20 |
feat(studio): finesse logs date picker range colours (#48019)
## What kind of change does this PR introduce? UI polish / bug fix for the shared Calendar range selection and Logs date picker. ## What is the current behavior? - Selected date ranges use opaque `brand-400` / `brand-500` fills that read too loud in light mode, with black text that is hard to read on darker endpoints. - Start/end days are squared off on the connecting edge without intentional outer rounding. - Outside days in a selected range are dimmed with `opacity-50`, which can tint the range wash incorrectly when a range starts in the prior month. - The large-range warning in `LogsDatePicker` is a full-bleed yellow banner that feels too heavy for the popover. - Time inputs show a clock icon that adds visual noise. ## What is the new behavior? - Range middle uses a softer `brand-200` wash; start/end stay on stronger brand fills with readable foreground text. - Start days round on the left (`rounded-l-md`), end days on the right (`rounded-r-md`); day hover keeps `rounded-md`. - Selected outside days and “today” no longer fight the range wash colours. - Large-range warning is quiet inline `text-warning` copy that wraps to the calendar column width. - Clock icon removed from `TimeSplitInput`. | Before | After | | --- | --- | | <img width="1096" height="1076" alt="CleanShot 2026-07-16 at 17 59 21@2x" src="https://github.com/user-attachments/assets/eac38022-ed92-4dbe-9932-55f7bf0af934" /> | <img width="988" height="1064" alt="CleanShot 2026-07-16 at 17 59 34@2x" src="https://github.com/user-attachments/assets/3dce30dd-9fd8-4da4-82b3-5663250a4ddc" /> | ## Additional context Shared `Calendar` changes apply anywhere range mode is used, not only logs. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Style** - Refined the date-picker popover layout for start/end controls with better fit and max-width handling. - Updated calendar day and range visuals (selection, outside states, rounding, and hover behavior) to reduce “ghost” styling and improve consistency. - Restyled the large-range warning to improve spacing and alignment. - Simplified the time-splitting input UI by removing the leading clock icon. - Adjusted the “Copy range” button feedback color for copied/pasted states. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
6e0078182b |
Consolidate project creation UI for vercel integration flow (#47995)
## Context There's 2 areas of the dashboard that has the project creation flow - and this PR consolidates both to use the same UI components to minimise duplication + keep things consistent ### Before <img width="1920" height="957" alt="image" src="https://github.com/user-attachments/assets/2a7ab79d-71c7-43f2-925b-1e1666cc3a69" /> ### After <img width="1389" height="957" alt="image" src="https://github.com/user-attachments/assets/f8465568-af99-46eb-80ee-7ac345383231" /> ## Changes involved - What this means for the project creation flow for Vercel Integration: - Smart region can be selected - Compute size can be selected - Enable Data API can be checked - Automatic RLS enable can be checked - How it differs from the main project creation flow on `new/slug` - Organization selection is disabled (cannot be changed) - The following UI is hidden: - "Internal configuration" section - "GitHub repository" field - "Free project info" at the bottom - "Cancel" button Eventually we could looking into reducing the differences more, e.g having data seeding for both ways, and showing GitHub repository field for Vercel integration Resolves DEPR-616 Resolves FE-3905 ## To test Tbh, I'm not really sure how you'd be able to test the vercel integration locally or on staging, this seemingly can only be done when changes land on prod. - What I'd do however is to just test the project creation flow minimally by landing on `/integrations/vercel/_/deploy-button/new-project` - Project creation can work, but just not the connection creation part - And also test project creation on `/new/slug` as well <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary by CodeRabbit * **New Features** * Added “Create sample tables with seed data” during project creation. * Enhanced Vercel integration setup with a guided creation flow and post-creation connection step. * Added an option to disable organization selection in specialized flows. * Added support for triggering a callback after successful project creation. * Added support for hiding the Cancel button in specialized flows. * **UI Improvements** * Refined the connected GitHub repository selector button/dropdown visuals. * Improved security options behavior for different project creation contexts. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
9069e8d21e |
fix(reports): chart click selects bucket range, fix logs datepicker crash (#48009)
## Problem In a database report, dragging over a chart to open logs had two bugs. Clicking a bar instead of dragging produced a zero-width selection (its === ite), so the logs view showed no results. Separately, the logs datepicker crashed with "Invalid time value" because the chart put raw epoch-ms values into the its/ite URL params, which get parsed with new Date(string) and yield an Invalid Date that react-day-picker cannot format. ## Fix The chart now emits ISO timestamps in the logs URL so its/ite match the format every other logs consumer already uses, and the datepicker guards against unparseable values from any source (such as old bookmarked links). A single click now expands the highlight to the clicked bucket, from the bar's start to the next bar's start, so the selection, popover, and logs range all cover the bar the user picked. ## How to test 1. Open a database report with a chart (for example Postgres, project logs). 2. Drag across the chart, choose "Open in Postgres Logs", then open the timepicker. Expected: it opens without crashing and shows the selected range. 3. Go back and single-click one bar instead of dragging. Expected: that bar's bucket is selected and "Open in Postgres Logs" loads logs for a real, non-empty range. 4. Run the chart tests, expected all pass: pnpm --filter studio exec vitest --run components/ui/Charts <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Prevented invalid log date inputs from creating invalid date selections. * Improved chart “open logs” links by normalizing the selected time bounds (now consistently sent as ISO timestamps). * Refined chart highlight behavior for click-to-advance and more accurate left/right range selection, supporting both numeric and string coordinate values. * Updated the chart highlight dropdown display for clearer formatting of numeric vs non-numeric dates. * **Tests** * Added Vitest coverage for chart highlight click, drag, and left/right ordering scenarios. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
22b3419a28 |
Extract project creation form into its own component (#47957)
## Context This is just a pre-requisite to consolidating the project creation UI as there's another page that has the project creation flow too [here](https://github.com/supabase/supabase/blob/master/apps/studio/pages/integrations/vercel/%5Bslug%5D/deploy-button/new-project.tsx). So the next step will just be to use the same `ProjectCreationForm` there No functional changes here - just moving things around ## To test - [ ] Verify that project creation still works <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added a full “create project” experience with eligibility-aware defaults, advanced configuration sections, optional GitHub integration, and compute-cost confirmation when applicable. * **Improvements** * Enhanced project-creation success/error handling and navigation. * Refined CLI backup/restore dialogs (better layout/wording, accessibility updates, and improved section separation). * **Documentation** * Standardized all relevant documentation links across the app using a shared `DOCS_URL` source. * **Refactor** * Refactored the “New Project” page to delegate the wizard UI and flow to a reusable creation component. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
4fd5f8adf1 |
Vercel project connect layout (#47623)
Bring the Vercel project connect layout up to date with other connect screens. Follows up from https://github.com/supabase/supabase/pull/47550 which is required. | Before | After | | --- | --- | | <img width="2368" height="1680" alt="image" src="https://github.com/user-attachments/assets/f5c0b8ef-8fb5-4176-b0cf-98e33958dcc8" /> | <img width="848" height="808" alt="image" src="https://github.com/user-attachments/assets/e64c289f-0b73-4605-ad38-4552d3d6f934" /> | <img width="883" height="733" alt="image" src="https://github.com/user-attachments/assets/7ccd9b72-de6a-4c21-ac8e-abe773bb8116" /> ## Testing - Open the deploy preview or staging URL for `/dashboard/integrations/vercel/acme-production/marketplace/choose-project` with callback params from a real Vercel Marketplace install redirect (see _Vercel_ subheading below). ### Vercel - Run through the [install flow](https://github.com/supabase/supabase/pull/47550) on a real project until you get to the project connection screen, copy the url and paste into staging preview <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary by CodeRabbit * **New Features** * Introduced interstitial-style Vercel integration experiences for both install and choose-project flows, with improved page titles and clearer environment-variable guidance (including tooltip details). * **Bug Fixes** * Improved Vercel integration matching by configuration id and strengthened loading/error handling with more specific “not found” messaging. * **Refactor** * Enhanced the Vercel/GitHub project chooser with a dedicated interstitial mode. * Updated partner logo rendering to support optional styling customization. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> Co-authored-by: Alaister Young <alaister@users.noreply.github.com> |
||
|
|
ce81c2f6ec | feat(studio): allow deleting a branch from general settings page (#47677) | ||
|
|
72aa214b0c |
fix: new project form accessibility issues (#47785)
## Problem The new project form has accessibility issues: - labels are not linked to inputs - description are not linked to inputs ## How to test Navigate through the form inputs with voice over and make sure every input makes sense <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Improved form field identification consistency across project creation screens (compute size, database password, project name, PostgreSQL version, region, and organization). * Enhanced selector/input accessibility by adding explicit element identifiers to key controls. * Updated region and repository UI structure to improve reliable rendering without changing setup behavior. * Preserved existing password, version, and routing logic while making dropdowns and fields easier to locate and interact with. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
9e17c41771 |
Chore: Link Delete Project doc from the Delete Project confirmation m… (#47637)
Fixes FE-3801. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Updated the project deletion confirmation dialog so the “learn more / documentation” text and external link are always shown consistently. * Paid projects now include the full warning (“All project data will be lost, and cannot be undone.”) alongside the documentation link, while free projects show the simplified message without the additional warning. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
|
18431efb25 |
fix(studio): TanStack post-merge fixes — Monaco loader, fonts, CSP (from #46424) (#47657)
Post-merge fixes for the TanStack Start migration (#46424) — things that broke on the TanStack build as master evolved under the migration branches. Kept on their own branch off master rather than piling onto the E2E-matrix PR (#47119); all land on master and cascade up to S6 + the big PR. Common theme: a master PR changed something the Next pipeline handles via `next/font` / `pages/_app.tsx` / `next.config.ts`, but the hand-rolled TanStack equivalent (`routes/__root.tsx`, `styles/fonts.css`, `vercel.ts`) wasn't updated to match — invisible on the Next deploy, broken only on TanStack. --- ## 1. Monaco loader path (#47182) #47182 re-nested the served Monaco assets from a flat `public/monaco-editor/` layout into `public/monaco-editor/vs/` and updated `pages/_app.tsx`, but `routes/__root.tsx` still pointed `loader.config` at the old path, so `loader.js` 404'd and **no Monaco editor mounted anywhere in the TanStack build**. Now mirrors the Next config (`${origin}${BASE_PATH}/monaco-editor/vs`, window-guarded for SSR). Was failing the whole `tanstack` E2E shard on #47119. ## 2. Inter + Manrope fonts (#47306) #47306 renamed Tailwind's sans var `--font-custom` → `--font-sans` and added `--font-heading` (Manrope), set via `next/font` on Next. `fonts.css` still only set the now-ignored `--font-custom`, so the body fell back to the theme's system chain (`Circular, custom-font, Helvetica…`) at weight 450 — that's the "Inter weights look wrong". Manrope was missing entirely. - Wire `--font-sans` (Inter) + `--font-heading` (Manrope) to match `next/font`. - **Vendor all three families** (Inter, Manrope, Source Code Pro) via `@font-face` so nothing depends on the Google Fonts CDN — matches `next/font` self-hosting, and (see below) `font-src` doesn't allow `fonts.gstatic.com` anyway. Verified in-browser: computed `body` → `Inter`, headings → `Manrope`, all loading from local `/assets/*.woff2`. ## 3. Security headers / CSP (next.config.ts `headers()`) The Next build sets X-Frame-Options / X-Content-Type-Options / HSTS / **Content-Security-Policy** / Referrer-Policy via `next.config.ts`. The TanStack build never carried these over — `vercel.ts` only set cache-control, so **the deployed TanStack dashboard shipped with no CSP at all**. The TanStack deploy serves a static shell (no server to attach headers), so they go in the Vercel config: - `security-headers.ts` — shared source of truth, reuses `getCSP()`, env-gated exactly like next.config. - `vercel.ts` — apply to every response (all base-path prefixes): full `getCSP()` + HSTS on platform. - `scripts/serve.js` — the non-platform set (`frame-ancestors 'none'`) for the self-hosted server. **Tested the policy in a real browser** (temporarily enforced it on the TanStack build via /test-supabase-local): everything passed except one real gap — `font-src` was missing `data:`, so GraphiQL's bundled Monaco codicon font and Stripe's payment-element fonts (both data: URIs) were blocked (37 violations on a cold load). Added `data:` to `font-src` in `csp.ts` → violations drop to zero, SQL editor Monaco renders clean. That gap affects the Next build too. --- ## 4. `node:path` import crashing `/project/[ref]/merge` Found by a full-site click-through of the TanStack build (all product areas, ongoing — see below). `useEdgeFunctionsDiff.ts` + `EdgeFunctionsDiffPanel.tsx` did `import { basename } from 'path'` in client code. Webpack (Next) polyfills `path` in the browser; Vite externalizes it, so the whole `/merge` route crashed with "Module \"path\" has been externalized for browser compatibility". Replaced the two `basename` call sites with a string helper. Verified in-browser: `/merge` renders. ## 5. URL shape — Next-style search-param semantics + shim fixes The dashboard produced malformed URLs vs the Next build (strange query params, trailing slashes, `##` hashes). Root cause + audit verified empirically against `@tanstack/react-router@1.170.10`; all fixed with unit tests and browser-verified: - **`createRouter` used TanStack's default JSON search codec** — `?flag=true` became `?flag=%22true%22` via links, repeated `?filter=…&filter=…` collapsed into a JSON array (breaking multi-filter/sort table-editor URLs and the account-page round-trip, which double-encoded), and search values arrived as numbers/booleans where the app expects strings. New `lib/router-search-params.ts` (Next-style: strings in, strings out, repeated keys → string[]) wired into the router. - **Link shim** (`compat/next/link.tsx`): `URL.hash` includes the leading `#` while TanStack's `hash` prop adds its own → every `href="…#section"` navigated to `##section` (hash-scroll broke); `Object.fromEntries(searchParams)` dropped repeated query params. Both fixed. - **Trailing slash injected before the query** on every `?`-only relative navigation (`/auth/providers/?provider=…`): fixed in the compat router (prefix current pathname) and via a custom nuqs adapter (`lib/nuqs-tanstack-adapter.tsx`) replacing the stock tanstack-router adapter, whose `navigate({ to: '?…' })` writes hit the same TanStack behavior (123 files use nuqs). - **Pathname-less `router.push({ query })` leaked path params** — Next re-consumes `ref`/`id` from `query` into the path pattern; the shim didn't, yielding `/editor/17597?schema=public&ref=<ref>&id=17597&filter=…` from table-editor filter/sort, linter panels, and advisor shortcuts. The shim now defaults the pathname to the current route pattern and backfills omitted params. - **Redirects dropped query + hash** (Next's `redirects()` preserves them): `__root.tsx` `matchRedirect` and `routes/index.tsx` now carry incoming params/hash through (consumed rule params excluded, destination's own params win). `/?next=new-project&projectName=zzz` → `/new/new-project?projectName=zzz`; `/sql/quickstarts?template=x#frag` → `/sql/examples?template=x#frag`. Browser-verified post-fix: advisors `?preset=WARN`, providers `?provider=Google`, `?schema=auth` — all clean (no `/?`, no leaks); repeated `filter` params survive hydration; `=true` unquoted; single `#`. ## 6. TanStack `navigate` corrupting query values (Logs Explorer SQL newline loss) TanStack router-core treats a query string embedded in `navigate({ to })` as part of the *path*: `decodePath` percent-decodes it and `sanitizePathSegment` strips control characters, silently deleting every `%0A`. Logs Explorer's SQL (`s` param) lost its newlines on Run/reload — `order by timestamp desc` / `limit 5` glued into `desclimit 5`, which then failed the LIMIT lint. Pre-existing on the TanStack build (the stock nuqs adapter had the same shape); Next unaffected. Fixed by never embedding query strings in `to`: the nuqs adapter and the compat `router.push`/`replace`/`prefetch` (plus the `next/navigation` shim) now pass search as an object through the app codec (`splitInternalUrl` hoisted to `lib/internal-url.ts`). Guard test drives a real `createRouter` with multi-line SQL through both producers. Browser-verified: newlines survive the full Run → reload → re-Run cycle. ## 7. Integration overview markdown never loaded (all integrations) `MarkdownContent` used a template-literal dynamic import (``import(`@/static-data/integrations/${id}/overview.md`)``) — webpack builds a context module for that, Vite can't analyze it, so every integration detail page threw `Failed to resolve module specifier` and rendered no overview text. Fixed with an explicit lazy registry of literal imports (`static-data/integrations/overviews.ts`, drift-guarded by a test) plus an `mdRawLoader()` Vite plugin mirroring next.config's turbopack raw-loader rule. Both runtimes keep working; md stays out of the main bundle. ## 8. GraphiQL editor never mounted (`exports is not defined`) Our `umdAmdShortCircuit()` Vite plugin (which disarms Monaco's global AMD loader for deps like papaparse) rewrote `typeof define === 'function' && define.amd` to `false` inside `monaco-editor`'s bundled copy of marked — whose UMD relies on its own *local* `define` shim — so the whole optimized monaco chunk failed to evaluate and GraphiQL's editor pane stayed blank. The check now only short-circuits when `define` is the global AMD loader. Browser-verified: all four GraphiQL Monaco panes mount, queries execute. (Known follow-up: GraphiQL's Monaco workers fall back to the main thread under Vite — functional, worker wiring is Next-specific `setup-workers/webpack`.) ## 9. `@sentry/nextjs` bundling Next internals — built TanStack bundle crashed (caught by E2E) The E2E suite against the **built** TanStack bundle (not the dev server) found lazy chunks like `table-editor-*.js` dead on arrival: `@sentry/nextjs` (imported by ~25 client files) drags in `next/dist/shared/lib/constants`, whose module scope evaluates `process?.features?.typescript` — optional chaining doesn't guard an undeclared `process` in the browser, so the whole chunk failed at load with `ReferenceError: process is not defined`. Dev shims `process`, which is why weeks of dev-server testing never saw it. Fixed by aliasing `@sentry/nextjs` → `compat/sentry-nextjs.ts` (re-exports `@sentry/react`, same deduped 10.59.0, plus explicit stand-ins for the three Next-only APIs) in the Vite build only. Verified: fresh build has zero Next-internals markers in any chunk; table editor loads clean; full E2E suite run against the built bundle. Note for the stack: `alaister/tanstack-start` / the E2E-matrix branch already carried a different fix for the same crash (a `next/constants` shim) that never made it to master — the cherry-pick onto those branches keeps **both** (the shim covers any other transitive importer; the alias keeps Next internals out of the client bundle entirely). **Follow-up found while fixing:** Sentry is never *initialized* in the TanStack runtime — `instrumentation-client.ts` / `sentry.server.config.ts` are Next-convention files nothing imports under TanStack, so `captureException` calls are silent no-ops. Needs an `@sentry/react` init (+ `tanstackRouterBrowserTracingIntegration`) wired into the TanStack client entry as its own PR. ## 10. GraphiQL Monaco workers + edge-function Deno typings (Vite-only gaps) - **GraphiQL's Monaco workers ran on the main thread** under Vite ("Could not create web worker(s)…" — `setup-workers/webpack`'s `new URL(...)` form isn't rewritten by Vite). A `graphiqlViteWorkers()` plugin resolves the import to graphiql's own `setup-workers/vite` variant for client builds (SSR untouched, Next untouched); the setup-workers chain is `optimizeDeps.exclude`d because the Rolldown optimizer can't load `?worker` ids. - **Edge-function editors silently lost their Deno typings** — `AIEditor` loaded `public/deno/*.d.ts` via `/* @vite-ignore */` imports that always failed at runtime under Vite. The `.md` raw loader is generalized into `rawTextLoader` (exact-path allowlist for the two typings files, served as virtual string modules so the dep scanner never parses `.d.ts` syntax), and the imports are now static-analyzable literals that both bundlers handle (turbopack's raw-loader rules match them on the Next side). ## Split out for reviewability App-level fixes that reproduce on the Next build too (DOM-nesting hydration errors, the ghost deleted-snippet nav, the recurring pg-meta `migrations` 400) moved to their own PR: #47667. Sentry initialization for the TanStack runtime (captures were silent no-ops) is #47666, stacked on this PR. ## Full-site test campaign Drove every dashboard product area on the local TanStack build (Playwright, human-style) hunting migration regressions: redirects/404/catch-alls, org, account, project home/branches/merge, table editor CRUD, SQL editor (Monaco/run/save/templates/AI), all database pages, all auth pages, storage CRUD, edge functions + realtime, logs/observability, advisors, settings, integrations hub incl. nested routes, global UI (palette/connect/switchers/theme/fonts), and a cross-cutting sweep (document titles, back/forward chain, hard-refresh hydration on deep URLs, trailing-slash active state). Every failure found is fixed above and re-verified in-browser; remaining console quirks were cross-checked against the deployed Next build and are pre-existing (tracked separately). ## To test Most fixes are already browser-verified + covered by unit tests and the self-hosted E2E suite; the last two landed after the final browser pass and still need an in-browser check: 1. **GraphiQL Monaco workers** — restart the dev server (clear `apps/studio/node_modules/.vite` once first — the optimizer cache may hold a stale prebundle of the worker chain). Open `/project/<ref>/integrations/graphiql/graphiql` with the console open: the `Could not create web worker(s). Falling back to loading web worker code in main thread` warning must be gone, and DevTools → Sources → Threads shows the three workers (json, editor, graphql). Autocomplete in the query editor stays responsive. 2. **Edge-function Deno typings** — `/project/<ref>/functions/new`: no "Failed to load … typings" console error, and typing `Deno.` in the editor offers typed completions (e.g. `Deno.env`). Spot-checks for the rest (all previously verified): - `/project/<ref>/merge` renders (no "Module path" crash). - Multi-line SQL in Logs Explorer survives Run → reload (no `desclimit` gluing, no LIMIT-lint false failure); `s` param keeps `%0A`. - `/auth/providers` → open a provider → `?provider=…` with no trailing slash before `?`; table-editor filter/sort URLs carry no leaked `ref`/`id` params; `/?next=new-project&projectName=x` lands on `/new/new-project?projectName=x`. - Integration detail pages (cron/queues/vault/data_api) show their overview prose; GraphiQL query editor mounts. - Built bundle (`MODE=test vite build` + `start:tanstack`): table editor loads with no `process is not defined`. - `curl -sI` any page on a platform deploy: `X-Content-Type-Options: nosniff` (was the invalid `no-sniff`). <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Centralized integration overview markdown loading with registry-based lookup. * Improved Monaco loading/asset path handling for smoother editor startup. * **Bug Fixes** * Next-style navigation/search handling now preserves pathname, hash, repeated query keys, and special characters (including newlines). * Redirects now reliably carry over query and hash with correct precedence. * **Security/Configuration** * Updated CSP font sourcing and unified security headers delivery across environments; conditional HSTS behavior. * Refreshed font CSS variables and font-face definitions to match the theme. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --- ### Review feedback: non-prod favicon (Joshen) The TanStack `__root.tsx` hardcoded the prod favicon; local + hosted staging now use the white staging favicon (`/favicon/staging`), matching what `pages/_app.tsx` passes to `MetaFaviconsPagesRouter` for non-prod. Rather than pull the pages-router component into the TanStack head, it reuses the same synchronous `NEXT_PUBLIC_ENVIRONMENT` signal the file already uses for `IS_DEV_TOOLBAR_ENABLED` (the `head()` route option isn't a React component, so it can't run `_app`'s async CLI check — but the env signal covers the reported local/staging case). --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
|
5677b0ec2a |
chore(studio): clarify integration settings copy (#47578)
## Summary - Clarifies Vercel integration settings copy for org-scoped and project-scoped contexts. - Updates GitHub and Vercel integration section titles to sentence case for in-page headings. - Contributes to DEPR-565. | Before | After | | --- | --- | | <img width="1242" height="759" alt="Integrations Basket Supabase" src="https://github.com/user-attachments/assets/df33a9d4-8fb3-40cf-87d2-e87fa33195e4" /> | <img width="1150" height="715" alt="Integrations Basket Supabase" src="https://github.com/user-attachments/assets/45478216-c426-4bc1-9292-9a6016ac7af9" /> | | <img width="1242" height="759" alt="18154" src="https://github.com/user-attachments/assets/8dfb7742-fca5-421f-88d0-4d24dad93450" /> | <img width="1150" height="715" alt="Integrations Settings Agua Basket Supabase" src="https://github.com/user-attachments/assets/aa119d0e-cf5e-45e5-b5d3-cd8c0d047e34" /> | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary by CodeRabbit * **UI Text Updates** * Updated GitHub and Vercel headings and labels to use consistent casing (e.g., “GitHub connection”, “Vercel”). * Adjusted success and empty-state messaging for GitHub and Vercel integration actions. * **UX Improvements** * Improved GitHub and Vercel section descriptions by tailoring the text to project-scoped vs organization-scoped contexts. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |