Commit Graph
6 Commits
Author SHA1 Message Date
fb4c3ec6d4 feat(studio): add dev toolbar launcher to account settings menu (#49285)
## What kind of change does this PR introduce?

Feature

## What is the current behavior?

The dev toolbar is only discoverable via `window.devToolbar()` in the
browser console, or by having your email on the `devToolbarDefaultOn`
ConfigCat flag. Once enabled, Studio shows a floating trigger button.

## What is the new behavior?

In local and staging Studio, the account/settings dropdown (avatar menu)
includes a **Local tools** section above **Theme** with a **Dev
toolbar** checkbox toggle.

- **On**: shows the floating orb (persists via localStorage, same as
`window.devToolbar()`)
- **Off**: hides the orb and dismisses the toolbar

Open the panel itself via the orb once it is visible. Production builds
are unchanged (`isAvailable` is false and the menu item is hidden).

| After |
| --- |
| <img width="226" height="204" alt="CleanShot 2026-08-20 at 12 46
38@2x"
src="https://github.com/user-attachments/assets/c846b119-626d-48f5-9a02-aef4d006326c"
/> |
| <img width="558" height="1024" alt="CleanShot 2026-08-20 at 12 47
04@2x"
src="https://github.com/user-attachments/assets/4b3dd22b-537b-4874-821d-c202033c4ad7"
/> |

## Manual testing

Run `pnpm dev:studio` and open http://localhost:8082.

1. **Find the entry point:** top-right avatar/settings menu → **Local
tools** → **Dev toolbar** (above **Theme**). Should not appear in
production builds.
2. **Turn it on:** check **Dev toolbar**. A green floating orb should
appear (default bottom-right).
3. **Open the panel:** click the orb. The **Dev Toolbar** sheet should
open with Events and Flags tabs.
4. **Event count:** navigate around Studio (e.g. open a project, switch
pages). The orb badge should increment and stay readable in light and
dark mode.
5. **Turn it off:** reopen the avatar menu and uncheck **Dev toolbar**.
The orb and panel should disappear.
6. **Close vs hide:** with the toolbar on, open the sheet and use
**Close** (X). The orb should remain; only the sheet closes.

Optional: confirm `window.devToolbar()` in the browser console still
enables the orb.

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

* **New Features**
* Added a Local tools option to enable the development toolbar when
available.
* Toolbar activation and dismissal preferences now persist between
sessions.
* Added clearer event-count badges with responsive sizing for larger
counts.

* **Improvements**
  * Simplified toolbar controls by removing the separate hide option.
* Improved toolbar availability handling across local and production
environments.

* **Tests**
* Expanded coverage for activation, persistence, visibility, and
event-count badges.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Danny White <dnywh@users.noreply.github.com>
Co-authored-by: Sean Oliver <882952+seanoliver@users.noreply.github.com>
2026-08-21 10:53:50 +10:00
Danny White 6f6badae51 fix(eslint): promote require-explicit-tabindex to error (#48170)
## What kind of change does this PR introduce?

Accessibility / lint hardening (Safari keyboard focus).

## What is the current behavior?

`supabase/require-explicit-tabindex` is `'warn'`. Studio’s ratchet was
at 0 but the rule was still ratcheted; www / docs / design-system still
had raw `<button>` / `role="button"` call sites without an explicit
`tabIndex`.

[DEPR-627](https://linear.app/supabase/issue/DEPR-627) · follow-up to
#47984 / #48040

## What is the new behavior?

- Shared config: `'supabase/require-explicit-tabindex': 'error'`
- Swept www / docs / design-system (+ Studio test fixtures the ratchet
skipped)
- Removed the rule from the Studio ratchet + baselines

## To test

Prefer **Safari**. This PR only adds explicit `tabIndex` to raw
`<button>` / `role="button"` call sites — not links, and not controls
that already go through `Button` from `ui`.

### Marketing (`www`) ([staging
link](https://zone-www-dot-com-git-danny-depr-627-promote-req-7ae43c-supabase.vercel.app/))

- [x] Homepage frameworks / dashboard feature tabs — Tab through each
tab button
- [x] Product pages (e.g. `/auth`, `/database`) — section tab switchers
- [x] Narrow viewport — open the hamburger; Tab through menu buttons
- [x] `/partners/catalog` — filter / view controls
- [x] Blog view toggle (list ↔ grid)

### Docs ([staging
link](https://docs-git-danny-depr-627-promote-require-explici-25e46d-supabase.vercel.app/))

- [x] **Desktop (≥ lg):** top-right **⋯ menu** (hamburger icon) — opens
a dropdown that includes Theme. Not a separate theme button.
- [x] **Mobile (< lg):** top-right **hamburger** opens the sheet; close
(X) is the raw button we tagged. Theme inside the sheet uses
`ThemeToggle` / `DropdownMenuTrigger` from `ui` (already supposed to set
`tabIndex`).
- [x] **Code blocks** — copy / language controls
- [x] **Is this helpful?** — X / check are `Button` from `ui` (should
already Tab). After voting **while signed in**, the follow-up “What went
well?” / “How can we improve?” text button is the raw one we tagged.
- [x] **AI Tools → Copy as Markdown** (right rail on a guide) — this is
the only GuidesSidebar control this PR changed. “On this page” TOC items
are **links**, not covered by this lint.
- [x] **Reference docs** (e.g. JS client reference) — section headers
that expand/collapse in the left nav (`Collapsible.Trigger`)
- [x] **Troubleshooting index** — type in the search field, then Tab to
the **clear (X)** control

### Dashboard (`studio`)

No production UI changes in this PR (tests + lint config only). Quick
Safari smoke that prior tabindex work still holds:

- [x] Project sidebar — Tab through primary nav links
- [x] Settings → General — Tab through inputs / buttons
- [x] Storage → Files — Tab a bucket row / file actions
2026-07-23 05:21:15 +10:00
Mert YEREKAPAN da81b2f14d feat(studio): add click tracking for top bar buttons (#45414)
## Summary

Adds PostHog click/open tracking for every interactive element in the
Studio top bar. Previously only 5 of ~16 surfaces were tracked.

### New events (16)

| Event | Surface |
|---|---|
| `home_logo_clicked` | Supabase logo |
| `header_back_to_dashboard_clicked` | Mobile back chevron |
| `header_exceeding_usage_badge_clicked` | "Exceeding usage limits"
badge |
| `organization_dropdown_opened` | Org dropdown trigger |
| `project_dropdown_opened` | Project dropdown trigger |
| `branch_dropdown_opened` | Branch dropdown trigger |
| `merge_request_button_clicked` | MR trigger (separate from existing
success event) |
| `connect_button_clicked` | Connect CTA |
| `feedback_dropdown_opened` | Feedback dropdown trigger |
| `advisor_button_clicked` | Advisor toggle |
| `inline_editor_button_clicked` | SQL editor toggle |
| `assistant_button_clicked` | AI Assistant toggle |
| `user_dropdown_opened` | Account dropdown |
| `local_dropdown_opened` | Local-dev settings dropdown |
| `local_version_popover_opened` | CLI version popover |

### Notes
- Uses `useTrack` (per `telemetry-standards`), all event names use
approved `_clicked` / `_opened` verbs.
- Dropdown `onOpenChange` handlers guard against Radix's double-fire by
only tracking when `open === true`.
- `merge_request_button_clicked` fires on the trigger click; the
existing `branch_create_merge_request_button_clicked` continues to fire
on successful MR creation.
- Pre-existing tracked surfaces (`command_menu_opened`,
`help_button_clicked`, `header_upgrade_cta_clicked`,
`send_feedback_button_clicked`) are unchanged.

## Test plan

- [x] Spot-check each event fires once per interaction in PostHog Live
Events
- [x] Verify no double-fire on dropdown close

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

* **Chores**
* Added telemetry tracking for many header/navigation interactions
(logo, back-to-dashboard, usage badge,
connect/merge/advisor/assistant/inline-editor buttons, and multiple
dropdowns/popovers).
* **Tests**
* Updated tests to stub telemetry calls so UI tests remain stable and
deterministic.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-05 16:12:51 +00:00
Charis 205cbe7d26 chore(studio}: enforce import order, remove bare import specifiers (#44585) 2026-04-07 20:34:10 -04:00
Ali Waseem a2863ee05f chore: updated UI tests (#44576)
## 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?

Missing mock made the pipeline fail 😢 

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

## Summary by CodeRabbit

* **Tests**
* Extended test mock infrastructure to support additional component
composition patterns.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-06 14:25:56 +00:00
6be596ea34 feat: add user preference to enable queue operations (#44366)
## 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?

- Remove queue operations from feature preview into settings
- Refactor dashboard settings 
- Resolves DEPR-434

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

* **New Features**
* Dashboard settings panel in Account preferences with toggles for
Inline Editor and Queue Operations; “Dashboard” added to project
Configuration.

* **Removed**
* Old Inline Editor settings UI and the Queue Operations feature-preview
UI removed.

* **Refactor**
* Consolidated dashboard preferences into a single settings surface;
banners and actions now navigate to preferences; account/preferences
layouts and back-navigation behavior adjusted for platform vs
self-hosted.

* **Tests**
* Added tests for settings UI, menu generation, redirects, and
local-storage.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
2026-04-06 13:52:53 +00:00