Commit Graph
3 Commits
Author SHA1 Message Date
Gildas Garcia e144628515 fix: studio observability sticky nav background is wrong (#47574)
## Problem
Only in dark mode

<img width="1003" height="324" alt="image"
src="https://github.com/user-attachments/assets/e131fd07-1327-4a0b-bb27-eccf1f5d7f93"
/>

## Solution
<img width="943" height="230" alt="image"
src="https://github.com/user-attachments/assets/bcbee6e6-d303-45c6-b612-eb0f0423d458"
/>
2026-07-03 14:09:38 +00:00
Miranda Limonczenko 5fc0c86007 feat(studio) Link observability pages to relevant docs (#47351)
Closes DOCS-488

<img width="1266" height="353" alt="Screenshot 2026-06-26 at 11 02
57 AM"
src="https://github.com/user-attachments/assets/67b5d47b-249e-4e53-9230-2bbcb7f037b7"
/>


## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## Problem

We have helpful documentation that delves into each observability
metric, but it is not easily findable in the moment it is needed while
viewing the dashboards.

## Solution

Solution includes:
- Add a docs link in Studio in every relevant place with the
`DocsButton` component
- Add aria-hidden on the `DocsButton` icon
- An added `constants.ts` to see all of the docs links in one place
- A contextual aria-label for the docs so that screenreader users know
where they're going


| Page | Docs link |
|------|-----------|
| Overview | `/guides/telemetry/reports` |
| Query Performance / Query Insights |
`/guides/platform/performance#examining-query-performance` |
| API Gateway | `/guides/telemetry/reports#api-gateway` |
| Database | `/guides/telemetry/reports#database` |
| Data API | `/guides/telemetry/reports#postgrest` |
| Auth | `/guides/telemetry/reports#auth` |
| Edge Functions | `/guides/telemetry/reports#edge-functions` |
| Storage | `/guides/telemetry/reports#storage` |
| Realtime | `/guides/realtime/reports` |
| Custom reports | `/guides/telemetry/reports#using-reports` |

Query Performance and Query Insights already had the button in their
custom headers. They now use the shared constants.

## Tophatting

1. Go to a project `/observability`.
2. Click into each of the panels and see a **Docs** link in the top
right.

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

## Summary by CodeRabbit

* **New Features**
* Added direct documentation links across observability report pages,
making it easier to open relevant help content from each view.
* Added clearer, page-specific labels for observability headers and docs
links.
* **Bug Fixes**
* Improved accessibility for icon buttons so icons are hidden from
assistive technologies while button labels remain clear.
* Adjusted report navigation layouts to keep controls aligned with the
new docs buttons.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-06-26 12:11:19 -07:00
Francesco Sansalvadore a78026dc73 Chore/uniform reports daterange picker (#36989)
* sync date range picker across reports
* sync report daterange pickers across reports using nuqs
2025-07-10 12:35:20 +02:00