dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-05 17:35:10 +03:00
Code Issues Packages Projects Releases Wiki Activity
38,871 Commits 1,792 Branches 62 Tags
codex/fix-tanstack-e2e
Commit Graph
97 Commits
Author SHA1 Message Date
Joshen Lim 9a60994efb Update account audit logs to follow unified logs UX (#50799) 
## Context

This one's just something that I thought about while doing some
debugging - our audit logs UI is pretty outdated and hard to skim as the
information is very sparse. This is how it currently looks like
(specifically Account audit logs for this PR, there's also org audit
logs):

<img width="1450" height="957" alt="image"
src="https://github.com/user-attachments/assets/4b69511e-1d4f-4725-8ea9-78ddacf76942"
/>

<img width="1450" height="954" alt="image"
src="https://github.com/user-attachments/assets/ec099f52-adef-499c-965a-11b8404bf235"
/>

Am opting to follow the same UX as that of our Unified Logs, so opting
to update the UI as such:

<img width="1451" height="958" alt="Screenshot 2026-09-23 at 22 04 33"
src="https://github.com/user-attachments/assets/016bd26d-4078-42dc-9ff2-5bae9edbc1b2"
/>
<img width="1451" height="957" alt="Screenshot 2026-09-23 at 22 16 09"
src="https://github.com/user-attachments/assets/f038b635-1359-4710-bc84-0f32ace1fb82"
/>
<img width="1450" height="956" alt="Screenshot 2026-09-23 at 22 16 37"
src="https://github.com/user-attachments/assets/7230b94a-c7ec-4550-bb55-5405ebc074a7"
/>

More importantly, we'll allow users to copy logs as JSON so users can
eject to their own agent if needed
<img width="1201" height="350" alt="image"
src="https://github.com/user-attachments/assets/587ab881-a501-41e6-8c9b-59191a2b2047"
/>

## To test
- [ ] Mainly just need to make sure that account audit logs still works
as expected - it's all read only so just need to ensure that all
information that's available before, is still available


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

* **New Features**
* Browse account activity logs with date-range and project filters,
project search, sorting, and refresh controls. Results automatically
refresh every five minutes.
* Choose preset date ranges, select individual logs or ranges of rows,
and copy selected entries as formatted JSON.
* Open a log to view request, actor, target, and action details, or
inspect and copy its raw data.
* Select log rows with a mouse or keyboard, and view loading, error,
empty-results, and filtered-empty states.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-24 11:07:36 +00:00
Danny White d067e81a69 fix(ui): align primary colours across text, buttons, and controls (#50697) 
## Problem

Primary colour serves readable text and selected controls, but those
uses need different shades. Light mode needs darker text, while dark
mode needs a deeper button fill. Fixed brand green on interactive chrome
also prevents a custom primary hue from carrying through the interface.
Some slider tracks and selected text are hard to read.

## Solution

- Keep `--primary` for accessible text and small selected indicators.
Use `--primary-solid` for button fills, which need a deeper shade in
dark mode.
- Add `--primary-bright` for focus rings, selected control chrome, chart
accents, and other interactive highlights. It follows `--primary-hue`;
`brand-*` stays fixed for Supabase identity.
- Make slider troughs clearer and text selection translucent with theme
foreground text.
- Document the split in the design-system colour guide.

| Before | After |
| --- | --- |
| <img width="980" height="244" alt="Before: light mode primary
controls"
src="https://github.com/user-attachments/assets/dfae325d-0dfe-4231-8bcd-3f89c4b9d793"
/> | <img width="982" height="204" alt="After: light mode primary
controls"
src="https://github.com/user-attachments/assets/5fdcb531-a6e3-4549-8a13-9d9a5ebe6e20"
/> |
| <img width="610" height="120" alt="Before: slider track"
src="https://github.com/user-attachments/assets/04f768e0-51e8-4d06-9b97-c52f4a34f122"
/> | <img width="622" height="126" alt="After: slider track"
src="https://github.com/user-attachments/assets/95127f4e-13dc-4f0f-b63c-cf5d70a28b42"
/> |
| <img width="652" height="512" alt="Before: dark mode controls"
src="https://github.com/user-attachments/assets/3f88de66-90cc-40ee-8cf1-b5f4eb87b09a"
/> | <img width="658" height="498" alt="After: dark mode controls"
src="https://github.com/user-attachments/assets/906bec30-6ca1-4614-9fb3-6cf5e5feec22"
/> |

## Review instructions

1. Compare light and dark mode in the [colour usage
guide](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/color-usage#primary-and-brand-colors).
Check primary ink, primary-solid, primary-bright, and fixed brand
swatches.
2. In Studio, open the ‘new table’ sheet in [Table
Editor](https://studio-staging-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/dashboard/project/_/editor).
Tab through the new table sheet's fields and toggles. Check the focus
rings, selected controls, and the sheet's edges in both themes. You do
not need to save a table.
3. Select text in Studio in both themes, including a link or
primary-coloured label. The selection and text should remain legible.
4. Check the
[Field](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/components/field)
Price Range slider: the unused track should remain visible in both
themes. The selected field card border should follow primary-bright.
5. Check the
[Button](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/components/button)
and [Radio
Group](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/components/radio-group)
previews. In dark mode, `primary` button fill should be deeper than
primary
[text](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/color-usage#text);
selected radios should remain readable.
 2026-09-24 09:56:31 +10:00
Saxon FletcherandJoshen Lim 76c4f2b739 feat(studio): add time range to project logs filter bar (#50685) 
<img width="1079" height="566" alt="image"
src="https://github.com/user-attachments/assets/b6f360e9-dfcf-4717-86db-1fc9acc4ae6a"
/>


## Problem

Project logs only exposed time-range selection through the sidebar.

## Solution

Add a Time range property to the filter bar using the sidebar’s picker,
preset labels, and date formatting. Keep it synchronized with the
sidebar and timeline, including retention checks.

## Review instructions

1. Open Project Logs and select **Time range** in the filter bar. Choose
a preset and confirm the sidebar and logs update.
2. Select a custom range and confirm its label matches the sidebar’s
date formatting.
3. Change the range in the sidebar or timeline and confirm the filter
bar updates. Remove the time-range pill and confirm the range resets
without removing other filters.
4. Select a range beyond the plan’s log retention and confirm the
upgrade prompt appears.

Validation: 67 focused tests passed, Studio typecheck passed, and
changed Studio files passed lint.

## Checklist

- [x] I have read
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
- [ ] Docs authoring skills (not applicable: no docs-site topic changes)

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

* **New Features**
* Added human-readable filter value labels while preserving the
underlying selections.
* Added dedicated log time-range filters with preset and custom ranges.
  * Added inline date-range picker support for flexible layouts.
* Added controls to show or hide filter properties based on
availability.
  * Added consistent date-range formatting and custom range support.

* **Bug Fixes**
  * Invalid or incomplete time-range filters are no longer applied.
  * Time-range filters remain separate from standard column filters.
* Clipboard interactions are limited to the popover date-picker variant.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
 2026-09-24 09:29:59 +10:00
Saxon FletcherandClaude Opus 5 a311279d66 feat(studio): add range and multi-row selection to DataTableInfinite (#50688) 
Stack 3/4 · previous: #50687 · next: #50689

## Problem

`DataTableInfinite` could only open one row at a time. Multi-select
meant clicking a separate checkbox column, with no support for ranges or
modifier keys.

## Solution

This PR only adds shared primitives. Behavior stays the same until a
consumer passes `onSelectRow` (wired up in the next PR).

- `selectTableRow` (`rowSelection.utils.ts`): a pure reducer for plain,
Cmd/Ctrl-toggle, Shift-range, and additive-range selection over the
current display order, with a fixed anchor.
- `useTableRowSelection`: holds the selection state and resets it when
its `scope` (project/filters) changes.
- `DataTableProvider` gets an optional `onSelectRow`. When it's set,
`DataTableInfinite` rows use it and reflect `row.getIsSelected()`. Rows
also get `aria-selected`, Space activates them like Enter, and
shift-click no longer selects text.

## Review instructions

1. Read `rowSelection.utils.test.ts`: it covers the selection rules.
2. Open Unified Logs. Row clicks should behave the same as on master.

## 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 richer data-table row selection, including multi-select, range
selection, toggling, and keyboard support.
- Added visual and accessibility feedback for selected rows, including
pointer cursor and `aria-selected`.
- Preserved selections across paging and live updates while resetting
them when filters or projects change.
  - Added support for external row-selection callbacks.

- **Tests**
- Added comprehensive coverage for selection behavior and state
persistence.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
 2026-09-24 08:56:22 +10:00
Saxon FletcherandClaude Opus 5 eb738d2b84 feat(studio): open copy and filter actions from log detail rows (#50686) 
<img width="1353" height="1046" alt="image"
src="https://github.com/user-attachments/assets/22c69de8-59ff-4318-9044-c222b01b6154"
/>


Stack 1/4 · next: #50687

## Problem

In the Unified Logs detail panel, each field row had a small kebab
button. Fields that couldn't be filtered fell back to a separate copy
button, so the actions weren't consistent. Filter labels also repeated
the column id ("Add as filter for method").

## Solution

- Adds `LogFieldRow`: the whole key/value row opens the actions menu on
click or Enter. Rows you can filter show filter + copy, and every other
row shows copy only.
- `DataTableSheetRowAction` always renders the dropdown now. `table` is
optional, copy is always available, labels read "Add filter", and the
menu aligns to the row.
- `DetailRow` is rebuilt on `LogFieldRow`. The section styling is
refreshed: bordered collapsibles, no zebra striping, and
`heading-default` section titles. The `topDivider` prop is removed.

## Review instructions

1. Open Unified Logs and select a Postgres or PostgREST log.
2. Click a filterable row (such as method or status). You should see
"Add filter" and "Copy …" in one menu.
3. Tab to a row that can't be filtered and press Enter. You should see a
copy-only menu.

## 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 consistent copy and filter actions to log detail rows.
* Added keyboard-accessible row actions, including “Add filter” for
filterable values.

* **UI Improvements**
* Updated log detail sections with clearer borders, headings, hover
states, spacing, and typography.
* Simplified detail row presentation and improved value wrapping and
readability.

* **Bug Fixes**
  * Improved handling of empty and filterable log values in detail rows.

* **Tests**
* Added coverage for copying values and applying filters from detail
rows.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
 2026-09-24 08:56:21 +10:00
Joshen Lim f8257f2146 Decouple DataTableInfinite from unified logs (#50498) 
## Context

No visual changes - just refactoring to decouple DataTableInfinite from
unified logs so that we can reuse the DataTableInfinite component in
other places. Note that we're only decoupling the table - not the side
menu stuffs

- Removes depedency on `QuerySearchParamsType` from unified logs in
`DataTableProvider.tsx`
- Remove unnecessary `searchParamsParser`
- Was feeding a dead `useQueryState('live')` in `DataTableRow` that
never used its return value

Am planning to revisit the audit logs UI subsequently as i realised its
current state makes it hard to find things for debugging

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

## Summary by CodeRabbit

- **Bug Fixes**
- Improved error messaging in data tables, including a clearer “Failed
to retrieve logs” message when log retrieval fails.
- Standardized default error messaging for other data-loading failures.

- **Improvements**
- Enhanced compatibility for asynchronous table filters and search
parameters without changing existing user workflows.
- Preserved existing filtering and live data behavior while improving
table reliability.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-21 15:50:01 +08:00
kemal.earthClaude Opus 4.8Gildas Garcia
 		7fce0a12d9 feat(design-system): first pass at db report chart colours (#46787) 
## 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 is a first draft at introducing semantic colours to our
Observability charts. This moves away from just random colours being
assigned to prop after prop. They're only scoped to the Database reports
right now, but if it flows nice, we can open it up to the other reports
too.

This also aims to tone down some of the harsher colours in our charts,
such as the orange which sometimes can look like a warning metric/prop.

| Before | After |
|--------|--------|
| <img width="839" height="336" alt="Screenshot 2026-06-10 at 09 14 56"
src="https://github.com/user-attachments/assets/222747c5-973b-4165-aa53-df7b93412ad3"
/> | <img width="950" height="341" alt="Screenshot 2026-09-14 at 18 14
47"
src="https://github.com/user-attachments/assets/836f3ddd-4a97-4064-b8cf-3a3b435417ac"
/> |

cc @supabase/design for additional thoughts.


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

* **New Features**
* Added semantic chart color roles with light and dark theme variants
for consistent visualizations.
* Standardized colors and fills across database, networking, storage,
and connection charts.
  * Maximum-value lines now use configured chart colors when available.
  * Added chart palette reference and stress-test examples.
* Added stacked bar charts, customizable margins, and gradient-filled
line charts.
* Improved multi-series bar chart focus and date-range footer alignment.

* **Documentation**
* Documented the chart palette, theme variants, accessibility guidance,
and usage recommendations.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
 2026-09-16 09:18:40 +01:00
Joshen Lim 4b24548345 Fix sync between filter bar and filter controls in unified logs (#50383) 
### Context

In unified logs, adding a filter to the filter bar (e.g filtering on log
type) doesn't sync with the filter controls in the left menu (although
it does the other way around). Example here filtering on log type to
equals to edge (API Gateway)
<img width="400" alt="image"
src="https://github.com/user-attachments/assets/080aba77-3366-4530-8443-3c8902aefd20"
/>

Both filter bar and filter controls share the same URL state with nuqs,
and it comes in 2 shapes:
- a bare `string[]` for = conditions
- a wrapped `{ operator, values }` object for other operators

The filter bar didn't follow this convention for the first one as it
always wrote the wrapped object which made the checkbox appear untickets
on the filter controls (which expects the first one) - this always
caused the filter to show up as `[object Object]` if you add a log type
filter via the filter bar first, then check the same log type filter in
the filter controls.

### Changes involved
Am opting to streamline the expected data shape and have both components
always expect the wrapped object shape so we don't have to deal with 2
different shapes (feels unnecessary)

### To test
- Verify that applying a log type filter (e.g postgres) in the filter
bar should reflect the checkbox for the same log type filter in the
filter controls on the left to be checked as well
- Unchecking the checkbox in the filter controls should thereafter
remove the filter in the filter bar too

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

- **Improvements**
- Unified Logs filters now use a consistent operator-and-values format
across filtering controls.
- Checkbox filters preserve operators when selecting multiple values or
using **Only**.
- Mixed filter conditions are handled more consistently, with
unsupported values ignored.
- Non-text filter values are converted consistently for reliable
filtering.
- **Bug Fixes**
- Improved consistency when applying, displaying, and updating Unified
Logs column filters.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-15 17:45:42 +08:00
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
 2026-09-11 17:05:26 +10:00
Joshen Lim a1df468edd Add keyboard shortcut to live mode (#48280) 
## Context

As per PR title - there's already a keyboard shortcut mapping for the
live mode toggle that was originally present in `UnifiedLogs`, so this
reuses that.

Opting for a more explicit tooltip copy as well as "Live" doesn't really
explain what it does
<img width="257" height="82" alt="image"
src="https://github.com/user-attachments/assets/2159eef3-6291-4fdc-93ca-da706c8688f0"
/>
<img width="195" height="101" alt="image"
src="https://github.com/user-attachments/assets/0d5d211c-af66-406d-9cff-7de7b15f0892"
/>


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

## Summary by CodeRabbit

* **New Features**
* Added keyboard shortcut support for toggling live updates in database
connections.
  * Added shortcut guidance to the Live/Pause control.
* Resuming live updates now refreshes activity immediately and updates
the displayed timestamp.

* **Bug Fixes**
* Improved live-refresh controls and messaging to clearly reflect the
refresh cadence.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-07-24 15:18:21 +08:00
Danny White c8aca8d3a0 chore(design-system): standardise keyboard focus rings (#41575) 
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

UI / design-system consistency (accessibility).

## What is the current behavior?

Keyboard focus rings are inconsistent across Studio and `packages/ui`:

- Custom Button uses thick `outline` with per-variant colours (brand /
grey / destructive / warning)
- Form controls use muted grey rings (`ring-background-control`)
- Tabs / NavMenu / Radio use soft brand `ring-ring`
- Studio `.inset-focus` uses dark green `outline-brand-600`

Related: [DEPR-354](https://linear.app/supabase/issue/DEPR-354).

## What is the new behavior?

One shared focus recipe, exposed as Tailwind `@utility` classes in
`packages/config/css/utilities.css`:

| Utility | Use when |
| --- | --- |
| `focus-ring` | Buttons, inputs, most controls (offset ring) |
| `focus-inset` | Dense/flush surfaces such as interactive table rows
(renamed from `inset-focus`) |

```txt
# focus-ring
outline-hidden
focus-visible:ring-2
focus-visible:ring-ring
focus-visible:ring-offset-2
focus-visible:ring-offset-background
```

Applied on Button, shadcn form controls, Menu/NavMenu, Command palette
trigger, Studio table rows, and related call sites. Documented in the
design-system accessibility docs. Variants do not change focus ring
colour.

When the ring must appear on a different element than the focused one
(e.g. Menu + ProductMenu `Link` via `group-focus-visible`, or InputGroup
via `:has()`), keep an explicit ring stack. The utilities bake in
`:focus-visible` on the same element.

## Additional context

**Out of scope**

- Full `packages/ui` / Studio / www sweep
- Legacy Studio form-group green box-shadow cleanup
- ESLint rule for bare `outline-none`

## Test plan

Prefer Safari (“hard mode” for `tabIndex`). Expect one soft brand ring
everywhere: not grey, not solid green outline.

### Design system

- [ ]
[Accessibility](https://design-system-git-dnywh-choreimprove-tab-focus-styles-supabase.vercel.app/design-system/docs/accessibility):
recipe docs match what you see
- [ ]
[Button](https://design-system-git-dnywh-choreimprove-tab-focus-styles-supabase.vercel.app/design-system/docs/components/button):
Tab primary / default / danger; same ring colour
- [ ] [Table → Row-level
navigation](https://design-system-git-dnywh-choreimprove-tab-focus-styles-supabase.vercel.app/design-system/docs/components/table#row-level-navigation):
Tab an interactive row; inset outline (`focus-inset`) sits inside the
row

### Studio

- [ ] **Org home → table view** (`/organizations/_` or org projects):
switch to the table layout, Tab onto a project row; inset outline sits
inside the row (list/card view uses CardButton, not `focus-inset`)
- [ ] **Project sidebar** (Database, Auth, Storage, …): Tab the main
product nav links; ring follows the focused item (not the nested section
menus like Tables / Roles)
- [ ] **Storage → Files**: Tab a bucket row; same inset outline as org
table rows
- [ ] **Project Settings → General** (or Compute and Disk): Tab through
inputs, checkboxes, switches, selects; same offset ring, no ring on
mouse click
- [ ] **Header ⌘K** (desktop width): Tab to the search control after
Feedback; same soft brand `focus-ring` (was a thicker
`ring-border-strong` before)
- [ ] **Table Editor or SQL Editor tabs**: focus a tab, Tab to × if
active; close shows a ring
- [ ] **Light + dark**: ring stays visible against both backgrounds
 2026-07-22 12:10:07 -04:00
Danny White e3d7267845 fix(studio): chip away explicit-tabindex ratchet debt (#48040) 
## What kind of change does this PR introduce?

A11y cleanup follow-up to #47984 /
[DEPR-626](https://linear.app/supabase/issue/DEPR-626).

## What is the current behavior?

Studio had 82 ratcheted `supabase/require-explicit-tabindex` violations
(raw `<button>` / `role="button"` without explicit `tabIndex`).

## What is the new behavior?

- Explicit `tabIndex={0}` (or disabled → `-1`) on those Studio call
sites across nav, `components/ui`, Database, Storage, and the remainder
- Ratchet baseline cleared (**82 → 0**) and the rule **removed from the
Studio ratchet** (debt is gone; ratchet is temporary)
- Rule remains a shared **`warn`** for now — promoting to `error` (and
sweeping www/docs/design-system) is a follow-up
- Also fixed the learn/ui-library call sites that surfaced while
experimenting with error promotion
- Small follow-ups where making controls focusable exposed gaps:
accessible names, disabled/focus consistency, focus-ring polish on
To-test surfaces, home section `KeyboardSensor`, and an E2E locator
tightened after `aria-label="Remove column"`

Prefer migrating to `Button` from `ui` in future touch-ups; this PR
takes the minimal path so Studio debt can stay at zero.

## Additional context

Batches landed together so baseline conflicts stayed simple while
chipping away:

- Hotspots / nav (FirstLevelNav, Marketplace, AttachmentUpload, Column,
Tabs, …)
- `components/ui` shared
- Database + Storage
- Remainder

**Out of scope / intentional deferrals**

- Promoting `supabase/require-explicit-tabindex` to a lint **error**
(follow-up after www/docs/design-system sweeps)
- Tabs/Radio roving, tooltips, context menus, in-menu items
- Full keyboard-accessible tab-close UX (close stays hover +
`tabIndex={-1}`; context menu still closes tabs)
- Data API docs links (`/project/<ref>/api` redirect)

**Reviewer notes**

- Rule only flags raw `<button>` / `role="button"` without a `tabIndex`
prop. `Button` from `ui` already bakes this in
- `tabIndex={-1}` is intentional for disabled controls, in-menu /
roving-focus children, and hover-only tab close
- For dnd-kit grips, put `tabIndex` **after** `{...attributes}` so it
isn’t overwritten (TS2783)

### To test

Use **Safari** with macOS Keyboard navigation **off** (System Settings →
Keyboard). Chrome once for a sanity pass. For each surface below: Tab
until the control is focused, then activate with Enter/Space where
relevant.

1. **API Docs side panel** (Table Editor → open a table → **API docs**)
- Floating API Docs panel — **not** `/project/<ref>/api` (that redirects
to Data API docs; language ToggleGroup uses arrow keys; links are out of
scope)
- Left nav buttons — Tab through several and activate one; active
highlight / navigation still works

2. **Integrations → Marketplace**
- Enable **Integrations layout** feature preview first (avatar menu →
Feature previews)
   - `/org/<slug>/integrations` or project integrations marketplace
   - “Clear all”, grid/list toggles — Tab + activate

3. **Table Editor → create a table → Columns**
- Drag handles only appear while **creating** (not when editing an
existing table)
   - Tab to grip / remove (X) / sensitive-data eye if shown

4. **Project Home** — section drag handles
   - Tab to a grip (visible focus ring)
- Optional: Space to pick up, arrows to move, Space/Esc to drop
(KeyboardSensor added)
   - Mouse dnd still works

5. **Storage → Policies** — expand/collapse bucket list chevron
(design-system focus ring, no stuck grey open bg)

6. **Support form** (Help → Support) — attachment remove (×) and
add-attachment control when visible

Disabled controls should be **skipped** by Tab.

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

* **Accessibility Improvements**
* Improved keyboard navigation throughout Studio by explicitly managing
focus (`tabIndex`) across many interactive controls (menus, tabs,
tables, charts, dialogs, navigation, and form actions).
* Disabled or non-interactive controls are now removed from the tab
order (or made unfocusable), while available actions remain reachable.
* Ensured `type="button"` on relevant controls to prevent unintended
submissions, and refined keyboard focus behavior for various toggles and
copy/remove actions.
* **Chores**
* Updated the ESLint rule baseline configuration to match the new focus
behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-07-21 08:22:43 +10:00
Ivan Vasilovkemal.earthkemalJoshen Lim
 		3c6ef31959 feat: add User Filter to the unified logs (#47879) 
Offshoot from https://github.com/supabase/supabase/pull/47743.

[Linear
issue](https://linear.app/supabase/issue/FE-3939/add-user-logs-filter-to-the-logs-page)

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

* **New Features**
* Added a `user` filter to Unified Logs with a user picker (email or
ID).
* Added “View user logs” actions from the Users table to jump to Unified
Logs.
* **Bug Fixes**
* Updated Unified Logs searching so default log-type restrictions no
longer block user-attributed results.
* **UI Updates**
* Unified Logs filter bar and reset behavior now include clearing the
user filter.
* Improved empty-state messaging when the selected user filter isn’t
supported.
  * Refreshed highlighted styling in command list items.
* **Tests**
* Expanded coverage for user filter configuration and query edge cases.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: kemal.earth <606977+kemaldotearth@users.noreply.github.com>
Co-authored-by: kemal <hello@kemal.earth>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
 2026-07-17 17:21:55 +08:00
Jordi EnricandJoshen Lim 92b8ba7cc9 fix(studio): give unified logs filter 'Only' button a solid background (#47953) 
The "Only" button in the Unified Logs filter facets had no background,
so it overlapped the label/count behind it on hover. Added a solid
`bg-background`, set the label to 10px, and capitalized it to "Only".
Applied to both the sync and async filter checkbox components.

## Before / After
Button now sits on an opaque background and no longer bleeds into the
row below.

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

* **Style**
* Improved checkbox filter hover interactions by hiding count markers
when hovering over an option.
* Updated the “Only” control styling for clearer visibility, alignment,
and hover behavior.
  * Capitalized the control label to “Only” for improved readability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
 2026-07-15 11:59:17 +00:00
Jordi Enric b02ad91319 fix(studio): stop unified logs bar chart animation replay on click FE-3912 (#47910) 
## Problem

In the unified logs dashboard, clicking an activity bar in the chart
restarted the fly-by entrance animation instead of selecting that bar.
There was also no way to select a single bar by clicking it (only
drag-to-select worked), and the selection menu was centered over the
selection rather than anchored to its start.

## Fix

- Disabled Recharts' `isAnimationActive` on the stacked `Bar` elements
so re-renders from selection state no longer replay the entrance
animation.
- Clicking a single bar now selects that bar's full time bucket and
opens the "Filter logs to selected range" menu, the same as dragging
across it.
- The menu is anchored to the start (leftmost pixel) of the selection
instead of the mouse release position.

## How to test

- Open a project's unified logs page
- Wait for the activity chart to finish its initial load
- Click on a single bar
- Expected result: the bar is highlighted, the chart does not replay its
entrance animation, and the range-filter menu appears anchored at the
start of that bar
- Drag across multiple bars
- Expected result: the range-filter menu appears anchored at the start
of the dragged selection, not centered over it

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

- **Bug Fixes**
- Fixed chart highlight popovers to anchor consistently to the start of
the selected range.
- Improved popover behavior so it updates correctly when the position
changes.
- Corrected zoom-in filtering when the selected range contains a single
timestamp.
- **UI Improvements**
- Reduced conflicts between tooltips and selection popovers by rendering
tooltip content only when appropriate.
- Disabled stacked-bar animations for error/warning/success to make
chart interactions feel steadier.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-07-15 12:24:07 +02:00
Danny White e5df232b44 fix(studio): polish unified logs row alignment and success colours (#47829) 
## What kind of change does this PR introduce?

UI polish

## What is the current behavior?

Unified logs row chrome is slightly misaligned (checkbox vs filter
toggle, uneven gaps around the level dot), success grey is too dark and
doesn’t match the Level key, and log-type icons read a bit heavy.

## What is the new behavior?

- Aligns the row checkbox with the filter sidebar toggle and spaces the
level dot evenly between checkbox and timestamp
- Drops the checkbox `translate-y` nudge in favour of normal middle
alignment
- Introduces `--chart-success` so the chart and Level key/dots share a
lighter grey
- Softens log-type icon colour on each row

| Before | After |
| --- | --- |
| <img width="1024" height="759" alt="1293"
src="https://github.com/user-attachments/assets/af7ab83f-8917-41cb-99f3-1c1f92df769e"
/> | <img width="1024" height="759" alt="52159"
src="https://github.com/user-attachments/assets/9b859308-2101-4a02-bdc1-75e5750f84fa"
/> |


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

## Summary by CodeRabbit

* **Style**
* Improved Unified Logs table spacing and alignment, including narrower
selection and level columns.
  * Refined checkbox and date-cell presentation for a cleaner layout.
  * Updated log type icons to use muted foreground styling.

* **Bug Fixes**
* Success statuses and chart indicators now consistently use the
dedicated success color across light and dark themes.


<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-07-11 03:13:41 +10:00
Joshen Lim 511a7806de Joshen/fe 3789 unified logs filters click area is too small (#47675) 
## Context

Increases the click area of unified logs filter

### Before
<img width="1070" height="828" alt="image"
src="https://github.com/user-attachments/assets/7e2a45de-7844-4feb-accb-fdaecfa1066c"
/>

### After
<img width="623" height="130" alt="image"
src="https://github.com/user-attachments/assets/c8310975-1f2f-42dc-aaff-fdcd112b1bee"
/>


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

## Summary by CodeRabbit

* **Style**
  * Improved spacing and alignment in filter checkbox rows.
* Adjusted the expand/collapse control and “only” button positioning for
a cleaner layout.
* Refined nested option connector placement and sizing for better visual
consistency.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-07-08 14:16:31 +08:00
Jordi Enric bac4814123 fix(logs): color regressions from design system update (#47676) 
## Summary
- Fix unreadable "Large ranges may result in memory errors" warning text
in the Logs date picker — a stray `text-warning-foreground` class (dark
ink) was winning over `text-warning` on the dark `bg-warning-300` fill.
- Fix "Search collections..." sidebar wrapper background mismatch —
`bg-background-200` now resolves to the elevated `--card` surface
instead of `--background`, so it no longer matches the sidebar's
`bg-dash-sidebar`.
- Fix the Unified Logs "Live" toggle button rendering blue text instead
of white when active — a leftover `border-info text-info` override was
fighting the `primary` variant's own text color, now that `--info`
resolves to a more distinct blue.

All three are contrast/color regressions surfaced by the recent
design-system color token changes.

## Test plan
- [ ] Open a project's Logs Explorer, pick a large date range, confirm
the warning text is readable
- [ ] Check the Logs sidebar "Search collections..." box background
matches the rest of the sidebar in both light and dark mode
- [ ] Toggle "Live" mode in Unified Logs and confirm the button text is
white/legible on the green background

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

## Summary by CodeRabbit

* **Style**
  * Updated the large-range warning banner appearance in Logs settings.
* Refined the Logs sidebar header background styling for a more
consistent look.
* Simplified the DataTable live button styling behavior by removing
conditional class composition while preserving the existing live-mode
visuals.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-07-07 13:37:37 +02:00
Joshen Lim 9f1ce56322 Add edge log type with service filters (#47493) 
## Context

Couple of changes to the Unified Logs logic, mainly to align unified
logs filters with legacy logs behaviour

## Changes involved
- Postgrest + Storage logs will no longer overlap with edge logs source
  - They will specifically just pull logs from their own sources only
- This will match legacy logs behaviour + also the observability
overview behaviour as well
- Re-introduce "API Gateway" as a log type (was there in the old UI)
  - Added service filters for convenience
<img width="271" height="233" alt="image"
src="https://github.com/user-attachments/assets/6264b7c5-e3e8-4db8-a378-4d8c46af3d62"
/>



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

* **New Features**
* Added **API Gateway** (“Edge”) logs to Unified Logs, including new
sub-filters for auth, storage, and postgrest activity.
  * Updated the default log selection to include API Gateway logs.
* **Bug Fixes**
* Improved how log types are bucketed and filtered, ensuring edge,
postgrest, and storage sources display under the correct views and
toggles.
* Refined “connection logs” filtering so results and counts remain
consistent with the selected options.
* **Style**
* Refined the Unified Logs filter checkbox layout and nested
expand/collapse controls.
* **Tests**
* Updated and expanded query tests to cover the new edge filter
behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-07-01 18:09:56 +08:00
Gildas Garcia b30db91d71 chore: cleanup UI patterns exports (#47406) 
## Problem

We now export components under a subpath in ui-patterns to avoid barrel
files as they slow down every tools (from IDE to linters, etc.) and may
also affect bundles our users have to download.

## Solution

- Remove the UI patterns index file
- Fix invalid impors
 2026-06-30 09:23:17 +02:00
Gildas Garcia 77bf0a4ec9 chore: more dead code cleanup (#47312) 
## Problem

There's still more unused code in the repository which slows down
everything:
- checkouts
- tooling
- probably builds (not sure how good turbopack is at handling this)

## Solution

- remove old unused code
- remove more recent code after checking git history to ensure it's not
unfinished/ongoing work

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

* **Chores**
* Removed several outdated UI components and helper utilities to
streamline the app.
* Cleaned up unused analytics, database, and observability hooks and
queries.
* **Refactor**
* Simplified data table, unified logs, and assistant panel internals by
removing legacy display and navigation pieces.
* **Bug Fixes**
* Reduced the chance of showing stale or inconsistent status, chart, and
metric views by eliminating obsolete display paths.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-06-26 11:48:58 +02:00
Joshen LimandAlaister Young 2bac064adf Joshen/fe 3697 progressively default opt in to unified logs (#47296) 
## Context

We're progressively opting in users to use the new Unified Logs UI 🙂🙏

## Changes involved

- [ ] Removed flag for controlling visibility of unified logs feature
preview
- [ ] Added flag for controlling default opt in behaviour of unified
logs
- [ ] Small tweak to Unified Logs banner is default opted in (Just show
"New" and more info CTA)
- Disabling, then enabling again will thereafter show the existing "Go
back to old logs CTA"
<img width="290" height="166" alt="image"
src="https://github.com/user-attachments/assets/a2c46ce1-63c3-490c-bc7d-fc1254982dbe"
/>


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

* **New Features**
* Unified Logs preview now derives default opt-in state from a new
default-opt-in flag and exposes `isDefaultOptIn`.

* **Bug Fixes**
* Removed eligibility-based gating so the “Beta” badge and Unified Logs
banner render consistently across logs screens.
* Unified Logs banner was refactored to handle enable/disable and
navigation internally, while remaining shown unconditionally.

* **Tests**
* Updated mocks and assertions to reflect the revised preview/banner
enablement and dismissal logic.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
 2026-06-25 21:45:40 +08:00
Joshen Lim 772b3bb36e Adjust connection logs toggle for unified logs, flip it to true by default (#47258) 
## Context

For unified logs, postgres connection logs are being filtered out by
default previously from this
[PR](https://github.com/supabase/supabase/pull/46371) due to its noise.
We're opting to show the connection logs by default instead so this PR
changes that behaviour + adjusts the connection logs filter UI

In particular this is timely as we're adjusting how the DB will log
connections based on this
[changelog](https://github.com/orgs/supabase/discussions/47197), and
we'd want to make sure that users can find their connection logs easily

## Changes involved
- [ ] Search parameter renamed to `show_connection_logs` so that we
don't need to flip its boolean value for the checkbox
- [ ] `show_connection_logs` is subsequently `true` by default
- [ ] Shift connection logs filter to a nested option under Postgres log
type
- Makes it more visual that connection logs are related to the Postgres
service
- Currently its hidden all the way in the bottom under "Misc" which can
be easily missed
- <img width="302" height="151" alt="image"
src="https://github.com/user-attachments/assets/e3e61ac7-aa16-4769-a89e-e911daacea27"
/>
- <img width="289" height="156" alt="image"
src="https://github.com/user-attachments/assets/c70ac7c4-d2f7-4961-a6d6-6653c59d8548"
/>



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

* **New Features**
* Unified Logs now supports expandable, nested “Log Type” filter options
for drilling into connection-related entries.
* **UI Improvements**
* Connection logs are visible by default; the visibility control has
been integrated into the main filter experience.
* Filter panels are now streamlined, and key filters (such as “Level”,
“Status”, and “Method”) have been reordered and adjusted for a cleaner
default state.
* **Bug Fixes**
* Updated Unified Logs query/test behavior to match the new
connection-log visibility logic.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-06-25 15:08:31 +08:00
Joshen Lim 086232b207 Include postgrest_logs as source for Postgrest logs (#47225) 
## Context

For unified logs, we're currently pulling data from `edge_logs` and
filtering on path like `/rest` to fill the `Postgrest logs`
However, `edge_logs` are logs from the API Gateway and Postgrest logs
has its own source `postgrest_logs`

## Changes involved
- Update source for postgrest logs to include `postgrest_logs`
- Improve labelling of log types
- Improve overflow scroll container max height of
`DataTableFilterCheckbox`
- Previously its max height of 200px was nicely fitting the height of 6
options, so there's no visual indication that there's more to scroll.
Hence adjusting to 215px to "peek" the next option as below:

<img width="283" height="315" alt="image"
src="https://github.com/user-attachments/assets/eb962d66-d575-4ee9-9f80-eaa2af0278ef"
/>


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

* **Improvements**
* Enhanced log type filter labels in the Unified Logs interface for
improved readability.
  * Expanded PostgREST log detection and categorization.
* Increased vertical space in checkbox filter dropdowns for better
content visibility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-06-24 14:55:15 +08:00
Joshen Lim e9a976aa74 Fire load more slightly before reaching the bottom of the page (#47115) 
## Context

JFYI the originally problem from the ticket was that unified logs wasn't
loading more automatically when scrolling to the bottom

However, I can't reproduce that issue as it seems to be working as
intended. But opting to triggering the load more when scrolling slightly
before hitting the bottom of the page for a smoother UX

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

## Summary by CodeRabbit

* **Bug Fixes**
* Optimized infinite-scroll behavior in data tables by refining when the
loading trigger activates. Content now begins loading earlier as users
scroll, rather than waiting until reaching the absolute bottom of the
table. This responsive adjustment improves overall performance and user
experience when navigating through tables with large datasets, reducing
perceived delays.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-06-22 13:13:11 +08:00
Joshen LimandJordi Enric dc5633aee2 Joshen/debug 147 add horizontal scroll to unified logs UI (#47111) 
## Context

Support horizontal scrolling for unified logs

## Changes involved

Also chucked in some refactors and clean up
- `DataTableInfinite` to directly import components from the `ui`
package rather than a separate `Table` component that just applies class
names to the table components from `ui`
- Adjust footer of unified logs such that it'll remain in place despite
horizontally scrolling unified logs

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

## Release Notes

* **Style**
* Improved infinite data table layout with consistent row/cell styling
across loading, empty, and error states.
  * Sticky header behavior is now more reliably applied.
* “Load more” footer button uses a smaller sizing for a cleaner footer
layout.

* **Refactor**
* Updated table rendering to use shared UI primitives and improved
scroll/container handling for the infinite table experience.

* **Chores**
  * Simplified the underlying table component structure for consistency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Jordi Enric <37541088+jordienr@users.noreply.github.com>
 2026-06-19 20:09:31 +08:00
Jordi EnrickemalClaude Opus 4.8
 		587607d335 feat(unified-logs): restore card-style sidebar banners (#47028) 
## Problem

When [#46812](https://github.com/supabase/supabase/pull/46812) was
scoped down to "sidebar visual changes only", Kemal's UI redesign of the
Unified Logs sidebar banners was unintentionally reverted back to the
older full-bleed strip layout. The shared `UnifiedLogsBanner` component
survived, but his actual visual design did not.

This PR brings back just Kemal's banner UI changes, with nothing else
from that branch.

## Changes

- **promo variant** (`LogsSidebarMenuV2`): bordered card with a "New"
badge, an "Introducing unified logs" heading, and an "Enable preview"
button + "More information" tooltip button
- **utility variant** (`FilterSideBar`): bordered card for the "Go back
to old logs" action with a "Switch back" tooltip button
- Restore the `mx-4 mt-4` placement in both consumers

Adapted to the current `Button` `variant` API (the original used the
now-removed `type` prop).

## Testing

- `pnpm lint --filter=studio`
- Visual check of the Logs sidebar for an account eligible for Unified
Logs (promo card) and one already on Unified Logs (utility card)

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

## Summary by CodeRabbit

* **New Features**
  * Added a "New" badge indicator to the logs interface.

* **Style**
  * Redesigned the unified logs banner with a new card-based layout.
* Updated the "Go back to old logs" option with improved visual
presentation and tooltip guidance.
* Adjusted spacing and alignment of the banner component for better
visual hierarchy.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: kemal <hello@kemal.earth>
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
 2026-06-17 11:29:49 +00:00
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>
 2026-06-16 23:59:58 +02:00
Jordi EnricClaude Opus 4.8kemal
 		a10bc9a88a feat(unified-logs): compact toggle banner and ArrowDown selects first log (#46812) 
Visual cleanup of the Logs sidebar (unified logs):

- Restyle the "Go back to old logs" and "Try Unified Logs" banners as
full-bleed bordered strips (no card), with an icon-only switch-back
button and a tooltip
- Add a "Beta" badge next to the "Logs" sidebar title
- Rename the product from "Logs & Analytics" to "Logs"

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

* **New Features**
* Added Unified Logs banner with “Try Unified Logs” and “More
information” actions, plus a “Go back to old logs” utility layout.
  * Show a **“Beta”** badge for Unified Logs eligibility.

* **UX Updates**
* Updated the Logs experience to consistently display under the
**“Logs”** product layout.

* **Tests / Documentation**
* Updated end-to-end checks and examples to expect the **“Logs”**
heading text exactly.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
Co-authored-by: kemal <hello@kemal.earth>
 2026-06-16 10:50:52 +00:00
Ali Waseem 2cb7f0c078 feat(studio): add keyboard shortcuts for unified logs (#46680) 
Adds the final set of keyboard shortcuts to the Unified Logs page and
converts the last hardcoded `keydown` listener (detail-panel prev/next)
to the shared shortcut registry. Each action also surfaces its keybind
in a registry-driven tooltip.

Closes FE-3415.

## Shortcuts

| Action | Shortcut | Notes |
| --- | --- | --- |
| Refresh logs | `Shift+R` | new |
| Download logs | `Shift+E` | new — opens export dropdown |
| Focus filter bar | `Shift+F` | new |
| Clear filters | `F` then `C` | new |
| Copy selected as JSON | `Mod+Shift+J` | new — reuses
`results.copy-json` |
| Copy selected as Markdown | `Mod+Shift+M` | new — reuses
`results.copy-markdown` |
| Previous / next log (detail panel) | `↑` / `↓` | converted from
hardcoded listener |
| Close details panel | `Escape` | new |

Existing shared `data-table.*` shortcuts kept as-is: toggle sidebar
(`Mod+B`), live mode (`Mod+J`), reset filters (`Mod+Esc`), reset columns
(`Mod+U`), reset focus (`Mod+.`).

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

* **New Features**
* Added keyboard shortcuts for Unified Logs: copy selected rows as
JSON/Markdown, navigate rows, refresh, clear/reset filters, download,
and focus filter — shortcuts show in the command menu and display
badges/hints in menus and buttons.
* **Refactor**
* Shortcut handling unified across log controls; shortcuts
enable/disable based on context and a new "Logs" group appears in the
shortcut reference.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-06-05 09:21:20 -06:00
Joshen Lim ef613f2068 Joshen/debug 123 row dropdown appears outside of details panel (#46462) 
## Context

Addresses DEBUG-126

Making some adjustments to the service flow panel in unified logs
- Row action will be via a `...` button instead of the whole row
<img width="487" height="207" alt="image"
src="https://github.com/user-attachments/assets/cd0f6d41-aace-41c2-872b-60071fd6b986"
/>
- Fields with no values will show a `-` (previously didn't show
anything)
<img width="501" height="130" alt="image"
src="https://github.com/user-attachments/assets/3b62c44e-7fd9-497b-8261-ca5e1c975bc2"
/>
- Opting to close the dropdown menu when scrolling to prevent overflow
of the dropdown menu content with the parent component
- However, IMO this needs to be addressed at the UI component level RE
how we want to handle dropdown menu content when scrolling. The content
is portalled hence why its happening
- (Not user facing) Clean up usage of `FieldValue` and
`DataTableSheetRowAction`
- Was confusing to be passing `value` as a react node when declaring
`DetailRow` from `PostgresFlowDetail` and `Block`
- Opting to render the UI inside `DetailRow` instead, which gives us
better control on the UI


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

* **Bug Fixes**
  * Dropdown menus now close when the page is scrolled while open.

* **Improvements**
* Cleaner, more consistent log value formatting and status code display.
  * Loading placeholders for log fields are handled more consistently.
  * Dropdown content area widened for better visibility.
* Row actions only appear when a value is present; copy action shown as
fallback.

* **UI Behavior**
* Collapsible section headers receive improved layout, transition, and
hover styling.

<!-- 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/46462?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 -->
 2026-05-28 22:36:34 +08:00
Joshen Lim cbdd8b9b80 Add skeleton loader for unified logs chart (#46460) 
## Context

Opting for just a loading spinner as the skeleton loader for charts

<img width="1468" height="952" alt="image"
src="https://github.com/user-attachments/assets/d6c291c8-9151-40c8-bfbe-f838431dd6dc"
/>


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

## Summary by CodeRabbit

* **New Features**
* Added a loading spinner to the unified logs view that displays while
logs are being fetched, providing clear visual feedback during data
retrieval.

<!-- 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/46460?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 -->
 2026-05-28 22:24:18 +08:00
Joshen Lim b281d3fcf5 Joshen/fe 3475 add operator to event message filter (#46457) 
## Context

Original task was to support searching `!=` on `event_message`, but this
PR addresses some things regarding searching on `event_message` in
unified logs that I found while working on this.

### `=` and `!=` are technically inaccurate
We're doing pattern matching when searching on event_message rather than
a strict equality check, so a more accurate operator would be `ilike
(~~*)` and `not ilike(!~~*)` - both of which would be case insensitive
for easier checking.

Am thus swapping to use these 2 operators when filtering on
`event_message`:
<img width="430" height="134" alt="image"
src="https://github.com/user-attachments/assets/c8a320b6-e016-44ae-aed0-1e7b6cefbda9"
/>

### Filtering on `event_message` was never server side
It seems like we have been only doing client side searching on
`event_message` which is inaccurate as we're only filtering against rows
that are on the current page. The `event_message` filtering was never
appended to the URL state as well so the changes in this PR ensures that
all search including `event_message` is server side.

### Rework on unified logs filtering via URL params
Because we're now supporting more than just `=` in unified logs, the
current filter system is insufficient (e.g can't just be
`status=x&method=y`). Am opting to use the same system as per how we do
filtering in the table editor where search params follow the syntax:
`{column}:{operator}:{value}`
<img width="521" height="46" alt="image"
src="https://github.com/user-attachments/assets/54e72eb2-1581-4c1a-910e-58d993da1766"
/>

## To test
- [ ] Verify that searching for logs in unified logs still works
- [ ] Verify that searching against event_message in unified logs works
as expected (both ilike and not ilike)

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

* **New Features**
* Repeatable URL-based column filters with operator support (e.g.,
equals, not-equals, pattern matching).
* Expanded pattern-style operators for message searches
(case-insensitive/contains, negation).

* **Improvements**
* Unified filter handling across logs list, charts, and counts for
consistent results.
* Range/slider filters and pagination remain supported and round-trip
via URL parameters.

<!-- 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/46457?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 -->
 2026-05-28 22:19:08 +08:00
Jordi EnricandClaude Sonnet 4.6 810b395888 feat(studio): hide Postgres connection logs by default in unified logs (#46371) 
## Problem

The unified logs view shows Postgres connection lifecycle events
(connection received, connection authenticated, connection authorized)
alongside application logs. These messages are emitted on every database
connection and make it hard to spot meaningful log entries.

## Fix

Adds a SQL-level filter that excludes Postgres connection messages by
default. A toggle in the filter sidebar lets users opt in to seeing them
when needed. The preference is stored in the URL so it persists across
navigation.

**Changes:**
- `SEARCH_PARAMS_PARSER` gets a new `hide_connection_logs` boolean param
(default `true`)
- `buildBaseWhere` in the query builder emits a `NOT (source =
'postgres_logs' AND event_message LIKE 'connection %...')` predicate
when the param is true, filtering at the query level
- New `ConnectionLogsToggle` component renders a labeled switch in the
filter sidebar
- `FilterSideBar` gains a `beforeFilters` slot so the toggle can be
injected without coupling the generic component to log-specific logic

## How to test

1. Open a project in Studio and navigate to the unified logs page
2. Confirm that connection log messages (e.g. "connection received:
host=...", "connection authorized: user=...") are not visible by default
3. In the left filter sidebar, find the "Connection logs" toggle near
the top and switch it on
4. Confirm that connection log messages now appear in the list
5. Toggle it back off and confirm they disappear again
6. Reload the page with the toggle on (URL will contain
`hide_connection_logs=false`) and confirm the setting is preserved

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

* **New Features**
* Added a "Connection logs" toggle in the filter sidebar to hide
Postgres connection lifecycle messages by default (default = hidden);
changing it updates the logs view and the logs chart.
* Filter sidebar now supports placing extra controls so the toggle is
available alongside existing filters.

* **Behavior**
* Facet/count queries remain unaffected by this toggle to preserve
existing counts.

* **Tests**
* Added tests verifying default hide behavior and explicit show
behavior.

<!-- 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/46371?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 -->

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-05-26 16:53:09 +02:00
Joshen Lim c8e1eb1836 Support click drag to highlight time range in timeline chart unified logs (#46149) 
## Context

As per PR title - supports click drag to highlight a specific time range
in the TimelineChart of unified logs as such:

Also adjusts the chart highlight behaviour which affects the database
report charts to clear the highlighted area when clicking outside of it

<img width="445" height="171" alt="image"
src="https://github.com/user-attachments/assets/2a510fe1-2f86-4961-8f38-9dd5efcc80ec"
/>

### Demo


https://github.com/user-attachments/assets/5084fc04-49a7-4b41-94be-b4edb1bef3ce




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

* **New Features**
  * Added Escape key support to dismiss chart highlights

* **Improvements**
* Clear chart selections when clicking outside the menu while preserving
chart interactions
* Time-range filters now apply to the intended column for more accurate
zooms
* Tooltip and highlight rendering refined; reference highlight styling
adapts to dark mode
* Unified chart highlight interactions for more consistent selection and
zoom behavior

<!-- 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/46149?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 -->
 2026-05-20 22:14:05 +07:00
Gildas Garcia 243e079a2c chore: remove _Shadcn_ suffix from Command components (#46153) 
## Problem

The `_Shadcn_` suffix isn't needed anymore on `Command` components

## Solution

- Remove the `_Shadcn_` suffix
- Simplify UI package exports
- Apply prettier

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

## Summary by CodeRabbit

* **Refactor**
* Simplified command component imports and exports across the UI library
by removing internal naming aliases and adopting direct component
references. Updated the public UI package barrel export to use wildcard
re-exports for cleaner API surface.

<!-- 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/46153?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 -->
 2026-05-20 15:45:32 +02:00
Joshen Lim e8af602d2d Joshen/debug 110 default unified logs search to event message (#46134) 
## Context

Adjusts the filter bar component to accept a `freeformDefaultProperty`,
in which entering any text in the filter bar will opt to search against
that property by default. (Property must be defined within the
`filterProperties` prop too)

Applies to unified logs, which for e.g "Event message" is a valid
filter:
<img width="428" height="250" alt="image"
src="https://github.com/user-attachments/assets/a08c015c-c9aa-4985-9e15-6429f455ccf0"
/>

I've set `freeformDefaultProperty` to be `event_message`, and hence
typing free text will opt the default action to just filtering against
that property
<img width="437" height="135" alt="image"
src="https://github.com/user-attachments/assets/ccf6944a-1c5d-4944-acfa-ac82dc20bb10"
/>

### Demo:


https://github.com/user-attachments/assets/287ee22d-f957-48e5-89b0-1fed159cd86a

### Other changes
- Opt to deprecate `truncateText` util from unified logs -> preference
for tailwind instead
- Event message is added as a filter field, but hidden in the side nav
(wouldn't make sense since the content is very dynamic, unlike something
similar like pathname)
- Fixes some console errors in unified logs because we were using
`.getColumn` in `DataTableSheetRowAction`


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

* **New Features**
* Added an "Event message" filter (hidden by default) and set it as the
default target for freeform searches.

* **UI Improvements**
  * Filter sidebar resize constraints tightened.
  * Timeline chart spacing and x-axis tick behavior improved.
* Action labels and command list items no longer truncate long input
values.

* **Bug Fixes**
* More reliable resolution of target columns for row actions, improving
available filter options.

<!-- 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/46134?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 -->
 2026-05-20 20:44:31 +07:00
kemal.earthandJoshen Lim 7e717fb7bc fix(studio): selected status bg colour unified logs (#46152) 
## 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?

Small visual gremlin where the status dot was blending in with the
selected state background colour. See image below.

Appreciate there's probably another PR to go in with the row select
before this goes in.

| Before | After |
|--------|--------|
| <img width="97" height="84" alt="Screenshot 2026-05-20 at 09 34 10"
src="https://github.com/user-attachments/assets/7f21d415-e551-4686-a7e8-a6c7260ecab3"
/> | <img width="173" height="67" alt="Screenshot 2026-05-20 at 12 51
14"
src="https://github.com/user-attachments/assets/439b4c73-bd82-4bca-9d93-69c833da60bc"
/> |




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

* **Style**
* Updated visual styling for successful rows in data tables to use the
selected-row variant, improving highlight consistency for
selected/successful rows.

* **Refactor**
* Standardized row class composition so each table row reliably includes
the base row grouping class alongside any custom row classes from table
metadata, reducing UI regressions and improving 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/46152?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 -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
 2026-05-20 20:42:16 +07:00
Joshen Lim 84484be46d Support multi select logs and add CTA (#45974) 
## Context

Supports selecting log rows and allow to copy / ask assistant for
selected rows, similar to what we had for the old logs UI
Selection will clear whenever the search parameters change

<img width="1448" height="413" alt="image"
src="https://github.com/user-attachments/assets/b81b359c-28c3-48a8-9895-e77327ebd33e"
/>


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

* **New Features**
  * Multi-row selection with an action header showing selected count
  * Copy selected logs as JSON or Markdown from a dropdown
* "Explain with AI" action to open the assistant pre-filled with
selected logs
  * Clear selection button

* **Refactor**
* Row/detail selection now syncs with the URL for shareable views and
improves next/previous navigation and panel behavior

* **Style**
  * Minor visual tweak to column level indicator dot size

<!-- 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/45974)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-05-20 20:03:52 +07:00
Joshen Lim afade92b44 Set default size for filter side bar unified logs (#46132) 
## Context

Width of filter side bar of unified logs was getting defaulted to the
max value because the default value isn't set
<img width="1449" height="646" alt="image"
src="https://github.com/user-attachments/assets/15e336b5-ca0b-43f9-93eb-4c5c52694f4e"
/>


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

## Summary by CodeRabbit

* **Style**
* Improved the filter sidebar's default width initialization to ensure
consistent visual appearance upon loading.

<!-- 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/46132?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 -->
 2026-05-20 18:28:14 +07:00
Gildas Garcia 8577b5fe77 chore: remove <Accordion> _Shadcn_ suffix (#46107) 
## Problem

The `_Shadcn_` suffix isn't needed anymore on Accordion components

## Solution

- Remove the `_Shadcn_` suffix
- Simplify UI package exports
- Apply prettier

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

## Summary by CodeRabbit

* **Refactor**
* Updated accordion component exports and imports to use unified naming
conventions across the codebase, improving consistency for developers
using the UI library.

<!-- 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/46107?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 -->
 2026-05-19 17:04:00 +02:00
Joshen LimandGildas Garcia 7728bfae1d Joshen/debug 97 use the same filter bar in unified logs and table editor (#46071) 
## Context

Swaps out (and deprecates) the unified logs's own filter bar, for our
existing design system's filter bar
<img width="1450" height="355" alt="image"
src="https://github.com/user-attachments/assets/c5e83bd1-4e67-4bb5-8f27-a3d9beacbbb5"
/>

Other changes involved for the FilterBar itself includes the following
(more details in subsequent sections)
- Add `onApply` param for `FilterBar` that will only trigger when an
entered filter is "complete" (e.g on enter or blur)
- Automatically select the operator if only one exists

## To test
- Verify that the filter bar in general works BUT note there's some odd
behaviour when searching on say the "status" column (more details under
known issues)
- likely something with the internal SQL i think, will need to
investigate separately
  - afaict testing on the method seems to be working at least

---

### Add `onApply` parameter for `FilterBar`
The search behaviour for the filter bar feels a bit awkward atm -
referencing the table editor:
- selecting the column triggers a search, which returns an error cause
the search query is incorrect (operator and value not selected yet)
- when typing the search value (after selecting the column + operator),
the search triggers on debounce, which feels odd in this context as I'd
expect the search to only trigger when i've hit enter (e.g to "finalize"
my search parameters)
- Am adding an `onApply` parameter gets called when a filter is
"complete" -> column, operator, and value are finalized (e.g via Enter
or onBlur)
- Updated both Unified logs and table editor to use this behaviour

### Automatically select operator if only one exists in `FilterBar`
This one's more specific to unified logs since there's only an `=`
operator - but saves an unnecessary "enter" key event when filtering in
unified logs

### Known issues
- For some reason (even with the existing filter bar) - searching
against status for e.g for postgres logs doesnt return the expected
rows. e.g i've got rows with status as `00000`, but searching for
`00000` doesnt return anything. Suspect its something to do with the SQL
we're firing?
<img width="1167" height="271" alt="image"
src="https://github.com/user-attachments/assets/1dde74cf-8366-4cf1-8d8f-6907ba2473f6"
/>
<img width="1184" height="453" alt="image"
src="https://github.com/user-attachments/assets/bf55f0fb-cb27-4e8f-b2d9-cd913d6ac6b9"
/>


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

* **New Features**
* Added a dedicated Logs filter bar with an explicit "apply"/commit
callback for filter UI.

* **Bug Fixes**
* Filter edits are buffered locally and only committed on apply to
prevent aggressive data requests.

* **Refactor**
* Replaced legacy command-style table filter UI and removed related
utilities.
* Updated filter commit lifecycle and narrowed option value typing;
adjusted top-level provider ordering.

* **Style**
* Small layout and trigger behavior tweaks for filter controls, timeline
chart spacing, and download button.

<!-- 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/46071?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 -->

---------

Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
 2026-05-19 21:03:02 +07:00
Joshen Lim fac7bbbf21 Surface errors from logs.all.otel endpoint (#46094) 
## Context

If an error somehow occurs on the logs.all.otel endpoint for unified
logs, the network request still returns a 200 but the error is then
returned in the response as such:
<img width="681" height="269" alt="image"
src="https://github.com/user-attachments/assets/62bcf68f-8a8c-46a0-a91a-17f653004fa0"
/>

In which case, there's currently no UI error handling in unified logs,
and it'll just show no results. Changes in this PR addresses that:
<img width="1450" height="956" alt="image"
src="https://github.com/user-attachments/assets/1b2c166b-d3d1-4923-9e35-51bad99b6e1c"
/>


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

## Summary by CodeRabbit

* **Bug Fixes**
* Enhanced error handling and messaging for log retrieval—displays
explicit error notifications when queries fail instead of misleading
empty state messages, improving user experience and clarity during
troubleshooting.

<!-- 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/46094?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 -->
 2026-05-19 16:12:02 +07:00
Gildas Garcia 50e158bddb fix: improve loading state when changing log filters in unified logs (#46070) 
## Problem

When changing filters, while the query is running the loading state is
not clear, its only shown in the "Load more" button at the bottom which
can be missed if you got a lot of logs, we should improve the filters
loading state.

That's actually due to two things:
- we rely on the `isLoading` state instead of `isFetching`
- we debounce filters changes by a second

## Solution

- use `isFetching` to determine whether to display the loading spinner
in the top filter bar
- reduce the debounce delay to `250ms` as users can't filter by typing
anyway (what they type must be validated with Enter to select a filter,
no fuzzy filtering)

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

## Summary by CodeRabbit

* **Performance**
* Optimized unified logs filter response time, applying filter changes
more quickly.

* **Bug Fixes**
* Enhanced loading indicator behavior in data tables to accurately
reflect active data fetching operations, providing clearer visual
feedback during interactions.

<!-- 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/46070?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 -->
 2026-05-18 16:34:16 +02:00
Gildas Garcia 573b165cd2 fix: unified logs time range active filter has invalid applid filter count (#46060) 
## Problem

After selecting a time range filter value, users see that `2` filters
are applied which is technically correct (begin/end of the time range)
but weird as you have only one filter made of two values.

## Solution

~~Not great, but check the filter column id and display `1` if it is the
_Date_ column~~
Better: rely on column definition metadata

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

* **Bug Fixes**
* Fixed data table filter reset button display for date columns:
date-based filters now show a consistent single indicator, while other
columns continue to display their actual filter counts.

<!-- 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/46060?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 -->
 2026-05-18 15:35:37 +02:00
Joshen Lim b7312ad40a Fix method toggle column in unified logs (#45965) 
## Context

Addresses the toggling of column visibility not working for dynamic
columns (e.g method, status, and event_message)
<img width="293" height="262" alt="image"
src="https://github.com/user-attachments/assets/c404c063-d6b2-49bf-86ec-bf91f7e35bd2"
/>

The main problem was actually just because of this in `UnifiedLogs.tsx`:
<img width="569" height="165" alt="image"
src="https://github.com/user-attachments/assets/5ae7be01-a7d6-4f64-99ad-87886dbf75f9"
/>

`dynamicColumnVisibility` is a fixed value determined by which columns
are dynamic from the log data (as the default value)
`columnVisibility` is a dynamic value that we're retrieving and updating
with local storage

just need to shift `dynamicColumnVisibility` to be before
`columnVisibility` so that `columnVisibility` can override the values
correctly from local storage

### Other changes

Other resolves DEBUG-102, adds a border top to the table to better
visually anchor the side panel
<img width="1157" height="301" alt="image"
src="https://github.com/user-attachments/assets/c0b7a90c-0ccb-4b65-8299-a8380e2a76fa"
/>

## To test
- [ ] Verify that the toggles work for method, pathname and
event_message

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

* **Bug Fixes**
  * Adjusted date column width in logs view for improved readability.
* Updated column visibility handling so the intended columns display
consistently.

* **UI Improvements**
* Added a top border to the main logs panel for clearer visual
separation.

<!-- 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/45965?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 -->
 2026-05-18 15:17:00 +07:00
Joshen Lim 179f00cceb Fix duplicate empty state in unified logs (#45969) 
## Before
<img width="2280" height="1564" alt="image"
src="https://github.com/user-attachments/assets/08d91834-a188-4b09-b266-d9d4b7c88959"
/>

## After
Also centralized the empty state
<img width="1448" height="960" alt="image"
src="https://github.com/user-attachments/assets/3ee1d386-b98e-49ee-b8ea-6a1c6b4359ab"
/>


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

## Summary by CodeRabbit

* **Bug Fixes**
  * Improved infinite scroll data table display when loading or empty
* "No more data to load" message now appears only when data exists,
reducing redundant messaging
* Refined table styling for better visual presentation during different
states

<!-- 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/45969)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-05-18 10:30:00 +07:00
Gildas Garcia 8c6d5036ea chore: remove <Label> _Shadcn_ suffix (#45986) 
## Problem

The `_Shadcn_` suffix isn't needed anymore on label component

## Solution

Remove it. No other changes

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

* **Refactor**
* Standardized Label usage across the codebase by removing the legacy
alias and using the direct Label export from the UI package
consistently.
* **Documentation**
* Updated component examples and docs to use the standardized Label
component in usage snippets and demos.

<!-- 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/45986)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-05-15 15:55:33 +02:00
Gildas Garcia d0fd4478c0 chore: migrate Popover usages to Shadcn components (#45980) 
## Problem

We have multiple Popover components

## Solution

- [x] migrate Popover usages to Shadcn components
- Migrated JSON and text editor in the `TableEditor` (inline row
edition)
  - Migrated the template popover in the logs explorer templates page
- [x] remove `_Shadcn_` suffix from Popover components (renaming +
prettier)

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

* **Refactor**
* Unified popover implementation across the app and design system;
dropdowns, calendars, menus and tooltips now use a consistent popover
API with no visual or interaction changes.

* **Chores**
* Minor prop typing update for the logs date-picker to align with the
consolidated popover content type.

<!-- 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/45980)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-05-15 15:20:28 +02:00
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