mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 09:55:06 +03:00
codex/fix-tanstack-e2e
26
Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
 Saxon FletcherandClaude Opus 5
|
9b12165400 |
feat(studio): multi-select logs with click, shift, and keyboard ranges (#50689)
<img width="1454" height="786" alt="image" src="https://github.com/user-attachments/assets/995790b1-a242-4a61-a0a0-349de7234923" /> Stack 4/4 · previous: #50688 ## Problem Selecting several logs to copy or send to the Assistant meant using a separate checkbox column and a banner above the table. Clicking a row and checking a row were two different selections. ## Solution - Unified Logs uses `useTableRowSelection`, so a row click, Cmd/Ctrl-click, Shift-click, and the checkbox all act on one selection. The selection resets when the project or filters change, and a linked `?id=` still restores its log. - The level indicator and checkbox now share one column. The checkbox shows on hover, focus, or when the row is selected. - The detail panel shows every selected log: one log gets the tabs, and two or more show their combined JSON. Copy-as-JSON and "Explain with AI" move into the panel header (`LogSelectionActions`), replacing `RowSelectionHeader`. - New Shift+↑ / Shift+↓ shortcuts extend the selection, with a hint in the panel footer. Prev/next navigation follows display order and keeps the row in view. - `LogTypeIcon` no longer puts a nested button inside clickable rows. ## Review instructions 1. Click a log, then Shift-click another. The range should be selected and the panel should show the combined JSON. 2. Cmd-click to add or remove single logs. Use the copy button (or its shortcut) and "Explain with AI". 3. With the panel open, press Shift+↑ / Shift+↓ to grow and shrink the selection. 4. Change a filter. The selection should clear. ## Checklist - [ ] I have read [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary * **New Features** * Added multi-row selection in Unified Logs, including additive, range, checkbox, and keyboard selection. * Added bulk JSON viewing and copying, plus AI-assisted actions for selected logs. * Added Shift+Arrow shortcuts to extend selections and improved row navigation. * **Accessibility** * Improved labels and focus behavior for log controls and log type indicators. * **Bug Fixes** * Kept single-log Overview and Raw JSON views available alongside multi-log selection. * Applied metadata visibility settings to selected-log actions and disabled actions for invalid log data. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 5 <noreply@anthropic.com> |
||
|
Saxon FletcherandClaude Opus 5
|
71a252a445 |
feat(studio): show overview and raw JSON tabs for every log (#50687)
<img width="1086" height="810" alt="image" src="https://github.com/user-attachments/assets/8a9f0c64-145e-4475-a3df-67bd815e2200" /> Stack 2/4 · previous: #50686 · next: #50688 ## Problem The detail panel only showed an Overview tab for log types that have an inspection query. Every other type opened straight to Raw JSON. The panel also had no header saying which log was open. ## Solution - Adds `LogDetail`, which owns the inspection query, loading and error states, and the Raw JSON view. Errors now use `AlertError`. - Adds `LogOverview`, which maps each log type to its overview renderer. Types without one fall back to the new `LogFields`, a generic tree of expandable key/value rows built on `LogFieldRow`. - `ServiceFlowPanel` now shows a header (level dot + event message) above Overview / Raw JSON tabs for every log. - Moves `getLogDataForMetadataVisibility` to `ServiceFlowPanel.utils.ts` and adds `LogLevelDot`. ## Review instructions 1. Select a Realtime (or any other non-inspected) log. The Overview tab should list its fields, with nested objects that expand. 2. Select a Postgres log. The overview should look as before, and Raw JSON should still show the enriched log. 3. Switch between logs and confirm the tabs reset their scroll. ## Checklist - [ ] I have read [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added structured log overviews for Postgres, PostgREST, Auth, Storage, and Edge Functions, with a Raw JSON view for log details. - Added expandable log fields with filtering and copy actions, plus visual indicators for log severity. - **Bug Fixes** - Improved display of scalar, nested, date, and empty log values. - **Privacy** - Raw log data respects metadata visibility settings. <!-- end of auto-generated comment: release notes by coderabbit.ai --> Co-authored-by: Claude Opus 5 <noreply@anthropic.com> |
||
|
Saxon FletcherandDanny White
|
cd77bebafd |
chore(ui): refresh shared button styles (#50197)
## What kind of change does this PR introduce? UI polish / design system: refreshed button styles, related token tweaks, and a shared floating-button plate. Resolves DEPR-652. ## What is the current behavior? Default, primary, and secondary buttons use older fills, borders, and hover treatments. Primary still leans on brand scale utilities. Default fills don’t always read as raised chrome across surfaces, and floating copy / expand / scroll controls can let busy content show through translucent fills. Call sites hand-roll `rounded-* bg-background` wrappers for that. ## What is the new behavior? Refreshes primary, default, and secondary buttons with medium-weight labels, subtle shadows and inset edges, and smoother transitions. Light-mode default buttons use a raised fill with an accent hover state, primary text is brighter, and inline keyboard shortcuts inherit the button’s colour. Adds `FloatingPlate`: an opaque `bg-popover` shell for floating default buttons (and small clusters). Migrates Studio, Docs-related patterns, www, and `ui-patterns` floaters onto it so busy content no longer shows through translucent fills. Positioning, z-index, and hover/focus reveal stay on the plate’s `className`. Use `rounded="full"` for pills. Also: - Moves primary onto semantic `--primary` / `--primary-hover` (with a light-theme override) instead of brand utility fills - Tokenises button shadows as `--button-shadow-drop` / `--button-shadow-raised` / `--button-shadow-default` on the Button base - Aligns hover direction: darken on light mode, lighten on dark mode for both default and primary - Default fill stays opaque `bg-card` in light (occlusion) and translucent `bg-muted` in dark (adapts to the local surface) - Documents fills and `FloatingPlate` on the design-system Button page (with a live example) - Scales shared radius tokens in Studio and www; medium+ Button sizes use a proportionally softer radius - Fixes www nav CTA centering (`lg:inline-flex` instead of `lg:block`) - Query detail Expand/Collapse wires `aria-expanded` / `aria-controls` | Before | After | | --- | --- | | <img width="1074" height="438" alt="CleanShot 2026-09-18 at 15 52 51@2x" src="https://github.com/user-attachments/assets/ef43da21-b053-4b7e-9ac4-ab8b428228ab" /> | <img width="1090" height="464" alt="CleanShot 2026-09-18 at 15 50 59@2x" src="https://github.com/user-attachments/assets/2ddc55fc-4c8d-499c-a280-f3db3d99023c" /> | | <img width="1082" height="446" alt="CleanShot 2026-09-18 at 15 52 35@2x" src="https://github.com/user-attachments/assets/3dd5452d-325a-4e4a-a79d-26c6c6950a31" /> | <img width="1078" height="446" alt="CleanShot 2026-09-18 at 15 51 13@2x" src="https://github.com/user-attachments/assets/93666385-3e6e-42e0-9891-9cd6bb935b67" /> | ## To test ### Design system - [Button page](https://design-system-git-chore-button-styles-supabase.vercel.app/design-system/docs/components/button): default / primary in light and dark; hover should darken on light, lighten on dark - Same page: [Floating over content](https://design-system-git-chore-button-styles-supabase.vercel.app/design-system/docs/components/button#floating-over-content) / [Floating plate](https://design-system-git-chore-button-styles-supabase.vercel.app/design-system/docs/components/button#floating-plate) example; Copy over SQL should stay opaque - Spot-check hover on a code preview Copy control ### Docs [Docs deploy preview](https://docs-git-chore-button-styles-supabase.vercel.app/docs): - [Docs homepage](https://docs-git-chore-button-styles-supabase.vercel.app/docs): top-right **Sign up** / **Dashboard** primary; menu icon beside it (default icon button) - Shrink below `lg` and open the hamburger drawer: bottom **Sign in** (default) + **Start your project** (primary) medium block buttons - Tab once for **Skip to content** (FloatingPlate) - [MCP guide](https://docs-git-chore-button-styles-supabase.vercel.app/docs/guides/ai-tools/mcp): project picker - [Apple login](https://docs-git-chore-button-styles-supabase.vercel.app/docs/guides/auth/social-login/auth-apple): **Generate Secret Key** button in the Apple Secret Generator - Optional opacity check: any guide code block Copy control (e.g. at the bottom of [Import data into Supabase](https://docs-git-chore-button-styles-supabase.vercel.app/docs/guides/database/import-data)) ### Studio [Studio deploy preview](https://studio-staging-git-chore-button-styles-supabase.vercel.app/): - **Observability → Query Performance**: open a query detail → Expand/Collapse pill + SQL Copy chip (dark: no bleed-through) - **Observability → Query Insights**: select a query → Clear query pill - **Table Editor → any table → Definition** → floating **Open in SQL Editor** - **Connect → Framework → Add files**: Copy on the code tabs (FloatingPlate; light hover follow-up is DEPR-694) - Tab once for **Skip to content** ### WWW - [www deploy preview](https://zone-www-dot-com-git-chore-button-styles-supabase.vercel.app/): nav Sign in / Start your project vertical centering; hero medium CTAs radius --------- Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com> |
||
|
Joshen Lim
|
6965ce133c |
Ensure horizontal scrollbar is visible for unified logs raw json panel (#50661)
### Context Just adds a `overflow-x` to ensure that the horizontal scrollbar is visible for the unified logs raw json panel when viewing a single log as per demo: (Can verify on staging/prod that it doesn't show up unless you scroll all the way to the bottom for a very long raw json) https://github.com/user-attachments/assets/e580fe2e-e7d9-4928-9335-fe957da0405a <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Style** - Improved horizontal visibility for content in the Raw JSON display. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
476d4a5851 |
refactor(ui): drop redundant Button variant="default" props (#50161)
## What kind of change does this PR introduce? Mechanical cleanup on top of the Button default-variant change (#50160). ## What is the current behavior? Many callsites still pass `variant="default"` even though that is now the component default. ## What is the new behavior? Removes redundant static `variant="default"` from legacy `Button` and `ButtonTooltip` callsites. Keeps explicit defaults where they document the API: - `button-default.tsx` and `button-sizes.tsx` demos - `DocsButton`, which pins neutral styling at the wrapper boundary ## To test Studio: - [Auth → Rate Limits](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/auth/rate-limits): dirty the form so Cancel appears; Cancel stays neutral, Save stays green - [Project Settings → API Keys](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/settings/api-keys): `DocsButton` in the header actions stays neutral Design system: - [Design system → Button](https://design-system-git-dnywh-dc924ac1-supabase.vercel.app/design-system/docs/components/button): `button-default` / `button-sizes` still show explicit default styling; Primary (green) is restricted to the Primary section (and `asChild`) WWW: - [www → Brand assets](https://zone-www-dot-com-git-dnywh-dc924ac1-supabase.vercel.app/brand-assets): Download logo kit / Download button kit stay neutral |
||
|
Jordi Enric
|
be030229bf |
feat(studio): add workers to unified logs FE-4281 (#49682)
## Problem Unified Logs does not expose Workers logs, so users cannot search Workers ingress, runtime, or build events alongside other services. ## Fix Add a Workers log type that classifies all three Workers OTEL streams. Gate the option and any persisted Workers filters with the existing Workers feature flag. ## How to test - Enable the Workers feature flag and open Unified Logs. - Select Workers from the Log Type filter. - Expected result: Unified Logs shows ingress, runtime, and build events with the Workers icon. - Disable the Workers feature flag and load a URL containing `log_type:eq:workers`. - Expected result: the Workers option and filter are removed, and Workers logs are not queried. - Run `./node_modules/.bin/vitest --run components/interfaces/UnifiedLogs/UnifiedLogs.queries.test.ts components/interfaces/UnifiedLogs/UnifiedLogs.utils.test.ts data/workers/worker-logs-query.test.ts` from `apps/studio`. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added Workers as a selectable log type in Unified Logs. * Unified Logs now combines worker ingress, guest, and API streams under the Workers category. * Added a dedicated Workers icon and worker log filtering. * **Improvements** * Worker filters and URL parameters respect feature availability. * Worker details show relevant metadata while omitting unavailable HTTP fields. * Improved handling of worker log levels, statuses, and raw data. * Added stronger validation for unified log data. * **Tests** * Added coverage for worker routing, filtering, feature visibility, parsing, and metadata redaction. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
David Whittington
|
591b621567 |
fix(studio): tighten time bounds on single-log inspection query (#47978)
## Summary - The unified log inspection point-lookup (`getUnifiedLogInspection` in `apps/studio/data/logs/unified-log-inspection-query.ts`, used by `ServiceFlowPanel` when a user selects a row to view its detail panel) previously reused the whole selected search date range for its `iso_timestamp_start`/`iso_timestamp_end` bounds, even though it looks up exactly one row by `id`. With a wide search range selected (days/weeks), this scans far more of the ClickHouse-backed `logs` table than necessary. - Since the selected row's own timestamp is already known client-side, the query now bounds itself to a ±1 hour window around that timestamp instead, falling back to the previous search-range behavior when no timestamp is available. - No SQL text changes for the time bound — the `iso_timestamp_start`/`iso_timestamp_end` params are the existing mechanism by which every other query in this file (and sibling logs queries) bounds time server-side, so this follows that same convention rather than adding a redundant inline `WHERE timestamp` clause. - Also added an explicit `AND source = '...'` filter to the OTEL point-lookup SQL. The logs table's primary key is `(project, source, timestamp)`, so filtering on `source` narrows the sorted range before the timestamp bound even applies — the service flow `type` already maps 1:1 to a `source` value, so no new data was needed at the call site. ## Test plan - [ ] Typecheck (couldn't run locally in this environment — no `node_modules` installed) - [ ] Manually verify in Studio: open Logs Explorer with a wide time range (e.g. 7 days), select a log row, confirm the detail/service-flow panel still loads the correct enriched data - [ ] Confirm behavior is unchanged when `logTimestampMs` is unavailable (falls back to search range) 🤖 Generated with [Claude Code](https://claude.com/claude-code) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Improved unified log inspection accuracy by narrowing the inspection window to ±1 minute around the selected log event when a timestamp is available. * Updated service-flow and OTEL inspection lookups to use the selected log entry’s timestamp for tighter, more relevant results. * Preserved the prior broader time-range behavior when a timestamp isn’t available. * **Refactor** * Centralized log type → source mapping and generated the corresponding query filters from that shared mapping for consistency. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
cabe14e5ca |
chore: remove _Shadcn_ suffix from ui tabs components (#47628)
## Problem Now that we migrated all usages of the deprecated `Tabs` component, we don't need the `_Shadcn_` suffix anymore. ## Solution Remove `_Shadcn_` suffix from `ui` tabs components. That's all this PR does, no visual nor functional changes <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Standardized tab components across the app so pages and dialogs now use the same consistent tab UI. * Improved tab-based views in design, docs, studio, learn, and website experiences for a more uniform interface. * **Chores** * Updated shared UI exports to expose tab components directly, simplifying future usage across the product. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas GarciaandIvan Vasilov
|
96d43099bb |
chore: refactor Button API so that it can be used a standard button (#46880)
## Problem Our `<Button>` component breaks the default `button` contract by redefining the `type` prop to set its variant (`primary`, `default`, etc) instead of the button type (`submit`, `button`, etc). This is confusing and forces to write more code when using it with shadcn components that expect/inject the standard button props. ## Solution - rename the `type` prop to `variant` - rename the `htmlType` prop to `type` - propagate the changes where necessary - format code ## How to test As this is just prop renaming, if it builds it's ok --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com> |
||
|
Jordi EnricandClaude Sonnet 4.6
|
9c572a56fd |
feat(logs): add realtime, supavisor, and pgbouncer to unified logs (#46786)
## Problem The unified logs view was missing three log sources that the backend already returns: Realtime (`realtime_logs`), Supavisor (`supavisor_logs`), and PgBouncer (`pgbouncer_logs`). Users had no way to filter or view logs from these services in the unified view. ## Fix - Added `realtime`, `supavisor`, and `pgbouncer` to `LOG_TYPE_PREDICATE` and `LOG_TYPE_EXPR` in the OTEL query builder so rows from these sources are matched and labeled correctly. - Added the three types to `LOG_TYPES` so filter chips appear in the UI. - Added icons (`Realtime` from the icons package, `Cable` from lucide-react for both pooler types) in `LogTypeIcon.tsx`. - Added display labels in `formatServiceTypeForDisplay` (`Realtime`, `Supavisor`, `PgBouncer`). - Fixed a pre-existing unsafe cast in `ServiceFlowPanel.tsx` where any log type not in the service flow allow-list (like the new types) would produce a truthy `serviceFlowType` and trigger a runtime error on row click. The fix checks against `SERVICE_FLOW_TYPES` before casting. Note: `pg_cron_logs` is not included because the backend otel query does not yet return that source. ## How to test 1. Open unified logs for a project that has Realtime activity. 2. In the log type filter, confirm `realtime`, `supavisor`, and `pgbouncer` chips are visible. 3. Toggle on `realtime` and confirm Realtime logs appear with the correct icon. 4. Click a realtime log row and confirm the detail panel opens on the raw JSON tab without a runtime error. 5. Toggle on `supavisor` or `pgbouncer` and confirm pooler logs appear if the project has connection pooler activity. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added support for three new log types — Realtime, Supavisor, and PgBouncer — in Unified Logs with display labels, icons, and filtering/viewing support. * **Bug Fixes / UI Behavior** * Service Flow “Overview” tab now only shows when the service type is recognized, preventing irrelevant overview content for unsupported log sources. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com> |
||
|
Joshen Lim
|
abe7e87bba |
Remove unified logs related dead code (#46459)
## Context Just removing unified logs related dead code (Not used, not imported) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Streamlined the Service Flow view by removing legacy timeline, collapsible sections, and some detailed step UI for a cleaner visualization. * Simplified the Unified Logs surface by reducing exposed types, consolidating query logic, and removing an internal event bus. * Removed legacy list/detail and sheet UI pieces to tighten the logs interface and public API surface. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46459?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 --> |
||
|
Joshen Lim
|
5f4153d9e0 |
Adjust auth log detail pane in unified logs (#46372)
## Context Currently when opening an auth log, the log details panel is seemingly very empty Auth logs are pretty empty by their nature unlike the other logs so am opting to adjust the detail panel for them slightly ### Changes involved - Fixing passing `host` and `path` when rendering auth log details - Opting to only show "Network" + "Authentication" segments for auth (The other fields do not apply for auth logs) <img width="434" height="476" alt="image" src="https://github.com/user-attachments/assets/cf8bb128-2332-424a-a10e-a7e836acb7d5" /> - Make each section collapsible, allow users to adjust themselves how they want to consume the information <img width="421" height="474" alt="image" src="https://github.com/user-attachments/assets/e842bc79-edff-4ec6-ae38-a9249966881d" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Postgres connection and session info now appear in separate expandable sections for easier browsing * Auth-related fields (ID, status, path, referer) now extract and present richer, more accurate values * Request path and host resolution improved across service flow/network views * **Bug Fixes / Improvements** * Safer parsing of auth event messages and more robust fallbacks for missing fields * Cleaner row styling and section rendering for consistent visuals <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46372?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 --> |
||
|
Joshen Lim
|
eb915e99f8 |
Joshen/debug 76 fix sticky hover state on log rows (#45933)
## Context The original problem was that some log rows remain in the hover state after the cursor moves away I was just cleaning up some of the styles and noticed that it doesn't seem to happen anymore so thinking this might have fixed it haha 😅 ## Changes involved - Remove `group-hover` background color change behaviour in `TableCell` in `ui` - `TableRow` should handle the background color instead, hence the changes in `UnifiedLogs.utils` too - Remove unnecessary `renderLiveRows` in `DataTableInfinite` -> the prop isn't being passed anywhere ## To test - [ ] The sticky hover state happens when you hover over the rows very quickly, so just make sure there's no "stale" hover state in any row eg: <img width="400" alt="image" src="https://github.com/user-attachments/assets/b4a91bc6-d269-4ee6-b222-b0476b9feffa" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Standardized hover styling for log rows and table cells to use direct hover rules for more consistent visual feedback. * Adjusted table cell hover/transition behavior to simplify styling while preserving layout and checkbox spacing. * Streamlined the data table API by removing the custom live-row rendering override. * Made the resizable panel’s minimum size dynamic based on dock position. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45933) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen Lim
|
ea03214d3d |
Support dock position (#45919)
## Context Added an option to change dock position when a row is selected in unified logs Just note that this involves the `LogsListPanel` - i'm not too sure how this will look like tbh as I don't have any logs in my unified logs UI that match the criteria to render the `LogsListPanel` (e.g there could be a scenario where we have 3 panes side by side) <img width="1452" height="955" alt="image" src="https://github.com/user-attachments/assets/21c1a576-7f63-463f-88bf-04c05691995b" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **New Features** * Users can now toggle the service flow panel dock position between bottom and right alignment * Dock preference is automatically saved and persists across sessions * **Bug Fixes** * Improved logs data validation in the logs list panel for more reliable rendering <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45919) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Jordi Enric
|
19e0b36650 | feat(logs): migrate unified logs queries to OTEL endpoint DEBUG-71 (#45642) | ||
|
kemal.earthandAli Waseem
|
b2e5476146 |
feat(studio): tidy up bottom tray in logs interface (#45371)
## 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? Tidying up the bottom panel in unified logs. Taking care of some visual quirks etc. Also preparing this area to house some other future concepts via tabs. | Before | After | |--------|--------| | <img width="828" height="384" alt="Screenshot 2026-04-30 at 11 24 09" src="https://github.com/user-attachments/assets/804bdf1c-7cdb-4dd8-bf1e-31c434ef1436" /> | <img width="830" height="407" alt="Screenshot 2026-04-30 at 11 22 53" src="https://github.com/user-attachments/assets/28555efe-f893-4bae-bcb0-284e6db733e6" /> | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Redesigned service flow panel with Overview and Raw JSON tabs * Added Previous/Next navigation controls with Arrow Up/Down keyboard support * New detail components and section headers with icons for clearer organization * Improved Postgres detail view and message/session display * **Bug Fixes / Changes** * Removed legacy header UI and related controls * **UI / Style** * Enhanced copy-to-clipboard feedback animation * Updated "Load more" button styling * Adjusted panel sizing for improved resizing behavior <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Ali Waseem <waseema393@gmail.com> |
||
|
Ivan VasilovandJordi Enric
|
56de26fe22 |
chore: Migrate the monorepo to use Tailwind v4 (#45318)
This PR migrates the whole monorepo to use Tailwind v4: - Removed `@tailwindcss/container-queries` plugin since it's included by default in v4, - Bump all instances of Tailwind to v4. Made minimal changes to the shared config to remove non-supported features (`alpha` mentions), - Migrate all apps to be compatible with v4 configs, - Fix the `typography.css` import in 3 apps, - Add missing rules which were included by default in v3, - Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot of classes - Rename all misnamed classes according to https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all apps. --------- Co-authored-by: Jordi Enric <jordi.err@gmail.com> |
||
|
kemal.earth
|
65365213af |
feat(studio): logs header improvements (#45275)
## 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? A little bit of tidy up here so the header area of unified logs isn't so dominant. Moved actions to the same line as search bar and made other parts a little more subtle, so the focus reamains on the logs themselves. | Before | After | |--------|--------| | <img width="980" height="213" alt="Screenshot 2026-04-27 at 11 47 37" src="https://github.com/user-attachments/assets/ae22e7dd-272f-4433-a270-67b550a00536" /> | <img width="893" height="153" alt="Screenshot 2026-04-27 at 12 27 17" src="https://github.com/user-attachments/assets/87b8cfc9-66a4-4634-a3c6-c45e4b8fc486" /> | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Keyboard shortcut to toggle filter visibility in logs. * Consolidated top bar with refresh, view options, download, and live controls—desktop and mobile optimized. * **Style** * More compact, organized header with tooltips showing live status and shortcut hints. * Reduced filter input typography and streamlined mobile filter trigger. * **Other** * Side panel sizing and logs area layout refined for clearer visuals and consistent header/body styling. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Ivan Vasilov
|
308cd791a2 |
chore: Prep work for migrating to Tailwind v4 (#45285)
This PR preps the monorepo for a migration to Tailwind v4: - Bump all Tailwind dependencies and libraries to the latest possible version, while still compatible with Tailwind 3. - Cleans up obsolete Tailwind 3 specific options and configs. - Cleans up unused CSS files and fixes the CSS imports. - Migrates all `important` uses in `@apply` lines to using the `!` prefix. - Move `typography.css` to the `config` package and import it from the apps. - Migrated all occurrences of `flex-grow`, `flex-shrink`, `overflow-clip` and `overflow-ellipsis` since they're deprecated and will be removed in Tailwind 4. - Make the default theme object typesafe in the `ui` package. - Migrate all `bg-opacity`, `border-opacity`, `ring-opacity` and `divider-opacity` to the new format where they're declared as part of the property color. - Bump and unify all imports of `postcss` dependency. |
||
|
|
4a0bb36ca8 |
style: require sorted imports in studio/components (#44408)
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com> |
||
|
Ivan Vasilov
|
ee8eae7309 |
chore: Clean the ui package from next imports (#44278)
This PR moves several components which rely on `next` out of the `ui` package to the `ui-patterns` package. `ui-patterns` package is intented to be imported with specific imports so it's ok if there are components reliant on `next` in there. The `SonnerToaster` component has removed its dependency by requiring a prop for `theme`. |
||
|
Ivan Vasilov
|
637b6fb792 |
chore: update react-resizable-panels to v4 to support pixel width (#42990)
This pull request standardizes the usage of props and value types for the `ResizablePanelGroup` and `ResizablePanel` components across multiple files in the codebase. Specifically, it replaces the deprecated `direction` prop with `orientation`, and updates numeric prop values (such as `defaultSize`, `minSize`, and `maxSize`) to be passed as strings. This ensures consistency with the updated component API and improves type safety. **Component API Updates:** * Replaced the `direction` prop with `orientation` for all usages of `ResizablePanelGroup` * Updated all `ResizablePanel` props (`defaultSize`, `minSize`, `maxSize`) to be passed as strings instead of numbers, ensuring compatibility with the latest API requirements. * Removed deprecated or unnecessary props such as `order` from `ResizablePanel` components, and ensured all size-related props are consistently formatted as strings. |
||
|
Ivan Vasilov
|
0d5be306ef |
chore: Bump React Query to v5 (#40174)
* Bump the deps, refactor deprecated code.
* Migrate keepPreviousData usage.
* Migrate all uses of InfiniteQuery.
* Fix refetchInterval in queries.
* Migrate all use of isLoading to isPending in mutations.
* Fix accessing location in claim-project.
* Fix a bug in duplicate query keys.
* Migrate all queries to use isPending.
* Revert "Fix accessing location in claim-project."
This reverts commit
|
||
|
Joshen Lim
|
b4d38fabd0 |
Chore/barrel files bye part 05 (#40016)
* Clean up barrel files part 4 * nit * Part 5 of cleaning up barrel files * Revert changes for types * Nit |
||
|
|
57256efaaa |
Add flag for logs explorer showing metadata (#39171)
* Add flag for logs explorer showing metadata * Simplify * Flip * Check logs metadata in useSingleLog * Update unified logs * remove comment * Shortcircuit earlier on logsMetadata boolean --------- Co-authored-by: Matt Linkous <matthew.linkous@gmail.com> Co-authored-by: Alaister Young <a@alaisteryoung.com> |
||
|
Jonathan Summers-MuirandAlaister Young
|
1e3b5063bb |
Feat/unified logs inspection panel (#36895)
* Update QueryOptions.ts * Create UnifiedLogs_InspectionPanel_Architecture.md * init new queries * Create UnifiedLogs_ServiceFlow_Implementation_Plan.md * Add service flow blocks to UnifiedLogs panel Introduces ServiceFlowBlocks components to visually represent the service flow in UnifiedLogs, including Origin, Network, PostgREST, Postgres, and Response steps. Adds utility formatters and updates ServiceFlowPanel to render the new blocks with enriched data and loading/error states. * Enable filterable fields in ServiceFlow blocks Refactored ServiceFlow blocks to support filterable fields by passing filterFields and table props, updating BlockField to render filterable values as clickable actions, and aligning field configs with filterable IDs. Updated ServiceFlowPanel to use new block names and pass required props. This enhances interactivity and consistency in the UnifiedLogs service flow UI. * Update ServiceFlowBlocks.tsx * Enhance Service Flow with enriched fields and filtering Expanded the Service Flow SQL query to extract 35+ flattened, meaningful fields including request, response, client location, network, headers, and JWT data. Updated the implementation plan to reflect new block architecture, filtering integration, and future enhancements. Added debug logging for enriched and raw log data in ServiceFlowPanel. * Start adding inspection panel * Moar logs * Add Postgres service flow support to Unified Logs Introduces Postgres as a first-class service flow type in Unified Logs, including SQL query, type definitions, UI blocks, and filtering. Updates ServiceFlow queries, types, and UI components to display enriched Postgres log details and event messages. Also refines filter fields, log type ordering, and minor UI adjustments for clarity and consistency. * Lots of tidying up, moving blocks into their own files. * Remove UnifiedLogs architecture and service flow docs Deleted documentation files related to UnifiedLogs inspection panel architecture, service flow field mapping, implementation plan, and integration example. This cleans up outdated or redundant design and implementation reference materials. * Refactor service flow blocks to use unified config system Replaces individual service block components with a generic, config-driven system. Introduces a shared Block component and centralizes block configuration in blockConfigs.ts, reducing duplication and improving maintainability. Updates imports and removes now-unnecessary block files. Also refactors ServiceFlowPanel to use the new block structure and simplifies layer icon logic. * Refactor ServiceFlow blocks and utilities structure Consolidates edge service flow SQL queries to reduce duplication, removes ServiceFlowBlocks.tsx in favor of more modular block/component structure, and moves storage-specific utilities to a new utils/storageUtils.ts file. Updates imports in config files and ServiceFlowPanel to reflect the new structure. Type definitions are clarified and extended in types.ts. * Update ServiceFlow.sql.ts * Refactor ServiceFlow types for stronger type safety Replaces generic 'any' types with specific types such as ColumnSchema, QuerySearchParamsType, and SearchParamsType in ServiceFlow components and ServiceFlowPanel. This improves type safety and code clarity, and removes unused metadata and workaround variables from ServiceFlowPanel. * Remove debug flags and console logs from ServiceFlow components Eliminated unused DEBUG_SERVICE_FLOW flags and related console logging from ServiceFlow.sql.ts and ServiceFlowPanel.tsx to clean up the codebase and reduce unnecessary output. * Remove unused log query and filtering functions Deleted unused functions related to log level filtering, base condition building, and the edge/supavisor logs queries. This cleanup simplifies the UnifiedLogs.queries.ts file by removing legacy or currently unused code. * revert * Remove ServiceFlow panel and types, update DataTableToolbar Deleted the ServiceFlowPanel component and its associated types from the UnifiedLogs interface. Updated DataTableToolbar to toggle between PanelLeftClose and PanelLeftOpen icons based on the open state. * Remove unused totalRows prop from DataTable Eliminates the totalRows prop from UnifiedLogs and its context interface, as it is no longer used. This helps clean up the component API and related type definitions. * Refactor log field configs and unify event message component Replaces specialized PostgresEventMessage with a generic EventMessage component and updates references accordingly. Consolidates all log field configuration files into serviceFlowFields.ts, removing separate config files for each service. Cleans up unused types and utility imports, and deletes redundant formatters. * Show empty state for Postgres block with no data Added logic to display an empty state in the Postgres block when no Postgres data is available in non-Postgres logs. Also updated ServiceFlowPanel to render both PostgREST and Postgres blocks, ensuring the empty state is shown when appropriate. * Remove Log Details tab from ServiceFlowPanel The Log Details tab and its associated content have been removed from the ServiceFlowPanel component. This simplifies the UI by focusing on the Overview and Raw JSON tabs. * Update UnifiedLogs.queries.ts * Update UnifiedLogs.queries.ts * Update apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/components/shared/BlockField.tsx * Refactor UnifiedLogs layout and improve service type formatting Refactored UnifiedLogs.tsx to use a more flexible ResizablePanelGroup layout, replaced inline function logs panel with a new LogsListPanel component, and removed unused imports and code. Updated ServiceFlow.sql.ts to simplify JWT payload extraction and added a dedicated query for edge function service flow. Added a utility to format service type strings for display in UnifiedLogs.utils.ts. * Refactor logs UI and improve service flow handling Renamed FunctionLogsTab to LogsList and added a new LogsListPanel for displaying function logs in a side panel. Improved ServiceFlowPanel with better panel sizing, conditional query enabling, and UI adjustments. Enhanced EventMessage with badge styling and service type formatting. Updated CollapsibleSection for cleaner layout. Enabled debug mode in unified-log-inspection-query. Updated FilterSideBar to use ResizablePanel for improved layout flexibility. * Refactor UnifiedLogs UI and ServiceFlow query fields Removes unused skeletonClassName from BlockFieldConfig and related UI, simplifies ServiceFlow SQL query by returning null for unused JWT fields, and updates UnifiedLogs and LogsListPanel for improved layout and collapsible logs panel. Also adjusts table and log list row heights for better visual consistency. * Update ServiceFlowHeader.tsx * Update ServiceFlowHeader.tsx * Refactor ServiceFlowPanel and header tooltip logic Replaces custom tooltip implementation in ServiceFlowHeader with ButtonTooltip for navigation buttons. Simplifies serviceFlowType logic in ServiceFlowPanel by removing the getServiceFlowType helper and using direct mapping, reducing code complexity. * Update UnifiedLogs.constants.tsx * Remove commented code and add doc comment in UnifiedLogs Removed an unused commented-out span in UnifiedLogs.fields.tsx and added a documentation comment for the Supabase storage logs query fragment in UnifiedLogs.queries.ts. * Update UnifiedLogs.tsx * Remove 'live' level from DataTable components Eliminated the 'live' level from LEVELS constant and related color utility logic. Also removed commented code and references to 'live' in DataTableFilterControls and LiveRow, streamlining the DataTable component's status handling. * Update UnifiedLogs.constants.tsx * cleanup --------- Co-authored-by: Alaister Young <a@alaisteryoung.com> |
