## 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>
## What kind of change does this PR introduce?
Feature / UI refactor
## What is the current behaviour?
The CLI browser login route still uses the older API authorisation
layout and redirects missing or failed sign-in session states to generic
404/500 pages.
## What is the new behaviour?
Moves `/cli/login` onto the shared connect interstitial layout as the
next small stacked slice after the organisation invite work.
This keeps the real CLI login contract intact while updating the
surface:
- creates the CLI login session from `session_id`, `public_key`, and
optional `token_name`
- redirects to the generated `device_code`
- renders missing-parameter and session-creation failures in-card
instead of redirecting away
- keeps the 8-character verification code selectable and copyable as a
single string
- uses a full-width primary `Copy code` action
This also adds the small shared interstitial helpers needed by this
surface and adjusts `CopyButton` so the copied check icon inherits the
primary button colour instead of turning green.
This also removes the CLI version admonition:
> Browser login flow requires Supabase CLI version 1.219.0 and above.
I checked with our stats and the CLI team. The vast majority of users
are on a newer version.
| Before | After |
| --- | --- |
| <img width="1024" height="759" alt="Authorize API access
Supabase-D1E3CF26-BD59-4BB2-B457-B552EE47E3DA"
src="https://github.com/user-attachments/assets/c89b8b13-fa98-41b7-8093-e59d15b2aa9e"
/> | <img width="1024" height="759" alt="Authorize CLI
Supabase-C9977F21-88B8-441B-8A2C-09A9515935B0"
src="https://github.com/user-attachments/assets/ca13b65a-3875-425c-b73b-8f2101c1e406"
/> |
| <img width="1024" height="759"
alt="Supabase-F42FBEAF-F74D-4920-8A51-7C25004F66D5"
src="https://github.com/user-attachments/assets/51adb1e6-a2fb-41fb-b36f-0ae466fe60e2"
/> | <img width="1024" height="759" alt="Authorize CLI
Supabase-8159A1B1-2594-4183-AC35-FEF1EFD4EA37"
src="https://github.com/user-attachments/assets/6f143218-795d-41c9-a8e1-52e529a6b988"
/>
| <img width="1024" height="759"
alt="Supabase-2506E468-9F42-44B9-A5B7-BC4D3777F552"
src="https://github.com/user-attachments/assets/a304fca5-cf26-4ae7-abe9-77cdbc21fba5"
/> | <img width="1024" height="759" alt="Authorize CLI
Supabase-A0EE1239-A345-427C-9CF7-997037A8FC0E"
src="https://github.com/user-attachments/assets/33118777-35f3-49d6-bc1e-30e7124b3677"
/> |
| <img width="1024" height="759" alt="Authorize API access
Supabase-A7B84CA6-D230-4C3E-9227-DE21CE35375C"
src="https://github.com/user-attachments/assets/78eb6296-035a-4201-b254-b97eda44443c"
/> | <img width="1024" height="759" alt="Authorize CLI
Supabase-F55E26B2-609B-449C-9C64-08AA90AE3D1E"
src="https://github.com/user-attachments/assets/ff7b3b4e-729c-4681-844d-2d5d94bfc084"
/> |
## Testing instructions
Use the Vercel preview URL for this PR once it is available. The
examples below use `<preview-origin>` as a placeholder, for example
`https://studio-git-dnywh-feat-cli-login-interstitial-supabase.vercel.app`.
You need to be signed in to Studio to see these states because
`/cli/login` is still behind `withAuth`.
Ready state:
- Open `<preview-origin>/cli/login?device_code=ABCD1234`
- Check the page title is `Authorize CLI | Supabase`
- Check the card title is `Authorize Supabase CLI`
- Check the code fills the width, uses the normal sans font, and can be
selected
- Drag-select the code and copy it; the clipboard should contain
`ABCD1234`, not one character per line
- Click `Copy code`; the button should show the usual copied success
state without a green check icon on the primary button
Missing parameters state:
- Open `<preview-origin>/cli/login`
- Check the card says `Missing sign-in parameters` and names the missing
`session_id` and `public_key` parameters
- Open `<preview-origin>/cli/login?session_id=session-test`
- Check it still stays in-card and names the missing `public_key`
parameter instead of redirecting to `/404`
Creation error state:
- Open
`<preview-origin>/cli/login?session_id=not-real&public_key=not-real&token_name=local-dev`
- Check it stays in-card with `Unable to create CLI sign-in` instead of
redirecting to `/500`
- The exact error detail can vary by environment; the important bit is
that the failure is shown inside the interstitial card
Loading state:
- This is transient because there are no production mocks in this slice
- To inspect it manually, throttle the browser network before opening a
session-creation URL such as
`<preview-origin>/cli/login?session_id=not-real&public_key=not-real`
Real CLI flow:
- Run the browser login flow from Supabase CLI as usual
- When the CLI opens a Studio URL, keep the path and query string but
replace the origin with the PR preview origin
- The page should create the login session and then route to
`/cli/login?device_code=<8 character code>`
- Enter that 8-character code back in the CLI prompt
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Redesigned CLI login flow with clearer state-driven screens and
improved verification UI.
* Added a small paired-logo component for centered logo pairs with a
connector icon.
* **Improvements**
* Copy button behavior and styling refined for consistent visual
feedback across variants.
* **Tests**
* New unit tests covering copy-button behavior and multiple CLI login UI
flows.
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45814)
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
* Bump all testing libs to force babel to upgrade itself.
* Remove react-hooks package, it's included in @testing-library/react.
* Add await to all useEvent calls.
* Remove duplicate babel/helpers.
* Deduplicate babel/core.
* Bump vite to non-vuln version.
* Bump estree-util-value-to-estree.
* Add all missing libraries in the packages/apps.
* Add all missing Vitest imports to the tests.
* Add some missing exports to ui.
* Fix the admonition export.
* Fix various minor bugs.
* Migrate the ui package to use vitest.
* Fix tests in tests/unit, tests/components and files under tests, looking into tests/pages
* Fix tests under pages/projects root
* Fix
* Comment out broken tests that im stuck with
* Fix api-report.test
* Fix storage-report-test
* chore: fix some tests
* chore: remove logging
* Fix LogsPreviewer.test.js
* Fix most of logs-query-test
* Skip broken tests instead of false positiving them
* Replace jest with vitest
* Rename all *.test.js to *.test.ts
* Configure vitest to work with jsx
* fix vitest issues, fix tests, skip broken tests, add msw, add next-router-mock
* uncomment file
* add tests for msw and nrm
* Fix failing tests
* fix tests in RowEditor
* fix datepicker tests
* fix type errors and comment out tests that need some refactoring
* leave 1 test so test script works
* rm clog and aaaaa
* rename script
* move msw to studio
* add pckg json which i forgot in last commit
* rm consolelog
* move vitest ui dep
* Move next-router-mock to studio.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: TzeYiing <ty@tzeyiing.com>
Co-authored-by: Kamil Ogórek <kamil.ogorek@gmail.com>
Co-authored-by: Terry Sutton <saltcod@gmail.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
* Move all studio files from /studio to /apps/studio.
* Move studio specific prettier ignores.
* Fix the ui references from studio.
* Fix the css imports.
* Fix all package.json issues.
* Fix the prettier setup for the studio app.
* Add .turbo folder to prettierignore.
* Fix the github workflows.
