Commit Graph
64 Commits
Author SHA1 Message Date
Joshen Lim ebfec0df36 Improve click targets on property actions (#45936)
## Context

When opening the logs detail panel, some of the fields can be clicked to
add them as a filter. However the existing UX is that the clickable part
is just the text which makes it target small
<img width="233" height="127" alt="image"
src="https://github.com/user-attachments/assets/1d876bcc-05cf-464c-bdbe-907229be0586"
/>

Am opting the following:
- Make the whole row clickable
- Make all rows clickable with the main action being "Copy {column}"
- Only filterable columns will have the option to "Add as filter"

### After
<img width="483" height="153" alt="image"
src="https://github.com/user-attachments/assets/9d6e5479-fdbb-4609-839c-2bb7ad571b57"
/>
<img width="473" height="152" alt="image"
src="https://github.com/user-attachments/assets/f22197df-fa59-4e01-be00-2557260374f8"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Row actions now consistently wrap rows and show a filter icon next to
the label when a resolved filter is available; copy menu displays "Copy
{label}".

* **Style**
* Standardized icon sizes and adjusted dropdown/row spacing; simplified
text wrap/truncate behavior for field values; minor status text color
refinement.

* **Bug Fixes**
* Dropdown row-action rendering made more robust to ensure menu wrappers
render reliably.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45936)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-14 22:31:40 +08:00
Charis ec21e68eee studio(logs): use safe sql escaping for new logs queries (#45887)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Introduced a safe SQL fragment system and helpers to build composable,
validated log queries and aggregations.

* **Refactor**
* Rewrote unified log query builders and inspection flows to use the new
safe fragments and identifier/literal validators.

* **Bug Fixes**
* Improved validation and error handling for filter keys and literal
escaping to prevent malformed or injectable queries.

* **Tests**
* Added tests covering identifier quoting, value escaping, and rejection
of invalid filter inputs.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45887)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-14 10:29:50 -04:00
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 -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45933)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-14 22:00:04 +08:00
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 -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45919)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-14 20:52:10 +08:00
Joshen Lim 98ecf8001e Use font mono for unified log rows (#45917)
## Context

Opting to use `font-mono` and `tracking-tight` for all the data within
the unified logs table to improve readability

### Before
<img width="1451" height="956" alt="image"
src="https://github.com/user-attachments/assets/8c3f51b8-40bb-4e84-b1b3-af4d69e92224"
/>


### After
<img width="1450" height="959" alt="image"
src="https://github.com/user-attachments/assets/5cb64864-fdf8-4c97-8caf-a440aa405b3d"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
* Refined the visual styling of the Unified Logs table columns for
improved readability, including updated typography and letter spacing
for the Date, Method, Pathname, and Event message columns.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45917)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-14 20:45:04 +08:00
Joshen Lim 1b3a88a323 Opt to use Code2 icon instead of BookHeart for unified logs postgrest rows (#45916)
## Context

We use the `Code2` icon for the Data API integration, so opting to use
the same icon for Postgrest in unified logs for consistency
<img width="538" height="176" alt="image"
src="https://github.com/user-attachments/assets/cd98d781-be60-4d09-9dcb-6f064c58f446"
/>


### Before
<img width="422" height="87" alt="image"
src="https://github.com/user-attachments/assets/4c7024ad-b5a7-48aa-8f27-46bb8cd94b57"
/>


### After
<img width="434" height="89" alt="image"
src="https://github.com/user-attachments/assets/4bc18b10-53ee-4c57-89e3-52f45cc8fc07"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **UI Improvements**
* Updated the icon representation for PostgreSQL REST API logs to
enhance visual clarity and user recognition.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45916)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-14 20:44:37 +08:00
Joshen Lim 597ad2ba56 Fix width of unified logs table to fit viewport, which fixes centering of load more button (#45914)
## Context

Load more button in unified logs was off center because the `table`
element was exceeded the viewport width.
The fix needed was hence to adjust the width of the `table` to only take
up the remaining width of the viewport which then fixes the positioning
of the load more button.


### Before
<img width="1446" height="204" alt="image"
src="https://github.com/user-attachments/assets/fcd99e18-ede8-4454-b612-91b4384fb3e1"
/>


### After
<img width="1450" height="274" alt="image"
src="https://github.com/user-attachments/assets/d5f56383-bdb0-4418-a36f-242e72fe3a5b"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
* Updated table container styling and layout properties for improved
rendering.
* Enhanced table header cell structure with improved styling attributes.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45914)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-14 20:44:17 +08:00
Joshen Lim 8ee2f90d65 Target hover background color change for unified log rows to the cell (#45915)
## Context

The `TableCell` component from `ui` has a `group-hover:bg-surface-200`
class name
([ref](https://github.com/supabase/supabase/blob/master/packages/ui/src/components/shadcn/ui/table.tsx#L152)),
hence the original class names in `UnifiedLog.utils.ts` which targets
only the table row's background color on hover doesn't work.

Hence fix is to target the `td` element on row hover to apply the
background color change

Although separately, i'm wondering whether it makes more sense for the
hover bg color change to be applied on the `tr` instead of `td`

### Before
<img width="1182" height="61" alt="image"
src="https://github.com/user-attachments/assets/78939525-7832-4c4f-8985-e856715a731b"
/>

### After
<img width="1211" height="79" alt="image"
src="https://github.com/user-attachments/assets/5726063d-d06a-439c-90d8-a27407a94a05"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
* Enhanced hover interactions for warning and error log rows with
improved dark mode styling consistency.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45915)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-14 20:35:47 +08:00
Jordi Enric 19e0b36650 feat(logs): migrate unified logs queries to OTEL endpoint DEBUG-71 (#45642) 2026-05-14 08:56:32 +02:00
Vaibhav fe769bfe7e fix: escape quotes (#45848)
## TL;DR


- closes https://github.com/supabase/supabase/issues/45860
- closes https://github.com/supabase/supabase/issues/45544
 & supersedes https://github.com/supabase/supabase/pull/45543


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added explicit allowed facet fields and validation to prevent invalid
facet usage.

* **Bug Fixes**
* Improved filter handling by coercing values to strings and properly
escaping single quotes for array, scalar, and LIKE filters (including
facet search), reducing query errors and injection risks.
* Enhanced parsing of scheduled-job SQL commands to tolerate varied
casing/whitespace and strip leading SELECT before processing.

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45848)
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-13 08:32:15 -06:00
kemal.earth 3864f25336 fix(studio): unified logs ui quriks (#45648)
## 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?

Spotted a couple of Tailwind 4 migration UI quirks. This PR should fix
them.

#### 1. Outline around table body
| Before | After |
|--------|--------|
| <img width="1036" height="240" alt="Screenshot 2026-05-06 at 16 37 17"
src="https://github.com/user-attachments/assets/fc16a530-8457-4b4e-892c-19f5027e4d58"
/> | <img width="976" height="270" alt="Screenshot 2026-05-06 at 16 54
11"
src="https://github.com/user-attachments/assets/72d8eddc-6b3f-40ba-a211-e8939a104c36"
/> |

#### 2. Gap between header buttons
| Before | After |
|--------|--------|
| <img width="236" height="81" alt="Screenshot 2026-05-06 at 16 47 34"
src="https://github.com/user-attachments/assets/5daaef6e-c7f1-46e7-81e1-3e1fd3290825"
/> | <img width="187" height="51" alt="Screenshot 2026-05-06 at 16 54
15"
src="https://github.com/user-attachments/assets/017f8399-4f5d-4ae6-b2ff-7ffbdbee3f8b"
/> |



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
* Refined spacing in action controls layout for improved visual
hierarchy
* Updated focus outline styling to enhance keyboard navigation
accessibility

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-06 17:13:51 +01:00
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>
2026-05-06 16:32:31 +01:00
Jordi Enric d8bb0ade65 feat(studio): add timezone picker to user dropdown (#45517)
## Problem

The dashboard renders all timestamps in the browser's local timezone.
When debugging app issues, users often want to see logs and timestamps
in a different timezone (e.g. their app's deployment region) without
changing their OS clock.

## Fix

- New Timezone submenu in the user-avatar dropdown, sitting next to the
existing Theme picker. Search-as-you-type combobox over the full IANA
catalog plus an Auto detect option.
- Selection persists in localStorage (`supabase-ui-timezone`) and
survives `clearLocalStorage()`. No backend schema change.
- New `lib/datetime.tsx` exposes pure timezone-aware formatters
(`formatDateTime`, `formatDate`, `formatTime`, `formatFromNow`,
`toTimezone`) plus a `TimezoneProvider` and matching React hooks
(`useTimezone`, `useFormatDateTime`, ...). The pure functions take `tz`
explicitly so they're easy to unit test (17 vitest cases covering DST
transitions, multi-tz formatting, unix-micro/Date inputs, invalid-tz
fallback).
- The selected timezone propagates to every existing `<TimestampInfo>`
in Studio via a new `TimestampInfoProvider` context exported from
`ui-patterns`. No per-callsite changes needed for those ~20+ surfaces.
- The `UnifiedLogs` date column migrates off `date-fns` to the new
`useFormatDateTime` hook (the rest of the date-fns callers stay as-is,
since they're either internal range math or non-display).
- `ALL_TIMEZONES` (~600 entries) moves out of `PITR.constants.ts` into a
shared `lib/constants/timezones.ts`. PITR keeps a re-export shim so its
callers don't move. New `TIMEZONES_BY_IANA` dedupes the catalog by
primary IANA name (the original list contains both PDT and PST rows for
`America/Los_Angeles`, etc.) and `findTimezoneByIana` provides reverse
lookup.
- Telemetry: `timezone_picker_clicked` PostHog event with
`previousTimezone`, `nextTimezone`, `isAutoDetected` properties.

Notes for reviewers:
- Bare `dayjs(x).format(...)` calls (~157 files) intentionally still
render in browser-local time. Surfaces opt in by switching to the new
wrappers, so this PR is the abstraction plus logs adoption; broader
migration is a follow-up.
- Two `// prettier-ignore` lines (`apps/studio/pages/_app.tsx`,
`apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.fields.tsx`)
work around a pre-existing local-tooling issue where
`prettier-plugin-sql-cst` strips angle-bracket type arguments under
certain conditions. Project's pinned prettier (3.8.1) does not strip;
the issue surfaces with a globally-installed prettier. Worth tracking
separately.
- Hydration: `guessLocalTimezone()` and `useLocalStorageQuery` are
client-only. Studio is mostly CSR via the Pages Router, but any SSR'd
`<TimestampInfo>` may briefly render in the server's tz before client
hydration. Existing behavior already had this mismatch with `.local()`;
this PR does not regress it.
- Backend timestamps round-tripped through query params and mutations
stay UTC. The picker is display-only.

## How to test

- Run `pnpm dev:studio`, sign in.
- Open the user avatar dropdown (top right). Hover Timezone.
- Search for "tokyo", pick `(UTC+09:00) Osaka, Sapporo, Tokyo`.
- Open any project, navigate to Logs (e.g. `Project > Logs > Edge
Functions`). Hover a log row's timestamp; the popover should show UTC,
the chosen tz (`Asia/Tokyo`), and the relative time. Visible cell text
should be in JST.
- Visit any page that uses `<TimestampInfo>` (Database > Backups,
Project Pause state, Edge Function details). Same tooltip should reflect
Asia/Tokyo.
- Refresh the page; timezone is still Asia/Tokyo.
- Reopen the picker, choose Auto detect; timestamps revert to browser
local.
- Run `pnpm --filter studio test lib/datetime.test.ts`. 17 tests should
pass.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Timezone selector added to the user menu with auto-detect and manual
override
* App-wide timezone provider and hooks plus a shared timezone catalog
for consistent timezone-aware display
* Timestamp components accept an optional timezone prop and respect user
preference (persisted)

* **Bug Fixes / Improvements**
* Logs and timestamp displays now use the new timezone formatting hooks

* **Tests**
  * Added comprehensive datetime and timezone catalog tests

* **Telemetry**
  * Telemetry event added for timezone picker interactions
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-06 14:52:36 +02:00
Joshen Lim 50eea124e7 Small tweaks to feature preview badge (#45409)
## Context

Small improvements from this PR:
https://github.com/supabase/supabase/pull/45373

- Fix feature preview badge alignment
  - Before:
<img width="341" height="75" alt="image"
src="https://github.com/user-attachments/assets/e6e2f727-fc75-4f70-b9cd-94d67aed8c5d"
/>
  - After:
<img width="365" height="64" alt="image"
src="https://github.com/user-attachments/assets/3d6e5e5d-c285-48f4-8f8f-251c23101e41"
/>
- Shift feature preview badge for policies into tester side panel
<img width="640" height="93" alt="image"
src="https://github.com/user-attachments/assets/3efb73a7-f7f5-4ae0-8560-d1e0ba989626"
/>
- Realised that advisor settings wasn't set up to be behind the feature
preview
  - Fixing that in this PR

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
  * Added preview badge indicator to the RLS Tester feature

* **Style**
* Improved spacing and layout alignment across authentication, database
access, webhook, logging, and advisor interface components
  * Enhanced badge component styling for better vertical alignment

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-01 10:18:20 +08:00
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>
2026-04-30 10:53:24 +00:00
Monica Khoury 49ff97af06 feat: add global feature preview badge for enabled preview features (#45373)
## What kind of change does this PR introduce?

Fixes FE-2526. 

Adds a global Feature Preview badge to pages enabled via Feature
Previews, improving visibility and making it clearer to users that the
feature can be managed (or disabled) from the Feature Previews settings.

## Why

Previously, once a feature preview was enabled, there was no clear
indication within the UI that:

- the feature was still in preview, or
- where to go to disable it

This lead to confusion and made the feature feel “permanent”.

## What’s included

New FeaturePreviewBadge UI component

<img width="417" height="80" alt="CleanShot 2026-04-29 at 17 20 10"
src="https://github.com/user-attachments/assets/6fbc96e3-35ef-46d1-893a-2188c4d237a3"
/>

</br>

Added badge across pages enabled via Feature Previews:
- Webhooks
- Unified Logs
- JIT DB Access
- Column Privileges
- Policies
- Merge page
- Advisor Rules

Consistent placement and styling.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
* Feature preview badges now appear across the platform on preview
features, including Platform Webhooks, Database functionality, Unified
Logs, Advisor Rules, and other features, providing quick identification
and access to manage preview settings.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-29 20:47:30 +03:00
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 -->
2026-04-28 11:51:00 +01:00
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.
2026-04-28 11:33:53 +02:00
Joshen Lim 7f5865872a Enforce noUnusedLocals and noUnusedParameters in tsconfig.json + fix all related issues (#45264)
## Context

Enforce `noUnusedLocals` and `noUnusedParameters` in tsconfig.json + fix
all related issues
2026-04-27 17:42:34 +08:00
kemal.earth 5dc3c9220a feat(studio): remove live row from unified logs (#45164)
## 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?

When unified logs are in "live" mode, we inserted a bar into the list
that got pushed down with new logs appearing. Doesn't seem to add much
value and our live mode button is visibly green when switched on.



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Refactor**
  * Removed live-updating row functionality from UnifiedLogs component.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-24 14:19:11 +01:00
kemal.earth 4ec48666d2 feat(studio): unified logs guard change (#44962)
## 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?

This changes the guard to expose unified logs to Enterprise. 

**To test:**
- Create an Enterprise org.
- Go to a project and then Logs.
- Default view should be unified logs (with a CTA offering to switch
back to old logs).


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added enterprise/Supabase-org eligibility checks and loading state for
the unified logs preview.

* **UX**
* Updated messaging to state unified logs are only available to
Enterprise plan organizations.
* Sidebar and filter panels now show unified-logs preview panels based
on eligibility.

* **Analytics**
  * Track unified logs row clicks with a new telemetry event.

* **Bug Fixes**
* Prevent navigation until unified-logs eligibility and preview flag
loading are resolved.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-22 14:39:39 +01:00
Ali Waseem 40791f9846 chore(studio): migrate useHotKey to useShortcut (#45099)
## Summary
- Migrates all 11 `useHotKey` call sites across 9 files to
`useShortcut`, backed by `SHORTCUT_DEFINITIONS` in
`state/shortcuts/registry.ts`.
- Adds 10 new registry entries (all `showInSettings: false` to keep
behavior identical to today — these were not previously
user-configurable).
- Deletes `apps/studio/hooks/ui/useHotKey.ts`.
- Simplifies `ActionBar.handleSave` — the legacy hook passed a
`KeyboardEvent` the callback used for `preventDefault`/`stopPropagation`
and a textarea-plain-Enter guard; all of that is redundant under
`useShortcut` (TanStack handles default/propagation; `Mod+Enter` never
fires on plain Enter).
- Removes a stale commented-out `useHotKey` reference in
`DataTableFilterCommand.tsx`.

Part of FE-3025 (legacy hotkey hook cleanup). `useKeyboardShortcuts` in
`grid/components/common/Hooks.tsx` will be migrated in a follow-up.

## Test plan

All shortcuts should still fire with **Cmd** (macOS) / **Ctrl**
(Win/Linux).

**Table Editor — operation queue** (requires pending unsaved edits on a
row)
- [x] `Cmd+S` saves pending edits
- [x] `Cmd+.` toggles the operation queue side panel
- [x] `Cmd+Z` undoes the latest edit and re-fetches the affected table
rows
- [x] With no pending edits, none of the above fire (gated by
`isEnabled`)

**Table Editor — side panel editor forms** (row, table, column, policy,
etc.)
- [x] `Cmd+Enter` submits the form when the panel is visible
- [x] Does not submit if the form is disabled/loading or the panel is
hidden

**Unified Logs — data table**
- [x] `Cmd+B` toggles the filter controls sidebar (desktop)
- [x] `Cmd+B` opens the filter drawer (mobile, `<sm` breakpoint)
- [x] `Cmd+Esc` resets active column filters (reset button visible)
- [x] `Cmd+U` resets column order + visibility
- [x] `Cmd+J` toggles live mode

**Unified Logs — reset focus**
- [x] `Cmd+.` blurs the currently focused element / resets focus to body

**AI Assistant panel**
- [x] While editing a message, `Cmd+Esc` cancels the edit

**Regression checks**
- [x] `pnpm --filter=studio typecheck` passes (verified locally)
- [x] None of the new shortcut entries appear in Account → Preferences →
Keyboard shortcuts (all `showInSettings: false`)
- [x] Existing shortcuts (`Cmd+K`, `Cmd+I`, `Cmd+E`, results
copy/download) still work unchanged

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

## Refactor
* Implemented a centralized keyboard shortcut registry system for
managing shortcuts consistently across the application
* Updated multiple UI components throughout the interface to use the new
shortcut management system
* All existing keyboard shortcuts continue to function without any
changes in behavior or user experience

## Chores
* Removed legacy keyboard shortcut hook implementation

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-22 06:19:32 -06:00
kemal.earth 7e317f5f9c feat(studio): unified logs small improvements (#45046)
## 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?

Based on @Ziinc suggestions, optimising Unified Logs frontend queries to
run smoother.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Filter logs by selected log types and include a source identifier for
each entry.

* **Improvements**
* Unified query/count generation now respects selected log types and
consolidates source classification for more accurate totals and
charting.
  * More efficient single-pass counting for totals and facets.

* **Chores**
  * Removed stray debug output.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-21 16:00:43 +01:00
Gildas Garcia c3119ea1ea chore: types cleanup for react 19 (#44941)
## Problem

While trying to update `react` to version `19`, I noticed type related
errors that can be fixed in version `18`, mostly usage of `JSX.Element`
instead of `ReactNode`.

## Solution

- Use `ReactNode` instead of `JSX.Element`
- Fix some invalid usage of `rechart`

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

## Release Notes

* **Refactor**
* Standardized React component type annotations across the codebase for
improved type consistency and flexibility.
* Updated component prop types to accept a broader range of renderable
content.

* **Bug Fixes**
  * Adjusted chart layout positioning to improve visual alignment.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-16 15:31:04 +02:00
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>
2026-04-01 10:22:37 +02:00
Danny White cca4e52dd0 refactor(ui-patterns): Standardise TanStack sort headers (#44212)
## What kind of change does this PR introduce?

Component update.

## What is the current behaviour?

TanStack tables in the repo are split between the shared `TableHeadSort`
primitive and the older Studio-local `DataTableColumnHeader` helper,
which makes the sorting UI and integration path inconsistent.

If you were to just use `DataTableColumnHeader` in `ui-patterns/Table`,
you’d get a very different visual result to the `TableHeadSort` UI you
see in most other tables.

## What is the new behaviour?

Adds a shared `TanStackTableHeadSort` adapter in `ui-patterns/Table`,
backed by the existing `TableHeadSort` primitive, and switches the
webhook table plus the design-system TanStack demo to that canonical
path. `DataTableColumnHeader` stays as a deprecated wrapper for now,
Studio gets a lint guard to block new imports of it, and the table docs
now point TanStack tables at the shared adapter explicitly.

## To test

Check out column sorting on the Platform Webhook endpoint deliveries
table.
2026-03-30 21:48:52 +11:00
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`.
2026-03-30 10:58:37 +02:00
Ivan VasilovandJoshen Lim 9fa96977be chore: Minor prettier fixes (#43849)
This PR fixes some prettier issues:
- Bump and unify all prettier versions to 3.7.3 across teh whole repo
- Bump the SQL prettier plugin
- When running `test:prettier`, check `mdx` files also
- Run the new prettier format on all files

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-03-17 11:17:42 +01:00
kemal.earthandClaude Sonnet 4.6 9b028f6fd5 feat(studio): map error codes to docs (#43140)
## 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?

This introduces a small snippet preview of the error code coming via our
content API for the docs. This appears in a couple of places right now.

- **Auth Overview** - This page isn't fully released yet, but it appears
on the error codes table (as depicted below).
- **Logs** - When you delve into the logs panel, if there's an error
code available, they're also wrapped in this popover.

We are also working on a shared-data package (#43458) to potentially
replace this endpoint internally. Also introduces a multifaceted button
to debug/fix with either Assistant or LLM of choice.

| Auth Overview | Logs Panel |
|--------|--------|
| <img width="407" height="287" alt="Screenshot 2026-03-09 at 14 14 09"
src="https://github.com/user-attachments/assets/7450dddb-6828-4cd3-802d-37d47ba1b440"
/> | <img width="394" height="216" alt="Screenshot 2026-03-09 at 14 13
56"
src="https://github.com/user-attachments/assets/80c2a46e-dbe4-4e88-a0a7-68b977a71d6b"
/> |

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-09 17:33:14 +00:00
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.
2026-02-23 19:48:19 +01:00
Ivan Vasilov 682931e6c8 fix: Bump resizable package and fix minor issues (#42892)
This pull request upgrades the `react-resizable-panels` dependency from
version 2.x to 3.x. It also includes some minor improvements to
component props and key usage for React elements.

**Dependency upgrade:**

* Upgraded `react-resizable-panels` from version 2.1.4 to 3.0.0.

**Component improvements:**

* Added a `key` prop to the `ResizablePanelGroup` in `LogTable.tsx` and
to action buttons in `UnifiedLogs.tsx` to help React identify elements
more efficiently.
* Ensured unique `key` props for icons rendered in a map in
`FilterSideBar.tsx` to prevent React warnings.
2026-02-19 15:15:19 +00:00
Jordi Enric 5f53f73671 unified logs: fix date format (#42750)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Fixed timestamp display in request logs to ensure accurate time
representation.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-02-19 14:38:47 +01:00
Ali Waseem 1890624a1a fix: add missing keys to studio (#42957)
## 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?

Cleanup from React Doctor! Components missing keys
2026-02-18 09:05:22 -07:00
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 2a07df64b5.

* Revert the rss.xml file to master.
2025-12-10 10:10:29 +01:00
Danny WhiteandJoshen Lim 031b227165 studio(chore): badge component defrag (#40118)
* component clean up

* optically center

* docs and type size

* code badge variant

* sensible defaults

* fix product menu flex

* badge sweep

* new project badges

* logs

* compute badge

* studio badge sweep

* www sweep

* docs sweep

* clean up

* fixes

* cleanup

* fixes

* better docs

* fixes

* misc fixes

* consistency

* Minor fixes for issues i found

* simplify mt-0

* mt simplification

* remaining optical alignment

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-12-02 11:15:50 +11:00
kemal.earthandAli Waseem 511b6faada feat(studio): surface index advisor indicators (#40788)
* feat: change the check to show index advisor tab at all times

* fix: hide add to log drains on export menu in query perf

* fix: small fallback for pathname check

* fix: query perf header block responsiveness

* feat: admonition for index advisor

* fix: add aria-describedby to query perf sheet

* feat: proper way to do sheet description

* chore: better title spacing in panel

* fix: indexes in use empty state

* fix: key in observability menu

* feat: better highlighting of index advisor issues

* feat: add docs button to empty indexes tab

* feat: remove unused code

* feat: use button tooltips for reset and refresh to gain space

* feat: add dismiss to index advisor banner

* feat: add warnings filter to query perf

* feat: filter all queries for warnings

* fix: selected state for warning rows

* fix: fallback for isLogs check

* fix: other instance of download button

---------

Co-authored-by: Ali Waseem <waseema393@gmail.com>
2025-11-27 08:20:07 -07:00
Ivan Vasilov 43cc61818c chore: Migrate all isPending uses in react-query (#40642)
* Bump react-query. Minor type and logic fixes.

* Migrate all use of isLoading to isPending in mutations.

* Fix type errors.
2025-11-20 16:44:53 +01:00
kemal.earth 5a0e1cb1cc feat(studio): log drains entry point from logs (#40095)
* fix: field reference button padding

* fix: remove overriding button style on field ref button

* fix: tidy up the asChild stuff on side panel trigger element

* fix: bunch of type errors on logs sidebar

Theres a temp any fix in there dont kill me frontend team :D

* feat: add to new logs sidebar too

* feat: add to download dropdown menus

* chore: alphabetical order on new logs dropdown

* chore: add target blank to sheet footer

* fix: gap between buttons on old logs toolbar

* feat: add a separator on old logs

* style: new logs top buttons correct types
2025-11-05 11:19:50 +00:00
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
2025-10-31 13:15:31 +08:00
Joshen Lim cac225b24a Clean up barrel files part 4 (#40015)
* Clean up barrel files part 4

* nit
2025-10-31 00:30:42 +08:00
Ali Waseem b5e1bb74bf Fix: replace overflow-hidden w/ auto for new logging preview (#39979)
* replace overflow-hidden w/ auto

* trying: wrapped with overflow
2025-10-29 10:34:47 -06:00
Ivan Vasilov 56d40fe0b2 chore: Migrate eslint for all apps to use flat config (#39486)
* Use the "eslint" command instead of built-in next lint since it's getting obsolete.

* Bump all deps to support eslint 9+.

* Convert the rules in eslint-config-supabase to be flat-config compatible.

* Migrate all apps to use the new eslint config rules.

* Fix all errors found in the new setup.

* Fix the no default exports ignores.

* Scan all files for linting in studio.

* Fix all lint errors.

* Make the reportUnusedDisableDirectives a warning.
2025-10-15 16:35:24 +02:00
Joshen Lim 426fda2ebc Address circular dependencies across multiple files (#39231)
* Address circular dependencies across multiple files

* Fix TS
2025-10-06 11:01:56 +08:00
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>
2025-10-01 18:53:54 +00:00
Jonathan Summers-Muir 872a372119 fix: Debounce filter application in UnifiedLogs (#37275)
Debounce filter application in UnifiedLogs

Introduced debounced filter application using useDebounce to reduce excessive API calls when users quickly change filters in UnifiedLogs. This improves performance and user experience by batching rapid filter changes.
2025-09-17 11:45:08 +08:00
Jonathan Summers-Muir cb294fd6ad fix: enrichment logs queries (#37247)
Update JWT payload extraction in service flow queries

Replaces hardcoded nulls with actual JWT payload fields for expires_at, signature_prefix, subject, and other attributes. Removes unused invalid key check and standardizes variable naming for JWT apikey joins. Improves accuracy and consistency of extracted JWT data in service flow queries.
2025-07-18 05:30:00 +08:00
Jonathan Summers-MuirandJoshen Lim e1cab2669d fix: remove async filter search (#37263)
* Update UnifiedLogs.fields.tsx

* Fix prematurely redirecting back to logs/explorer while on new logs interface due to newly added organization check

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-07-17 18:36:36 +00:00
Jonathan Summers-Muir bf394583cc Refactor unified logs count query logic (#37262)
* Refactor unified logs count query logic

Introduces getUnifiedLogsCountCTE to provide detailed unified logs CTE for count queries, replacing the previous getUnifiedLogsCTE usage in getLogsCountQuery. Removes host and auth_user facet counts from the query and updates the unified logs CTE to include more explicit log type handling and metadata extraction.

* Update unified logs CTE to include all log sources

Refactored getUnifiedLogsCTE to aggregate logs from PostgREST, Postgres, Edge Functions, Auth, and Supabase Storage sources. Also removed trailing comma from facet count CTEs for improved SQL syntax.

* Remove unused 'host' field from log queries

Eliminated the 'host' field from multiple log query functions and the final SELECT statement in UnifiedLogs.queries.ts, as it is no longer required for log processing or display.

* Remove unused api_role and auth_user fields from log queries

Eliminated references to api_role and auth_user fields, along with related joins, from multiple log query functions. This streamlines the queries and removes unnecessary data extraction for these fields.

* Update UnifiedLogs.fields.tsx
2025-07-18 02:30:50 +08:00
Jonathan Summers-Muir 7d5dd5b6be Chore/logs reloading state (#37252)
* Add loading opacity and keep previous data for logs

Wrapped TimelineChart and DataTableInfinite in divs with opacity transition during data fetching for improved UX. Added keepPreviousData: true to unified logs chart, count, and infinite queries to retain previous data while fetching new results.

* Remove keepPreviousData from logs count query

The keepPreviousData option was removed from the useUnifiedLogsCountQuery hook to rely on default query behavior or custom options. This may affect how data is retained between queries.

* Update UnifiedLogs.tsx

* Refactor TimelineChart opacity handling

Moved opacity and transition classes from a wrapping div directly to the TimelineChart component for cleaner structure and improved conditional styling.
2025-07-17 13:49:04 +00:00
Jonathan Summers-Muir eb0106179e Add dynamic column generation for UnifiedLogs table (#37239)
* Remove 'host' field from UnifiedLogs interface

Eliminated the 'host' field from filter fields, schema definitions, and column configuration in UnifiedLogs. This streamlines the logs interface and removes unused or unnecessary data.

* Add dynamic column generation for UnifiedLogs table

Replaces static column definitions with a dynamic generator that hides columns when all their values are empty. The UnifiedLogs table now adapts its columns based on the current data, improving readability and relevance.

* Update Columns.tsx

* Update Columns.tsx

* Add column width classes to UnifiedLogs columns

Added explicit cell and header class names for column widths in the UnifiedLogs table to ensure consistent sizing and improve layout control.

* Update Columns.tsx

* Refactor dynamic columns to include visibility state

The dynamic columns generator now returns both columns and their visibility state, allowing UnifiedLogs to merge dynamic visibility with existing column visibility. This improves control over which columns are shown based on the data.
2025-07-17 21:02:31 +08:00