Commit Graph

19 Commits

Author SHA1 Message Date
ChloeGarciaMillerand
2c48c6a002 fix: improve accessibility for icon buttons in LayoutHeader (#45790)
## 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?

Bug fix (accessibility improvement in LayoutHeader)

## What is the current behavior?

Icon-only buttons do not have explicit accessible names for screen
readers.

## What is the new behavior?

All icon-only buttons now have explicit accessible names using visually
hidden text (sr-only), ensuring proper screen reader support.

## Additional context

Tooltip text is preserved for visual users.
No visual changes were introduced.


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

* **Accessibility**
* Added hidden screen-reader labels to multiple toolbar and menu buttons
(Settings, Advisor Center, AI Assistant, SQL Editor, Help) so icons are
announced by assistive technologies, improving navigation and
discoverability across the studio interface.

[![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/45790)
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
2026-05-11 17:30:16 +02: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
Ali Waseem
e8df67d5d5 chore: migrate shortcuts to new hooks API (#44955)
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Cleanup shortcuts with new hooks

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

* **Refactor**
* Centralized keyboard shortcut system for consistent shortcut behavior
across the app and moved preference toggles to a unified registry.

* **New Features**
* Added explicit shortcuts for Command Menu, AI Assistant, Inline
Editor, and result copy/download actions.
* Hotkey preferences UI now renders dynamically from the centralized
shortcut list.

* **Tests**
* Test helpers updated to include the command menu provider for accurate
shortcut behavior in tests.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-17 10:02:56 -06:00
Charis
4a0bb36ca8 style: require sorted imports in studio/components (#44408)
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-04-01 10:22:37 +02:00
Francesco Sansalvadore
ddd1dbc09f Studio: add CommandMenu trigger in top nav (#40011)
* add CommandMenuTriggerInput in top nav in studio
* uniform command trigger in top nav
2025-11-10 11:43:50 +01:00
Saxon Fletcher
d10001b7a7 Advisor sidebar manager (#39889)
* sidebar-manager

* storage keys

* tests

* more ai spots

* test fix

* revert to default

* remove ref

* Update apps/studio/state/sidebar-manager-state.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* fix ts

* fix

* fux

* fux query param

* clean

* fix

* more

* mock local storage

* simplify

* remove provider test

* remve useopensidebar

* fix(new homepage): open ai assistant on advisor card button clicks

* Update apps/studio/components/layouts/ProjectLayout/LayoutSidebar/index.tsx

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* Update apps/studio/state/sidebar-manager-state.tsx

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* refine

* editor sidebar manager

* reset results

* advisor sidebar manager

* empty state and notice

* event tracking

* remove variable

* remove use effect

* open in sidebar

* use sidebar old home

* Update apps/studio/components/ui/EditorPanel/EditorPanel.tsx

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* connect hotkey

* Update apps/studio/components/layouts/AppLayout/AssistantButton.tsx

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* Update apps/studio/state/advisor-state.ts

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* Update apps/studio/state/advisor-state.ts

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* fix

* initial prompt

* fix(inline editor button): only show keyboard shortcut if hotkey active

* cleanup(advisor panel): minor code cleanup

* fix(advisor panel): misplaced key on list

* fix(advisor panel): add error state

* fix(advisor panel): improve a11y

* fix(advisor panel): cannot find selected item

* fix

* fix

* tooltip

* link

* sidebar move up

* LayoutSidebarProvider to only sendEvent if in a project

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-10-30 17:43:02 +10:00
Saxon Fletcher
738c568e6b Sidebar manager (#39795)
* sidebar-manager

* storage keys

* tests

* more ai spots

* test fix

* revert to default

* remove ref

* Update apps/studio/state/sidebar-manager-state.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* fix ts

* fix

* fux

* fux query param

* clean

* fix

* more

* mock local storage

* simplify

* remove provider test

* remve useopensidebar

* fix(new homepage): open ai assistant on advisor card button clicks

* Update apps/studio/components/layouts/ProjectLayout/LayoutSidebar/index.tsx

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* Update apps/studio/state/sidebar-manager-state.tsx

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* refine

* FIX

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
2025-10-28 10:07:21 +10:00
Charis
3eb7da7766 feat(preferences): allow disable hotkeys (#39573)
* feat(preferences): allow disable hotkeys

Add a section in /account/me for disabling hotkeys. Only added one
hotkey for now (Cmd + E for toggling editor side panel) but we can add
more with the same pattern.

* refactor: remove default export on ProjectLayout

* feat(hotkeys): allow toggling of command menu and ai assistant hotkeys

* Nit

* PRettier lint

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-10-17 08:09:38 -04:00
Saxon Fletcher
a224598f1e Decouple editor panel (#37707)
* decouple editor panel from global state

* refactor again

* dont close assistant

* remove async

* onsave props

* Fix TS errors

* Remove editorPanel state from app-state, use useHotKey hooks for keyboard shortcuts

* Minor UX improvements to EditorPanel

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-08-06 15:03:53 +07:00
Saxon Fletcher
fd2a12ad38 Header icons refine (#36549)
header refine
2025-06-20 16:39:03 +08:00
Saxon Fletcher
c4cb660903 Slight tweaks to toolbar icons (#36269)
* layout header icon styles

* Update packages/ui/src/layout/ai-icon-animation/ai-icon-animation.tsx

Co-authored-by: Alaister Young <alaister@users.noreply.github.com>

---------

Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
2025-06-09 21:54:27 +10:00
Jordi Enric
7105df3d1f Layout Editor + Keyboard Shortcuts improvements (#36165)
* add keyboardshortcut compo, add toggle editor, handle different shortcuts, add tooltips

* fix windows

* add notifications tooltip
2025-06-09 18:24:31 +10:00
Joshen Lim
fd98a08a4f Chore/default to new organization layout (#35515)
* Default to new organization layout + remove feature preview

* Remove feature preview

* Clean up LayoutUpdateBanner

* Clean up

* Fix

* Fixy fix

* Update comment

* Nit to fix layout shift
2025-05-13 11:25:35 +08:00
Jonathan Summers-Muir
fb24d91305 Feat/ Org layout (#33150)
* update test

* move back button, fix width issues on sidebar

* update sidebar logic

* Update ProjectLayout.tsx

* lots of updates. layouts now streamlined. localstorage for tabs in use

* moar

* bunch of new tab logic

* fix empty tab issue

* Update tabs.ts

* layouts switched

* new pages now have fixed layouts

* fix tabs

* fix code bg

* add tabs support for multiple project refs

* intialization issue

* update ID handling

* fixed isOpened state for SQL snippets

* remove old assistant because its bugging up panels

* preview style works in sql editor

* fix border

* removes preview tab if there is one

* fix background of loading skeleton

* lots of issues with types/icons/redirect

* new tab cards

* snippets in empty state now work

* moar stuff

* tabs now in feature flags

* Update tabs.ts

* Update tabs.ts

* moar

* add feature previews

* remove code not needed

* Update next-env.d.ts

* Delete FeaturePreviewModal.tsx

* fix typescript errors. remove more explorer stuff

* remove explorer files

* fixed issues with templates and quickstarts tab

* fixed active state when tabs are not opted in

* logic error

* fix open/highlight issue when opted out of tabs

* templates/quickstarts now displayed with new cards

* Update recent-items.tsx

* Update new-tab.tsx

* add icon back in

* add old empty state back in

* recent items updated to respect project ref

* localstorage cleanup on deletion

* moar

* overflow tabs now working

* correct tab names used for new sql templates/quickstarts

* ongoing queries fix

* cleanup

* update images

* Update RouteValidationWrapper.tsx

* Update AppLayout.tsx

* Update NavigationBar.tsx

* add headers back into side panels

* improve writing

* tabs now drag and drop a billion times better

* Update tabs.tsx

* Update tabs.tsx

* init issues on stores, which caused a race condition.

* fix hydration error

* init

* init sidebars

* init

* Update app-default-navigation.tsx

* user dropdown updates

* moar layouts

* init

* moar

* moar

* updat

* reverse top bar

* some banners

* moar

* start adding account page

* change styling of dropdowns

* Update sidebar.tsx

* fix new tab issue in sql

* Update ProjectLayout.tsx

* Update pnpm-lock.yaml

* latest

* Update pnpm-lock.yaml

* moar layouts on account

* getLayout updates

* more fixes

* force a cache build

* moar

* Update app-default-navigation.tsx

* fix AI button animation

* moar layout

* account pages refactored

* Update user-dropdown.tsx

* Update new-tab.tsx

* move EditorMenuListSkeleton

* Fix type issues

* fixes: DESIGN-87

fixes: DESIGN-87

* refactor sort/filter components

* Update rules-set-button-text.tsx

* remove discussions for now

* small styling fixes

* Update FeaturePreviewModal.tsx

* Update FeaturePreviewModal.tsx

* Update RouteValidationWrapper.tsx

* revert

* revert

* revert

* revert

* revert

* more revert

* Update collapse-button.tsx

* Update SQLEditorTreeViewItem.tsx

* revert

* Update SchemaGraph.tsx

* Delete new-upcoming.tsx

* revert

* Update ProjectLayout.tsx

* fix home link

* Update table-editor.spec.ts

* test update

* Update projects.tsx

* remove

* Delete sidebar-open-top-banner.tsx

* add organizations page

* Update table-editor.spec.ts

* Fix the playwright tests.

* layout fixes

* layout fix

* revert sort/filter

* Update LastSignInWrapper.tsx

* revert

* revert

* remove

* update file names

* revert

* revert

* revert

* advisor lint page tabs revert

* revert

* revert

* revert

* revert

* revert

* revert tabs

* remove packages

* add sidebar

* sidebar docs added

* add sidebar

* fixed issues

* fix mobile

* fixes

* add org side bar in

* redirect updated

* fix more layouts

* move settings icon back down

* remove old stuff

* Delete SideBar.tsx

* use ProfileImage component

* spelling

* Update ThemeSettings.tsx

* Update ThemeSettings.tsx

* Update Sidebar.tsx

* layout udpate

* Update Sidebar.tsx

* fixes

* Minor lints

* Update Sidebar.tsx

* create a alt user dropdown for self hosting and local

* add fragment back in

* Adds Theme Selector for local/self hosting

* Update UserDropdown.tsx

* fix theme selector for local self host

* Update index.ts

* Update DefaultLayout.tsx

* now supports feature preview

* remove old files

* rename files

* revert

* Update LayoutHeader.tsx

* clean

* revert

* revert

* Update resource-banner.tsx

* remove redundant side bar stuff

* organizations action bar updated. removed hardcoded value

* fix type errors

* fix tests

* Undo test changes

* Fix account pages for when feature preview is off

* Bug fixes 1

* Missing key in map of EmailTemplates

* Fix missing border in StorageExplorer

* fix missing header in performance advisor

* Final clean up

* Fix DefaultLayout re-rendering issue on auth pages

* A couple of fixes

* Redirect to /organizations if land on /projects with feature preview on

* Route back to /projects if toggling preview off on /organizations

* Add HomePageActions to /org/slug

* make re-routing nicer

* Moar fixes

* Fix logging in redirect to /organizations irregardless of feature preview

* Fix missing withAuth in OrganizationLayout

* Minor clean upo

* Fix branch dropdown not aligned

* Add feature preview for update layout

* update dropdowns to only be chevron triggered in new layout

* Update content-query.ts

* Update entity-types-infinite-query.ts

* add IS_PLATFORM for org dropdown

* Add IS_PLATFORM check for EnableBranchingDropdown in LayoutHeader

* Midway fixing mobile nav

* Mobile nav fixes

* Address feedbacks

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Alaister Young <a@alaisteryoung.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Co-authored-by: Jordi Enric <jordi.err@gmail.com>
2025-04-08 11:32:29 +08:00
Joshen Lim
8239e2f27b Cache results in assistant panel (#34509)
* Cache results in assistant panel

* Small fixes

* fix

* disable switching chats while new messages are streaming in

* small comment

* Fix Create new snippet CTA in query block

* Add useCallbacks

* Update

* Remove console log

---------

Co-authored-by: Alaister Young <a@alaisteryoung.com>
2025-03-31 19:24:21 +08:00
Saxon Fletcher
58272034b1 Multiple assistant chats (#34011)
* add assistant chats

* refactoring

* refactor

* refactor to use onfinish

* fix ts

* dependencies removal

* Update useAssistant.ts

* ts

* refactor useAssistant hook to valtio store

* Minor tweaks

* Add name param to newChat, and add names to each call of newChat

---------

Co-authored-by: Alaister Young <a@alaisteryoung.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-03-28 16:36:41 +08:00
Saxon Fletcher
fcfc1cf38f Assistant refinements (#30759)
* message enter

* auth prompt

* style changes to message

* header assistant button

* more auth prompt

* prompt

* prompt user refine

* iteration of read only

* Add basic tests for AIAssistant.utils

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2024-12-02 14:46:11 +08:00
Saxon Fletcher
8c3da2ed95 More assistant refinements (#30730)
* ai refinements

* ui fixes

* space

* reduce dot height

* Fix prop type issue

* Assign allowHoverEffect to ai assistant button and panel

* Lint

* Some lints

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2024-11-29 20:31:02 +10:00
Joshen Lim
12d92aed99 Assistant V2 (#30523)
* start

* added panels

* remove stuff

* fixes and refinements

* clean up

* remove old assistant panel

* resizable assistant kinda

* use icon

* Add missing package

* remove canvas

* add suggestions

* updated empty state if no tables exist

* fix table condition

* Implement diffing if using assistant in sql editor

* Reinstate old assistant in SQL editor if feature preview is off

* pane size adjustment

* assistant button corners

* Add SQL snippet content to assistant if opening assistant in sql editor

* Add the necessary checks for opt in and hipaa

* revert adding snippet to assistant when opening assistant in sql editor

* Add cmd i shortcut

* Add admonitions for when disablePrompt is toggled on, and if no api key is set. Add footer note RE rate limitation

* Bump ai package in packages

* some fixes for backwards compability depending on feature preview toggled

* Rename feature preview property for new assistant

* Smol fix

* Prevent SQL snippet from running until message is finished

* only loading last message

* fix z-index

* save chat state to global state

* add debug to failed ai queries

* Add basic contextual invalidation

* Add explain code action to SQL editor

* Add link to abort ongoing queries from SqlSnippet

* Update feature preview content

* Fix

* Fix

* Fix

* Te4st

* Fix tests

* ONly show ai button within a project

* Fix PH tracking

* Beef up a bit more event tracking

* Rough fix to padding when assistant is open

* A bit more telemetry stuff

* Update prompts

* fix rls editing via assistant

* Update generate-v3.ts

prompt to get auth schema too

* Add policy satement to assistant when editing

* Address all comments

* fixc

* Fix SqlSnippet not taking full width on larger viewports

* Adjust max width

---------

Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
2024-11-25 18:50:56 +08:00