GraphiQL (`@graphiql/react`) runs a second Monaco instance that injects
two global, page-wide styles which corrupt Studio's other editors once a
GraphiQL chunk has loaded (it persists across client-side navigation, so
a full reload hides it). After visiting GraphiQL and returning to e.g.
the SQL editor, the editor collapses to a ~5px sliver and its syntax
colors swap to GraphiQL's theme.
**Changed:**
- `monaco.css` — a higher-specificity counter-rule
(`.monaco-editor.monaco-editor { position: relative !important }`) beats
GraphiQL's runtime-injected `.monaco-editor { position: absolute
!important }`, which otherwise pulls Studio's `@monaco-editor/react`
wrapper out of flow and collapses it to ~5px.
- GraphiQL now uses the primary `supabase` Monaco theme instead of a
separate `supabase-graphql-*` theme, so the global `.mtk*` token palette
stays identical and syntax colors no longer bleed into other editors.
**Added:**
- E2E test (`monaco-graphiql-coexistence.spec.ts`) reproducing both bugs
via client-side SQL editor → GraphiQL → SQL editor navigation (a full
reload unloads the chunk and hides the bug).
- Component test (`CodeEditor.test.tsx`) guarding the height-class
precedence regression from #47339/#47350 — a caller height (e.g. the
email template editor's `h-96`) must win over the default `h-full`.
Covered as a component test since the email source editor isn't
reachable on self-hosted.
## To test
- Open the SQL editor → **Integrations → GraphiQL** → back to the SQL
editor (in-app navigation, not a reload). It should stay full height and
keep its own syntax colors.
- Confirm autocomplete still works in the SQL editor.
- `pnpm --prefix e2e/studio run e2e --
features/monaco-graphiql-coexistence.spec.ts`
- `pnpm --prefix apps/studio test -- CodeEditor.test`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved Monaco editor styling so GraphiQL no longer affects the SQL
editor’s theme or layout when navigating between them.
* Fixed editor sizing so a custom height now takes precedence over the
default full-height setting.
* Polished GraphiQL panel styling for more consistent spacing and
appearance across themes.
* **New Features**
* GraphiQL now uses the shared editor theme for better visual
consistency with Studio.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Fixes three GraphiQL/integrations layout issues introduced by the
Marketplace layout change (#45856), which dropped the height passthrough
on the integration page content wrapper.
**Changed:**
- **Full-height integration pages** — the content wrapper had no height,
so GraphiQL's `h-full` editor collapsed instead of filling the page.
Added `flex-1 min-h-0` to the wrapper in both the legacy
(`LegacyIntegrationPage`) and marketplace (`MarketplaceDetail`) render
paths.
- **GraphiQL gutter bleed** — Monaco's `.overflow-guard` was ending up
`overflow: visible` (an inline style Monaco sets at runtime), so the
oversized opaque line-number gutter escaped the editor and painted over
the page above it. Re-asserted the clip, scoped to GraphiQL so the SQL
editor is untouched.
- **GraphiQL editor spacing** — removed GraphiQL's default 16px
query-editor padding so the scroll shadow sits flush, and restored the
content's breathing room via Monaco's own `padding` (top/bottom) and
`glyphMargin` (line-number left inset) options, which leave the scroll
shadow pinned to the top edge.
Before:
<img width="2056" height="814" alt="Screenshot 2026-06-26 at 5 27 24 PM"
src="https://github.com/user-attachments/assets/573856bf-2bfb-4bf2-9dd7-59c29b423ec9"
/>
## To test
- Open a project → **Integrations → GraphiQL** (the `graphiql` tab). The
editor should fill the full page height.
- Scroll the query editor — the scroll shadow should sit flush at the
top edge, not float inset, and the white gutter should not bleed over
the page header above.
- Confirm line numbers have left padding and content has top/bottom
padding.
- Trigger autocomplete in the editor — the suggestion popup should still
appear (not clipped by the gutter `overflow: hidden`).
- Toggle the **Marketplace** feature preview (Account dropdown → Feature
Previews) and re-check the GraphiQL page in both states, since it
renders through two different page components.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved the GraphQL in-browser editor layout to prevent the editor
gutter from overlapping surrounding content.
* Removed unnecessary query-editor padding so scrolling and shadow
effects display correctly in the available space.
* Ensured Monaco editor spacing/settings are applied consistently to
both existing and newly created editors.
* Fixed full-height sizing for integration pages so content stays
correctly constrained and doesn’t collapse or overflow.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
## Summary
- pg_graphql 1.6+ disables schema introspection by default, which breaks
GraphiQL's docs explorer and field autocomplete. This PR adds an in-app
notice + confirmation flow so users can opt into (or later opt out of)
introspection without leaving the GraphQL tab.
- Introspection state is read from, and written to, the `@graphql(...)`
directive embedded in the target schema's Postgres comment (`public` by
default). Other directive options the user has set are preserved when
the introspection key is toggled.
- Ships `parseSchemaComment` / `buildSchemaCommentWith` helpers (with
unit tests) and a `useSetIntrospection` mutation hook, plus collapsible
disabled-state and dismissible enabled-state notices rendered above
GraphiQL. GraphiQL is re-mounted after a toggle so it re-runs
introspection.
## Test plan
- [ ] On a project with pg_graphql >= 1.6 and introspection disabled:
disabled-state notice appears, confirm modal shows the SQL that will
run, enabling re-mounts GraphiQL and populates the docs explorer.
- [ ] On a project with introspection enabled: small enabled-state
banner appears, disabling clears the docs explorer and updates the
schema comment.
- [ ] Existing `@graphql({...})` options (e.g. `inflect_names`,
`max_rows`) survive a toggle; malformed directive text is replaced and a
warning is shown in the confirm modal.
- [ ] On pg_graphql < 1.6 (or extension not installed): no notice
renders, GraphiQL behaves as before.
- [ ] Collapsed-disabled-notice state persists per project via local
storage.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* GraphQL introspection toggle with enable/disable confirmation modal.
* Notices showing current introspection state with controls to change
it.
* GraphiQL automatically remounts and updates when introspection status
changes.
* Per-project persisted collapsed/expanded state for the introspection
notice.
* Background detection of introspection support and schema comment
handling for targeted schemas.
* **Tests**
* Comprehensive tests for parsing/building schema comment directives and
version behavior.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46170?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Adds `graphiql@5.2.2` and switches from our heavily-customised rebuild
(which used `@graphiql/react` + `@graphiql/toolkit` directly) to the
prebuilt component, restyled to match the dashboard. Role impersonation
re-added as a sidebar plugin.
This is a deliberately simpler setup than what we had – we lose some
layout customisation (sidebar is forced to the left, role impersonation
moves into the sidebar) but future upgrades become much easier since
we're no longer maintaining a fork-by-rewrite.
**Removed:**
- `apps/studio/components/interfaces/GraphQL/GraphiQL.tsx` – custom
rebuild
- `apps/studio/components/interfaces/GraphQL/graphiql.module.css` –
custom styles
**Changed:**
- Added `graphiql` ^5.2.2 (we previously didn't have the top-level
package, just the subpackages)
- `@graphiql/react` ^0.19.4 → ^0.37.3 (now Monaco-based; v0.19 was still
on CodeMirror 5)
- `@graphiql/toolkit` ^0.9.1 → ^0.11.3
- `GraphiQLTab.tsx` now wires up the prebuilt `<GraphiQL />` with worker
setup, theme bridge, and plugins
- New `graphiql.module.css` scopes restyling via `:global(...)` since we
can't add hashed classes to the library's DOM
- `RoleImpersonationSelector` gained an `orientation: 'horizontal' |
'vertical'` prop (default `horizontal`) so it fits in the sidebar pane –
all existing call sites unchanged
- `MonacoThemeProvider` exports `getTheme` so the GraphQL Monaco
instance can reuse Studio's theme
**Added:**
- Theme bridge: `supabase-graphql-dark` / `supabase-graphql-light`
Monaco themes synced with `next-themes` via `forcedTheme`
- Role impersonation sidebar plugin (gated on `field.jwt_secret` read
permission, same as before)
### Notes / tradeoffs
- We don't share Studio's monaco instance – Studio loads it via AMD/CDN,
GraphiQL bundles it as ESM. Both end up on `monaco-editor@0.52.2` but in
different module systems. Sharing would require ripping out Studio's CDN
loader (Studio-wide refactor, out of scope). GraphiQL's monaco is
dynamically imported and only loads when the GraphQL tab opens.
- The dark/light response panel uses different `--graphiql-response-bg`
tokens because the editor sits at very different baseline lightness in
each theme; a single token can't lift it meaningfully in both
directions.
- Session header (tabs row) is hidden – we don't expose multi-tab
workflows.
## To test
- Open `/project/<ref>/api/graphiql` in both light and dark themes –
editor + response panel backgrounds, sidebar borders, button radii
should all match the dashboard
- Run a query and confirm syntax highlighting works (GraphQL-specific
token `argument.identifier.gql` is purple)
- Open the doc explorer and history sidebar plugins
- As a user with `field.jwt_secret` read permission: open the Role
Impersonation sidebar plugin, pick a role, confirm subsequent queries
hit the API with the impersonated JWT
- As a user without that permission: confirm the Role Impersonation
plugin doesn't appear, history still does
- Toggle theme while GraphiQL is open – Monaco theme should swap without
a reload
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Vertical layout option for the role impersonation selector; radios can
expand to full width.
* **Improvements**
* Revamped GraphiQL integration with updated upstream package, plugins,
and editor theming for improved consistency and UX.
* New GraphiQL styling and layout for clearer pane separation and
polished controls.
* Role selector radios now support a full-width mode for improved
responsiveness.
* **Chores**
* Updated GraphiQL-related dependencies.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
* Replace all usage of useProjectContext with useSelectedProjectQuery
* Replace all usage of useSelectedProject with useSelectedProjectQuery
* Replace all usage of useProjectByRef with useProjectByRefQuery
* Replace all usage of useSelectedOrganization with useSelectedOrganizationQuery
* Deprecate useSelectedProject, useSelectedOrganization, and useProjectByRef hooks
* Deprecate ProjecContext
* basic typography classes
* Clean up classes for where we use h1 tags
* Clean up classes for where we use h2, h3, h4
* Clean up classes for where we use h6
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Deprecate getAPIKeys from project settings v2, use new api keys endpoint instead
* use getPreferredKeys where appropriate
* Prevent usage of secret key for storage and realtime inspector
* Add dashboard API api-keys endpoint
* Simplify
* Disable edge functions test if legacy api keys are disabled
* Revert
* Fix graphiql
* Remove all usage of api keys from project settings, except DisplayApiSettings
* Update
* Fix
* Small fix for an undefined upload url.
* Fix the storage state initialization when the resumable url changes.
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
* Update several files to use data fetcher methods
* Remove unused files from lib/common/fetch
* Revert "Remove unused files from lib/common/fetch"
This reverts commit b314b05f06.
* Fix GraphQL
* Fix types
* Add IS_PLATFORM check in useOrgUsageQuery
* Fix type issues
* Initial commit.
* Minor type fixes.
* Add a integration for Queues. Refactor some of the integration layout.
* Migrate the Cron integration to the new style.
* Add useInstalledIntegrations hook.
* Add an integration entry for vault.
* Add an integration entry for GraphiQL.
* Add supabase webhooks.
* Feat/integrations get layout (#30538)
* scroll based icon
* Update header.tsx
* remove dep from overview
* moar
* more table stuff
* moar
* alt nav put in
* fix MotionNumber issues
* more
* trying both layouts
* Fix bunch of type errors.
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
* Migrate Vercel and Github files to their own folders.
* Switch all integrations with the new designs.
* More fixes for links, pages structure and other random stuff.
* Remove unneeded file.
* Another set of fixes. Migrated most of the extension integrations.
* Migrated Vault and webhooks to the new style.
* Various fixes to make the animation work.
* Remove extra code.
* Tiny fixes 😬 i swear its tiny
* Refactor IntegrationOverviewTab
* chore/ update integrations routes (#30585)
* init
* add child support in tabs
* add webhooks
* Update IntegrationPageHandler.tsx
* fix id issues
* use messageId instead
* animation tweaks
* Move the description to the wrappers array.
* The useInstalledIntegrations now provides integrations which could be installed.
* Add static content for the various integrations.
* Move the page handler logic into the integrations definitions.
* Clean up some extra code.
* Add logic to make the overview tab the default tab.
* Don't show the header until the integration id has been checked.
* Add logic to the integration pages to avoid weird loading bugs, deselecting tabs if the integration hasn't been installed etc.
* Fix the webhooks overview tab.
* Fix the buttons for enabling extensions.
* Add padding to all custom tab contents.
* Small fixes
* Prettier lint
* Fix icon color + add empty state for when available integrations are all installed
* Fix ts errors
* Fiox
* Add enable webhooks cta
* Fix key
* Fix all lints
* Fix the queues create sheet.
* Fix the deletion of wrappers.
* Fix the minimum version alert for the wrappers extension.
* Make the queues table fit the whole container.
* Fix an issue which reset the tab when installing an extension.
* Address comments
* Add loading state for installed integrations in side nav
* Fix edit secret not rendering value in input field after subsequent openings
* Fix vault keys auto filling search input with vault
* Fix search input placeholder for cron
* Minor fix in install database extension copy
* Fix a bad redirect when reloading.
* Fix bad url redirects.
* Fix scrolling in create new/edit wrapper sheet.
* Add y padding to the wrappers rows.
* Fix merge errors.
* More merge fixes.
* Fix bad imports during the merge.
---------
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
