mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 18:05:11 +03:00
Danny WhiteandCursor
43c2229f1e
## What kind of change does this PR introduce?
Bug fix / UI polish
## What is the current behavior?
Visiting `/authorize` without an `auth_id` renders a bare `Card` outside
the shared Connect interstitial — no centered layout, no Supabase logo,
inconsistent with every other `/authorize` state (loading, error, form,
approved).
Two edge cases also produce poor UX: a blank flash while
`router.isReady` is false, and a silent empty page when the
authorization query succeeds but returns no requester.
## What is the new behavior?
- **Missing `auth_id`**: `ApiAuthorizationInvalidScreen` now uses
`InterstitialLayout` with `SupabaseLogo`, a user-facing title ("Missing
authorization link"), warning admonition, and "Back to dashboard" —
matching the error screen and CLI missing-params pattern.
- **Router not ready**: `authorize.tsx` shows
`ApiAuthorizationLoadingScreen` instead of `null`.
- **Empty requester**: `ApiAuthorization.Valid.tsx` renders
`ApiAuthorizationErrorScreen` instead of returning `null`.
Tests updated in `ApiAuthorization.test.tsx`; added `authorize.test.tsx`
for router-not-ready loading.
| Before | After |
| --- | --- |
| <img width="524" height="455" alt="Authorize API Access
Supabase-DCB404EC-7D65-4DD1-A6E0-B720DC765DA7"
src="https://github.com/user-attachments/assets/8d2b68fc-e008-4145-aa74-3154a883083c"
/> | <img width="524" height="455" alt="Authorize API Access
Supabase-6B642066-D0BE-4EDC-A186-A0290B4B5634"
src="https://github.com/user-attachments/assets/b04bee93-6b23-411f-8e36-9a0fff8a975d"
/> |
## To test
Please do a visual check on `http://localhost:8082/authorize` (no
`auth_id` or other parameters).
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved the UI and copy shown when the authorization link is missing.
* Updated behavior to show an explicit error screen when authorization
requester data is unavailable.
* **New Features**
* Added a loading state for the authorization page while router
parameters are initializing.
* **Tests**
* Updated component expectations for the missing authorization and
“unable to load” scenarios.
* Added a page test to verify the loading message when the router is not
ready.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Cursor <cursoragent@cursor.com>
44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import { useParams } from 'common'
|
|
import Head from 'next/head'
|
|
import { useRouter } from 'next/router'
|
|
|
|
import { ApiAuthorizationScreen } from '@/components/interfaces/ApiAuthorization/ApiAuthorization'
|
|
import { ApiAuthorizationLoadingScreen } from '@/components/interfaces/ApiAuthorization/ApiAuthorization.Loading'
|
|
import { withAuth } from '@/hooks/misc/withAuth'
|
|
import { buildStudioPageTitle } from '@/lib/page-title'
|
|
import type { NextPageWithLayout } from '@/types'
|
|
|
|
const PAGE_TITLE = buildStudioPageTitle({ section: 'Authorize API Access', brand: 'Supabase' })
|
|
|
|
const APIAuthorizationPage: NextPageWithLayout = () => {
|
|
const router = useRouter()
|
|
const routerReady = router.isReady
|
|
const { auth_id, organization_slug } = useParams()
|
|
|
|
if (!routerReady) {
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{PAGE_TITLE}</title>
|
|
</Head>
|
|
<ApiAuthorizationLoadingScreen />
|
|
</>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{PAGE_TITLE}</title>
|
|
</Head>
|
|
<ApiAuthorizationScreen
|
|
auth_id={auth_id}
|
|
organization_slug={organization_slug}
|
|
navigate={(destination) => router.push(destination)}
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default withAuth(APIAuthorizationPage)
|