feat(studio): move CLI login to connect interstitial#45814
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
5 Skipped Deployments
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. 🗂️ Base branches to auto review (1)
Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI (base), Organization UI (inherited) Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
🎭 Playwright Test Results
Details
Skipped testsFeatures › auth-users.spec.ts › should show web3 users as enabled when the matching web3 provider is enabled |
ec69f0b to
861eb32
Compare
| export const LogoPair = ({ left, right }: { left: ReactNode; right: ReactNode }) => ( | ||
| <div className="flex items-center justify-center gap-2.5"> | ||
| {left} | ||
| <ArrowRightLeft className="size-4 text-foreground-muted" /> | ||
| {right} | ||
| </div> | ||
| ) | ||
|
|
There was a problem hiding this comment.
Reusable for future connection surfaces, like the app authorization step.
There was a problem hiding this comment.
General changes. The green check/tick was not legible on a green button.
| After |
|---|
 |
| const withInterstitial = ({ | ||
| title, | ||
| description, | ||
| children, | ||
| }: { | ||
| title: ReactNode | ||
| description?: ReactNode | ||
| children: ReactNode | ||
| }) => ( | ||
| <InterstitialLayout | ||
| logo={<LogoPair left={<CliLogo />} right={<SupabaseLogo />} />} | ||
| title={title} | ||
| description={description} | ||
| > | ||
| <div className="px-6 pb-6">{children}</div> | ||
| </InterstitialLayout> | ||
| ) |
There was a problem hiding this comment.
nit but I don't really get the point of having a function to render this layout. Why not simply wrap each return in the component directly?
There was a problem hiding this comment.
It’s abstracted because there are ~4 states to render. Can just repeat <InterstitialLayout> if that’s preferred?
There was a problem hiding this comment.
- loading
- missing params
- error
- ready with verification code
There was a problem hiding this comment.
I mean, JSX is already an abstraction over simple functions, we probably don't need another one. Besides, it only saves you 7 lines. If you don't want to repeat the div inside InterstitialLayout, you should probably introduce a new component instead of a function. That would be better for React rerenders too
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/loginonto 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:
session_id,public_key, and optionaltoken_namedevice_codeCopy codeactionThis also adds the small shared interstitial helpers needed by this surface and adjusts
CopyButtonso the copied check icon inherits the primary button colour instead of turning green.This also removes the CLI version admonition:
I checked with our stats and the CLI team. The vast majority of users are on a newer version.
Testing instructions
Use the Vercel preview URL for this PR once it is available. The examples below use
<preview-origin>as a placeholder, for examplehttps://studio-git-dnywh-feat-cli-login-interstitial-supabase.vercel.app.You need to be signed in to Studio to see these states because
/cli/loginis still behindwithAuth.Ready state:
<preview-origin>/cli/login?device_code=ABCD1234Authorize CLI | SupabaseAuthorize Supabase CLIABCD1234, not one character per lineCopy code; the button should show the usual copied success state without a green check icon on the primary buttonMissing parameters state:
<preview-origin>/cli/loginMissing sign-in parametersand names the missingsession_idandpublic_keyparameters<preview-origin>/cli/login?session_id=session-testpublic_keyparameter instead of redirecting to/404Creation error state:
<preview-origin>/cli/login?session_id=not-real&public_key=not-real&token_name=local-devUnable to create CLI sign-ininstead of redirecting to/500Loading state:
<preview-origin>/cli/login?session_id=not-real&public_key=not-realReal CLI flow:
/cli/login?device_code=<8 character code>Summary by CodeRabbit
Release Notes
New Features
Improvements
Tests