3 Commits

Include renames

Author	SHA1	Message	Date
3 people	5c0b627904	fix(studio): fix GraphiQL editor layout, gutter bleed and spacing (#47334) ... 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 <[email protected]>	2026-06-26 18:17:10 +08:00
3 people	afd690ada5	chore: Migrate all apps to use Tailwind CSS configs (#45530) ... This PR migrates all tailwind configs in the apps to be CSS configs. They import a shared CSS Tailwind config from the `config` package (which in turns imports the old JS config). The shared JS config will be migrated to CSS in a followup PR. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Chores** * Centralized Tailwind into a config-driven entrypoint and updated the app build flow to use the new build step; many apps now import unified global styles. * **Style** * Migrated global styles to a Tailwind v4-style setup, added project-wide content scanning, consolidated theme imports, standardized theme tokens (including new --container-site max-width), and added a small prose utility to remove paragraph margins. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Sonnet 4.6 <[email protected]>	2026-05-07 17:18:15 +02:00
3 people	f8cc6c21bd	[FE-2075] feat(studio): bump graphiql to v5 and use prebuilt component (#45404) ... Adds `[email protected]` 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 `[email protected].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 <[email protected]>	2026-05-01 16:16:26 +08:00