## 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 small bug that was causing the overflow of chart table footers to
break on smaller viewports. Now fixed along with cell horizontal
spacing.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Improvements**
* Enhanced table layouts in the Reports section by enabling horizontal
scrolling for API Routes and Cache Misses tables, ensuring all data is
visible on various screen sizes.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45885)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
We have multiple `Collapsible` components.
## Solution
Reduce their number by using only the one from shadcn.
I haven't noticed any visual nor functional changes.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Migrated expandable/collapsible UI to a unified shadcn-based
implementation for more consistent expand/collapse behavior across the
app.
* **Style**
* Updated listbox check icon sizing and removed obsolete collapsible
open/close animations.
* **Chores**
* Removed deprecated collapsible variants and consolidated UI component
surface for simpler maintenance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
The dashboard's timezone picker (#45517) propagates to log timestamps
and the shared TimestampInfo component, but observability and reports
charts still render their X-axis labels, range labels, and tooltip
headers in the browser's local timezone. The result is jarring once a
user picks a non-local timezone: hover a chart and you get one tz, hover
a log row and you get another.
## Fix
Routes all display-side timestamp formatting in the chart layer through
the existing picker-aware helpers (\`useFormatDateTime\` /
\`formatDateTime\`) so chart UI matches the rest of the dashboard.
- **ComposedChart.utils** \`CustomTooltip\` (the hotspot — drives every
observability dashboard tooltip): reads the active timezone via
\`useTimezone\` for both the header label and the formatted timestamp.
- **AreaChart** / **BarChart**: introduce a \`formatChartDate\` helper
that honours each component's existing \`displayDateInUtc\` prop,
otherwise routes through the picker.
- **ChartBlock**: the two recharts \`labelFormatter\` arrows now close
over \`useFormatDateTime\`.
- **ChartHighlightActions**: range labels in the zoom dropdown migrated
to the same hook.
Intentionally untouched (must stay UTC):
- \`ChartHandler\` / \`ChartBlock\` \`startDate\`/\`endDate\` (API range
params, day boundary).
- \`ChartBlock.tsx:166\` explicit \`.utc()\` data-key normalisation.
- \`useFillTimeseriesSorted\` and friends (range math, no display).
## How to test
- Sign in. Open the avatar dropdown, pick a timezone different from your
browser local (e.g. Asia/Tokyo).
- Visit any project, then \`/project/<ref>/reports/database\` (or any
\`/observability/...\` page).
- Hover any chart series — the tooltip header should display the chosen
IANA name and times in that timezone.
- Click-drag a range on a chart to open the zoom dropdown — start/end
labels in the menu should also be in the chosen timezone.
- Switch back to "Auto detect" and confirm everything reverts to
browser-local.
- For an AreaChart/BarChart that uses \`displayDateInUtc\` (e.g. some
legacy reports), confirm those still render in UTC regardless of picker.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Standardized date/time formatting across charts, tooltips, axis
labels, header/footer labels, and highlight range labels in Reports and
chart components.
* Switched to a shared, timezone-aware formatter that respects UTC
display mode or the selected picker/timezone, ensuring consistent,
human-readable timestamps throughout the UI.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Mark provenance of SQL via the branded types SafeSqlFragment and
UntrustedSqlFragment. Only SafeSqlFragment should be executed;
UntrustedSqlFragments require some kind of implicit user approval (show
on screen + user has to click something) before they are promoted to
SafeSqlFragment.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Editor and RLS tester show loading states for inferred/generated SQL
and include a dedicated user SQL editor for safer edits.
* **Refactor**
* Platform-wide SQL handling tightened: snippets and AI-generated SQL
are treated as untrusted/display-only until promoted, improving safety
and consistency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
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>
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.
#45232 reintroduced an unused variable
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Cleaned up unused code dependencies to improve code quality and
maintainability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
We used to have a `_Shadcn_` suffix for all the shadcn form components
because we also had `formik` form components.
This is not needed anymore.
## Solution
- Remove the suffix
- Update all usages
## 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 -->
## Problem
The Report Blocks section (custom dashboards) has four visual and UX
bugs: tooltip content overflows its container, Y-axis labels with 5+
digits get clipped (e.g. `10000` renders as `0000`), action buttons
become unreachable when a block title is long, and scrolling inside a
scrollable block also scrolls the parent page.
## Fix
- Remove the fixed `w-[200px]` class from `ChartTooltipContent` in
`ChartBlock` so tooltips auto-size to their content instead of
overflowing.
- Compute a dynamic Y-axis width in `ChartBlock` based on the string
length of the maximum data value, replacing the `undefined` default that
caused clipping.
- Add `min-w-0` to the label container and `shrink-0` to the actions
container in `ReportBlockContainer` so the truncation works correctly
and action buttons are never pushed off-screen.
- Add `overscroll-contain` to the scrollable SQL code and results table
divs in `QueryBlock` to stop scroll events from propagating to the page.
## How to test
- Navigate to a custom Report with multiple blocks
- Hover over a chart bar on a block with a long metric name. The tooltip
should be fully visible with no text overflow.
- Find or create a block whose Y-axis values exceed 9999 (e.g. disk
IOPS). The full number should appear on the Y-axis without any leading
digits being clipped.
- Use a block on a read replica so the label appends "of replica",
making it long. The chart-type toggle, log scale toggle, and remove
buttons should all remain visible and clickable.
- Add a SQL snippet block that returns a large table of results. Scroll
within the results table. The page should not scroll while the inner
table is scrolling.
## Before
<img width="1166" height="680" alt="CleanShot 2026-04-07 at 15 36 45@2x"
src="https://github.com/user-attachments/assets/8e7bd3c9-8319-47c9-b2d9-b194d2803809"
/>
## After
<img width="1166" height="680" alt="CleanShot 2026-04-07 at 15 36 15@2x"
src="https://github.com/user-attachments/assets/6ca5873a-cd09-4001-9cd0-932c12b6536e"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* More consistent Y-axis sizing with dynamic widths for better label
fit.
* Improved Y-axis number formatting (K/M suffixes, sensible decimals)
for clearer tick labels.
* Simplified, more flexible chart tooltips (min-width applied; removed
fixed widths).
* Tighter report header layout so labels truncate predictably and
actions keep their size.
* Added overscroll containment to query results and SQL view to reduce
unwanted scrolling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
## Summary
- Adds `min-w-0` to the flex container holding the report block label in
`ReportBlockContainer`, so CSS truncation works correctly and the Remove
button stays visible even with long report names.
## Test plan
- [x] Create a report with a very long name on the Project Overview page
- [x] Verify the Remove (X) button remains visible without needing to
zoom out
- [x] Verify the report name truncates with an ellipsis
Fixes FE-2944
## Demo
<img width="938" height="390" alt="image"
src="https://github.com/user-attachments/assets/17419035-b03d-4f61-a324-8e446685a109"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved text truncation in report block titles to prevent layout
overflow in narrow containers.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
- observability report modals still uses `formik` and we want to remove
it in favour of `react-hook-form` to keep only one form library
## Solution
- Migrate to `react-hook-form`
## Problem
The Query Performance page loaded all results in a single query with a
fixed limit of 20 rows, giving users no way to browse beyond the first
page. There was also no way to control how many rows were shown at once.
## Fix
adds pagination
## How to test
- Navigate to `/observability/query-performance` in Studio
- scroll to bottom
- should automatically load more results
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
## Context
Adds a source filter for the query performance advisor so you can filter
out queries from the dashboard, or not from the dashboard
<img width="309" height="217" alt="image"
src="https://github.com/user-attachments/assets/c1fab9af-e57e-482f-afdb-d77a6600edb3"
/>
For transparency how this works:
- Queries fired via the dashboard through the /query endpoint get
enriched with metadata from the API to include a comment like `--
source: dashboard`
- That's mainly how this filter works atm, to check if this comment
exists if the source "Dashboard" is selected, and the inverse if the
source "Non dashboard" is selected
## Changes
- Replaces plan ID-based chart gating with entitlement-based checks
across all observability pages (database, auth, realtime,
edge-functions)
- Adds requiredPlan display field so the upsell shows the correct target
plan (e.g. "Upgrade to Team" for disk throughput, not just "Upgrade")
- Decouples database-charts.ts from Organization Plan, now accepts
pre-computed entitlement flags instead
### Note on `requiredPlan`
The entitlement system currently tells us whether a user has access, but
not what plan they need to get access. `requiredPlan` is a frontend-only
display hint. Ideally the backend entitlement response would include a
minimumPlan field so we can remove this hardcoded mapping. For now, this
is a pragmatic workaround to avoid misleading upsell copy (e.g. a Free
user seeing "Upgrade" for a Team-only feature and landing on Pro).
## Testing
### Database
- Head to `/project/_/observability/database` with an Org on the Free
Plan and assert that the Disk throughput is gated.
<img width="1402" height="682" alt="image"
src="https://github.com/user-attachments/assets/b783d866-774d-44dc-88d1-797d26502f02"
/>
### Auth
- Head to `/project/_/observability/auth` with an Org on the Free Plan
and assert that the following metrics are gated:
<img width="1402" height="682" alt="image"
src="https://github.com/user-attachments/assets/cb062dd7-5864-4e40-a11f-ad6be1f7fd41"
/>
### Edge Functions
- Head to `/project/_/observability/edge-functions` with an Org on the
Free Plan and assert that the following metrics are gated:
<img width="1402" height="320" alt="image"
src="https://github.com/user-attachments/assets/517b5483-4575-493c-9401-2c67ac9e684c"
/>
### Realtime
- Head to `/project/_/observability/realtime` with an Org on the Free
Plan and assert that the following metrics are gated:
<img width="1402" height="722" alt="image"
src="https://github.com/user-attachments/assets/0c2757a2-8482-43f4-a65c-c0dde3d878c7"
/>
## Problem
When editing email templates or edge functions, users may navigate away
from the page without a warning indicating they may loose their changes.
This is because we only handle the `beforeunload` event when we should
also handle NextJS routing events.
This is actually done for the observability reports.
## Solution
Extract the logic from the observability reports into a reusable
component and use it where needed
## How to test
On staging, for each case:
- Authentication email templates
- Observability reports
- Edge functions creation
- Edge functions edition
Test:
- Modify the template/report/function
- Navigate away using either the sidebar link, the browser back button
or closing the tab
- Cancel navigation in the confirmation dialog
- Navigation should be prevented and you should not loose your changes
Test:
- Modify the template/report/function
- Navigate away using either the sidebar link, the browser back button
or closing the tab
- Confirm navigation in the confirmation dialog
- Navigation should not be prevented and you should have lost your
changes
- Filter out never-run queries early: previously the queries didn't
check if a statement had ever actually been executed, so PostgreSQL
would process and return those useless rows. Adding WHERE calls > 0
skips
them upfront.
- Replace window functions with a pre-computed total: two queries were
using a SQL window function to calculate the "% of total time" column,
which forces PostgreSQL to load every single row into memory before
returning results. Replaced with a small CTE that computes the total
once separately, so PostgreSQL can apply the row limit without buffering
everything first. This was the main cause of page crashes on databases
with a large query history.
- slowQueriesCount bug fix: added missing as statements alias
- queryMetrics WHERE clause fix: ${where} was producing WHERE ... WHERE
..., now uses .replace(/^WHERE/, 'AND')
- Deleted SQL Snippets leave a hanging block that loads forever in
custom reports, and its not possible to delete them.
- Now you can delete blocks if they get stuck loading
- Also shows correct error state when a block couldn't load because the
sql snippet was removed
## before
- stuck forever
<img width="1296" height="936" alt="CleanShot 2026-02-26 at 13 23 25@2x"
src="https://github.com/user-attachments/assets/bb65cc5f-c2a4-4027-876e-db9682ec6f3c"
/>
## after
- show error state
- allow user to delete snippet
<img width="1388" height="862" alt="CleanShot 2026-02-26 at 13 23 45@2x"
src="https://github.com/user-attachments/assets/c5d6c114-071b-4e4d-a913-25b3c788db95"
/>
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
- adds option to create snippets from inline sql editor
- removes the date range from the header, its noisy
## to test
- go to custom report
- add block → snippets → add snippet
- create a new snippet in the inline SQL Editor
- back to add block → snippets → select your snippet
- your snippet should show in the report
- now try updating the snippet in the inline SQL Editor
- the chart/block should auto update
- amazing!
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Safer error rendering across analytics and reporting with a fallback
"Unknown error".
* **Tests**
* Added unit tests covering timeseries sorting and timestamp validation.
* **Refactor**
* Standardized timeseries hook and all callers to accept a single
options object and improved nullish handling.
* **New Features**
* Exposed timeseries utilities and explicit options/result types;
exported chart data type.
* **Chores**
* Relaxed index signatures to allow dynamic metric keys.
<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
* query perf improvements
* info tooltips
* filter fixes
* prettier wont work in cursor for some reason
* fix type error
* rm clear all filters button, its too much
* prettier
* Popover ui component to use portal by default, remove all manual declaration of portal for PopoverContent in dashboard
* Forgot to add ui changes lol
* Clean uop
* Add shimmering-loader CSS to ui-patterns.
* Import the shimmering-loader classes from the ui-patterns component.
* Remove ShimmeringLoader from studio.
* Migrate studio to use ui-patterns/ShimmeringLoader.
* Migrate away from using default import for ShimmeringLoader.
* Fix the css imports in docs and studio.
* Add a generateDeterministicUuid function and tests for it.
* Use the new function and generate an id automatically when creating a snippet.
* Clean up extra code.
* Don't pass in id when creating a snippet.
* Add generateSnippetTitle function and use it instead of fixed string.
* When SQL editor is open, generate an id form a generated snippet title.
* Add id override for SQL editor to avoid flash when saving the snippet.
* Merge the two generate functions to happen in the same useMemo block.
* Save the snippet to the API when adding it.
* Minor fixes from CodeRabbit review.
* Hide new folder CTA in sql editor for self-hosted
* Don't add the snippet for saving, just set the value.
* UpsertContentPayload always has an id.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* 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.
* refactor: infra queries to use `attributes`
This PR refactors the infrastructure monitoring query code reducing duplication and unifying the API request to always be `attributes`:
• Removed the separate useInfraMonitoringQuery hook and getInfraMonitoring function that handled a single monitoring query
• Consolidated all infrastructure monitoring queries into a unified useInfraMonitoringAttributesQuery hook that handles multi-attribute requests
• Moved interval selection logic from the query layer to the consumer (InfrastructureActivity.tsx), where it can be computed dynamically based on user-selected date ranges
• Simplified query types by removing intermediate InfraMonitoringData and InfraMonitoringVariables types
• Interval is now computed in the component (defaults to 1d, switches to 1h for date ranges ≤48 hours) rather than hardcoded in the query layer
• All queries now use the unified multi-attribute endpoint with explicit parameter passing
* fix: handle single-attribute response format
* fix: realtime report refresh
* feat: add createRefreshHandler hook
* feat: add new refresh for storage
* feat: add new refresh for postgrest
* feat: add new refresh for edge functions
* fix: rename postgrest to data api
* feat: add db auth and api overview refresh
* fix: db refresh handler for time
* chore: change from or to nullish where required
* chore: db refresh func becomes flatmap
* chore: memoize helper function for report refresh
* chore: remove unused lines from realtime
* fix: be a bit more verbose apparently
* chore: remove unused imports
* 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>
Vaibhav
