Commit Graph
18 Commits
Author SHA1 Message Date
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
Alaister YoungandAlaister Young ca2b50a0a7 chore(ui-patterns): collapse the admonition shim into ui-patterns/Admonition (#48377)
Follow-up to #48344: collapses the two resolution paths for the
Admonition module into one.

`src/admonition.tsx` was a back-compat shim re-exporting
`src/Admonition/`. Two ways to resolve one module is exactly what
produced the macOS self-import bug fixed in #48344, and the local
typecheck errors that #48374 worked around. This removes the shim and
standardizes on the PascalCase subpath, matching every other export in
the package.

**Changed:**

- Codemodded all 246 `ui-patterns/admonition` imports to
`ui-patterns/Admonition` (240 `.tsx`, 5 `.mdx`, 1 `.ts` across studio,
docs, www, design-system, and lite-studio)
- Pointed the 5 internal `'../admonition'` imports back at the
`'../Admonition'` directory

**Removed:**

- `packages/ui-patterns/src/admonition.tsx`, and its `./admonition`
entry in the exports map (regenerated with `pnpm gen:exports`)

## To test

- `grep -r "ui-patterns/admonition" --include='*.ts*'` → no hits
- `pnpm test:case-hazards` → passes
- `pnpm typecheck` → all 15 tasks green
- `pnpm --filter studio run lint:ratchet` → passes
- `pnpm --filter ui-patterns vitest run src/Admonition` → 11 tests pass

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

## Summary by CodeRabbit

* **Bug Fixes**
* Standardized Admonition component imports across the application and
documentation.
* Improved compatibility with case-sensitive environments by using the
canonical component path.
  * Removed the legacy Admonition import entry point.

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

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
2026-07-29 00:48: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 c6fc456910 chore: cleanup duplicate exports studio (#47387)
## Problem

Knip reports many duplicate exports (both named and default). Besides,
we're moving away from default exports and even have an eslint rule to
enforce it on new code.

## Solution

- Cleanup those exports
- Update imports when necessary

No functional changes. If it builds, it's fine
2026-06-29 15:46:16 +02:00
ef148b6504 fix(studio): org MFA enforcement toggle visibility and UX (DEPR-606) (#47285)
## What kind of change does this PR introduce?

Bug fix. Resolves DEPR-606.

## What is the current behavior?

On org Security settings, the MFA enforcement switch could appear on
without a green track. Users without personal MFA saw a disabled toggle
with a tooltip.

## What is the new behavior?

- Switch checked state renders correctly (removed tooltip trigger from
the switch).
- Users who need personal MFA first see an admonition with a link to
account security instead of a disabled toggle.

I felt this was a better user experience and more straightforward than
the alternative: fighting the TooltipTrigger’s `data-state` conflict
with the Switch’s checked state.

| Before | After |
| --- | --- |
| <img width="1024" height="563" alt="Security Organization Settings
Toolshed Supabase-4413F7B1-C7DC-4958-8C6F-ADEFDE4F310C"
src="https://github.com/user-attachments/assets/8c71b0d8-db49-4af5-874b-5372df03379d"
/> | <img width="1024" height="563" alt="Security Organization Settings
Toolshed Supabase-ADD5BC82-B433-4EA0-A6BB-874703150663"
src="https://github.com/user-attachments/assets/3c6d3545-fd58-426b-afaf-edd8f7ac4789"
/> |
| <img width="1024" height="563" alt="Security Organization Settings
Toolshed Supabase-F57ED4AA-5A56-4F6A-8F35-569CAC26AFA2"
src="https://github.com/user-attachments/assets/2bc49f34-7819-49fa-ac32-7e59678041fd"
/> | <img width="1024" height="563" alt="Security Organization Settings
Toolshed Supabase-AA795D85-1C17-4C08-9ED1-BBF08C28F2B4"
src="https://github.com/user-attachments/assets/db1822b0-17fc-42df-bdec-0935e46ab5ff"
/> |
| <img width="1024" height="563" alt="Security Organization Settings
Toolshed Supabase-8D8A196F-FA27-4FD3-BC52-DB933E61D59A"
src="https://github.com/user-attachments/assets/bae30a9e-eda9-4a97-845c-0c4751f03a05"
/> | <img width="1024" height="563" alt="Security Organization Settings
Toolshed Supabase-5BD4F063-B402-4E03-ACE4-254BB28C232C"
src="https://github.com/user-attachments/assets/0a3c4d6b-2981-47e9-9679-56bfcd7faf5d"
/> |

## Additional context

Test on `/org/<slug>/security` in light mode with and without personal
MFA enabled. Or just hardcode the ternaries to see the various states on
local.

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

* **New Features**
* Added clearer guidance for organization security settings when MFA
must first be enabled on a personal account.
  * Improved loading behavior while member data is fetched.
* **Bug Fixes**
* Prevented the MFA enforcement form from showing until personal MFA
requirements are met.
* Refined the MFA toggle disabled logic to apply only when appropriate.
* **UI Improvements**
  * Replaced the MFA tooltip with an in-page notice.
* Updated the primary action button label from “Save changes” to “Save.”
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-06-25 16:05:20 +08: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
Pamela Chia 47c084e51d refactor(studio): migrate telemetry to useTrack (#46140)
## Summary

I migrated every `useSendEventMutation` call site in `apps/studio` to
`useTrack`, deleted the legacy hook, and added a lint guardrail so it
can't return. `useTrack` is the type-safe replacement: it auto-injects
`groups: { project, organization }` from the selected project/org and
types `action` + `properties` against `TelemetryEvent`. Existing call
sites built groups manually and were not type-checked at the action
level. The migration covers 81 files (60 trivial swaps, 9 org-only, 3
pre-auth, 5 bespoke, 4 test mocks).

## Changes

- Migrated trivial call sites across `pages/project/[ref]`,
`components/interfaces/*` (Reports, Storage, Realtime/Inspector,
SQLEditor, Functions, EdgeFunctions, Integrations, ProjectAPIDocs,
Branching/BranchManagement, TableGridEditor, Connect, Docs, Auth,
Support, Home, ProjectHome, App), `components/layouts/*`, and
`components/ui/*`.
- Migrated org-only sites (`Organization/Documents/*`,
`Organization/BillingSettings/Subscription/*`,
`Organization/SecuritySettings.tsx`,
`Account/Preferences/DashboardSettingsToggles.tsx`) by dropping the
manual `groups: { organization: ... }` and letting `useTrack`
auto-inject. Verified `useSelectedProjectQuery` is disabled on org
routes (gates on URL `[ref]`).
- Migrated pre-auth sites (`SignInForm.tsx`, `sign-in-mfa.tsx`,
`profile.tsx`) where neither project nor org is resolved.
- Bespoke handling:
- `execute-sql-mutation.ts` and `table-row-create-mutation.ts`: pass `{
project: projectRef }` via `groupOverrides` since the mutation can
target a non-selected project ref.
- `useStudioCommandMenuTelemetry.ts`: kept a direct `sendTelemetryEvent`
call because studio groups must override pre-built event groups
(opposite of `useTrack`'s override direction).
- `AIAssistantOption.tsx`: passes sentinel-aware `groupOverrides` so
`NO_PROJECT_MARKER`/`NO_ORG_MARKER` continue to suppress group emission.
- `SidePanelEditor.utils.tsx`: utility functions `createTable` and
`updateTable` now take a `track: Track` parameter (threaded from
`SidePanelEditor.tsx`); dropped the `organizationSlug` arg since groups
are no longer assembled manually.
- Branch-event attribution: preserved `parentProjectRef` overrides on
`branch_updated`, `branch_merge_completed`, `branch_merge_failed`,
`branch_merge_submitted`, `branch_delete_button_clicked`,
`branch_review_with_assistant_clicked`, and
`branch_*_merge_request_button_clicked`. Original code grouped these
under the parent (production) project, not the branch ref;
auto-injection would have shifted them onto the branch.
- Switched 4 test mocks from `@/data/telemetry/send-event-mutation` to
`@/lib/telemetry/track`. Removed obsolete tests around manual groups and
`try/catch` on telemetry rejection.
- Deleted `apps/studio/data/telemetry/send-event-mutation.ts`. The
deleted module is its own guardrail: any reintroduction of the import
fails at TypeScript module resolution before lint runs.

## Testing

Tested on preview deploy:

- [x] SQL editor `CREATE TABLE` fires `table_created` with method
`sql_editor` and `groups.project` set to the mutation's `projectRef`.
- [x] Table editor creates a table from the side panel; `table_created`
fires from `SidePanelEditor.utils` via threaded `track`.
- [x] Help button (`/project/[ref]/...`) fires `help_button_clicked`
with auto-injected project + org groups.
- [x] Sign-in form fires `sign_in` with empty groups (pre-auth,
expected).
- [x] Org documents page (`/org/[slug]/documents`) fires
`document_view_button_clicked` with org group only, no stale project
ref.
- [x] Command menu (`Cmd+K`) inside a project still fires
`command_menu_opened` with studio's project/org overriding any
event-supplied groups.
- [x] Support form "Ask the Assistant" without selected org fires
`ai_assistant_in_support_form_clicked` with no project/org groups
(sentinels suppress).
- [x] On a branch, "Update branch" / "Merge branch" / "Close merge
request" events fire with `groups.project` set to the parent project
ref, not the branch ref.

Local checks:
- [x] 22/22 tests pass across the 4 updated test files
(`SidePanelEditor.utils.createTable`, `EdgeFunctionRenderer`,
`LayoutSidebar`, `PlanUpdateSidePanel`).
- [x] `rg useSendEventMutation apps/studio` returns 0 hits.

## Linear
- fixes GROWTH-860


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

* **Chores**
* Standardized telemetry across the Studio to a unified tracking system;
events now send simplified payloads with less contextual/grouping data.
* No user-facing flows changed; UI behavior, permissions, and
interactions remain the same.
* **Tests**
* Updated telemetry mocks and tests to align with the new tracking
approach.

<!-- 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/46140?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-27 15:19:54 +08:00
Gildas Garcia 0facd341a6 chore: remove UI form components _Shadcn_ suffix (#45212)
## 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
2026-04-24 12:14:15 +02:00
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
Ignacio Dobronich a4e4c1b1bf chore: organization mfa entitlement (#43309)
Adds the entitlement check for organization MFA.

### Testing 
- With an Org on the Free Plan, head to `/org/_/security`
- Assert that the upgrade prompt is shown:

<img width="1271" height="309" alt="image"
src="https://github.com/user-attachments/assets/5d2ce291-ba95-44dd-864f-9ba2732b0752"
/>

- With an Org on the Pro Plan or above, head to `/org/_/security`
- Assert that you can enable MFA:
<img width="1271" height="309" alt="image"
src="https://github.com/user-attachments/assets/5713964b-730d-4bed-b8bf-2ac59976dfc5"
/>
2026-03-03 14:51:44 -03:00
Danny White 706207436f chore(studio): move organization settings nav to sidebar layout (#43228)
## What kind of change does this PR introduce?

UI change

## What is the current behavior?

Organization settings are currently spread across a NavMenu. This is
getting unweildy as the amount of children within Organization settings
grows.

## What is the new behavior?

Organization settings are now on a sidebar, just like Project Settings
and most other surfaces.

| Before | After |
| --- | --- |
| <img width="1024" height="563" alt="Supabase"
src="https://github.com/user-attachments/assets/3889858c-157a-4deb-8714-71fe9cf002e6"
/> | <img width="1024" height="563" alt="General Supabase"
src="https://github.com/user-attachments/assets/1b4eb2c3-a67c-4eda-ab3c-e6610dd5ccf4"
/> |

## Additional context

@fsansalvadore and the design team have have other efforts going on to
reduce interface clutter, e.g. nested sidebars.
2026-03-03 10:15:40 +11:00
Danny White 69f15cc788 chore(studio): update upgrade to pro admonition button variants (#42056)
* update admonition and button

* other instances

* misc

* misc

* pitr

* buttonVariant naming

* fixes

* rabbit

* rename buttonVariant to variant

* rabbit
2026-01-22 19:04:13 +11:00
Ivan Vasilov cc47bcfa6d chore: Migrate studio to use ui-patterns/shimmeringLoader (#41405)
* 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.
2025-12-17 14:54:07 +01:00
Francesco Sansalvadore 754af51312 chore: form patterns cursor rules (#41225)
* chore(studio): integrate cursor rules with form patterns
* chore(studio): update FormLayout inner styling
* chore(studio): align actions form field to the right
* chore(design-system): wrap each form field in a CardContent
2025-12-11 18:03:30 +01:00
Ivan Vasilov 0d5be306ef chore: Bump React Query to v5 (#40174)
* 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.
2025-12-10 10:10:29 +01:00
Joshen Lim de50740b04 Chore/request upgrade plan modal (#40889)
* init request upgrade plan modal

* Consolidate UpgradeToPro components across UI + use UpgradePlanButton, UpgradePlanButton determines whether to show request upgrade CTA

* Allow to pass icon to Admonition

* Tiny fix on upgrade plan button CTA to consider addons

* Hook up upgrade request endpoint

* Update API types

* remove hardcode

* Add request upgrade CTA in plan side panel

* Fix disk compute

* Show request upgrade button for change to large compute

* Nit
2025-12-04 16:02:01 +08:00
Ivan Vasilov 43cc61818c chore: Migrate all isPending uses in react-query (#40642)
* Bump react-query. Minor type and logic fixes.

* Migrate all use of isLoading to isPending in mutations.

* Fix type errors.
2025-11-20 16:44:53 +01:00
Joshen Lim 75e1717a02 Remove barrel files part 02 (#39956)
* Remove barrel files part 02

* Clean up
2025-10-30 23:50:14 +08:00